@charset "utf-8";

/*
Theme Name: Hibolimo - Black Car Service HTML5 Template.
Author: Metropolitanthemes
Version: 1.0.0

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

1. General
   1.1 Typography
   1.2 Spacing
   1.3 Buttons
   1.4 Section Title
   1.5 Helpers & Reveals
2. Preloader
3. Header
4. Offcanvas Menu
5. Custom Select
6. Sub Header
7. Hero
8. Quick Quote
9. Services Directory
10. Fleet Showroom
11. Why Ride
12. Drive By
13. Film Band
14. Reviews
15. Diamond CTA
16. Journal Rail
17. Hero Two
18. Window Down
19. Core Features
20. Fleet Cards
21. Corporate Calculator
22. Counters
23. Reviews Two
24. Video Band
25. Photo Strip
26. Hero Three
27. About Mosaic
28. Packages
29. Wedding Day Road
30. Wedding Extras
31. Rate Card
32. Book A Ride
33. Vehicle Details
34. Fleet Pages
35. Rates
36. Services
37. Offers
38. Company Pages
39. Journal Pages
40. Account Pages
41. Coming Soon And 404
42. Forms
43. Footer
44. Back To Top
45. Cursor
46. Light Trails
*/

/*======================
1. General
========================*/
/*---- 1.1 Typography ----*/
:root {
  /* Viplane's palette, named by role (see hibolimo-passport.md) */
  --hl-color-primary: #D2C09E;
  --hl-color-primary-rgb: 210, 192, 158;
  --hl-color-primary-deep: #A08D69;
  --hl-color-night: #111111;
  --hl-color-night-rgb: 17, 17, 17;
  --hl-color-surface: #1E1E1E;
  --hl-color-ink: #222222;
  --hl-color-body: #6E6E6E;
  --hl-color-body-night: #A9A9A9;
  --hl-color-ground: #F8F8F8;
  --hl-color-white: #FFFFFF;
  --hl-color-line: #E6E4DF;
  --hl-color-line-night: rgba(255, 255, 255, 0.12);
  --hl-color-taupe: #7A7160;
  --hl-color-success: #3E8E5E;
  --hl-color-danger: #B4412F;
  /* the two families */
  --hl-ff-heading: "Instrument Serif", Georgia, serif;
  --hl-ff-body: "Urbanist", "Helvetica Neue", Arial, sans-serif;
  --hl-fs-h1: clamp(3rem, 1.9rem + 4.4vw, 5.75rem);
  --hl-fs-h2: clamp(2.4rem, 1.7rem + 2.6vw, 4.1rem);
  --hl-fs-h3: clamp(1.65rem, 1.35rem + 0.9vw, 2.15rem);
  --hl-fs-h4: 1.5rem;
  --hl-fs-h5: 1.05rem;
  --hl-fs-h6: 0.9rem;
  --hl-shadow: 0 24px 60px -28px rgba(17, 17, 17, 0.35);
  --hl-shadow-soft: 0 14px 40px -24px rgba(17, 17, 17, 0.28);
  --hl-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* :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(--hl-ff-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--hl-color-body);
  background: var(--hl-color-ground);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.oc-open {
  overflow: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--hl-ff-heading);
  font-weight: 400;
  color: var(--hl-color-ink);
  letter-spacing: -0.005em;
  margin: 0 0 0.4em;
}

h1 {
  font-size: var(--hl-fs-h1);
  line-height: 1.02;
}

h2 {
  font-size: var(--hl-fs-h2);
  line-height: 1.06;
}

h3 {
  font-size: var(--hl-fs-h3);
  line-height: 1.15;
}

h4 {
  font-size: var(--hl-fs-h4);
  line-height: 1.2;
}

h5, h6 {
  font-family: var(--hl-ff-body);
  font-weight: 700;
  color: var(--hl-color-ink);
  margin: 0 0 0.5em;
}

h5 {
  font-size: var(--hl-fs-h5);
}

h6 {
  font-size: var(--hl-fs-h6);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

p {
  margin: 0 0 1.2em;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--hl-color-primary-deep);
}

img {
  max-width: 100%;
  height: auto;
}

::selection {
  background: var(--hl-color-primary);
  color: var(--hl-color-night);
}

:focus-visible {
  outline: 2px solid var(--hl-color-primary-deep);
  outline-offset: 3px;
}

.hl-reset {
  list-style: none;
  margin: 0;
  padding: 0;
}

.visually-hidden-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* the italic serif carries the accent word, like a signature */
.hl-accent {
  font-style: italic;
  color: var(--hl-color-primary-deep);
}

.is-night .hl-accent,
.hl-night .hl-accent {
  color: var(--hl-color-primary);
}

/* fares and readouts line up in columns */
.hl-num {
  font-variant-numeric: tabular-nums lining-nums;
}

.hl-lead {
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--hl-color-body);
}

/*---- 1.2 Spacing ----*/
.sec-pt-120 {
  padding-top: 120px;
}

.sec-pb-120 {
  padding-bottom: 120px;
}

.sec-pt-90 {
  padding-top: 90px;
}

.sec-pb-90 {
  padding-bottom: 90px;
}

.sec-pb-60 {
  padding-bottom: 60px;
}

.container-wide {
  width: 100%;
  max-width: 1720px;
  margin: 0 auto;
  padding: 0 50px;
}

/* night bands: black ground, pinstripe cloth, light copy */
.hl-night {
  background-color: var(--hl-color-night);
  color: var(--hl-color-body-night);
}

.hl-night h1, .hl-night h2, .hl-night h3, .hl-night h4, .hl-night h5 {
  color: var(--hl-color-white);
}

.hl-pinstripe {
  background-image: repeating-linear-gradient(90deg, rgba(var(--hl-color-primary-rgb), 0.055) 0 1px, transparent 1px 14px);
}

.bg-white-sec {
  background: var(--hl-color-white);
}






/*---- 1.3 Buttons ----*/
/* square, like the base; champagne with ink text (white on champagne fails AA) */
.hl-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 30px;
  border: 1px solid var(--hl-color-primary);
  border-radius: 0;
  background: var(--hl-color-primary);
  color: var(--hl-color-night);
  font-family: var(--hl-ff-body);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 16px 30px -18px rgba(var(--hl-color-primary-rgb), 0.9);
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease, transform 0.35s var(--hl-ease), box-shadow 0.35s ease;
}

.hl-btn:hover,
.hl-btn:focus-visible {
  background: var(--hl-color-night);
  border-color: var(--hl-color-night);
  color: var(--hl-color-white);
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -18px rgba(var(--hl-color-night-rgb), 0.7);
}

/* the house double-arrow slide */
.btn-ic {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 14px;
  overflow: hidden;
  font-size: 12px;
}

.btn-ic i {
  position: absolute;
  top: 1px;
  left: 0;
  transition: transform 0.45s var(--hl-ease);
}

.btn-ic i + i {
  transform: translateX(-160%);
}

.hl-btn:hover .btn-ic i:first-child,
a:hover > .btn-ic i:first-child {
  transform: translateX(160%);
}

.hl-btn:hover .btn-ic i + i,
a:hover > .btn-ic i + i {
  transform: translateX(0);
}

.hl-btn.is-small {
  padding: 14px 22px;
  font-size: 12px;
}

.hl-btn.is-outline {
  background: transparent;
  color: var(--hl-color-ink);
  border-color: rgba(var(--hl-color-night-rgb), 0.25);
  box-shadow: none;
}

.hl-btn.is-outline:hover {
  background: var(--hl-color-night);
  border-color: var(--hl-color-night);
  color: var(--hl-color-white);
}

.hl-btn.is-night {
  background: var(--hl-color-night);
  border-color: var(--hl-color-night);
  color: var(--hl-color-white);
  box-shadow: 0 16px 30px -18px rgba(var(--hl-color-night-rgb), 0.8);
}

.hl-btn.is-night:hover {
  background: var(--hl-color-primary);
  border-color: var(--hl-color-primary);
  color: var(--hl-color-night);
}

.hl-btn.is-ghost-light {
  background: transparent;
  color: var(--hl-color-white);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: none;
}

.hl-btn.is-ghost-light:hover {
  background: var(--hl-color-primary);
  border-color: var(--hl-color-primary);
  color: var(--hl-color-night);
}

.hl-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

/* text link with a hairline that draws on hover */
.hl-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hl-color-ink);
  padding-bottom: 6px;
}

.hl-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--hl-color-primary-deep);
  transform: scaleX(0.35);
  transform-origin: left;
  transition: transform 0.5s var(--hl-ease);
}

.hl-link:hover::after {
  transform: scaleX(1);
}

.hl-night .hl-link,
.hl-link.is-light {
  color: var(--hl-color-white);
}

.hl-night .hl-link::after,
.hl-link.is-light::after {
  background: var(--hl-color-primary);
}

/* square arrow buttons beside a section title (the base's slider arrows) */
.hl-arrows {
  display: flex;
  gap: 12px;
}

.hl-arrow {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: var(--hl-color-white);
  color: var(--hl-color-ink);
  box-shadow: var(--hl-shadow-soft);
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}

.hl-arrow.is-next,
.hl-arrow:hover {
  background: var(--hl-color-primary);
  color: var(--hl-color-night);
}

.hl-arrow.is-next:hover {
  background: var(--hl-color-night);
  color: var(--hl-color-white);
}

.hl-arrow.swiper-button-disabled {
  opacity: 0.4;
  cursor: default;
}

/*---- 1.4 Section Title ----*/
/* eyebrow -> h2.title -> lead. The eyebrow keeps the tagline's wide caps and
   carries a small champagne diamond - the brand shape */
.hl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  font-family: var(--hl-ff-body);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--hl-color-ink);
}

.hl-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  background: var(--hl-color-primary);
  transform: rotate(45deg);
}

.hl-eyebrow.is-night,
.hl-night .hl-eyebrow {
  color: var(--hl-color-primary);
}

.hl-eyebrow.is-plain::before {
  display: none;
}

.hl-eyebrow b {
  color: var(--hl-color-primary-deep);
  font-weight: 700;
}

.section-title {
  margin-bottom: 60px;
}

.section-title .title {
  margin-bottom: 0;
}

.section-title .title + .hl-lead {
  margin: 22px 0 0;
  max-width: 620px;
}

.section-title.is-centre {
  text-align: center;
}

.section-title.is-centre .hl-lead {
  margin-left: auto;
  margin-right: auto;
}

/* a title on the left with tabs or arrows on the right (the base's layout) */
.title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 60px;
}

.title-row .section-title {
  margin-bottom: 0;
}

/* the champagne hairline under a title */
.title-rule {
  display: block;
  width: 72px;
  height: 1px;
  margin-top: 26px;
  background: var(--hl-color-primary-deep);
  transform-origin: left;
}

.is-centre .title-rule {
  margin-left: auto;
  margin-right: auto;
  transform-origin: center;
}



/*---- 1.5 Helpers & Reveals ----*/
/* texture: a faint black-and-white photograph as the ground of a plain
   section, fading in and out at its edges. Never on two touching sections. */
.hl-tex {
  position: relative;
  z-index: 0;
  isolation: isolate;
}

.hl-tex::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-position: center;
  background-size: cover;
  opacity: 0.08;
  filter: grayscale(1) contrast(1.05);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 24%, #000 76%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 24%, #000 76%, transparent 100%);
  pointer-events: none;
}

.hl-tex.tex-door::before {
  background-image: url("../img/photos/chauffeur-door.jpg");
}

.hl-tex.tex-cabin::before {
  background-image: url("../img/photos/starlight-cabin.jpg");
}

.hl-tex.tex-executive::before {
  background-image: url("../img/photos/executive-wide.jpg");
}

.hl-tex.tex-party::before {
  background-image: url("../img/photos/party-limo.jpg");
}

/* chrome trim: the window line of a car along the top of a framed photo */
.hl-frame {
  position: relative;
  display: block;
  overflow: hidden;
}

.hl-frame > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--hl-ease);
}

.hl-frame.has-trim::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, rgba(var(--hl-color-primary-rgb), 0.2), var(--hl-color-primary) 18%, #F4EBDA 50%, var(--hl-color-primary) 82%, rgba(var(--hl-color-primary-rgb), 0.2));
}

a.hl-frame:hover > img,
.hl-zoom:hover img {
  transform: scale(1.06);
}

/* road dashes: the base's dashed flight paths, back on the ground */
.hl-road {
  display: block;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--hl-color-primary) 0 18px, transparent 18px 34px);
}

.hl-road.is-vertical {
  width: 2px;
  height: auto;
  background: repeating-linear-gradient(180deg, var(--hl-color-primary) 0 18px, transparent 18px 34px);
}

/* a photo diamond (the base's rotated tiles) */
.hl-diamond {
  position: relative;
  overflow: hidden;
  transform: rotate(45deg);
  box-shadow: var(--hl-shadow);
}

.hl-diamond img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 142%;
  height: 142%;
  max-width: none;
  object-fit: cover;
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* Window Down: JS adds a smoked pane that lowers off the photo. Nothing is
   hidden by CSS - without JS (or with reduced motion) the photo simply shows */
.hl-window {
  position: relative;
  overflow: hidden;
}

.hl-pane {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  border-top: 3px solid var(--hl-color-primary);
  background:
    linear-gradient(118deg, transparent 30%, rgba(255, 255, 255, 0.08) 42%, transparent 54%),
    linear-gradient(180deg, rgba(24, 24, 26, 0.94), rgba(8, 8, 10, 0.97));
}

/* ghost numerals (the base's outlined 01 / 02 / 03) */
.hl-ghost {
  font-family: var(--hl-ff-heading);
  font-size: 110px;
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1px rgba(var(--hl-color-night-rgb), 0.1);
  pointer-events: none;
  user-select: none;
}

.hl-night .hl-ghost {
  -webkit-text-stroke: 1px rgba(var(--hl-color-primary-rgb), 0.18);
}

/* round glyph disc (the base's white icon circles) */
.hl-disc {
  width: 84px;
  height: 84px;
  flex: 0 0 84px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--hl-color-white);
  color: var(--hl-color-primary-deep);
  font-size: 38px;
  line-height: 1;
  box-shadow: var(--hl-shadow-soft);
  transition: background 0.4s ease, color 0.4s ease, transform 0.4s var(--hl-ease);
}

.hl-disc i::before {
  margin: 0;
}

.is-hidden,
.is-filtered-out {
  display: none !important;
}

[hidden] {
  display: none !important;
}

/*======================
2. Preloader
========================*/
/* P11 headlight bloom: two lamps come on low in the dark, swell into beams,
   then the light floods the screen in the page's own ground colour */
.hl-preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background: var(--hl-color-night);
}

/* without JS the overlay never covers the page */
.no-js .hl-preloader {
  display: none;
}

.hl-preloader .pre-lamp {
  position: absolute;
  top: 58%;
  width: 26px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, #FFFDF6 0%, #FFF3D6 35%, rgba(var(--hl-color-primary-rgb), 0.6) 60%, rgba(var(--hl-color-primary-rgb), 0) 72%);
  box-shadow: 0 0 22px 6px rgba(255, 246, 222, 0.55);
  opacity: 0;
}

.hl-preloader .pre-lamp.is-left {
  left: calc(50% - 90px);
}

.hl-preloader .pre-lamp.is-right {
  left: calc(50% + 64px);
}

.hl-preloader .pre-beam {
  position: absolute;
  top: 58%;
  width: 520px;
  height: 320px;
  margin-top: -150px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 246, 222, 0.34) 0%, rgba(var(--hl-color-primary-rgb), 0.12) 38%, rgba(var(--hl-color-primary-rgb), 0) 68%);
  opacity: 0;
}

.hl-preloader .pre-beam.is-left {
  left: calc(50% - 337px);
}

.hl-preloader .pre-beam.is-right {
  left: calc(50% - 183px);
}

.hl-preloader .pre-logo {
  position: absolute;
  top: 34%;
  left: 50%;
  width: 280px;
  transform: translate(-50%, -50%);
  opacity: 0;
}

.hl-preloader .pre-bloom {
  position: absolute;
  top: 58%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  /* a soft-edged pool of light in the page's own ground colour */
  background: radial-gradient(circle, var(--hl-color-ground) 0%, var(--hl-color-ground) 48%, rgba(248, 248, 248, 0.6) 60%, rgba(248, 248, 248, 0) 72%);
  transform: scale(0);
}

/*======================
3. Header
========================*/
/* header one: the base's centred-logo split (toggle + nav | logo | dispatch).
   Header two: the same over a full-bleed photo. Header three: night topbar +
   boxed bar. All three turn fixed and solid once the page scrolls. */
.hl-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
}

.hl-header.header-one + .hl-offcanvas + .hl-offcanvas-overlay + .main-root {
  padding-top: 148px;
}

/* the top bar above every header style: dispatch hours with a live New York
   clock, the Google / Tripadvisor rating line, phone, email and social */
.hl-topbar {
  position: relative;
  z-index: 2;
  background-color: var(--hl-color-night);
  background-image: repeating-linear-gradient(90deg, rgba(var(--hl-color-primary-rgb), 0.055) 0 1px, transparent 1px 14px);
  color: var(--hl-color-body-night);
  font-size: 13.5px;
  font-weight: 500;
}

/* header one and two: the topbar spans the same full width as the header
   row under it, with the same side padding at every breakpoint */
.hl-topbar .topbar-wide {
  width: 100%;
  padding: 0 50px;
}

.hl-topbar .topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 44px;
}

.hl-topbar .top-note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  white-space: nowrap;
}

.hl-topbar .top-note i {
  color: var(--hl-color-primary);
}

.hl-topbar .top-note b {
  min-width: 3.2em;
  color: var(--hl-color-white);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.top-sep {
  display: inline-block;
  width: 5px;
  height: 5px;
  background: var(--hl-color-primary);
  transform: rotate(45deg);
}

.hl-topbar .top-right {
  display: flex;
  align-items: center;
  gap: 26px;
  white-space: nowrap;
}

.top-rating {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--hl-color-body-night);
}

.top-rating i {
  color: var(--hl-color-white);
}

.top-rating img {
  width: 17px;
  height: 17px;
  margin-left: 8px;
}

.top-rating b {
  color: var(--hl-color-white);
  font-weight: 700;
}

.top-rating > span {
  margin-left: 6px;
  padding-left: 12px;
  border-left: 1px solid var(--hl-color-line-night);
}

.top-link i {
  margin-right: 8px;
  color: var(--hl-color-primary);
}

.top-link:hover,
.top-rating:hover {
  color: var(--hl-color-primary);
}

.hl-social.is-mini {
  gap: 2px;
}

.hl-topbar .hl-currency.hl-select .select-button {
  height: 30px;
  min-width: 78px;
  padding: 0 10px;
  border-color: var(--hl-color-line-night);
  color: var(--hl-color-white);
  font-size: 12px;
}

.hl-social.is-mini a {
  width: 30px;
  height: 30px;
  font-size: 12px;
  background: transparent;
  color: var(--hl-color-body-night);
}

.hl-social.is-mini a:hover {
  background: transparent;
  color: var(--hl-color-primary);
  transform: none;
}

/* over the Home 2 photo the bar turns to smoked glass with a hairline */
.header-two .hl-topbar {
  background-color: rgba(var(--hl-color-night-rgb), 0.38);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* once the header is fixed, only the main row stays */
.hl-header.is-scrolled .hl-topbar {
  display: none;
}

.hl-header .header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 104px;
  padding: 0 50px;
  transition: height 0.4s var(--hl-ease);
}

.hl-header .header-left,
.hl-header .header-right {
  display: flex;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
}

.hl-header .header-left {
  gap: 22px;
}

.hl-header .header-right {
  justify-content: flex-end;
  gap: 26px;
}

.hl-logo {
  display: inline-flex;
  flex: 0 0 auto;
  margin: 0 24px;
}

/* the seal lockup is sized by its height, as Hibojet's header */
.hl-logo img {
  display: block;
  width: auto;
  height: 58px;
  transition: height 0.4s var(--hl-ease);
}

.hl-logo .logo-light {
  display: none;
}

/* fixed on scroll: slides in solid, a little shorter */
.hl-header.is-scrolled {
  position: fixed;
  background: var(--hl-color-white);
  box-shadow: 0 10px 34px -20px rgba(var(--hl-color-night-rgb), 0.35);
  animation: hl-head-in 0.6s var(--hl-ease);
}

.hl-header.is-scrolled .header-inner {
  height: 80px;
}

.hl-header.is-scrolled .hl-logo img {
  height: 48px;
}

@keyframes hl-head-in {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}

/* the logo's hairline doubles as the reading progress line */
.header-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--hl-color-primary);
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
}

.is-scrolled .header-progress {
  opacity: 1;
}

/* main navigation, three levels */
.hl-nav > ul {
  display: flex;
  align-items: center;
  gap: 20px;
}

.hl-nav li {
  position: relative;
}

.hl-nav > ul > li > a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 38px 0;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--hl-color-ink);
  transition: color 0.3s ease, padding 0.4s var(--hl-ease);
}

.is-scrolled .hl-nav > ul > li > a {
  padding: 26px 0;
}

.hl-nav > ul > li > a i {
  font-size: 9px;
  color: var(--hl-color-primary-deep);
  transition: transform 0.35s var(--hl-ease);
}

.hl-nav > ul > li:hover > a,
.hl-nav > ul > li.active > a {
  color: var(--hl-color-primary-deep);
}

.hl-nav > ul > li:hover > a i {
  transform: rotate(180deg);
}

.hl-nav .sub-menu {
  position: absolute;
  top: 100%;
  left: -28px;
  z-index: 5;
  min-width: 236px;
  padding: 16px 0;
  list-style: none;
  background: var(--hl-color-white);
  border-top: 2px solid var(--hl-color-primary);
  box-shadow: var(--hl-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s var(--hl-ease), transform 0.3s var(--hl-ease), visibility 0.3s;
}

.hl-nav li:hover > .sub-menu,
.hl-nav li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.hl-nav .sub-menu .sub-menu {
  top: -18px;
  left: 100%;
}

.hl-nav .sub-menu a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 28px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--hl-color-ink);
  transition: color 0.3s ease, padding 0.35s var(--hl-ease);
}

.hl-nav .sub-menu a i {
  font-size: 9px;
  color: var(--hl-color-primary-deep);
}

/* a small diamond slides in beside the item being pointed at */
.hl-nav .sub-menu a::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  background: var(--hl-color-primary);
  transform: rotate(45deg) scale(0);
  transition: transform 0.35s var(--hl-ease);
}

.hl-nav .sub-menu li:hover > a,
.hl-nav .sub-menu li.active > a {
  color: var(--hl-color-primary-deep);
  padding-left: 36px;
}

.hl-nav .sub-menu li:hover > a::before,
.hl-nav .sub-menu li.active > a::before {
  transform: rotate(45deg) scale(1);
}

/* burger */
.hl-menu-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.hl-menu-toggle span {
  display: block;
  height: 2px;
  width: 26px;
  background: var(--hl-color-ink);
  transition: width 0.35s var(--hl-ease), background 0.3s ease;
}

.hl-menu-toggle span:nth-child(2) {
  width: 18px;
}

.hl-menu-toggle:hover span {
  width: 26px;
  background: var(--hl-color-primary-deep);
}

/* dispatch line: a round glyph and two lines, like the base's contact pairs */
.header-call {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--hl-color-ink);
}

.header-call .call-ic {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--hl-color-night);
  color: var(--hl-color-primary);
  font-size: 19px;
  transition: background 0.3s ease, color 0.3s ease;
}

/* the glyph on a line of its own height, so it sits in the middle of the disc */
.header-call .call-ic i {
  display: block;
  line-height: 1;
  transform: translateY(1.5px);
}

.header-call .call-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  white-space: nowrap;
}

.header-call small {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hl-color-body);
}

.header-call b {
  font-size: 16px;
  font-weight: 700;
}

.header-call:hover .call-ic {
  background: var(--hl-color-primary);
  color: var(--hl-color-night);
}

.header-call:hover {
  color: var(--hl-color-ink);
}

/* header two: light over the photo until it scrolls */
.header-two:not(.is-scrolled) .hl-logo .logo-main {
  display: none;
}

.header-two:not(.is-scrolled) .hl-logo .logo-light {
  display: block;
}

.header-two:not(.is-scrolled) .hl-nav > ul > li > a,
.header-two:not(.is-scrolled) .header-call,
.header-two:not(.is-scrolled) .header-call small {
  color: var(--hl-color-white);
}

.header-two:not(.is-scrolled) .hl-nav > ul > li:hover > a,
.header-two:not(.is-scrolled) .hl-nav > ul > li.active > a {
  color: var(--hl-color-primary);
}

.header-two:not(.is-scrolled) .hl-menu-toggle span {
  background: var(--hl-color-white);
}

.header-two:not(.is-scrolled) .header-call .call-ic {
  background: var(--hl-color-primary);
  color: var(--hl-color-night);
}

.header-two:not(.is-scrolled) .hl-currency .select-button {
  color: var(--hl-color-white);
  border-color: rgba(255, 255, 255, 0.35);
}

/* header three: the top bar and a boxed white bar over the hero */
.header-three .header-bar-wrap {
  padding-top: 20px;
  transition: padding 0.4s var(--hl-ease);
}

.header-three.is-scrolled .header-bar-wrap {
  padding-top: 12px;
}

.header-three .header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 90px;
  padding: 0 34px;
  background: var(--hl-color-white);
  box-shadow: var(--hl-shadow-soft);
}

.header-three .hl-logo {
  margin: 0;
}

.header-three .hl-logo img {
  height: 54px;
}

.header-three .hl-nav > ul > li > a {
  padding: 34px 0;
}

.header-three .header-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
}

.head-square {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hl-color-line);
  color: var(--hl-color-ink);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.head-square:hover {
  background: var(--hl-color-night);
  border-color: var(--hl-color-night);
  color: var(--hl-color-primary);
}

.header-three .hl-menu-toggle {
  width: 52px;
  height: 52px;
  align-items: center;
  border: 1px solid var(--hl-color-line);
}

.header-three.is-scrolled {
  background: transparent;
  box-shadow: none;
}

.header-three.is-scrolled .header-bar {
  height: 76px;
  box-shadow: var(--hl-shadow);
}

.header-three.is-scrolled .hl-nav > ul > li > a {
  padding: 27px 0;
}

/*======================
4. Offcanvas Menu
========================*/
/* a night panel from the left - the side the burger sits on */
.hl-offcanvas {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 200;
  width: 420px;
  max-width: 88vw;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 34px 40px 40px;
  background-color: var(--hl-color-night);
  background-image: repeating-linear-gradient(90deg, rgba(var(--hl-color-primary-rgb), 0.05) 0 1px, transparent 1px 14px);
  color: var(--hl-color-body-night);
  transform: translateX(-102%);
  visibility: hidden;
  transition: transform 0.6s var(--hl-ease), visibility 0.6s;
}

.hl-offcanvas.is-open {
  transform: translateX(0);
  visibility: visible;
}

.hl-offcanvas-overlay {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: rgba(var(--hl-color-night-rgb), 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s;
}

.hl-offcanvas-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.hl-offcanvas .offcanvas-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 26px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--hl-color-line-night);
}

.hl-offcanvas .offcanvas-head img {
  width: 190px;
}

.offcanvas-close {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border: 1px solid var(--hl-color-line-night);
  background: transparent;
  color: var(--hl-color-white);
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.offcanvas-close:hover {
  background: var(--hl-color-primary);
  border-color: var(--hl-color-primary);
  color: var(--hl-color-night);
}

.oc-group + .oc-group {
  margin-top: 22px;
}

.oc-label {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--hl-color-primary);
}

.oc-group a {
  position: relative;
  display: inline-block;
  padding: 4px 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--hl-color-white);
  transition: color 0.3s ease, padding 0.35s var(--hl-ease);
}

.oc-group a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  background: var(--hl-color-primary);
  transform: rotate(45deg) scale(0);
  transition: transform 0.35s var(--hl-ease);
}

.oc-group a:hover,
.oc-group a.is-current {
  color: var(--hl-color-primary);
  padding-left: 16px;
}

.oc-group a:hover::before,
.oc-group a.is-current::before {
  transform: rotate(45deg) scale(1);
}

.offcanvas-foot {
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid var(--hl-color-line-night);
}

.offcanvas-foot .hl-currency {
  margin-bottom: 26px;
}

.offcanvas-foot .label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hl-color-body-night);
}

.oc-contact {
  display: block;
  font-family: var(--hl-ff-heading);
  font-size: 24px;
  line-height: 1.35;
  color: var(--hl-color-white);
}

.oc-contact:hover {
  color: var(--hl-color-primary);
}

/* square social buttons (the base's footer squares) */
.hl-social {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hl-social a {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--hl-color-white);
  transition: background 0.3s ease, color 0.3s ease, transform 0.35s var(--hl-ease);
}

.hl-social a:hover {
  background: var(--hl-color-primary);
  color: var(--hl-color-night);
  transform: translateY(-3px);
}

.offcanvas-foot .hl-social {
  margin-top: 24px;
}

/*======================
5. Custom Select
========================*/
/* Native selects stay in the form (value, name, submit, no-JS). A button and a
   listbox are drawn beside them and kept in sync. */
.hl-select {
  position: relative;
}

.hl-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;
}

.hl-select .select-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  min-height: 34px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--hl-ff-body);
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  color: var(--hl-color-ink);
  cursor: pointer;
}

.hl-select .select-value {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hl-select .select-button i {
  flex-shrink: 0;
  font-size: 10px;
  color: var(--hl-color-primary-deep);
  transition: transform 0.35s var(--hl-ease);
}

.hl-select.is-open .select-button i {
  transform: rotate(180deg);
}

.hl-select .select-list {
  position: absolute;
  top: calc(100% + 16px);
  left: -24px;
  z-index: 40;
  min-width: calc(100% + 48px);
  max-height: 340px;
  margin: 0;
  padding: 10px 0;
  overflow-y: auto;
  list-style: none;
  background: var(--hl-color-white);
  border-top: 2px solid var(--hl-color-primary);
  box-shadow: var(--hl-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s var(--hl-ease), transform 0.3s var(--hl-ease), visibility 0.3s;
}

.hl-select.opens-up .select-list {
  top: auto;
  bottom: calc(100% + 16px);
  border-top: 0;
  border-bottom: 2px solid var(--hl-color-primary);
  transform: translateY(-10px);
}

.hl-select.is-open .select-list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.hl-select .select-group {
  padding: 12px 24px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hl-color-primary-deep);
}

.hl-select .select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 9px 24px;
  font-size: 15px;
  font-weight: 500;
  color: var(--hl-color-ink);
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.hl-select .select-option .option-meta {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--hl-color-body);
}

.hl-select .select-option.is-focused,
.hl-select .select-option:hover {
  background: var(--hl-color-ground);
}

.hl-select .select-option.is-disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.hl-select .select-option.is-selected {
  color: var(--hl-color-primary-deep);
}

.hl-select .select-option.is-selected::after {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 11px;
  color: var(--hl-color-primary-deep);
}

/* the currency switch keeps a small outlined box */
.hl-currency.hl-select .select-button {
  width: auto;
  min-width: 92px;
  height: 44px;
  padding: 0 14px;
  gap: 10px;
  border: 1px solid var(--hl-color-line);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  transition: border-color 0.3s ease;
}

.hl-currency.hl-select:hover .select-button,
.hl-currency.hl-select.is-open .select-button {
  border-color: var(--hl-color-primary);
}

.hl-currency.hl-select .select-list {
  top: calc(100% + 8px);
  left: 0;
  min-width: 100%;
}

.hl-currency.hl-select .select-option {
  padding: 8px 18px;
  font-size: 14px;
}

.oc-currency-label {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hl-color-body-night);
}

.hl-offcanvas .oc-currency.hl-select .select-button {
  width: 170px;
  color: var(--hl-color-white);
  border-color: var(--hl-color-line-night);
}

/*======================
6. Sub Header
========================*/
/* the base's photo band with the white breadcrumb tab at its lower right,
   now under a night gradient and the pinstripe */
.hl-subheader {
  position: relative;
  z-index: 0;
  padding: 150px 0 150px;
  overflow: hidden;
  background-color: var(--hl-color-night);
  color: var(--hl-color-body-night);
}

.hl-subheader .sub-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hl-subheader .sub-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
}

/* page-title photos whose people stand high in the frame: framed nearer the top, so their heads stay in view */
.hl-subheader .sub-bg img[src$="photos/party-limo.jpg"] {
  object-position: center 25%;
}
.hl-subheader .sub-bg img[src$="photos/chauffeur-door.jpg"] {
  object-position: center 20%;
}

.hl-subheader::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    repeating-linear-gradient(90deg, rgba(var(--hl-color-primary-rgb), 0.06) 0 1px, transparent 1px 14px),
    linear-gradient(90deg, rgba(var(--hl-color-night-rgb), 0.92) 0%, rgba(var(--hl-color-night-rgb), 0.72) 45%, rgba(var(--hl-color-night-rgb), 0.35) 100%);
}

.hl-subheader .container {
  position: relative;
}

.hl-subheader .sub-inner {
  max-width: 720px;
}

.hl-subheader .sub-title {
  margin-bottom: 18px;
  color: var(--hl-color-white);
}

.hl-subheader .hl-lead {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
}

.sub-crumbs {
  position: absolute;
  right: 12px;
  bottom: -150px;
}

.sub-crumbs ol {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 22px 30px;
  background: var(--hl-color-ground);
  font-size: 14px;
  font-weight: 700;
  color: var(--hl-color-ink);
}

.sub-crumbs li + li::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 12px;
  vertical-align: middle;
  background: var(--hl-color-primary);
  transform: rotate(45deg);
}

.sub-crumbs li[aria-current] {
  color: var(--hl-color-primary-deep);
}

/*======================
7. Hero
========================*/
/* the base's split: copy left, a tall photo right, the booking bar overlapping
   the photo's foot and reaching back under the copy */
.hl-hero {
  position: relative;
  z-index: 0;
  padding: 40px 0 0;
}

/* three scenes crossfade inside the stage; the counter and arrows stay on
   the photo's top corner while they change */
.hero-stage {
  position: relative;
}

.hl-hero-split .swiper-slide {
  height: auto;
}

/* room for the title's first letter to lean past the slider's clip edge (Instrument Serif's Y), taken back by the
   margin so the scenes keep their places */
.hl-hero-split {
  padding-left: 10px;
  margin-left: -10px;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 70px;
  align-items: center;
}

.hero-copy {
  padding-bottom: 150px;
}

.hero-title {
  margin-bottom: 26px;
  font-size: clamp(3rem, 1.6rem + 4.2vw, 5.5rem);
  line-height: 1.02;
}

/* each title line is set: it never wraps into an extra line */
.hero-title .t-line {
  display: block;
  white-space: nowrap;
}

.hero-copy .hl-lead {
  max-width: 470px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 38px;
}

.hero-media {
  position: relative;
}

.hero-photo {
  height: 700px;
}

.hero-photo img {
  object-position: 30% center;
}

.hero-photo.is-cabin img {
  object-position: 42% center;
}

.hero-photo.is-wedding img {
  object-position: 74% center;
}

.hero-controls {
  position: absolute;
  z-index: 5;
  top: 3px;
  right: 0;
  display: flex;
  align-items: center;
  background: var(--hl-color-night);
}

.hero-controls .slide-count {
  padding: 0 20px;
  font-size: 13px;
  color: var(--hl-color-body-night);
}

.hero-controls .slide-count b {
  color: var(--hl-color-primary);
}

.hero-controls button {
  width: 56px;
  height: 56px;
  border: 0;
  border-left: 1px solid var(--hl-color-line-night);
  background: transparent;
  color: var(--hl-color-white);
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}

.hero-controls button:hover,
.hero-controls button:focus-visible {
  background: var(--hl-color-primary);
  color: var(--hl-color-night);
}

/* the chauffeur's greeting board as a detail on the photo */
.hero-plate {
  position: absolute;
  z-index: 3;
  top: 90px;
  left: -46px;
  display: flex;
  flex-direction: column;
  padding: 20px 28px;
  background: var(--hl-color-white);
  border-left: 3px solid var(--hl-color-primary);
  box-shadow: var(--hl-shadow);
}

.hero-plate span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--hl-color-body);
}

.hero-plate b {
  font-family: var(--hl-ff-heading);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--hl-color-ink);
}

.hero-quote {
  position: relative;
  z-index: 4;
  margin: -170px 0 0;
}

/* the active slide's photo, faint across the whole band, fading out toward
   the scroll disc; it crossfades with the slides */
.hero-backdrop {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
}

.hero-backdrop img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 1.2s ease, transform 7s ease-out;
}

.hero-backdrop img.is-active {
  opacity: 0.1;
  transform: scale(1);
}

/* the base's gold disc under the bar */
.hero-scroll {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin: 70px auto 0;
  border-radius: 50%;
  background: var(--hl-color-primary);
  color: var(--hl-color-night);
  box-shadow: var(--hl-shadow-soft);
  transition: background 0.3s ease, color 0.3s ease;
}

/* two rings pulse out of the disc, one after the other */
.hero-scroll::before,
.hero-scroll::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: 50%;
  background: rgba(var(--hl-color-primary-rgb), 0.45);
  animation: hl-pulse 2.6s cubic-bezier(0.25, 0.6, 0.35, 1) infinite;
}

.hero-scroll::after {
  animation-delay: 1.3s;
}

@keyframes hl-pulse {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(2.1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scroll::before { animation: none; transform: scale(1.35); opacity: 0.35; }
  .hero-scroll::after { animation: none; opacity: 0; }
  .hero-scroll i { animation: none; }
}

.hero-scroll i {
  animation: hl-nudge 2.4s var(--hl-ease) infinite;
}

.hero-scroll:hover {
  background: var(--hl-color-night);
  color: var(--hl-color-primary);
}

@keyframes hl-nudge {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(5px); }
}

/*======================
8. Quick Quote
========================*/
/* the base's white booking bar (bold labels, champagne underlines, a square
   button) with service tabs on its top edge and a night readout strip under it */
.hl-quick-quote {
  background: var(--hl-color-white);
  box-shadow: var(--hl-shadow);
}

.qq-tabs {
  display: flex;
  gap: 36px;
  margin: 0;
  padding: 0 36px;
  border: 0;
  border-bottom: 1px solid var(--hl-color-line);
}

.qq-tab {
  position: relative;
  margin: 0;
  cursor: pointer;
}

.qq-tab input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.qq-tab span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 20px 0 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hl-color-body);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.qq-tab span i {
  font-size: 18px;
  line-height: 1;
  color: var(--hl-color-primary-deep);
}

.qq-tab input:checked + span {
  color: var(--hl-color-ink);
  border-bottom-color: var(--hl-color-primary-deep);
}

.qq-tab input:focus-visible + span {
  outline: 2px solid var(--hl-color-primary-deep);
  outline-offset: 4px;
}

.qq-tab:hover span {
  color: var(--hl-color-ink);
}

/* five fixed columns: a long place name is cut with an ellipsis instead of
   pushing the row wider, so nothing moves when the service tab changes */
.qq-fields {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.4fr) minmax(0, 1.05fr) minmax(0, 0.9fr) minmax(0, 0.85fr);
  gap: 30px;
  align-items: end;
  padding: 30px 36px 32px;
}

.qq-field label {
  display: block;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--hl-color-ink);
}

.qq-control {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hl-color-primary);
}

.qq-control > i {
  flex: 0 0 auto;
  font-size: 17px;
  color: var(--hl-color-primary-deep);
}

.qq-control .hl-select {
  flex: 1 1 auto;
  min-width: 0;
}

.qq-control input {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--hl-ff-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--hl-color-ink);
}

.qq-control input:focus {
  outline: none;
}

.qq-control:focus-within {
  border-bottom-color: var(--hl-color-primary-deep);
}

/* the button sits in the fare strip, beside the fare it asks for */
.qq-action {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 28px;
}

.qq-submit {
  justify-content: center;
  white-space: nowrap;
  box-shadow: none;
}

.qq-submit:hover,
.qq-submit:focus-visible {
  background: var(--hl-color-white);
  border-color: var(--hl-color-white);
  color: var(--hl-color-night);
}

/* the stepper matches the controls' height, so every label sits on one line */
.qq-field .hl-stepper {
  min-height: 45px;
}

/* minus / plus stepper */
.hl-stepper {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hl-color-primary);
}

.hl-stepper button {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hl-color-line);
  background: transparent;
  color: var(--hl-color-ink);
  font-size: 11px;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.hl-stepper button:hover:not(:disabled) {
  background: var(--hl-color-night);
  border-color: var(--hl-color-night);
  color: var(--hl-color-primary);
}

.hl-stepper button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.hl-stepper input {
  width: 100%;
  min-width: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
  font-family: var(--hl-ff-body);
  font-size: 18px;
  font-weight: 700;
  color: var(--hl-color-ink);
  -moz-appearance: textfield;
  appearance: textfield;
}

.hl-stepper input::-webkit-outer-spin-button,
.hl-stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.hl-stepper input:focus {
  outline: none;
}

/* the night readout strip - the instrument line of the bar */
.qq-readout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 18px 36px;
  background-color: var(--hl-color-night);
  background-image: repeating-linear-gradient(90deg, rgba(var(--hl-color-primary-rgb), 0.055) 0 1px, transparent 1px 14px);
  color: var(--hl-color-body-night);
}

.qq-readout dl {
  display: flex;
  align-items: center;
  gap: 46px;
  margin: 0;
}

.qq-readout dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hl-color-body-night);
}

.qq-readout dd {
  margin: 2px 0 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--hl-color-white);
  white-space: nowrap;
}

.qq-readout .is-fare dd {
  font-family: var(--hl-ff-heading);
  font-size: 34px;
  font-weight: 400;
  line-height: 1;
  color: var(--hl-color-primary);
}

.qq-note {
  max-width: 250px;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  text-align: right;
}

/* night tone: the dark booking band of Home 3 */
.hl-quick-quote.is-night {
  background: var(--hl-color-surface);
  box-shadow: none;
}

.is-night .qq-tabs {
  border-bottom-color: var(--hl-color-line-night);
}

.is-night .qq-tab input:checked + span,
.is-night .qq-tab:hover span,
.is-night .qq-field label,
.is-night .qq-control input,
.is-night .hl-stepper input,
.is-night .hl-select .select-button {
  color: var(--hl-color-white);
}

.is-night .qq-control input::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

.is-night .hl-stepper button {
  border-color: var(--hl-color-line-night);
  color: var(--hl-color-white);
}

.is-night .qq-readout {
  background-color: #0B0B0B;
}

/*======================
9. Services Directory
========================*/
/* Home 1: the base's centred statement stays on top; the five services
   become numbered rows beside a photo frame that follows the chosen row */
.dir-head .title {
  max-width: 1080px;
  margin: 0 auto;
}

.dir-list > li + li {
  border-top: 1px solid var(--hl-color-line);
}

.dir-item {
  position: relative;
  display: grid;
  grid-template-columns: 34px 58px 1fr 24px;
  gap: 18px;
  align-items: center;
  width: 100%;
  padding: 26px 22px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background 0.4s ease, box-shadow 0.4s ease, padding 0.45s var(--hl-ease);
}

.dir-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--hl-color-primary);
  transform: scaleY(0);
  transition: transform 0.45s var(--hl-ease);
}

.dir-no {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--hl-color-body);
}

.dir-glyph {
  font-size: 44px;
  line-height: 1;
  color: var(--hl-color-primary-deep);
  transition: transform 0.45s var(--hl-ease);
}

.dir-glyph.fas {
  font-size: 32px;
}

.dir-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dir-name {
  font-family: var(--hl-ff-heading);
  font-size: 32px;
  line-height: 1.1;
  color: var(--hl-color-ink);
}

.dir-line {
  font-size: 15px;
  color: var(--hl-color-body);
}

.dir-line b {
  color: var(--hl-color-ink);
}

.dir-arrow {
  font-size: 14px;
  color: var(--hl-color-primary-deep);
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.35s ease, transform 0.45s var(--hl-ease);
}

.dir-item:hover,
.dir-item.is-active {
  background: var(--hl-color-white);
  box-shadow: var(--hl-shadow-soft);
  padding-left: 30px;
}

.dir-item.is-active::before {
  transform: scaleY(1);
}

.dir-item:hover .dir-glyph,
.dir-item.is-active .dir-glyph {
  transform: translateX(4px);
}

.dir-item:hover .dir-arrow,
.dir-item.is-active .dir-arrow {
  opacity: 1;
  transform: translateX(0);
}

.dir-media {
  height: 620px;
}

.dir-media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

.dir-media > img.is-active {
  opacity: 1;
}

.dir-media .hl-pane.is-swap {
  z-index: 2;
}

.dir-caption {
  position: absolute;
  z-index: 3;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 22px 30px;
  background: var(--hl-color-night);
  color: var(--hl-color-white);
}

.dir-caption span {
  font-family: var(--hl-ff-heading);
  font-size: 22px;
}

/*======================
10. Fleet Showroom
========================*/
/* the base's type tabs (right of the title) over a pearl stage: one cut-out
   car with a wet-floor reflection, its specifications either side */
/* the type tabs sit level with the middle of the two-line title */
.hl-showroom .title-row {
  align-items: center;
}

.hl-showroom .title .t-line {
  display: block;
}

.stage-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  white-space: nowrap;
}

.stage-tab {
  padding: 16px 24px;
  border: 1px solid transparent;
  background: transparent;
  font-family: var(--hl-ff-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--hl-color-body);
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.stage-tab:hover {
  color: var(--hl-color-ink);
}

.stage-tab.is-active {
  color: var(--hl-color-ink);
  border-color: var(--hl-color-line);
  box-shadow: var(--hl-shadow-soft);
  background: var(--hl-color-white);
}

/* the stage is on the grid; its wall and floor run the full width of the
   page. clip-path keeps the reflection inside the stage's height while
   letting the band reach the edges; the section clips it at the page edge */
.hl-showroom {
  overflow: hidden;
}

.stage-floor {
  position: relative;
  z-index: 0;
  height: 560px;
  clip-path: inset(0 -100vw);
}

.stage-floor::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: -100vw;
  right: -100vw;
  background: linear-gradient(180deg, var(--hl-color-ground) 0%, var(--hl-color-ground) 66%, #EEECE7 66.2%, #F4F3EF 88%, var(--hl-color-ground) 100%);
}

.stage-floor::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(ellipse 60% 22% at 50% 80%, rgba(var(--hl-color-night-rgb), 0.1), transparent 70%);
  pointer-events: none;
}

.stage-panel {
  position: absolute;
  inset: 0;
}

.stage-word {
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--hl-ff-heading);
  font-size: 250px;
  line-height: 1;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(var(--hl-color-night-rgb), 0.1);
  pointer-events: none;
  user-select: none;
}

.stage-car {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 150px;
  width: 720px;
  margin-left: -360px;
}

.stage-car .car-main {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
}

/* a soft shadow under the tyres */
.stage-car::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 6%;
  right: 6%;
  bottom: 2px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.38), transparent 70%);
}

/* the wet-floor reflection: the same cut-out, flipped and faded */
.car-mirror {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  margin-top: -6px;
  opacity: 0.18;
  transform: scaleY(-1);
  -webkit-mask-image: linear-gradient(to bottom, transparent 45%, rgba(0, 0, 0, 0.85) 100%);
  mask-image: linear-gradient(to bottom, transparent 45%, rgba(0, 0, 0, 0.85) 100%);
  pointer-events: none;
}

.stage-spec {
  position: absolute;
  z-index: 3;
  top: 42%;
  transform: translateY(-50%);
}

.stage-spec.is-left {
  left: 40px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.stage-spec.is-left li {
  display: grid;
  grid-template-columns: 44px auto;
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
}

.stage-spec.is-left i {
  grid-row: span 2;
  font-size: 34px;
  line-height: 1;
  color: var(--hl-color-primary-deep);
}

.stage-spec.is-left i.far {
  font-size: 26px;
}

.stage-spec.is-left b {
  font-family: var(--hl-ff-heading);
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
  color: var(--hl-color-ink);
}

.stage-spec.is-left span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hl-color-body);
}

.stage-spec.is-right {
  right: 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.spec-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hl-color-body);
}

.spec-rate {
  margin-bottom: 16px;
  color: var(--hl-color-ink);
}

.spec-rate b {
  font-family: var(--hl-ff-heading);
  font-size: 56px;
  font-weight: 400;
  line-height: 1;
}

.spec-rate small {
  margin-left: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--hl-color-body);
}

.spec-rate.is-small b {
  font-size: 34px;
}

.stage-spec .hl-btn {
  margin-top: 8px;
}

/*======================
11. Why Ride
========================*/
/* the base's call-to-action box: copy left, a numbered feature stack right
   (glyph discs over outlined ghost numerals), a champagne band beneath */
.why-box {
  position: relative;
  z-index: 1;
  padding: 90px 80px;
  background: var(--hl-color-white);
  box-shadow: var(--hl-shadow-soft);
}

.why-title {
  font-size: var(--hl-fs-h2);
  margin-bottom: 0;
}

.why-sub {
  margin: 22px 0 36px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--hl-color-primary-deep);
}

.why-item {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 24px;
  align-items: start;
}

.why-item + .why-item {
  margin-top: 46px;
}

.why-icon {
  position: relative;
  height: 90px;
}

.why-icon .hl-disc {
  position: relative;
  z-index: 1;
}

.why-icon .hl-ghost {
  position: absolute;
  left: 44px;
  top: -6px;
}

.why-text h3 {
  margin-bottom: 10px;
  font-size: 30px;
}

.why-text p {
  margin: 0;
}

/* icon inversion */
.why-item:hover .hl-disc {
  background: var(--hl-color-night);
  color: var(--hl-color-primary);
  transform: translateY(-4px);
}

.why-bar {
  display: block;
  height: 16px;
  margin: 0 30px;
  background: var(--hl-color-primary);
  transform-origin: center;
}

/*======================
12. Drive By
========================*/
/* Home 1's scroll moment: the sedan pulls up out of the distance along its
   own heading and settles on the floor; the base's dark card appears once it
   has stopped; three readouts under the floor */
.hl-driveby {
  position: relative;
  z-index: 0;
  overflow: hidden;
}

.drive-head {
  margin-bottom: 20px;
}

.drive-track {
  position: relative;
  height: 500px;
  overflow: hidden;
}

.drive-word {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--hl-ff-heading);
  font-size: 300px;
  line-height: 1;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(var(--hl-color-night-rgb), 0.08);
  pointer-events: none;
  user-select: none;
}

/* the floor the car stands on: a warm plane under a hairline horizon */
.drive-floor {
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: 60%;
  bottom: 0;
  background: linear-gradient(180deg, rgba(242, 240, 235, 0.35) 0%, #F2F0EB 16%, #F8F7F4 60%, var(--hl-color-white) 100%);
}

.drive-floor::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--hl-color-night-rgb), 0.1) 20%, rgba(var(--hl-color-night-rgb), 0.1) 80%, transparent);
}

.drive-car {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 70px;
  width: 640px;
  margin-left: -300px;
  will-change: transform, opacity;
}

.car-body {
  position: relative;
  z-index: 2;
}

.car-body img {
  display: block;
  width: 100%;
  height: auto;
}

/* underbody shade: the footprint between the four tyres, measured from the
   cut-out (front bumper 13% / 88%, front tyre 45% / 98%, rear tyre 88% / 78%),
   blurred by its parent so the clip never shows a hard edge */
.car-shade {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
}

.car-shade span {
  position: absolute;
  inset: 0;
  background: var(--hl-color-night);
}

.car-shade.is-soft {
  filter: blur(22px);
  opacity: 0.3;
}

.car-shade.is-soft span {
  clip-path: polygon(4% 86%, 44% 104%, 97% 81%, 62% 70%);
}

.car-shade.is-core {
  filter: blur(7px);
  opacity: 0.55;
}

.car-shade.is-core span {
  clip-path: polygon(12% 88%, 45% 98.5%, 89% 79%, 60% 73%);
}

/* tight contact shadows where the rubber meets the floor */
.tyre-shade {
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(var(--hl-color-night-rgb), 0.85), rgba(var(--hl-color-night-rgb), 0) 70%);
  transform: translate(-50%, -50%);
}

.tyre-shade.is-front {
  left: 45.6%;
  top: 97.6%;
  width: 15%;
  height: 5%;
}

.tyre-shade.is-rear {
  left: 88.6%;
  top: 78%;
  width: 10%;
  height: 3.6%;
}

.drive-card {
  position: absolute;
  z-index: 3;
  left: calc(50% - 330px);
  top: 40px;
  display: flex;
  flex-direction: column;
  padding: 18px 24px;
  background-color: var(--hl-color-night);
  color: var(--hl-color-body-night);
  font-size: 13px;
  box-shadow: var(--hl-shadow);
}

.drive-card .card-no {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--hl-color-primary);
}

.drive-card b {
  font-family: var(--hl-ff-heading);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--hl-color-white);
}

.drive-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  padding-top: 44px;
  border-top: 1px solid var(--hl-color-line);
}

.drive-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.drive-stat b {
  font-family: var(--hl-ff-heading);
  font-size: 68px;
  font-weight: 400;
  line-height: 1;
  color: var(--hl-color-ink);
}

.drive-stat > span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hl-color-body);
}

/*======================
13. Film Band
========================*/
/* a wide cabin photo on the night pinstripe with the base's play disc and
   spinning dashed ring; a white copy card overlaps its lower left */
.film-stage {
  position: relative;
  padding-bottom: 90px;
}

.film-media {
  width: 86%;
  margin-left: auto;
  aspect-ratio: 21 / 9;
}

.film-play {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: 132px;
  height: 132px;
  margin: -66px 0 0 -66px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.film-play i {
  width: 78px;
  height: 78px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-left: 4px;
  border-radius: 50%;
  background: var(--hl-color-white);
  color: var(--hl-color-night);
  font-size: 20px;
  transition: background 0.3s ease, color 0.3s ease, transform 0.4s var(--hl-ease);
}

.film-media:hover .film-play i {
  background: var(--hl-color-primary);
  transform: scale(1.08);
}


.film-card {
  position: absolute;
  z-index: 4;
  left: 0;
  bottom: 0;
  width: 500px;
  padding: 50px 50px 48px;
  background: var(--hl-color-white);
  color: var(--hl-color-body);
  box-shadow: var(--hl-shadow);
}

.film-card .hl-eyebrow {
  color: var(--hl-color-ink);
}

.film-title {
  font-size: clamp(2.2rem, 1.7rem + 1.6vw, 3.4rem);
  color: var(--hl-color-ink);
}

.hl-night .film-card .film-title {
  color: var(--hl-color-ink);
}

.film-card .hl-link {
  color: var(--hl-color-ink);
}

.film-card .hl-link::after {
  background: var(--hl-color-primary-deep);
}

/*======================
14. Reviews
========================*/
/* Google + Tripadvisor summary panels, a typographic source filter, and the
   reviews as arrivals name boards - the sign a chauffeur holds at the gate -
   with the base's round avatar and champagne check disc */
.review-panels {
  margin-bottom: 56px;
}

.review-panel {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px 44px;
  height: 100%;
  padding: 38px 42px;
  background: var(--hl-color-white);
  border-top: 3px solid var(--hl-color-primary);
  box-shadow: var(--hl-shadow-soft);
}

.panel-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.panel-logo {
  height: 34px;
  width: auto;
}

.panel-diamond {
  width: 10px;
  height: 10px;
  background: var(--hl-color-primary);
  transform: rotate(45deg);
}

.panel-score {
  display: flex;
  align-items: center;
  gap: 18px;
}

.panel-score > b {
  font-family: var(--hl-ff-heading);
  font-size: 76px;
  font-weight: 400;
  line-height: 0.9;
  color: var(--hl-color-ink);
}

.panel-symbols {
  display: flex;
  gap: 3px;
  font-size: 17px;
  color: #F4B400;
}

.panel-symbols.is-bubbles,
.board-symbols.is-bubbles {
  color: #00AA6C;
}

.panel-symbols .is-empty,
.board-symbols .is-empty {
  opacity: 0.35;
}

.panel-total {
  display: block;
  margin-top: 6px;
  font-size: 14px;
}

.panel-bars {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

.panel-bars li {
  display: grid;
  grid-template-columns: 16px 1fr 40px;
  gap: 12px;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
}

.bar-track {
  height: 6px;
  background: var(--hl-color-ground);
  overflow: hidden;
}

.bar-track i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--hl-color-night);
  transition: width 1.4s var(--hl-ease);
}

.bar-pct {
  text-align: right;
  color: var(--hl-color-body);
}

.panel-links {
  grid-column: 1 / -1;
  display: flex;
  gap: 34px;
  padding-top: 18px;
  border-top: 1px solid var(--hl-color-line);
}

/* night panels (Home 2) */
.review-panel.is-night {
  background: var(--hl-color-surface);
  box-shadow: none;
}

.is-night .panel-score > b {
  color: var(--hl-color-white);
}

.is-night .bar-track {
  background: rgba(255, 255, 255, 0.08);
}

.is-night .bar-track i {
  background: var(--hl-color-primary);
}

.is-night .panel-links {
  border-top-color: var(--hl-color-line-night);
}

/* source filter: typographic tabs, not pills */
.review-filter {
  display: flex;
  justify-content: center;
  gap: 44px;
  margin-bottom: 50px;
  border-bottom: 1px solid var(--hl-color-line);
}

.review-filter .filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: -1px;
  padding: 16px 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font-family: var(--hl-ff-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hl-color-body);
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.review-filter .filter-btn img {
  width: 18px;
  height: 18px;
}

.review-filter .filter-btn span {
  color: var(--hl-color-primary-deep);
}

.review-filter .filter-btn:hover,
.review-filter .filter-btn.is-active {
  color: var(--hl-color-ink);
}

.review-filter .filter-btn.is-active {
  border-bottom-color: var(--hl-color-primary-deep);
}

.hl-night .review-filter {
  border-bottom-color: var(--hl-color-line-night);
}

.hl-night .review-filter .filter-btn:hover,
.hl-night .review-filter .filter-btn.is-active {
  color: var(--hl-color-white);
}

/* the name board */
.review-board {
  position: relative;
  height: 100%;
  padding-bottom: 30px;
  background: var(--hl-color-white);
  text-align: center;
  box-shadow: var(--hl-shadow-soft);
  transition: transform 0.45s var(--hl-ease), box-shadow 0.45s ease;
}

.review-board:hover {
  transform: translateY(-6px);
  box-shadow: var(--hl-shadow);
}

.board-sign {
  padding: 26px 26px 58px;
  background-color: var(--hl-color-night);
}

.sign-brand {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--hl-color-primary);
}

.sign-name {
  margin: 6px 0 0;
  font-size: 32px;
  line-height: 1.1;
  color: var(--hl-color-white);
}

.board-avatar {
  position: relative;
  width: 98px;
  height: 98px;
  margin: -49px auto 0;
}

.board-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 4px solid var(--hl-color-white);
  object-fit: cover;
  object-position: center top;
}

.avatar-check {
  position: absolute;
  top: 2px;
  right: -4px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 3px solid var(--hl-color-white);
  background: var(--hl-color-primary);
  color: var(--hl-color-night);
  font-size: 10px;
}

.board-role {
  display: block;
  margin-top: 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hl-color-primary-deep);
}

.board-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 12px 0 14px;
}

.board-symbols {
  display: inline-flex;
  gap: 3px;
  font-size: 14px;
  color: #F4B400;
}

.board-source {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-left: 14px;
  border-left: 1px solid var(--hl-color-line);
  font-size: 13px;
  font-weight: 700;
  color: var(--hl-color-ink);
}

.board-source img {
  width: 17px;
  height: 17px;
}

.review-board p {
  margin: 0;
  padding: 0 30px;
}

.board-trip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: 22px 30px 0;
  padding-top: 18px;
  border-top: 1px dashed var(--hl-color-line);
  font-size: 13px;
}

.board-trip span:first-child {
  font-weight: 700;
  color: var(--hl-color-ink);
}

.board-trip i {
  margin-right: 8px;
  font-size: 16px;
  vertical-align: -2px;
  color: var(--hl-color-primary-deep);
}

/*======================
15. Diamond CTA
========================*/
/* the base's grey band with rotated photo diamonds at its corners, now on the
   night pinstripe */
.hl-diamond-cta {
  position: relative;
  z-index: 0;
  overflow: hidden;
  padding: 160px 0 170px;
  text-align: center;
}

.hl-diamond-cta .cta-inner {
  position: relative;
  z-index: 2;
  max-width: 920px;
  margin: 0 auto;
}

.cta-title {
  font-size: clamp(2.1rem, 1.5rem + 2vw, 3.5rem);
  line-height: 1.14;
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 42px;
}

.cta-diamond {
  position: absolute;
  z-index: 1;
  border: 6px solid rgba(255, 255, 255, 0.06);
}

.cta-diamond.is-one {
  top: -60px;
  left: 70px;
  width: 230px;
  height: 230px;
}

.cta-diamond.is-two {
  bottom: 50px;
  left: 150px;
  width: 150px;
  height: 150px;
}

.cta-diamond.is-three {
  right: 70px;
  bottom: 70px;
  width: 250px;
  height: 250px;
}

/*======================
16. Journal Rail
========================*/
/* the base's news rail: square arrows right of the title, white cards */
.journal-rail {
  overflow: visible;
}

.journal-rail .swiper-slide {
  height: auto;
}

.journal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--hl-color-white);
  transition: box-shadow 0.45s ease, transform 0.45s var(--hl-ease);
}

.journal-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--hl-shadow);
}

.journal-media {
  aspect-ratio: 16 / 10;
}

.journal-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 30px 32px 34px;
}

.journal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 500;
}

.journal-meta i {
  margin-right: 8px;
  color: var(--hl-color-primary-deep);
}

/* the author as a small round portrait */
.journal-meta .meta-author {
  display: inline-flex;
  align-items: center;
}

.journal-meta .meta-author img {
  width: 28px;
  height: 28px;
  margin-right: 9px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px var(--hl-color-white), 0 0 0 3px rgba(var(--hl-color-primary-rgb), 0.7);
}

/* the post's category on the photo's corner, as the fleet cards' class tag */
.journal-tag {
  position: absolute;
  z-index: 2;
  top: 18px;
  left: 18px;
  padding: 7px 14px;
  background: var(--hl-color-night);
  color: var(--hl-color-primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: background 0.3s ease, color 0.3s ease;
}

.journal-tag:hover {
  background: var(--hl-color-primary);
  color: var(--hl-color-night);
}

.journal-title {
  margin-bottom: 12px;
  font-size: 28px;
  line-height: 1.18;
}

.journal-title a:hover {
  color: var(--hl-color-primary-deep);
}

.journal-body p {
  margin-bottom: 22px;
}

.journal-body .hl-link {
  margin-top: auto;
}

.hl-journal {
  overflow: hidden;
}

/*======================
17. Hero Two
========================*/
/* Home 2: the base's full-bleed centred hero - scenes crossfade under a night
   gradient, the Quick Quote docks under the photo */
.hl-hero-two {
  position: relative;
  z-index: 0;
  min-height: 920px;
  display: flex;
  align-items: center;
  padding: 190px 0 200px;
  overflow: hidden;
  background: var(--hl-color-night);
  text-align: center;
}

.hl-hero-slider {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hl-hero-slider .swiper-slide {
  overflow: hidden;
}

.hl-hero-slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  transition: transform 7s linear;
}

.hl-hero-slider .swiper-slide-active img {
  transform: scale(1);
}

.hl-hero-two::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    repeating-linear-gradient(90deg, rgba(var(--hl-color-primary-rgb), 0.045) 0 1px, transparent 1px 14px),
    linear-gradient(180deg, rgba(var(--hl-color-night-rgb), 0.6) 0%, rgba(var(--hl-color-night-rgb), 0.35) 45%, rgba(var(--hl-color-night-rgb), 0.85) 100%);
}

.hl-hero-two .container {
  position: relative;
}

.hero-two-copy {
  max-width: 980px;
  margin: 0 auto;
}

.hero-two-title {
  color: var(--hl-color-white);
  margin-bottom: 0;
}

.hero-two-title .hl-accent {
  color: var(--hl-color-primary);
}

.hl-hero-two .hero-actions {
  justify-content: center;
}

.hero-two-controls {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -130px;
  display: flex;
  align-items: center;
  gap: 26px;
  color: var(--hl-color-white);
}

.slide-count {
  white-space: nowrap;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.6);
}

.slide-count b {
  color: var(--hl-color-white);
}

.slide-dashes {
  display: flex;
  gap: 8px;
}

.slide-dashes .swiper-pagination-bullet {
  width: 26px;
  height: 2px;
  margin: 0 !important;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.35);
  opacity: 1;
  transition: width 0.4s var(--hl-ease), background 0.3s ease;
}

.slide-dashes .swiper-pagination-bullet-active {
  width: 46px;
  background: var(--hl-color-primary);
}

.hero-two-arrows {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.hero-two-arrows button {
  width: 50px;
  height: 50px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  color: var(--hl-color-white);
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.hero-two-arrows button:hover {
  background: var(--hl-color-primary);
  border-color: var(--hl-color-primary);
  color: var(--hl-color-night);
}

/* the docked bar */
.hl-quote-dock {
  position: relative;
  z-index: 5;
  margin-top: -120px;
}

/*======================
18. Window Down
========================*/
/* Home 2's scroll moment: the photo framed as a car's rear side window - a
   slanted rear pillar, a chrome line along its sill - and its smoked pane
   lowers as the section scrolls */
.window-frame {
  position: relative;
  padding: 16px;
  background: var(--hl-color-night);
  box-shadow: var(--hl-shadow);
  clip-path: polygon(0 12%, 14% 0, 100% 0, 100% 100%, 0 100%);
}

.window-glass {
  height: 560px;
  clip-path: polygon(0 11%, 13% 0, 100% 0, 100% 100%, 0 100%);
}

.window-glass img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;
}

.window-sill {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  height: 4px;
  z-index: 3;
  background: linear-gradient(90deg, rgba(var(--hl-color-primary-rgb), 0.3), var(--hl-color-primary) 20%, #F4EBDA 50%, var(--hl-color-primary) 80%, rgba(var(--hl-color-primary-rgb), 0.3));
}

.window-copy {
  padding-left: 30px;
}

.window-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 34px 0 40px;
  border-top: 1px solid var(--hl-color-line);
  border-bottom: 1px solid var(--hl-color-line);
}

.window-fact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 24px 20px;
}

.window-fact + .window-fact {
  border-left: 1px solid var(--hl-color-line);
}

.fact-no {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--hl-color-primary-deep);
}

.window-fact b {
  font-family: var(--hl-ff-heading);
  font-size: 23px;
  font-weight: 400;
  line-height: 1.15;
  color: var(--hl-color-ink);
}

.window-fact span:last-child {
  font-size: 14px;
}

/*======================
19. Core Features
========================*/
/* Home 2: a sticky title left, six numbered features right in two columns,
   the base's outlined ghost numerals kept behind each glyph */
.features-title {
  position: sticky;
  top: 130px;
}

.features-title .title {
  margin-bottom: 0;
}

.features-title p {
  margin: 26px 0 30px;
}

.features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--hl-color-line);
  border-left: 1px solid var(--hl-color-line);
}

.feature-item {
  position: relative;
  padding: 46px 42px 44px;
  border-right: 1px solid var(--hl-color-line);
  border-bottom: 1px solid var(--hl-color-line);
  overflow: hidden;
  transition: background 0.4s ease;
}

.feature-item .hl-ghost {
  position: absolute;
  top: 22px;
  right: 24px;
  font-size: 96px;
}

.feature-item > i {
  display: block;
  margin-bottom: 26px;
  font-size: 46px;
  line-height: 1;
  color: var(--hl-color-primary-deep);
  transition: transform 0.45s var(--hl-ease), color 0.3s ease;
}

.feature-item > i.fas,
.feature-item > i.far {
  font-size: 36px;
}

.feature-item h3 {
  margin-bottom: 10px;
  font-size: 28px;
}

.feature-item p {
  margin: 0;
}

.feature-item:hover {
  background: var(--hl-color-night);
}

.feature-item:hover h3 {
  color: var(--hl-color-white);
}

.feature-item:hover p {
  color: var(--hl-color-body-night);
}

.feature-item:hover > i {
  color: var(--hl-color-primary);
  transform: translateY(-4px);
}

.feature-item:hover .hl-ghost {
  -webkit-text-stroke: 1px rgba(var(--hl-color-primary-rgb), 0.25);
}

/*======================
20. Fleet Cards
========================*/
/* the base's room card: photo, the white amenity strip overlapping its foot,
   name, a line and a price. Hover swaps the exterior for the cabin */
.fleet-rail .swiper-slide {
  height: auto;
}

.fleet-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--hl-color-white);
  transition: transform 0.45s var(--hl-ease), box-shadow 0.45s ease;
}

.fleet-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--hl-shadow);
}

.fleet-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 11;
  overflow: hidden;
}

.fleet-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.6s ease, transform 1.2s var(--hl-ease);
}

.fleet-media .media-swap {
  opacity: 0;
  transform: scale(1.08);
}

.fleet-card:hover .media-swap {
  opacity: 1;
  transform: scale(1);
}

.fleet-card:hover .media-main {
  transform: scale(1.06);
}

.fleet-tag {
  position: absolute;
  z-index: 2;
  top: 18px;
  left: 18px;
  padding: 7px 14px;
  background: var(--hl-color-night);
  color: var(--hl-color-primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.fleet-amenities {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 18px;
  width: max-content;
  max-width: calc(100% - 40px);
  margin: -26px auto 0;
  padding: 14px 24px;
  background: var(--hl-color-white);
  box-shadow: var(--hl-shadow-soft);
}

.fleet-amenities i {
  font-size: 22px;
  line-height: 1;
  color: var(--hl-color-primary-deep);
}

.fleet-amenities i.fas {
  font-size: 16px;
}

.fleet-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 24px 30px 30px;
  text-align: center;
}

.fleet-name {
  margin-bottom: 10px;
  font-size: 30px;
}

.fleet-name a:hover {
  color: var(--hl-color-primary-deep);
}

.fleet-spec {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--hl-color-body);
}

.fleet-spec b {
  color: var(--hl-color-ink);
}

.fleet-body p {
  margin-bottom: 20px;
}

.fleet-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px dashed var(--hl-color-line);
}

.fleet-rate {
  font-size: 14px;
  font-weight: 600;
}

.fleet-rate b {
  font-family: var(--hl-ff-heading);
  font-size: 30px;
  font-weight: 400;
  color: var(--hl-color-primary-deep);
}

/* list layout (fleet-list.html) */
.fleet-card.is-list {
  display: grid;
  grid-template-columns: 42% 1fr;
}

.fleet-card.is-list .fleet-media {
  aspect-ratio: auto;
  min-height: 100%;
}

.fleet-card.is-list .fleet-amenities {
  position: absolute;
  left: 20px;
  bottom: 20px;
  margin: 0;
}

.fleet-card.is-list .fleet-body {
  text-align: left;
  padding: 38px 42px;
}

.fleet-card.is-list .fleet-spec {
  justify-content: flex-start;
}

.fleet-fares {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 24px;
  border-top: 1px solid var(--hl-color-line);
  border-bottom: 1px solid var(--hl-color-line);
}

.fleet-fares div {
  padding: 14px 0;
}

.fleet-fares div + div {
  padding-left: 18px;
  border-left: 1px solid var(--hl-color-line);
}

.fleet-fares dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hl-color-body);
}

.fleet-fares dd {
  margin: 0;
}

.fleet-fares b {
  font-family: var(--hl-ff-heading);
  font-size: 26px;
  font-weight: 400;
  color: var(--hl-color-ink);
}

/*======================
21. Corporate Calculator
========================*/
/* a night pinstripe card: three inputs, the tier ladder and the saving */
.hl-corp-calc {
  padding: 46px 48px 40px;
  background-color: var(--hl-color-night);
  color: var(--hl-color-body-night);
  box-shadow: var(--hl-shadow);
}

.calc-fields {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr 1fr;
  gap: 26px;
}

.calc-field label {
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hl-color-primary);
}

.calc-control {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(var(--hl-color-primary-rgb), 0.5);
}

.calc-control > i {
  font-size: 18px;
  color: var(--hl-color-primary);
}

.calc-control .hl-select {
  flex: 1 1 auto;
  min-width: 0;
}

.hl-corp-calc .hl-select .select-button,
.hl-corp-calc .hl-stepper input {
  color: var(--hl-color-white);
}

.hl-corp-calc .hl-stepper {
  border-bottom-color: rgba(var(--hl-color-primary-rgb), 0.5);
}

.hl-corp-calc .hl-stepper button {
  border-color: var(--hl-color-line-night);
  color: var(--hl-color-white);
}

/* the tier ladder */
.calc-tiers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 34px 0 30px;
}

.calc-tiers li {
  position: relative;
  padding: 16px 12px 0 0;
  border-top: 3px solid rgba(255, 255, 255, 0.12);
  transition: border-color 0.4s ease;
}

.calc-tiers li::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 0;
  width: 13px;
  height: 13px;
  background: var(--hl-color-night);
  border: 2px solid rgba(255, 255, 255, 0.25);
  transform: rotate(45deg);
  transition: background 0.3s ease, border-color 0.3s ease;
}

.calc-tiers li.is-reached {
  border-top-color: var(--hl-color-primary);
}

.calc-tiers li.is-reached::before {
  background: var(--hl-color-primary);
  border-color: var(--hl-color-primary);
}

.calc-tiers b {
  display: block;
  font-family: var(--hl-ff-heading);
  font-size: 22px;
  font-weight: 400;
  color: var(--hl-color-white);
}

.calc-tiers li.is-current b {
  color: var(--hl-color-primary);
}

.calc-tiers span {
  font-size: 12px;
}

.calc-out {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 24px 0;
  border-top: 1px solid var(--hl-color-line-night);
  border-bottom: 1px solid var(--hl-color-line-night);
}

.calc-out dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.calc-out dd {
  margin: 4px 0 0;
  font-family: var(--hl-ff-heading);
  font-size: 32px;
  line-height: 1.1;
  color: var(--hl-color-white);
}

.calc-out .is-save dd {
  color: var(--hl-color-primary);
}

.calc-note {
  margin: 20px 0 0;
  font-size: 14px;
}

.calc-note b {
  margin-right: 6px;
  color: var(--hl-color-white);
}

.corp-copy {
  padding-left: 20px;
}

/*======================
22. Counters
========================*/
/* the base's black counter band: glyph over a big figure over a caption */
.counter-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.counter-item > i {
  margin-bottom: 14px;
  font-size: 54px;
  line-height: 1;
  color: var(--hl-color-primary);
}

.counter-item > i.far {
  font-size: 40px;
}

.counter-item b {
  font-family: var(--hl-ff-heading);
  font-size: 72px;
  font-weight: 400;
  line-height: 1;
  color: var(--hl-color-white);
}

.counter-item > span {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* boxed variant (Home 3: the base's black box inside the container) */
.hl-counters.is-boxed {
  background: transparent;
}

.hl-counters.is-boxed .counter-box {
  padding: 80px 90px;
  background-color: var(--hl-color-night);
}

/*======================
23. Reviews Two
========================*/
/* Home 2: a night band - the two platform panels stacked on the left, a
   name-board slider on the right under the filter */
.hl-reviews.is-two .review-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hl-reviews.is-two .review-panel {
  grid-template-columns: auto 1fr;
}

.review-filter.is-left {
  justify-content: flex-start;
  margin-bottom: 34px;
}

.review-rail {
  overflow: hidden;
}

.review-rail .swiper-slide {
  height: auto;
  padding-bottom: 8px;
}

.review-arrows {
  margin-top: 30px;
}

.hl-night .review-board {
  box-shadow: none;
}

/*======================
24. Video Band
========================*/
/* the base's full-bleed photo with the spinning dashed ring play button */
.hl-video-band {
  position: relative;
  z-index: 0;
  height: 620px;
  overflow: hidden;
}

.hl-video-band > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hl-video-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(var(--hl-color-night-rgb), 0.3);
}

.hl-video-band .film-play {
  z-index: 2;
}

.hl-video-band .film-play:hover i {
  background: var(--hl-color-primary);
}

/*======================
25. Photo Strip
========================*/
/* the instagram row above the footer: a swipeable rail of square photos (block Photo Strip) */
.hl-photo-strip .strip-slider {
  overflow: hidden;
}

.hl-photo-strip .swiper-slide {
  height: auto;
}

.hl-photo-strip a {
  aspect-ratio: 1 / 1;
}

.hl-photo-strip a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hl-photo-strip a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(var(--hl-color-night-rgb), 0.55);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.hl-photo-strip a i {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  font-size: 26px;
  color: var(--hl-color-primary);
  opacity: 0;
  transform: translate(-50%, -30%);
  transition: opacity 0.4s ease, transform 0.45s var(--hl-ease);
}

.hl-photo-strip a:hover::after {
  opacity: 1;
}

.hl-photo-strip a:hover i {
  opacity: 1;
  transform: translate(-50%, -50%);
}

/*======================
26. Hero Three
========================*/
/* Home 3: the base's left-aligned slider under the boxed header, the dark
   booking band beneath it */
.hl-hero-three {
  position: relative;
  z-index: 0;
  min-height: 860px;
  display: flex;
  align-items: center;
  padding: 230px 0 320px;
  overflow: hidden;
  background: var(--hl-color-night);
}

.hl-hero-three::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    repeating-linear-gradient(90deg, rgba(var(--hl-color-primary-rgb), 0.045) 0 1px, transparent 1px 14px),
    linear-gradient(90deg, rgba(var(--hl-color-night-rgb), 0.9) 0%, rgba(var(--hl-color-night-rgb), 0.55) 50%, rgba(var(--hl-color-night-rgb), 0.15) 100%);
}

.hero-three-copy {
  max-width: 700px;
}

.hero-three-title {
  color: var(--hl-color-white);
}

.hero-three-title .hl-accent {
  color: var(--hl-color-primary);
}

/* the counter and dashes sit just above the booking filter's top edge */
.hero-two-controls.is-three {
  bottom: 190px;
  left: calc((100% - var(--hl-cw)) / 2 + 12px);
  right: calc((100% - var(--hl-cw)) / 2 + 12px);
}

/* the container's width at each breakpoint, for pieces placed on the grid
   from a full-width section */
.hl-hero-three {
  --hl-cw: 1320px;
}

/* the booking filter: half over the hero's foot, half over the next section,
   which starts under it */
.hl-quote-band {
  position: relative;
  z-index: 5;
  margin: -150px 0 -150px;
}

.hl-quote-band .hl-quick-quote {
  position: relative;
  z-index: 3;
  box-shadow: 0 40px 70px -34px rgba(var(--hl-color-night-rgb), 0.6);
}

.hl-quote-band + section {
  padding-top: 270px;
}

/*======================
27. About Mosaic
========================*/
/* Home 3: the base's 2 x 2 mosaic - a glyph tile, two photos, a night tile -
   staggered, with the copy right over a faded photograph */
.hl-about-three {
  position: relative;
  z-index: 0;
  overflow: hidden;
}

.about-fade {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  width: 46%;
  height: 100%;
  object-fit: cover;
  opacity: 0.12;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 60%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 60%);
}

.about-mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.mosaic-tile {
  min-height: 250px;
}

.mosaic-tile:nth-child(2) {
  margin-top: 30px;
}

.mosaic-tile:nth-child(3) {
  margin-top: -30px;
}

.mosaic-tile.is-glyph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 30px;
  text-align: center;
  background: var(--hl-color-white);
  box-shadow: var(--hl-shadow-soft);
  transition: transform 0.45s var(--hl-ease), box-shadow 0.45s ease;
}

.mosaic-tile.is-glyph:hover {
  transform: translateY(-6px);
  box-shadow: var(--hl-shadow);
}

.mosaic-tile.is-glyph i {
  margin-bottom: 20px;
  font-size: 46px;
  line-height: 1;
  color: var(--hl-color-primary-deep);
}

.mosaic-tile.is-glyph i.fas {
  font-size: 38px;
}

.mosaic-tile.is-glyph h3 {
  margin-bottom: 10px;
  font-size: 28px;
}

.mosaic-tile.is-glyph p {
  margin: 0;
  font-size: 15px;
}

.mosaic-tile.is-night {
  background: var(--hl-color-night);
  color: var(--hl-color-body-night);
}

.mosaic-tile.is-night h3 {
  color: var(--hl-color-white);
}

.mosaic-tile.is-night i {
  color: var(--hl-color-primary);
}

.mosaic-tile.is-photo img {
  position: absolute;
  inset: 0;
}

.about-three-copy {
  padding-left: 40px;
}

.about-three-copy p {
  margin: 10px 0 36px;
}

/*======================
28. Packages
========================*/
/* Home 3: the base's centre-mode slider - neighbours peek either side, the
   active slide's white card rises over its foot with the package price */
.pkg-stage {
  position: relative;
}

.hl-package-slider {
  overflow: hidden;
  padding-bottom: 60px;
}

.pkg-slide {
  position: relative;
}

.pkg-media {
  height: 540px;
}

.pkg-media img {
  position: absolute;
  inset: 0;
}

.swiper-slide:not(.swiper-slide-active) .pkg-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.45);
}

.pkg-card {
  position: absolute;
  left: 50px;
  right: 50px;
  bottom: -50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 30px 36px;
  background: var(--hl-color-white);
  box-shadow: var(--hl-shadow);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease 0.2s, transform 0.7s var(--hl-ease) 0.2s;
}

.swiper-slide-active .pkg-card {
  opacity: 1;
  transform: translateY(0);
}

.pkg-name {
  margin-bottom: 6px;
  font-size: 32px;
}

.pkg-text p {
  margin: 0;
  font-size: 15px;
}

.pkg-price {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.pkg-price b {
  font-family: var(--hl-ff-heading);
  font-size: 44px;
  font-weight: 400;
  line-height: 1;
  color: var(--hl-color-primary-deep);
}

.pkg-price small {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.pkg-prev,
.pkg-next {
  position: absolute;
  z-index: 5;
  top: 240px;
}

.pkg-prev {
  left: calc(50% - 480px);
}

.pkg-next {
  right: calc(50% - 480px);
}

/*======================
29. Wedding Day Road
========================*/
/* Home 3's scroll moment inside the base's black 70 / champagne 30 split:
   a car rides down a dashed road through the day's stops */
.road-split {
  display: grid;
  grid-template-columns: 62fr 38fr;
}

.road-copy {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 130px 90px 130px 30px;
  background-color: #000;
}

.road-copy-inner {
  max-width: 620px;
}

.road-copy p {
  margin: 10px 0 38px;
}

.road-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
}

.road-film {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hl-color-white);
}

.road-film span {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px dashed rgba(var(--hl-color-primary-rgb), 0.8);
  color: var(--hl-color-primary);
  transition: background 0.3s ease, color 0.3s ease;
}

.road-film:hover {
  color: var(--hl-color-primary);
}

.road-film:hover span {
  background: var(--hl-color-primary);
  color: var(--hl-color-night);
}

/* the champagne panel keeps the base's dotted texture */
.road-panel {
  display: flex;
  align-items: center;
  padding: 110px 60px 110px 70px;
  background-color: var(--hl-color-primary);
  background-image: radial-gradient(rgba(255, 255, 255, 0.35) 1px, transparent 1.5px);
  background-size: 12px 12px;
}

.road-track {
  position: relative;
  width: 100%;
  max-width: 420px;
  padding-left: 70px;
}

.road-line {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 26px;
  background: repeating-linear-gradient(180deg, var(--hl-color-night) 0 16px, transparent 16px 30px);
}

.road-car {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 4px;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--hl-color-night);
  color: var(--hl-color-primary);
  font-size: 17px;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.6);
}

.road-stop {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 6px 0;
  opacity: 0.45;
  transition: opacity 0.4s ease;
}

.road-stop + .road-stop {
  margin-top: 44px;
}

.road-stop::before {
  content: "";
  position: absolute;
  left: -49px;
  top: 14px;
  width: 12px;
  height: 12px;
  background: var(--hl-color-primary);
  border: 2px solid var(--hl-color-night);
  transform: rotate(45deg);
  transition: background 0.3s ease;
}

.road-stop.is-passed {
  opacity: 1;
}

.road-stop.is-passed::before {
  background: var(--hl-color-night);
}

.road-stop b {
  font-family: var(--hl-ff-heading);
  font-size: 34px;
  font-weight: 400;
  line-height: 1;
  color: var(--hl-color-night);
}

.road-stop span {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hl-color-night);
}

/*======================
30. Wedding Extras
========================*/
/* Home 3: the base's six feature cards with ghost numerals top right */
.extra-card {
  position: relative;
  height: 100%;
  padding: 50px 42px 44px;
  overflow: hidden;
  background: var(--hl-color-white);
  border: 1px solid var(--hl-color-line);
  transition: transform 0.45s var(--hl-ease), box-shadow 0.45s ease, background 0.4s ease;
}

.extra-card .hl-ghost {
  position: absolute;
  top: 18px;
  right: 22px;
  font-size: 100px;
}

.extra-card > i {
  display: block;
  margin-bottom: 26px;
  font-size: 44px;
  line-height: 1;
  color: var(--hl-color-primary-deep);
  transition: transform 0.45s var(--hl-ease);
}

.extra-card > i.fas {
  font-size: 34px;
}

.extra-card h3 {
  margin-bottom: 10px;
  font-size: 28px;
}

.extra-card p {
  margin: 0;
}

.extra-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--hl-shadow);
}

.extra-card:hover > i {
  transform: rotate(-8deg) scale(1.08);
}

/*======================
31. Rate Card
========================*/
/* Home 3: the base's two-column menu, now a rate card - square cabin thumbs,
   the class name with a dotted leader to its hourly rate - then the base's
   three big photos over a ground band, a big steering-wheel glyph faded behind */
.hl-rate-card {
  position: relative;
  z-index: 0;
  overflow: hidden;
}

.rate-watermark {
  position: absolute;
  z-index: -1;
  top: 90px;
  left: -30px;
  font-size: 260px;
  line-height: 1;
  color: rgba(var(--hl-color-primary-rgb), 0.18);
}

.rate-item {
  display: flex;
  align-items: center;
  gap: 24px;
}

.rate-thumb {
  flex: 0 0 96px;
  height: 96px;
}

.rate-thumb img {
  position: absolute;
  inset: 0;
}

.rate-text {
  flex: 1 1 auto;
  min-width: 0;
}

.rate-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.rate-name {
  flex: 0 0 auto;
  margin: 0;
  font-size: 28px;
}

.rate-leader {
  flex: 1 1 auto;
  min-width: 20px;
  border-bottom: 2px dotted rgba(var(--hl-color-night-rgb), 0.2);
  transform: translateY(-6px);
}

.rate-price {
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 600;
}

.rate-price b {
  font-family: var(--hl-ff-heading);
  font-size: 30px;
  font-weight: 400;
  color: var(--hl-color-primary-deep);
}

.rate-text p {
  margin: 4px 0 0;
  font-size: 15px;
}

.rate-text p b {
  color: var(--hl-color-ink);
}

.rate-photos {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 90px;
  padding: 0 40px;
}

.rate-photos::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -100vw;
  right: -100vw;
  top: 45%;
  bottom: 0;
  background: var(--hl-color-ground);
}

.rate-photos .hl-frame {
  aspect-ratio: 1 / 1;
}

.rate-photos img {
  position: absolute;
  inset: 0;
}

/*======================
32. Book A Ride
========================*/
/* three steps on white cards beside a sticky night trip sheet */
.rq-progress {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 30px;
}

.rq-progress li {
  position: relative;
  border-top: 3px solid var(--hl-color-line);
  transition: border-color 0.4s ease;
}

.rq-progress li.is-current,
.rq-progress li.is-done {
  border-top-color: var(--hl-color-primary);
}

.rq-progress button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 18px 0 0;
  border: 0;
  background: none;
  font-family: var(--hl-ff-heading);
  font-size: 22px;
  color: var(--hl-color-body);
  text-align: left;
  cursor: default;
}

.rq-progress button span {
  font-family: var(--hl-ff-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--hl-color-primary-deep);
}

.rq-progress li.is-current button {
  color: var(--hl-color-ink);
}

.rq-progress li.is-done button {
  color: var(--hl-color-ink);
  cursor: pointer;
}

.rq-step {
  min-width: 0;
  margin: 0 0 30px;
  padding: 50px 50px 46px;
  border: 0;
  background: var(--hl-color-white);
  box-shadow: var(--hl-shadow-soft);
}

.rq-title {
  float: left;
  width: 100%;
  margin-bottom: 30px;
  font-family: var(--hl-ff-heading);
  font-size: 38px;
  line-height: 1.1;
  color: var(--hl-color-ink);
}

.rq-title + * {
  clear: both;
}

.rq-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0 34px;
  margin-bottom: 34px;
  border-bottom: 1px solid var(--hl-color-line);
}

.rq-lead {
  margin-bottom: 26px;
}

.rq-warn {
  margin: 26px 0 0;
  padding: 14px 18px;
  border-left: 3px solid var(--hl-color-danger);
  background: rgba(180, 65, 47, 0.06);
  font-size: 14px;
  font-weight: 600;
  color: var(--hl-color-danger);
}

.rq-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px;
  margin-top: 40px;
}

.rq-nav > :only-child {
  margin-left: auto;
}

/* the car list: every class priced for this trip */
.rq-cars {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.rq-car {
  position: relative;
  display: grid;
  grid-template-columns: 150px 1fr auto;
  gap: 24px;
  align-items: center;
  margin: 0;
  padding: 14px 24px 14px 14px;
  border: 1px solid var(--hl-color-line);
  cursor: pointer;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}

.rq-car input {
  position: absolute;
  opacity: 0;
}

.rq-car-media {
  height: 96px;
  overflow: hidden;
}

.rq-car-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rq-car-text b {
  display: block;
  font-family: var(--hl-ff-heading);
  font-size: 26px;
  font-weight: 400;
  color: var(--hl-color-ink);
}

.rq-car-text span {
  font-size: 14px;
}

.rq-car-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.rq-car-price b {
  font-family: var(--hl-ff-heading);
  font-size: 30px;
  font-weight: 400;
  color: var(--hl-color-primary-deep);
}

.rq-car-price small {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.rq-car:hover {
  border-color: var(--hl-color-primary);
}

.rq-car.is-picked {
  border-color: var(--hl-color-night);
  box-shadow: var(--hl-shadow-soft);
}

.rq-car.is-picked::after {
  opacity: 1;
}

.rq-car:focus-within {
  outline: 2px solid var(--hl-color-primary-deep);
  outline-offset: 2px;
}

.rq-car.is-closed {
  opacity: 0.45;
  cursor: not-allowed;
}

.rq-car::after {
  content: "\f00c";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 11px;
  background: var(--hl-color-night);
  color: var(--hl-color-primary);
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* the trip sheet */
.rq-sheet {
  position: sticky;
  top: 110px;
  padding: 34px 34px 30px;
  background-color: var(--hl-color-night);
  color: var(--hl-color-body-night);
  box-shadow: var(--hl-shadow);
}

.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--hl-color-line-night);
}

.sheet-label {
  font-family: var(--hl-ff-heading);
  font-size: 30px;
  color: var(--hl-color-white);
}

.sheet-head img {
  width: 118px;
}

.sheet-route {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px 0 24px 30px;
  border-bottom: 1px solid var(--hl-color-line-night);
}

.sheet-route .route-line {
  position: absolute;
  left: 5px;
  top: 34px;
  bottom: 34px;
}

.route-point {
  position: relative;
  display: flex;
  flex-direction: column;
}

.route-point::before {
  content: "";
  position: absolute;
  left: -30px;
  top: 5px;
  width: 12px;
  height: 12px;
  background: var(--hl-color-night);
  border: 2px solid var(--hl-color-primary);
  transform: rotate(45deg);
}

.route-point.is-end::before {
  background: var(--hl-color-primary);
}

.route-point span,
.sheet-facts dt,
.sheet-money dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.route-point b {
  font-size: 16px;
  color: var(--hl-color-white);
}

.sheet-facts {
  padding: 16px 0;
  border-bottom: 1px solid var(--hl-color-line-night);
}

.sheet-facts div,
.sheet-money div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0;
}

.sheet-facts dd,
.sheet-money dd {
  margin: 0;
  text-align: right;
  font-size: 14px;
  font-weight: 600;
  color: var(--hl-color-white);
}

.sheet-money {
  padding: 16px 0 0;
}

.sheet-money .is-total {
  margin-top: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--hl-color-line-night);
}

.sheet-money .is-total dt {
  font-size: 13px;
  color: var(--hl-color-white);
}

.sheet-money .is-total dd {
  font-family: var(--hl-ff-heading);
  font-size: 44px;
  font-weight: 400;
  line-height: 1;
  color: var(--hl-color-primary);
}

.sheet-note {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px dashed var(--hl-color-line-night);
  font-size: 13px;
}

.sheet-note:empty {
  display: none;
}

/*======================
33. Vehicle Details
========================*/
/* the base's plane-details page: a white title card over the gallery, the
   thumbnails under it, then the car in blocks beside a sticky quote widget */
.vehicle-head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  width: calc(100% - 50px);
  margin-bottom: -60px;
  padding: 34px 40px;
  background: var(--hl-color-white);
  box-shadow: var(--hl-shadow-soft);
}

.vehicle-head .hl-eyebrow {
  margin-bottom: 8px;
}

.vehicle-name {
  margin: 0;
  font-size: clamp(2.2rem, 1.8rem + 1.4vw, 3.2rem);
}

.vehicle-rate {
  flex: 0 0 auto;
  color: var(--hl-color-body);
}

.vehicle-rate b {
  font-family: var(--hl-ff-heading);
  font-size: 46px;
  font-weight: 400;
  color: var(--hl-color-primary-deep);
}

.vehicle-rate small {
  margin-left: 6px;
  font-size: 14px;
  font-weight: 700;
}

.gallery-main {
  position: relative;
  height: 540px;
}

.gallery-main .swiper-slide {
  background: var(--hl-color-night);
}

.gallery-main .swiper-slide > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-stage {
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 60px 60px;
  background: linear-gradient(180deg, var(--hl-color-ground) 0%, var(--hl-color-ground) 70%, #ECEAE4 70.3%, #F2F1ED 100%);
}

.gallery-stage img {
  width: 82%;
  height: auto;
}

.gallery-bar {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  background: var(--hl-color-night);
}

.gallery-count {
  padding: 0 22px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--hl-color-body-night);
}

.gallery-count b {
  color: var(--hl-color-white);
}

.gallery-bar button {
  width: 54px;
  height: 54px;
  border: 0;
  border-left: 1px solid var(--hl-color-line-night);
  background: transparent;
  color: var(--hl-color-white);
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}

.gallery-bar button:hover {
  background: var(--hl-color-primary);
  color: var(--hl-color-night);
}

.gallery-thumbs {
  margin-top: 12px;
}

.gallery-thumbs .swiper-slide {
  height: 104px;
  overflow: hidden;
  cursor: pointer;
  background: var(--hl-color-ground);
  opacity: 0.55;
  transition: opacity 0.3s ease;
}

.gallery-thumbs .swiper-slide-thumb-active {
  opacity: 1;
  box-shadow: inset 0 -3px 0 var(--hl-color-primary);
}

.gallery-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* jump bar */
.detail-nav {
  position: sticky;
  z-index: 5;
  top: 80px;
  display: flex;
  flex-wrap: wrap;
  gap: 0 32px;
  margin: 50px 0 10px;
  padding: 0 4px;
  background: var(--hl-color-ground);
  border-bottom: 1px solid var(--hl-color-line);
}

.detail-nav a {
  margin-bottom: -1px;
  padding: 18px 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hl-color-body);
  border-bottom: 2px solid transparent;
}

.detail-nav a:hover,
.detail-nav a.is-active {
  color: var(--hl-color-ink);
  border-bottom-color: var(--hl-color-primary-deep);
}

.detail-block {
  padding-top: 56px;
}

.detail-title {
  margin-bottom: 26px;
  font-size: 36px;
}

/* specification plate */
.spec-plate {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 40px;
  padding: 16px 34px;
  background: var(--hl-color-white);
  border-top: 3px solid var(--hl-color-primary);
}

.spec-row {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid var(--hl-color-line);
  font-size: 15px;
}

.spec-row i {
  font-size: 22px;
  line-height: 1;
  color: var(--hl-color-primary-deep);
}

.spec-row i.far {
  font-size: 17px;
}

.spec-row > b,
.spec-val {
  font-weight: 700;
  color: var(--hl-color-ink);
}

.spec-val b {
  font-family: var(--hl-ff-heading);
  font-size: 22px;
  font-weight: 400;
}

.spec-note {
  margin: 16px 0 0;
  font-size: 14px;
}

/* cabin tiles */
.cabin-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hl-color-line);
  border: 1px solid var(--hl-color-line);
}

.cabin-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 30px 26px;
  background: var(--hl-color-white);
  transition: background 0.3s ease;
}

.cabin-item i {
  margin-bottom: 14px;
  font-size: 34px;
  line-height: 1;
  color: var(--hl-color-primary-deep);
}

.cabin-item i.fas {
  font-size: 26px;
}

.cabin-item b {
  font-family: var(--hl-ff-heading);
  font-size: 22px;
  font-weight: 400;
  color: var(--hl-color-ink);
}

.cabin-item span {
  font-size: 14px;
}

.cabin-item:hover {
  background: var(--hl-color-ground);
}

/* policies */
.policy-list li {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 10px;
  padding: 20px 0;
  border-bottom: 1px solid var(--hl-color-line);
}

.policy-list li:first-child {
  border-top: 1px solid var(--hl-color-line);
}

.policy-no {
  font-family: var(--hl-ff-heading);
  font-size: 30px;
  line-height: 1;
  color: var(--hl-color-primary-deep);
}

.policy-list b {
  display: block;
  margin-bottom: 4px;
  font-size: 17px;
  color: var(--hl-color-ink);
}

.policy-list p {
  margin: 0;
}

/* cancellation timeline */
.cancel-line {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 34px;
}

.cancel-step {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 16px 0 0;
  border-top: 4px solid var(--hl-color-success);
}

.cancel-step.is-half {
  border-top-color: var(--hl-color-primary);
}

.cancel-step.is-none {
  border-top-color: var(--hl-color-night);
}

.cancel-step span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.cancel-step b {
  font-size: 15px;
  color: var(--hl-color-ink);
}

.map-frame {
  height: 380px;
  background: var(--hl-color-line);
}

.map-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(1) contrast(1.05);
}

/* the quote widget */
.hl-widget {
  position: sticky;
  top: 110px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 36px 34px 34px;
  background: var(--hl-color-white);
  border-top: 3px solid var(--hl-color-primary);
  box-shadow: var(--hl-shadow-soft);
}

.widget-head .hl-eyebrow {
  margin-bottom: 8px;
}

.widget-head h3 {
  margin: 0;
  font-size: 32px;
}

.widget-tabs {
  display: flex;
  gap: 26px;
  border-bottom: 1px solid var(--hl-color-line);
}

.widget-tabs .qq-tab span {
  padding: 12px 0;
  font-size: 12px;
}

.widget-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.widget-out {
  padding: 16px 0 0;
  border-top: 1px solid var(--hl-color-line);
}

.widget-out div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 0;
  font-size: 14px;
}

.widget-out dd {
  margin: 0;
  font-weight: 700;
  color: var(--hl-color-ink);
}

.widget-out .is-total {
  align-items: baseline;
  margin-top: 8px;
}

.widget-out .is-total dt {
  font-weight: 700;
  color: var(--hl-color-ink);
}

.widget-out .is-total dd {
  font-family: var(--hl-ff-heading);
  font-size: 38px;
  font-weight: 400;
  color: var(--hl-color-primary-deep);
}

.widget-note {
  margin: -10px 0 0;
  font-size: 13px;
}

.hl-widget .rq-warn {
  margin: 0;
}

.widget-go {
  justify-content: center;
}

/*======================
34. Fleet Pages
========================*/
/* the base's plane grid and list, with a filter column on the left */
.hl-filter {
  position: sticky;
  top: 110px;
  padding: 34px 30px 30px;
  background: var(--hl-color-white);
  border-top: 3px solid var(--hl-color-primary);
  box-shadow: var(--hl-shadow-soft);
}

.filter-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.filter-head h3 {
  margin: 0;
  font-size: 28px;
}

.filter-head .hl-link {
  border: 0;
  background: none;
  padding: 0 0 4px;
  cursor: pointer;
}

.filter-group {
  min-width: 0;
  margin: 0;
  padding: 22px 0;
  border: 0;
  border-bottom: 1px solid var(--hl-color-line);
}

.filter-group .field-label {
  float: left;
  width: 100%;
  margin-bottom: 14px;
}

.filter-group .field-label + * {
  clear: both;
}

.filter-group .hl-check {
  align-items: center;
  margin-top: 12px;
}

.filter-group .hl-check em {
  margin-left: auto;
  font-style: normal;
  font-size: 13px;
  color: var(--hl-color-primary-deep);
}

.filter-help {
  display: flex;
  gap: 14px;
  margin-top: 24px;
  padding: 20px;
  background-color: var(--hl-color-night);
  color: var(--hl-color-body-night);
  font-size: 14px;
}

.filter-help i {
  font-size: 30px;
  line-height: 1;
  color: var(--hl-color-primary);
}

.filter-help span {
  display: flex;
  flex-direction: column;
}

.filter-help b {
  color: var(--hl-color-white);
}

.filter-help a {
  font-family: var(--hl-ff-heading);
  font-size: 22px;
  color: var(--hl-color-primary);
}

.fleet-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--hl-color-line);
}

.fleet-bar p {
  margin: 0;
}

.fleet-bar b {
  color: var(--hl-color-ink);
}

.view-switch {
  display: flex;
  gap: 6px;
}

.view-switch a {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hl-color-line);
  color: var(--hl-color-body);
}

.view-switch a.is-active,
.view-switch a:hover {
  background: var(--hl-color-night);
  border-color: var(--hl-color-night);
  color: var(--hl-color-primary);
}

.filter-empty {
  padding: 70px 30px;
  text-align: center;
  background: var(--hl-color-white);
}

.filter-empty i {
  font-size: 50px;
  line-height: 1;
  color: var(--hl-color-primary-deep);
}

.filter-empty h3 {
  margin: 18px 0 8px;
}

.filter-empty p {
  max-width: 460px;
  margin: 0 auto;
}

/*======================
35. Rates
========================*/
/* the rate card: three tabs, each a matrix of classes x fares. On narrow
   screens a row stacks into label / value pairs - it never scrolls sideways */
.rates-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 34px;
}

.rates-tab {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 28px;
  border: 1px solid var(--hl-color-line);
  background: transparent;
  font-family: var(--hl-ff-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hl-color-body);
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.rates-tab i {
  font-size: 18px;
  color: var(--hl-color-primary-deep);
}

.rates-tab.is-active {
  background: var(--hl-color-night);
  border-color: var(--hl-color-night);
  color: var(--hl-color-white);
}

.rates-tab.is-active i {
  color: var(--hl-color-primary);
}

.rate-matrix {
  background: var(--hl-color-white);
  border-top: 3px solid var(--hl-color-primary);
  box-shadow: var(--hl-shadow-soft);
}

.rm-row {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  align-items: center;
  gap: 20px;
  padding: 18px 30px;
  border-bottom: 1px solid var(--hl-color-line);
  transition: background 0.3s ease;
}

.rm-row:last-child {
  border-bottom: 0;
}

.rm-row:hover {
  background: var(--hl-color-ground);
}

.rm-car {
  display: flex;
  align-items: center;
  gap: 18px;
}

.rm-car img {
  width: 92px;
  height: 64px;
  flex: 0 0 92px;
  object-fit: cover;
}

.rm-car b {
  display: block;
  font-family: var(--hl-ff-heading);
  font-size: 24px;
  font-weight: 400;
  color: var(--hl-color-ink);
}

.rm-car small {
  font-size: 13px;
}

.rm-cell {
  display: flex;
  flex-direction: column;
}

.rm-cell span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.rm-cell b {
  font-family: var(--hl-ff-heading);
  font-size: 26px;
  font-weight: 400;
  color: var(--hl-color-ink);
}

.rates-note {
  margin: 20px 0 0;
  font-size: 14px;
}

.route-fields {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 26px;
  align-items: end;
  margin-bottom: 30px;
}

.route-meta {
  margin: 0;
  padding-bottom: 12px;
  font-weight: 600;
  color: var(--hl-color-ink);
}

.hl-diamond-cta.is-slim {
  padding: 120px 0 130px;
}

/*======================
36. Services
========================*/
/* the base's places grid: a photo with its number, the glyph, name, line and
   a "from" price computed by the engine; then four steps along a road */
.service-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--hl-color-white);
  transition: transform 0.45s var(--hl-ease), box-shadow 0.45s ease;
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--hl-shadow);
}

.service-media {
  aspect-ratio: 4 / 3;
}

.service-media img {
  position: absolute;
  inset: 0;
}

.service-no {
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: 0;
  padding: 12px 20px;
  background: var(--hl-color-night);
  font-family: var(--hl-ff-heading);
  font-size: 24px;
  line-height: 1;
  color: var(--hl-color-primary);
}

.service-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 30px 32px 32px;
}

.service-body > i {
  margin-bottom: 16px;
  font-size: 40px;
  line-height: 1;
  color: var(--hl-color-primary-deep);
  transition: transform 0.45s var(--hl-ease);
}

.service-body > i.fas,
.service-body > i.far {
  font-size: 30px;
}

.service-card:hover .service-body > i {
  transform: translateX(6px);
}

.service-body h3 {
  margin-bottom: 10px;
  font-size: 30px;
}

.service-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px dashed var(--hl-color-line);
  font-size: 14px;
}

.service-foot b {
  color: var(--hl-color-primary-deep);
}

/* four steps along a road */
.steps-road {
  position: relative;
}

.steps-line {
  position: absolute;
  top: 33px;
  left: 12%;
  right: 12%;
}

.step-item {
  position: relative;
  text-align: center;
  padding: 0 10px;
}

.step-dot {
  position: relative;
  z-index: 1;
  width: 68px;
  height: 68px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 26px;
  border-radius: 50%;
  background: var(--hl-color-night);
  color: var(--hl-color-primary);
  font-family: var(--hl-ff-heading);
  font-size: 24px;
  box-shadow: 0 0 0 10px var(--hl-color-white);
  transition: background 0.3s ease, color 0.3s ease;
}

.step-item:hover .step-dot {
  background: var(--hl-color-primary);
  color: var(--hl-color-night);
}

.step-item h3 {
  margin-bottom: 8px;
  font-size: 28px;
}

.step-item p {
  margin: 0;
}

/* service details */
.sd-media {
  height: 480px;
}

.sd-media img {
  position: absolute;
  inset: 0;
}

.sd-title {
  font-size: clamp(2.2rem, 1.8rem + 1.4vw, 3.2rem);
}

.pickup-steps li {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--hl-color-line);
}

.pickup-steps li:first-child {
  border-top: 1px solid var(--hl-color-line);
}

.pickup-time {
  font-family: var(--hl-ff-heading);
  font-size: 26px;
  line-height: 1.1;
  color: var(--hl-color-primary-deep);
}

.pickup-steps b {
  display: block;
  margin-bottom: 4px;
  font-size: 17px;
  color: var(--hl-color-ink);
}

.pickup-steps p {
  margin: 0;
}

/* sidebar cards (service details, FAQ, journal) */
.sd-sidebar,
.journal-side {
  position: sticky;
  top: 110px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.side-card {
  padding: 34px 32px;
  background: var(--hl-color-white);
  box-shadow: var(--hl-shadow-soft);
}

.side-card.is-night {
  background-color: var(--hl-color-night);
  color: var(--hl-color-body-night);
  box-shadow: none;
}

.side-title {
  display: block;
  margin-bottom: 20px;
  font-family: var(--hl-ff-heading);
  font-size: 28px;
  font-weight: 400;
  color: var(--hl-color-ink);
}

.side-services li + li {
  border-top: 1px solid var(--hl-color-line);
}

.side-services a {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 15px 0;
  font-weight: 600;
  color: var(--hl-color-ink);
  transition: color 0.3s ease, padding 0.35s var(--hl-ease);
}

.side-services a i:first-child {
  font-size: 22px;
  color: var(--hl-color-primary-deep);
}

.side-services a i.fas:first-child,
.side-services a i.far:first-child {
  font-size: 17px;
}

.side-services a i:last-child {
  font-size: 11px;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.3s ease, transform 0.35s var(--hl-ease);
}

.side-services a:hover,
.side-services li.is-current a {
  color: var(--hl-color-primary-deep);
  padding-left: 8px;
}

.side-services a:hover i:last-child,
.side-services li.is-current a i:last-child {
  opacity: 1;
  transform: translateX(0);
}

.side-glyph {
  display: block;
  margin-bottom: 16px;
  font-size: 44px;
  line-height: 1;
  color: var(--hl-color-primary);
}

.side-phone {
  display: block;
  margin-bottom: 10px;
  font-family: var(--hl-ff-heading);
  font-size: 32px;
  color: var(--hl-color-white);
}

.side-phone:hover {
  color: var(--hl-color-primary);
}

.side-card.is-night p {
  margin-bottom: 24px;
}

.side-promo {
  margin-bottom: 24px;
  font-size: 30px;
  color: var(--hl-color-white);
}

/* FAQ accordion (native details) */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item details {
  background: var(--hl-color-white);
  border-left: 3px solid transparent;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.faq-item details[open] {
  border-left-color: var(--hl-color-primary);
  box-shadow: var(--hl-shadow-soft);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 26px;
  font-family: var(--hl-ff-heading);
  font-size: 22px;
  line-height: 1.25;
  color: var(--hl-color-ink);
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary i {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hl-color-line);
  font-size: 11px;
  color: var(--hl-color-primary-deep);
  transition: transform 0.35s var(--hl-ease), background 0.3s ease, color 0.3s ease;
}

.faq-item details[open] summary i {
  transform: rotate(45deg);
  background: var(--hl-color-night);
  border-color: var(--hl-color-night);
  color: var(--hl-color-primary);
}

.faq-item details p {
  margin: 0;
  padding: 0 26px 24px;
}

/*======================
37. Offers
========================*/
/* offer cards: photo left, the state flag, the trip, was / now / save and
   the dates - all worked out from today and the rate card */
.offers-filter {
  margin-bottom: 0;
}

.offer-card {
  display: grid;
  grid-template-columns: 42% 1fr;
  height: 100%;
  background: var(--hl-color-white);
  transition: transform 0.45s var(--hl-ease), box-shadow 0.45s ease;
}

.offer-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--hl-shadow);
}

.offer-media img {
  position: absolute;
  inset: 0;
}

.offer-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 34px 32px;
}

.offer-flag {
  margin-bottom: 14px;
  padding: 7px 14px;
  background: var(--hl-color-night);
  color: var(--hl-color-primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.is-upcoming .offer-flag {
  background: var(--hl-color-primary);
  color: var(--hl-color-night);
}

.is-ended .offer-card {
  opacity: 0.6;
}

.is-ended .offer-flag {
  background: var(--hl-color-line);
  color: var(--hl-color-body);
}

.offer-body h3 {
  margin-bottom: 8px;
  font-size: 30px;
}

.offer-body p {
  margin-bottom: 16px;
  font-size: 15px;
}

.offer-prices {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin-bottom: 8px;
}

.offer-prices del {
  font-size: 16px;
  color: var(--hl-color-body);
}

.offer-prices > b {
  font-family: var(--hl-ff-heading);
  font-size: 42px;
  font-weight: 400;
  line-height: 1;
  color: var(--hl-color-primary-deep);
}

.offer-prices span {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.offer-prices span b {
  color: var(--hl-color-success);
}

.offer-dates {
  margin-bottom: 18px;
  font-size: 13px;
}

.offer-body .hl-link {
  margin-top: auto;
}

/*======================
38. Company Pages
========================*/
/* about, chauffeurs, corporate intro, gallery, FAQ and contact */
.about-photos {
  position: relative;
  padding: 0 90px 90px 0;
}

.about-photo.is-main {
  height: 540px;
}

.about-photo.is-small {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 46%;
  height: 300px;
  border: 10px solid var(--hl-color-ground);
}

.about-photo img {
  position: absolute;
  inset: 0;
}

.about-year {
  position: absolute;
  z-index: 3;
  left: -20px;
  bottom: 30px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 26px;
  background-color: var(--hl-color-night);
  color: var(--hl-color-body-night);
  box-shadow: var(--hl-shadow);
}

.about-year b {
  font-family: var(--hl-ff-heading);
  font-size: 58px;
  font-weight: 400;
  line-height: 1;
  color: var(--hl-color-primary);
}

.about-year > span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.5;
}

.about-copy {
  padding-left: 30px;
}

.about-sign {
  display: flex;
  flex-direction: column;
  margin: 10px 0 34px;
}

.sign-script {
  font-family: var(--hl-ff-heading);
  font-style: italic;
  font-size: 38px;
  line-height: 1.1;
  color: var(--hl-color-primary-deep);
}

.sign-role {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* chauffeur cards */
.team-card {
  height: 100%;
  background: var(--hl-color-white);
  transition: transform 0.45s var(--hl-ease), box-shadow 0.45s ease;
}

.team-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--hl-shadow);
}

.team-media {
  aspect-ratio: 1 / 1;
  background: var(--hl-color-ground);
}

.team-media img {
  position: absolute;
  inset: 0;
  object-position: center top;
  transform-origin: center top;
}

.team-card:hover .team-media img {
  transform: scale(1.05);
}

.team-social {
  position: absolute;
  z-index: 2;
  right: 18px;
  bottom: 18px;
  display: flex;
  gap: 6px;
}

.team-social a {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--hl-color-night);
  color: var(--hl-color-white);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.35s ease, transform 0.45s var(--hl-ease), background 0.3s ease, color 0.3s ease;
}

.team-social li + li a {
  transition-delay: 0.05s;
}

.team-card:hover .team-social a,
.team-social a:focus-visible {
  opacity: 1;
  transform: translateY(0);
}

.team-social a:hover {
  background: var(--hl-color-primary);
  color: var(--hl-color-night);
}

.team-body {
  padding: 26px 30px 30px;
}

.team-name {
  margin-bottom: 2px;
  font-size: 30px;
}

.team-role {
  display: block;
  margin-bottom: 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hl-color-primary-deep);
}

.team-facts div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-top: 1px solid var(--hl-color-line);
  font-size: 14px;
}

.team-facts dd {
  margin: 0;
  font-weight: 700;
  color: var(--hl-color-ink);
}

.join-photo,
.corp-photo {
  height: 520px;
}

.join-photo img,
.corp-photo img {
  position: absolute;
  inset: 0;
}

.join-cta {
  margin-top: 34px;
}

.corp-intro-copy {
  padding-left: 30px;
}

.corp-calc-wrap {
  max-width: 980px;
  margin: 0 auto;
}

/* the white form card (contact, corporate request) */
.hl-form-card {
  padding: 50px 50px 46px;
  background: var(--hl-color-white);
  border-top: 3px solid var(--hl-color-primary);
  box-shadow: var(--hl-shadow-soft);
}

.hl-form-card > .hl-btn {
  margin-top: 36px;
}

/* gallery: a tight mosaic with tall and wide tiles */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 280px;
  gap: 20px;
}

.gallery-tile.is-tall {
  grid-row: span 2;
}

.gallery-tile.is-wide {
  grid-column: span 2;
}

.gallery-tile img {
  position: absolute;
  inset: 0;
}

.tile-cap {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: linear-gradient(0deg, rgba(var(--hl-color-night-rgb), 0.85), transparent);
  color: var(--hl-color-white);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.35s ease, transform 0.45s var(--hl-ease);
}

.tile-cap b {
  font-family: var(--hl-ff-heading);
  font-size: 22px;
  font-weight: 400;
}

.tile-cap i {
  color: var(--hl-color-primary);
}

.gallery-tile:hover .tile-cap,
.gallery-tile:focus-visible .tile-cap {
  opacity: 1;
  transform: translateY(0);
}

/* FAQ */
.faq-side {
  position: sticky;
  top: 110px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.faq-search label {
  display: block;
  margin-bottom: 10px;
  font-family: var(--hl-ff-heading);
  font-size: 26px;
  color: var(--hl-color-ink);
}

.faq-cats {
  display: flex;
  flex-direction: column;
  background: var(--hl-color-white);
  box-shadow: var(--hl-shadow-soft);
}

.faq-cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  border: 0;
  border-left: 3px solid transparent;
  background: transparent;
  font-family: var(--hl-ff-body);
  font-size: 15px;
  font-weight: 700;
  color: var(--hl-color-body);
  text-align: left;
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.faq-cat + .faq-cat {
  border-top: 1px solid var(--hl-color-line);
}

.faq-cat span {
  color: var(--hl-color-primary-deep);
}

.faq-cat:hover,
.faq-cat.is-active {
  color: var(--hl-color-ink);
  border-left-color: var(--hl-color-primary);
  background: var(--hl-color-ground);
}

.faq-count {
  margin-bottom: 18px;
}

.faq-count b {
  color: var(--hl-color-ink);
}

/* contact */
.contact-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 40px 36px;
  background: var(--hl-color-white);
  border-top: 3px solid var(--hl-color-primary);
  box-shadow: var(--hl-shadow-soft);
}

.contact-card > i {
  margin-bottom: 18px;
  font-size: 44px;
  line-height: 1;
  color: var(--hl-color-primary-deep);
}

.contact-card h3 {
  margin-bottom: 6px;
  font-size: 30px;
}

.contact-card a,
.contact-card p {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 700;
  color: var(--hl-color-ink);
}

.contact-card a:hover {
  color: var(--hl-color-primary-deep);
}

.desk-status {
  display: flex;
  flex-direction: column;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px dashed var(--hl-color-line);
  width: 100%;
  font-size: 14px;
}

.desk-status b {
  color: var(--hl-color-success);
}

.desk-status.is-closed b {
  color: var(--hl-color-danger);
}

.contact-map {
  height: 330px;
  margin-top: 34px;
}

/*======================
39. Journal Pages
========================*/
/* the base's news list and news details: post formats, a sidebar, the
   article with tools, author, neighbours and comments */
.post-count {
  margin-bottom: 26px;
}

.post-count b {
  color: var(--hl-color-ink);
}

.post-reset {
  margin-left: 12px;
  border: 0;
  background: none;
  cursor: pointer;
}

.post-item {
  margin-bottom: 40px;
  background: var(--hl-color-white);
}

.post-media {
  aspect-ratio: 16 / 8;
}

.post-media > img {
  position: absolute;
  inset: 0;
}

.post-format-mark {
  position: absolute;
  z-index: 2;
  top: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--hl-color-night);
  color: var(--hl-color-primary);
}

.film-play.is-small {
  width: 104px;
  height: 104px;
  margin: -52px 0 0 -52px;
}

.film-play.is-small i {
  width: 62px;
  height: 62px;
}

.post-body {
  padding: 36px 40px 40px;
}

.post-title {
  margin-bottom: 14px;
  font-size: clamp(1.9rem, 1.6rem + 1vw, 2.6rem);
}

.post-title a:hover {
  color: var(--hl-color-primary-deep);
}

.post-body p {
  margin-bottom: 26px;
}

/* quote and link formats on night */
.post-quote,
.post-link {
  position: relative;
  display: block;
  padding: 50px 50px 46px;
  background-color: var(--hl-color-night);
  color: var(--hl-color-body-night);
}

.post-quote img {
  width: 46px;
  margin-bottom: 20px;
  opacity: 0.5;
}

.post-quote blockquote {
  margin: 0 0 20px;
  font-family: var(--hl-ff-heading);
  font-size: 30px;
  line-height: 1.3;
  color: var(--hl-color-white);
}

.post-quote-link {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hl-color-primary);
}

.post-link {
  display: flex;
  align-items: center;
  gap: 26px;
}

.post-link i {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--hl-color-primary);
  border-radius: 50%;
  color: var(--hl-color-primary);
  font-size: 20px;
}

.post-link span {
  display: flex;
  flex-direction: column;
  font-size: 14px;
  word-break: break-all;
}

.post-link b {
  font-family: var(--hl-ff-heading);
  font-size: 30px;
  font-weight: 400;
  color: var(--hl-color-white);
  word-break: normal;
}

.post-link:hover b {
  color: var(--hl-color-primary);
}

/* pagination */
.hl-pagination ul {
  display: flex;
  gap: 8px;
}

.hl-pagination a {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hl-color-line);
  font-weight: 700;
  color: var(--hl-color-ink);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.hl-pagination a:hover,
.hl-pagination a.is-active {
  background: var(--hl-color-night);
  border-color: var(--hl-color-night);
  color: var(--hl-color-primary);
}

.hl-pagination a.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* sidebar pieces */
.side-cats li + li {
  border-top: 1px solid var(--hl-color-line);
}

.side-cats a {
  display: flex;
  justify-content: space-between;
  padding: 13px 0;
  font-weight: 600;
  color: var(--hl-color-ink);
  transition: color 0.3s ease, padding 0.35s var(--hl-ease);
}

.side-cats a span {
  color: var(--hl-color-primary-deep);
}

.side-cats a:hover,
.side-cats a.is-active {
  padding-left: 8px;
  color: var(--hl-color-primary-deep);
}

.side-recent li {
  display: flex;
  gap: 16px;
}

.side-recent li + li {
  margin-top: 18px;
}

.recent-thumb {
  flex: 0 0 80px;
  height: 80px;
}

.recent-thumb img {
  position: absolute;
  inset: 0;
}

.side-recent span {
  display: block;
  font-size: 13px;
}

.side-recent div a {
  font-family: var(--hl-ff-heading);
  font-size: 19px;
  line-height: 1.25;
  color: var(--hl-color-ink);
}

.side-recent div a:hover {
  color: var(--hl-color-primary-deep);
}

.side-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.side-tags a {
  padding: 8px 16px;
  border: 1px solid var(--hl-color-line);
  font-size: 13px;
  font-weight: 700;
  color: var(--hl-color-ink);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.side-tags a:hover {
  background: var(--hl-color-night);
  border-color: var(--hl-color-night);
  color: var(--hl-color-primary);
}

/* the single post */
.post-single {
  background: var(--hl-color-white);
  padding-bottom: 50px;
}

.post-lead-media {
  position: relative;
  aspect-ratio: 16 / 9;
}

.post-lead-media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-gallery-wrap {
  position: relative;
}

.post-gallery {
  aspect-ratio: 16 / 9;
}

.post-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-quote.is-lead,
.post-link.is-lead {
  padding: 60px;
}

.post-audio {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 34px;
  align-items: center;
  padding: 40px;
  background-color: var(--hl-color-night);
}

.audio-cover {
  aspect-ratio: 1 / 1;
}

.audio-cover img {
  position: absolute;
  inset: 0;
}

.audio-title {
  margin-bottom: 18px;
  font-size: 30px;
  color: var(--hl-color-white);
}

.audio-player iframe {
  display: block;
  width: 100%;
  height: 120px;
  border: 0;
}

.post-head,
.post-content,
.post-tools,
.post-author,
.post-nav,
.post-comments,
.post-respond {
  margin-left: 50px;
  margin-right: 50px;
}

.post-head {
  padding-top: 40px;
}

.post-single-title {
  font-size: clamp(2.2rem, 1.8rem + 1.6vw, 3.4rem);
}

.post-lead {
  font-size: 19px;
  line-height: 1.7;
  color: var(--hl-color-ink);
}

.post-content h3 {
  margin: 34px 0 14px;
}

.post-pull {
  margin: 34px 0;
  padding: 30px 36px;
  border-left: 3px solid var(--hl-color-primary);
  background: var(--hl-color-ground);
}

.post-pull p {
  margin-bottom: 10px;
  font-family: var(--hl-ff-heading);
  font-size: 26px;
  line-height: 1.35;
  color: var(--hl-color-ink);
}

.post-pull cite {
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hl-color-primary-deep);
}

.post-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 30px 0;
}

.post-pair .hl-frame {
  aspect-ratio: 1 / 1;
}

.post-pair img {
  position: absolute;
  inset: 0;
}

.post-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 0;
  border-top: 1px solid var(--hl-color-line);
  border-bottom: 1px solid var(--hl-color-line);
}

.post-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.post-share > span:first-child {
  margin-right: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hl-color-ink);
}

.post-share a,
.post-share button {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hl-color-line);
  background: transparent;
  color: var(--hl-color-ink);
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.post-share a:hover,
.post-share button:hover {
  background: var(--hl-color-night);
  border-color: var(--hl-color-night);
  color: var(--hl-color-primary);
}

.copy-note {
  font-size: 13px;
  color: var(--hl-color-success);
}

.post-author {
  display: flex;
  gap: 26px;
  margin-top: 40px;
  padding: 34px;
  background-color: var(--hl-color-night);
  color: var(--hl-color-body-night);
}

.post-author img {
  width: 110px;
  height: 110px;
  flex: 0 0 110px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 3px solid var(--hl-color-primary);
}

.post-author h3 {
  margin-bottom: 8px;
  font-size: 28px;
  color: var(--hl-color-white);
}

.post-author .hl-eyebrow {
  margin-bottom: 6px;
  color: var(--hl-color-primary);
}

.post-author p {
  margin: 0;
}

.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 40px;
}

.post-nav a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px 26px;
  border: 1px solid var(--hl-color-line);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.post-nav a.is-next {
  text-align: right;
}

.post-nav span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hl-color-primary-deep);
}

.post-nav a.is-next span {
  justify-content: flex-end;
}

.post-nav b {
  font-family: var(--hl-ff-heading);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--hl-color-ink);
}

.post-nav a:hover {
  border-color: var(--hl-color-primary);
  box-shadow: var(--hl-shadow-soft);
}

.post-comments {
  margin-top: 50px;
}

.comment {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--hl-color-line);
}

.comment > img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}

.comment-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin-bottom: 6px;
}

.comment-head b {
  font-family: var(--hl-ff-heading);
  font-size: 22px;
  font-weight: 400;
  color: var(--hl-color-ink);
}

.comment-head span {
  font-size: 13px;
}

.comment-body p {
  margin-bottom: 10px;
}

.comment-reply {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hl-color-primary-deep);
  cursor: pointer;
}

.comment-list.is-child {
  grid-column: 2;
}

.comment-list.is-child .comment {
  border-bottom: 0;
  padding-bottom: 0;
}

.post-respond {
  margin-top: 50px;
}

.post-respond .hl-btn {
  margin-top: 30px;
}

.reply-note {
  margin-bottom: 20px;
  font-weight: 600;
  color: var(--hl-color-ink);
}

.reply-note .hl-link {
  border: 0;
  background: none;
  cursor: pointer;
}

/*======================
40. Account Pages
========================*/
/* a split card: a night photo panel with a note, the form on white */
.account-card {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  max-width: 1080px;
  margin: 0 auto;
  background: var(--hl-color-white);
  box-shadow: var(--hl-shadow);
}

.account-aside {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: flex-end;
  min-height: 560px;
  padding: 44px;
  overflow: hidden;
  background-color: var(--hl-color-night);
}

.account-aside > img {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.account-aside::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(0deg, rgba(var(--hl-color-night-rgb), 0.92) 0%, rgba(var(--hl-color-night-rgb), 0.2) 70%);
}

.aside-copy h2 {
  margin: 0;
  font-size: 36px;
  color: var(--hl-color-white);
}

.aside-copy .hl-eyebrow {
  color: var(--hl-color-primary);
}

.account-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 56px 56px 50px;
}

.account-title {
  margin: 0;
  font-size: 44px;
}

.account-form > p {
  margin: -12px 0 0;
}

.account-form > p a {
  color: var(--hl-color-primary-deep);
  font-weight: 700;
}

.account-form .hl-btn {
  align-self: flex-start;
}

.account-form .form-status {
  margin: 0;
}

.account-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.password-toggle {
  flex: 0 0 auto;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--hl-color-body);
  cursor: pointer;
}

.password-toggle:hover {
  color: var(--hl-color-ink);
}

.pass-meter {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  font-size: 13px;
}

.meter-bars {
  display: inline-flex;
  gap: 4px;
}

.meter-bars i {
  width: 34px;
  height: 4px;
  background: var(--hl-color-line);
  transition: background 0.3s ease;
}

.pass-meter[data-level="1"] .meter-bars i:nth-child(-n+1),
.pass-meter[data-level="2"] .meter-bars i:nth-child(-n+2) {
  background: var(--hl-color-danger);
}

.pass-meter[data-level="3"] .meter-bars i:nth-child(-n+3) {
  background: var(--hl-color-primary-deep);
}

.pass-meter[data-level="4"] .meter-bars i {
  background: var(--hl-color-success);
}

.match-note {
  display: block;
  margin-top: 8px;
  font-size: 13px;
}

.match-note.is-ok {
  color: var(--hl-color-success);
}

.match-note.is-bad {
  color: var(--hl-color-danger);
}

.account-back {
  margin: 0;
}

/*======================
41. Coming Soon And 404
========================*/
/* minimal chrome: coming soon is a night photo with a countdown; the 404 has
   the sedan parked between the two fours, on a road line */
.hl-soon {
  position: relative;
  z-index: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 80px 0;
  overflow: hidden;
  background-color: var(--hl-color-night);
  color: var(--hl-color-body-night);
  text-align: center;
}

.soon-bg {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hl-soon::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(var(--hl-color-primary-rgb), 0.05) 0 1px, transparent 1px 14px),
    rgba(var(--hl-color-night-rgb), 0.8);
}

.soon-inner {
  max-width: 820px;
  margin: 0 auto;
}

.soon-logo img {
  width: 230px;
  margin-bottom: 50px;
}

.soon-title {
  color: var(--hl-color-white);
}

.soon-title .hl-accent {
  color: var(--hl-color-primary);
}

.soon-date {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.soon-count {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 640px;
  margin: 40px auto;
  border: 1px solid var(--hl-color-line-night);
}

.soon-count div {
  display: flex;
  flex-direction: column;
  padding: 24px 10px;
}

.soon-count div + div {
  border-left: 1px solid var(--hl-color-line-night);
}

.soon-count b {
  font-family: var(--hl-ff-heading);
  font-size: 64px;
  font-weight: 400;
  line-height: 1;
  color: var(--hl-color-white);
}

.soon-count span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hl-color-primary);
}

.hl-newsletter.is-night {
  flex-wrap: wrap;
  background: rgba(255, 255, 255, 0.06);
}

.hl-newsletter.is-night input {
  color: var(--hl-color-white);
}

.hl-newsletter.is-night .form-status {
  flex: 1 1 100%;
  margin: 10px 0 4px;
  text-align: center;
}

.soon-social {
  justify-content: center;
  margin-top: 40px;
}

.hl-error {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 80px 0;
  text-align: center;
  background: var(--hl-color-ground);
}

.error-inner {
  max-width: 820px;
  margin: 0 auto;
}

.error-logo img {
  width: 220px;
  margin-bottom: 40px;
}

.error-code {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  font-family: var(--hl-ff-heading);
  font-size: clamp(8rem, 5rem + 12vw, 16rem);
  line-height: 0.8;
  color: var(--hl-color-ink);
}

.error-code img {
  width: clamp(200px, 22vw, 330px);
  margin-bottom: 4px;
}

.error-road {
  max-width: 560px;
  margin: 14px auto 40px;
}

.error-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 30px;
}

/*======================
42. Forms
========================*/
/* one field language across the site: a bold label, a glyph, the value and
   a champagne underline - the same line as the Quick Quote bar */
.hl-field label,
.field-label {
  display: block;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--hl-color-ink);
}

.field-control {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hl-color-primary);
  transition: border-color 0.3s ease;
}

.field-control.is-area {
  align-items: flex-start;
}

.field-control > i {
  flex: 0 0 auto;
  font-size: 17px;
  color: var(--hl-color-primary-deep);
}

.field-control.is-area > i {
  margin-top: 6px;
}

.field-control .hl-select {
  flex: 1 1 auto;
  min-width: 0;
}

.field-control input,
.field-control textarea {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--hl-ff-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--hl-color-ink);
  resize: vertical;
}

.field-control input::placeholder,
.field-control textarea::placeholder {
  color: #9A9A9A;
}

.field-control input:focus,
.field-control textarea:focus {
  outline: none;
}

.field-control:focus-within {
  border-bottom-color: var(--hl-color-primary-deep);
}

/* checkbox with a square champagne box */
.hl-check {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--hl-color-ink);
  cursor: pointer;
}

.hl-check input {
  position: absolute;
  opacity: 0;
  width: 22px;
  height: 22px;
  margin: 0;
}

.hl-check .check-box {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  border: 1px solid var(--hl-color-primary-deep);
  background: var(--hl-color-white);
  color: transparent;
  font-size: 11px;
  transition: background 0.3s ease, color 0.3s ease;
}

.hl-check input:checked + .check-box {
  background: var(--hl-color-night);
  border-color: var(--hl-color-night);
  color: var(--hl-color-primary);
}

.hl-check input:focus-visible + .check-box {
  outline: 2px solid var(--hl-color-primary-deep);
  outline-offset: 3px;
}

.hl-check small {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--hl-color-body);
}

.hl-check a {
  color: var(--hl-color-primary-deep);
  text-decoration: underline;
}

.hl-check.is-boxed {
  padding: 18px 20px;
  background: var(--hl-color-ground);
}

/* segmented radio (gratuity) */
.rq-segment {
  display: inline-flex;
  flex-wrap: wrap;
  border: 1px solid var(--hl-color-line);
}

.rq-segment label {
  position: relative;
  margin: 0;
  cursor: pointer;
}

.rq-segment input {
  position: absolute;
  opacity: 0;
}

.rq-segment span {
  display: inline-block;
  min-width: 90px;
  padding: 14px 22px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--hl-color-body);
  transition: background 0.3s ease, color 0.3s ease;
}

.rq-segment label + label span {
  border-left: 1px solid var(--hl-color-line);
}

.rq-segment input:checked + span {
  background: var(--hl-color-night);
  color: var(--hl-color-primary);
}

.rq-segment input:focus-visible + span {
  outline: 2px solid var(--hl-color-primary-deep);
  outline-offset: -4px;
}

.form-status {
  margin: 20px 0 0;
  font-size: 15px;
  font-weight: 600;
}

.form-status:empty {
  display: none;
}

.form-status.is-success {
  color: var(--hl-color-success);
}

.form-status.is-error {
  color: var(--hl-color-danger);
}

/*======================
43. Footer
========================*/
/* light: the base's centred logo + newsletter stack. Taupe: the base's
   three columns over dashed road routes (they were flight paths) */
.hl-footer .footer-main {
  padding: 110px 0 100px;
}

.hl-footer.is-light {
  background: var(--hl-color-white);
}

.footer-centre {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.footer-logo {
  display: inline-block;
  margin-bottom: 28px;
}

.footer-logo img {
  width: 240px;
}

.footer-centre p {
  max-width: 620px;
  margin: 0 auto 36px;
}

.hl-newsletter {
  position: relative;
  display: flex;
  max-width: 620px;
  margin: 0 auto;
  background: var(--hl-color-ground);
  padding: 8px;
}

.hl-newsletter input {
  flex: 1 1 auto;
  min-width: 0;
  height: 60px;
  padding: 0 24px;
  border: 0;
  background: transparent;
  font-family: var(--hl-ff-body);
  font-size: 16px;
  color: var(--hl-color-ink);
}

.hl-newsletter input::placeholder {
  color: var(--hl-color-body);
  letter-spacing: 0.08em;
}

.hl-newsletter input:focus {
  outline: none;
}

.hl-newsletter:focus-within {
  box-shadow: 0 0 0 1px var(--hl-color-primary);
}

.footer-inline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 28px;
  margin-top: 44px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.footer-inline li {
  display: inline-flex;
  align-items: center;
}

.footer-inline li + li::before {
  content: "";
  width: 5px;
  height: 5px;
  margin-right: 28px;
  background: var(--hl-color-primary);
  transform: rotate(45deg);
}

.footer-inline a {
  color: var(--hl-color-ink);
}

.footer-inline a:hover {
  color: var(--hl-color-primary-deep);
}

.hl-footer .footer-bottom {
  background: var(--hl-color-night);
  color: var(--hl-color-body-night);
  font-size: 14px;
}

.hl-footer .bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 84px;
  padding: 16px 0;
}

.hl-footer .bottom-inner p {
  margin: 0;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.hl-footer .bottom-inner p a {
  color: var(--hl-color-primary);
}

/* taupe */
.hl-footer.is-taupe {
  position: relative;
  background-color: var(--hl-color-taupe);
  background-image: url("../img/shapes/road-routes.png");
  background-size: 1400px auto;
  background-position: center;
  color: rgba(255, 255, 255, 0.82);
}

.is-taupe .footer-logo img {
  width: 214px;
}

.is-taupe .footer-about p {
  margin-bottom: 30px;
}

.is-taupe .hl-social a {
  background: rgba(var(--hl-color-night-rgb), 0.28);
}

.widget-title {
  margin-bottom: 30px;
  font-size: 1.8rem;
  color: var(--hl-color-white);
}

.footer-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
}

.footer-links li + li {
  margin-top: 12px;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  color: var(--hl-color-white);
  transition: color 0.3s ease, transform 0.35s var(--hl-ease);
}

.footer-links a i {
  font-size: 9px;
  color: var(--hl-color-primary);
}

.footer-links a:hover {
  color: var(--hl-color-primary);
  transform: translateX(4px);
}

.footer-contact li {
  display: flex;
  gap: 20px;
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.footer-contact li:last-child {
  margin-bottom: 0;
  border-bottom: 0;
  padding-bottom: 0;
}

.footer-contact i {
  font-size: 34px;
  line-height: 1;
  color: var(--hl-color-primary);
}

.footer-contact span {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-weight: 600;
  color: var(--hl-color-white);
}

.footer-contact b {
  font-family: var(--hl-ff-heading);
  font-size: 20px;
  font-weight: 400;
}

.footer-contact a:hover {
  color: var(--hl-color-primary);
}

.footer-pay {
  width: 196px;
  height: auto;
}

.footer-legal {
  display: flex;
  gap: 26px;
  font-weight: 600;
}

.footer-legal a:hover {
  color: var(--hl-color-primary);
}

/*======================
44. Back To Top
========================*/
/* a square night button; the champagne fill rises with the page like a gauge */
.hl-back-to-top {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 70;
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--hl-color-night);
  color: var(--hl-color-white);
  box-shadow: var(--hl-shadow-soft);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s var(--hl-ease), visibility 0.4s;
}

.hl-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.hl-back-to-top i {
  position: relative;
  z-index: 1;
}

.hl-back-to-top .top-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  background: rgba(var(--hl-color-primary-rgb), 0.3);
  transform: scaleY(var(--hl-progress, 0));
  transform-origin: bottom;
}

.hl-back-to-top:hover {
  color: var(--hl-color-night);
  background: var(--hl-color-primary);
}

/*======================
45. Cursor
========================*/
/* a slim champagne ring a beat behind the pointer (the native pointer stays);
   wider over anything clickable; a night disc reading Drag / View / Play over
   carousels, photographs and films. Pointer-fine devices only (see JS). */
.hl-cursor {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  visibility: hidden;
}

html.has-hl-cursor .hl-cursor {
  visibility: visible;
}

.cursor-ring {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1.5px solid rgba(var(--hl-color-primary-rgb), 0.9);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.4s var(--hl-ease), height 0.4s var(--hl-ease), background-color 0.4s ease, border-color 0.4s ease, opacity 0.3s ease, scale 0.2s ease;
}

.cursor-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--hl-ff-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--hl-color-primary);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.hl-cursor.is-link .cursor-ring {
  width: 56px;
  height: 56px;
  background-color: rgba(var(--hl-color-primary-rgb), 0.14);
}

.hl-cursor.is-media .cursor-ring {
  width: 96px;
  height: 96px;
  border-color: var(--hl-color-primary);
  background-color: rgba(var(--hl-color-night-rgb), 0.82);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.hl-cursor.is-media .cursor-label {
  opacity: 1;
  transition-delay: 0.1s;
}

/* Drag: two chevrons either side of the word, like a carousel's arrows */
.hl-cursor.is-drag .cursor-label::before,
.hl-cursor.is-drag .cursor-label::after {
  content: "";
  width: 5px;
  height: 5px;
  border-top: 1.5px solid currentColor;
  border-left: 1.5px solid currentColor;
  transform: rotate(-45deg);
}

.hl-cursor.is-drag .cursor-label::after {
  transform: rotate(135deg);
}

.hl-cursor.is-down .cursor-ring {
  scale: 0.86;
}

.hl-cursor.is-hidden .cursor-ring {
  opacity: 0;
}

/* over a carousel, photo or film the disc stands in for the pointer */
html.has-hl-cursor .hl-rail,
html.has-hl-cursor .hl-rail *,
html.has-hl-cursor .hl-package-slider,
html.has-hl-cursor .hl-package-slider *,
html.has-hl-cursor .post-gallery,
html.has-hl-cursor .post-gallery *,
html.has-hl-cursor .gallery-main,
html.has-hl-cursor .gallery-main *,
html.has-hl-cursor a.hl-frame:not(.recent-thumb),
html.has-hl-cursor a.hl-frame:not(.recent-thumb) *,
html.has-hl-cursor .film-play,
html.has-hl-cursor .film-play * {
  cursor: none;
}

html.has-hl-cursor .hl-rail a:not(.hl-frame),
html.has-hl-cursor .hl-rail button,
html.has-hl-cursor .hl-package-slider a,
html.has-hl-cursor .hl-package-slider button {
  cursor: pointer;
}

/*======================
46. Light Trails
========================*/
/* WebGL: The city at night as a long exposure across the fleet band: headlights stream one way and tail lights the other along an avenue at the foot of the band, a farther road high up; traffic near the pointer burns brighter (JS block Light Trails) */
.hl-gl {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s ease;
  mix-blend-mode: screen;
}
.hl-gl.is-live {
  opacity: 1;
}
.hl-diamond-cta > .container {
  position: relative;
  z-index: 2;
}