@charset "utf-8";

/*
Theme Name: Exposa - Landscape Photography Workshops & Photo Tours HTML5 Template
Author: Metropolitanthemes
Version: 1.0.0

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

1. General
   1.1 Typography
   1.2 Spacing & Grounds
   1.3 Section Titles
   1.4 Buttons & Links
   1.5 Forms
   1.6 Shared Pieces
2. Preloader
   2.1 Level Up
3. Header
   3.1 Top Bar
   3.2 Main Bar
   3.3 Main Menu
   3.4 Home Mega Menu
   3.5 Side Column
   3.6 Sticky Header
4. Offcanvas Menu
5. Custom Select
6. Language Picker
7. Components
   7.1 Arrows & Tabs
   7.2 Accordion
   7.3 Tour Cards
   7.4 Workshop Cards
   7.5 Print Cards
   7.6 Guide Cards
   7.7 Work Tiles
   7.8 Voices
   7.9 Post Cards
   7.10 Departure Rows
   7.11 The Light
   7.12 Day List
8. Home 01
   8.1 Framed Hero
   8.2 Light Strip
   8.3 Photographers First
   8.4 Panorama Stitch
   8.5 Workshops List
   8.6 Prints By Size
   8.7 Call To Action
9. Home 02
   9.1 Split Hero
   9.2 Workshops Grid
   9.3 Set, Check, Lock
   9.4 Levels Band
   9.5 Gear Teaser
   9.6 Guides Rail
   9.7 FAQ Band
10. Home 03
   10.1 Full Hero
   10.2 The Season Ahead
   10.3 Star Trails
   10.4 Estimator
   10.5 Featured Tour
   10.6 The Light Today
11. Inner Pages
   11.1 Sidebar & Widgets
   11.2 Rows, Choices & Pages
   11.3 Quantity Stepper
12. Tour Pages
   12.1 Tour Finder
   12.2 Tour Details
   12.3 Tour Reel & Facts
   12.4 Booking Wizard
   12.5 Before You Travel
   12.6 Workshops Page
   12.7 Gear List
13. Inner Page Sections
   13.1 About & Process
   13.2 Guides
   13.3 Portfolio
   13.4 Series
   13.5 Values
   13.6 Contact & Account
14. Print Shop & Basket
   14.1 Shop Grid
   14.2 Print Page
   14.3 Bag, Checkout & Wishlist
15. Blog & Account
   15.1 Blog List
   15.2 Blog Details
   15.3 Account Pages
   15.4 Coming Soon & 404
16. Subheader
17. Footer
*/

/*======================
1. General
========================*/
:root {
  /* brand (the same in both themes) */
  --hz-ink: #111111;
  --hz-ink-rgb: 17, 17, 17;
  --hz-white: #FFFFFF;
  --hz-gold: #4F7FB8;
  --hz-gold-rgb: 79, 127, 184;
  --hz-gold-deep: #2D5178;
  --hz-gold-soft: #628BC2;
  /* the place signals: free / few left / full */
  --hz-free: #3E9B6A;
  --hz-few: #4F7FB8;
  --hz-booked: #D2574B;
  /* semantic: white is the default; [data-theme="dark"] is the blue hour */
  --hz-bg: #FFFFFF;
  --hz-bg-rgb: 255, 255, 255;
  --hz-band: #F7F7F7;
  --hz-band-rgb: 247, 247, 247;
  --hz-plate: #F1F1F0;
  --hz-surface: #FFFFFF;
  --hz-surface-rgb: 255, 255, 255;
  --hz-heading: #111111;
  --hz-heading-rgb: 17, 17, 17;
  --hz-text: #666A6E;
  --hz-muted: #6E7276;
  --hz-line: rgba(17, 17, 17, 0.1);
  --hz-line-2: rgba(17, 17, 17, 0.2);
  --hz-field: #F3F3F2;
  --hz-primary: #111111;
  --hz-on-primary: #FFFFFF;
  --hz-accent-text: #2D5178;
  --hz-free-text: #2E7A52;
  --hz-booked-text: #B23F35;
  --hz-few-text: #27486C;
  --hz-night: #0F1216;
  --hz-night-rgb: 15, 18, 22;
  --hz-shadow: 0 18px 44px rgba(17, 17, 17, 0.07);
  --hz-shadow-lg: 0 30px 70px rgba(17, 17, 17, 0.14);
  --hz-ease: cubic-bezier(0.23, 1, 0.32, 1);
  /* the passepartout: the white margin round a framed photograph */
  --hz-mat: #FFFFFF;
  /* type */
  --hz-ff-body: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;
  --hz-ff-mono: 'Source Code Pro', 'SFMono-Regular', Consolas, monospace;
  --hz-fs-h1: clamp(30px, 2.7vw, 46px);
  --hz-fs-h2: clamp(22px, 1.8vw, 31px);
  --hz-fs-h3: clamp(17px, 1.2vw, 20px);
  --hz-fs-h4: 16px;
  --hz-fs-h5: 15px;
  --hz-fs-h6: 13px;
  /* WebGL colours (per section below): the snow, the ground behind it, a third tint */
  --gl-1: #AEB9C4;
  --gl-2: #F7F7F7;
  --gl-3: #4F7FB8;
  --gl-alpha: 1;
}
[data-theme="dark"] {
  --hz-bg: #0F1216;
  --hz-bg-rgb: 15, 18, 22;
  --hz-band: #14181D;
  --hz-band-rgb: 20, 24, 29;
  --hz-plate: #1C2127;
  --hz-surface: #171B20;
  --hz-surface-rgb: 23, 27, 32;
  --hz-heading: #F2F2F0;
  --hz-heading-rgb: 242, 242, 240;
  --hz-text: #AEB4BA;
  --hz-muted: #969DA4;
  --hz-line: rgba(242, 242, 240, 0.1);
  --hz-line-2: rgba(242, 242, 240, 0.22);
  --hz-field: #1C2127;
  --hz-primary: #F2F2F0;
  --hz-on-primary: #111111;
  --hz-accent-text: #628BC2;
  --hz-free-text: #7FD3A5;
  --hz-booked-text: #FF9187;
  --hz-few-text: #799FCF;
  --hz-night: #0A0C0F;
  --hz-night-rgb: 10, 12, 15;
  --hz-shadow: 0 18px 44px rgba(0, 0, 0, 0.36);
  --hz-shadow-lg: 0 30px 70px rgba(0, 0, 0, 0.5);
  --hz-mat: #171B20;
  --gl-1: #DDE4EA;
  --gl-2: #14181D;
  --gl-3: #628BC2;
}
/* bands that stay at the blue hour in both themes (the footer, the night bands) */
.is-night {
  --hz-heading: #F2F2F0;
  --hz-heading-rgb: 242, 242, 240;
  --hz-text: rgba(242, 242, 240, 0.76);
  --hz-muted: rgba(242, 242, 240, 0.62);
  --hz-line: rgba(242, 242, 240, 0.12);
  --hz-line-2: rgba(242, 242, 240, 0.24);
  --hz-accent-text: #628BC2;
  --hz-free-text: #7FD3A5;
  --hz-booked-text: #FF9187;
  --hz-few-text: #799FCF;
  --hz-surface: #171B20;
  --hz-surface-rgb: 23, 27, 32;
  --hz-plate: #1C2127;
  --hz-field: rgba(242, 242, 240, 0.07);
  --hz-primary: #F2F2F0;
  --hz-on-primary: #111111;
  --hz-mat: #171B20;
  --gl-1: #DDE4EA;
  --gl-2: #0F1216;
  background-color: var(--hz-night);
  color: var(--hz-text);
}
html {
  overflow-x: clip;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--hz-bg);
  color: var(--hz-text);
  font-family: var(--hz-ff-body);
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.4s ease;
}
body.oc-open {
  overflow: hidden;
}
img {
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s var(--hz-ease), background-color 0.3s var(--hz-ease);
}
a:hover {
  color: var(--hz-accent-text);
}
::selection {
  background: var(--hz-gold);
  color: #111111;
}
:focus-visible {
  outline: 2px solid var(--hz-gold);
  outline-offset: 3px;
}

/*----- 1.1 Typography -----*/
/* the base's voice: Source Sans in light, wide-tracked capitals; Source Code Pro for settings, dates and places */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--hz-heading);
  font-family: var(--hz-ff-body);
  font-weight: 400;
  text-transform: uppercase;
}
h1 {
  font-size: var(--hz-fs-h1);
  font-weight: 300;
  line-height: 1.32;
  letter-spacing: 0.26em;
}
h2 {
  font-size: var(--hz-fs-h2);
  font-weight: 300;
  line-height: 1.42;
  letter-spacing: 0.24em;
}
h3 {
  font-size: var(--hz-fs-h3);
  line-height: 1.5;
  letter-spacing: 0.2em;
}
h4 {
  font-size: var(--hz-fs-h4);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.18em;
}
h5 {
  font-size: var(--hz-fs-h5);
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: 0.16em;
}
h6 {
  font-size: var(--hz-fs-h6);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.22em;
}
/* a heading at its outline level that looks like another level */
.hz-h1 {
  font-size: var(--hz-fs-h1);
  font-weight: 300;
  line-height: 1.32;
  letter-spacing: 0.26em;
}
.hz-h2 {
  font-size: var(--hz-fs-h2);
  font-weight: 300;
  line-height: 1.42;
  letter-spacing: 0.24em;
}
.hz-h3 {
  font-size: var(--hz-fs-h3);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.2em;
}
.hz-h4 {
  font-size: var(--hz-fs-h4);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.18em;
}
.hz-h5 {
  font-size: var(--hz-fs-h5);
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: 0.16em;
}
.hz-h6 {
  font-size: var(--hz-fs-h6);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.22em;
}
/* set lines: a title's lines never re-wrap */
.line {
  display: block;
  white-space: nowrap;
}
p {
  margin: 0 0 18px;
}
p:last-child {
  margin-bottom: 0;
}
.hz-lead {
  font-size: 17.5px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--hz-text);
}
/* Source Code Pro: aperture, shutter, ISO, coordinates, dates */
.hz-mono {
  font-family: var(--hz-ff-mono);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.hz-reset {
  margin: 0;
  padding: 0;
  list-style: none;
}

/*----- 1.2 Spacing & Grounds -----*/
.sec-pt-120 {
  padding-top: 120px;
}
.sec-pb-120 {
  padding-bottom: 120px;
}
.sec-pt-90 {
  padding-top: 90px;
}
.sec-pb-90 {
  padding-bottom: 90px;
}
.hz-bg-band {
  background-color: var(--hz-band);
  --hz-mat: var(--hz-band);
}
.sec-more {
  margin-top: 56px;
}
/* photo band: one style everywhere (cover photo under a blue-hour wash from the copy side, white copy) */
.hz-photo-band {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--hz-night);
  --hz-heading: #FFFFFF;
  --hz-heading-rgb: 255, 255, 255;
  --hz-text: rgba(255, 255, 255, 0.86);
  --hz-muted: rgba(255, 255, 255, 0.72);
  --hz-accent-text: #799ECE;
  --hz-line: rgba(255, 255, 255, 0.18);
  --hz-line-2: rgba(255, 255, 255, 0.3);
  --hz-primary: #FFFFFF;
  --hz-on-primary: #111111;
  --hz-surface: rgba(15, 18, 22, 0.6);
  --hz-plate: rgba(255, 255, 255, 0.1);
  color: var(--hz-text);
}
.hz-photo-band > .band-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hz-photo-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(10, 13, 17, 0.9) 0%, rgba(10, 13, 17, 0.72) 44%, rgba(10, 13, 17, 0.34) 100%);
}
/* the side label: the page's name set vertically at the left edge, as the base does */
.hz-side-label {
  position: absolute;
  left: 34px;
  top: 50%;
  z-index: 3;
  color: var(--hz-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translate(-50%, -50%) rotate(-90deg);
  pointer-events: none;
}

/*----- 1.3 Section Titles -----*/
/* the base's section head: a tracked label, the light caps title, a quiet lead */
.hz-title {
  margin-bottom: 64px;
}
/* inline-block, not flex: an eyebrow mixes text and a price, and a flex row would reorder them right to left */
.hz-eyebrow {
  display: inline-block;
  margin-bottom: 20px;
  color: var(--hz-accent-text);
  font-family: var(--hz-ff-body);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.hz-eyebrow::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 1px;
  margin-inline-end: 12px;
  background: currentColor;
  vertical-align: middle;
}
.hz-title h2 {
  max-width: 900px;
}
.hz-title .hz-lead {
  max-width: 620px;
  margin: 22px 0 0;
}
.hz-title.text-center h2,
.hz-title.text-center .hz-lead {
  margin-left: auto;
  margin-right: auto;
}
.hz-title.is-split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}
.hz-title.is-split .hz-lead {
  max-width: 470px;
  margin: 0;
}
.title-side {
  display: flex;
  align-items: flex-end;
  gap: 34px;
}
.rail-arrows {
  display: flex;
  gap: 8px;
}

/*----- 1.4 Buttons & Links -----*/
/* the base's square button in tiny tracked caps, filled (the house drops the hairline outline);
   house physics: lift, the arrow slides out and its twin slides in */
.hz-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 52px;
  padding: 0 30px;
  border: 0;
  border-radius: 0;
  background: var(--hz-primary);
  color: var(--hz-on-primary);
  font-family: var(--hz-ff-body);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  transition: background-color 0.35s var(--hz-ease), color 0.35s var(--hz-ease), box-shadow 0.35s var(--hz-ease), transform 0.35s var(--hz-ease);
}
.hz-btn i {
  position: relative;
  font-size: 11px;
  transition: transform 0.4s var(--hz-ease), opacity 0.3s ease;
}
.hz-btn i.fa-arrow-right::after {
  content: "\f061";
  position: absolute;
  left: -22px;
  top: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.hz-btn:hover {
  background: var(--hz-gold-deep);
  color: #FFFFFF;
  box-shadow: 0 14px 30px rgba(var(--hz-gold-rgb), 0.26);
  transform: translateY(-2px);
}
.hz-btn:hover i.fa-arrow-right {
  transform: translateX(22px);
}
.hz-btn:hover i.fa-arrow-right::after {
  opacity: 1;
}
.hz-btn:hover i.fa-arrow-right::before {
  opacity: 0;
}
.hz-btn.is-tonal {
  background: var(--hz-plate);
  color: var(--hz-heading);
}
.hz-btn.is-tonal i {
  color: var(--hz-accent-text);
}
.hz-bg-band .hz-btn.is-tonal {
  background: var(--hz-surface);
}
.hz-btn.is-tonal:hover {
  background: var(--hz-primary);
  color: var(--hz-on-primary);
}
.hz-btn.is-tonal:hover i {
  color: inherit;
}
.hz-btn.is-light {
  background: #FFFFFF;
  color: #111111;
}
.hz-btn.is-light:hover {
  background: var(--hz-gold);
  color: #111111;
}
.hz-btn.is-sm {
  height: 42px;
  padding: 0 20px;
  font-size: 10.5px;
  letter-spacing: 0.22em;
}
.hz-btn.is-block {
  width: 100%;
}
.hz-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.is-night .hz-btn.is-tonal,
.hz-photo-band .hz-btn.is-tonal {
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
}
.is-night .hz-btn.is-tonal i,
.hz-photo-band .hz-btn.is-tonal i {
  color: var(--hz-gold-soft);
}
.is-night .hz-btn.is-tonal:hover,
.hz-photo-band .hz-btn.is-tonal:hover {
  background: #FFFFFF;
  color: #111111;
}
.is-night .hz-btn.is-tonal:hover i,
.hz-photo-band .hz-btn.is-tonal:hover i {
  color: #111111;
}
/* "view more": tracked caps over a hairline */
.hz-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid currentColor;
  color: var(--hz-heading);
  font-family: var(--hz-ff-body);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
.hz-more i {
  font-size: 10px;
  color: var(--hz-accent-text);
  transition: transform 0.35s var(--hz-ease);
}
.hz-more:hover {
  color: var(--hz-accent-text);
}
.hz-more:hover i {
  transform: translateX(4px);
}
.hz-btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
}

/*----- 1.5 Forms -----*/
.hz-field {
  position: relative;
  margin-bottom: 20px;
}
.hz-field label,
.hz-label {
  display: block;
  margin-bottom: 8px;
  color: var(--hz-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
/* tonal fields: a pale face, no outline; the focus draws a gold line under them */
.hz-input {
  display: block;
  width: 100%;
  height: 54px;
  padding: 0 48px 0 20px;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: var(--hz-field);
  color: var(--hz-heading);
  font-family: var(--hz-ff-body);
  font-size: 15.5px;
  transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
.hz-bg-band .hz-input {
  background: var(--hz-surface);
}
.hz-bg-band .hz-panel .hz-input {
  background: var(--hz-field);
}
textarea.hz-input {
  height: 170px;
  padding-top: 16px;
  resize: vertical;
}
select.hz-input {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--hz-muted) 50%), linear-gradient(135deg, var(--hz-muted) 50%, transparent 50%);
  background-position: calc(100% - 24px) 50%, calc(100% - 19px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.hz-input::placeholder {
  color: var(--hz-muted);
}
.hz-input:focus {
  border-bottom-color: var(--hz-gold);
  box-shadow: 0 6px 18px rgba(var(--hz-gold-rgb), 0.12);
  outline: 0;
}
.hz-input.is-invalid {
  border-bottom-color: var(--hz-booked);
  box-shadow: inset 0 -1px 0 var(--hz-booked);
}
.hz-input[type="date"] {
  color-scheme: light;
}
[data-theme="dark"] .hz-input[type="date"],
.is-night .hz-input[type="date"] {
  color-scheme: dark;
}
.hz-field > i {
  position: absolute;
  right: 20px;
  top: 47px;
  color: var(--hz-accent-text);
  font-size: 14px;
  pointer-events: none;
}
.hz-field.is-area > i {
  top: 53px;
}
.form-status {
  min-height: 0;
  margin: 14px 0 0;
  font-size: 14.5px;
  color: var(--hz-muted);
}
.form-status.is-ok {
  color: var(--hz-free-text);
}
.form-status.is-error {
  color: var(--hz-booked-text);
}
.hz-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  cursor: pointer;
}
.hz-check input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 5px;
  accent-color: var(--hz-gold-deep);
}
.hz-range {
  width: 100%;
  accent-color: var(--hz-gold-deep);
}

/*----- 1.6 Shared Pieces -----*/
/* buttons start bare; each control draws its own face */
button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.hz-social {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hz-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--hz-plate);
  color: var(--hz-heading);
  font-size: 13px;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s var(--hz-ease);
}
.hz-social a:hover {
  background: var(--hz-gold);
  color: #111111;
  transform: translateY(-3px);
}
.is-night .hz-social a {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
}
/* a round portrait beside a name */
.hz-face {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}
.hz-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: #111111;
  font-size: 19px;
  transition: transform 0.4s var(--hz-ease), background-color 0.4s ease;
}
.hz-play i {
  margin-left: 4px;
}
.hz-play:hover {
  background: var(--hz-gold);
  transform: scale(1.06);
}
/* place signals: a round dot and its line */
.hz-dot {
  display: inline-block;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hz-muted);
}
[data-state="free"] > .hz-dot,
.hz-dot.is-free {
  background: var(--hz-free);
  box-shadow: 0 0 0 4px rgba(62, 155, 106, 0.18);
}
[data-state="few"] > .hz-dot,
.hz-dot.is-few,
[data-state="golden"] > .hz-dot {
  background: var(--hz-gold);
  box-shadow: 0 0 0 4px rgba(var(--hz-gold-rgb), 0.22);
}
[data-state="booked"] > .hz-dot {
  background: var(--hz-booked);
  box-shadow: 0 0 0 4px rgba(210, 87, 75, 0.16);
}
[data-state="blue"] > .hz-dot {
  background: #6E8FC9;
  box-shadow: 0 0 0 4px rgba(110, 143, 201, 0.2);
}
[data-state="dark"] > .hz-dot {
  background: var(--hz-muted);
}
.hz-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--hz-ff-mono);
  font-size: 13px;
  line-height: 1.4;
  color: var(--hz-heading);
}
.hz-status b {
  font-weight: 500;
}
[data-state="few"] .txt {
  color: var(--hz-few-text);
}
[data-state="booked"] .txt {
  color: var(--hz-booked-text);
}
.hz-stars {
  display: inline-flex;
  gap: 3px;
  color: var(--hz-gold);
  font-size: 12px;
}
/* a small mono tag (Guaranteed, New, Full) */
.hz-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--hz-accent-text);
  font-family: var(--hz-ff-mono);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* label / value rows: facts, settings, prices (never bullet pills) */
.hz-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}
.hz-rows li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 11px 0;
  border-bottom: 1px solid var(--hz-line);
  font-size: 15px;
}
.hz-rows li:first-child {
  border-top: 1px solid var(--hz-line);
}
.hz-rows li > span {
  color: var(--hz-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.hz-rows li > b {
  color: var(--hz-heading);
  font-family: var(--hz-ff-mono);
  font-size: 14px;
  font-weight: 500;
  text-align: end;
}
.hz-rows.is-stack li {
  display: block;
}
.hz-rows.is-stack li > span {
  display: block;
  margin-bottom: 4px;
  color: var(--hz-accent-text);
}
.hz-rows.is-stack li > b {
  display: block;
  font-family: var(--hz-ff-body);
  font-size: 15.5px;
  font-weight: 400;
  text-align: start;
}
.hz-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 3000;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background: #111111;
  color: #FFFFFF;
  font-size: 14.5px;
  box-shadow: var(--hz-shadow-lg);
  transform: translate(-50%, 160%);
  transition: transform 0.5s var(--hz-ease);
}
.hz-toast i {
  color: var(--hz-gold);
}
.hz-toast.is-shown {
  transform: translate(-50%, 0);
}
.hz-back-top {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: var(--hz-primary);
  color: var(--hz-on-primary);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s var(--hz-ease), background-color 0.3s ease;
}
.hz-back-top.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.hz-back-top:hover {
  background: var(--hz-gold);
  color: #111111;
}
/* WebGL layers sit under a section's content */
.hz-gl {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.hz-gl.is-on {
  opacity: 1;
}
/* line icons in two inks: ink lines on white (the default), white lines in the dark theme and on the night bands */
.hz-ico {
  display: inline-flex;
  flex-shrink: 0;
  width: 54px;
  height: 54px;
}
.hz-ico img {
  width: 100%;
  height: 100%;
}
.hz-ico .ico-light,
[data-theme="dark"] .hz-ico .ico-ink,
.is-night .hz-ico .ico-ink,
.hz-photo-band .hz-ico .ico-ink {
  display: none;
}
[data-theme="dark"] .hz-ico .ico-light,
.is-night .hz-ico .ico-light,
.hz-photo-band .hz-ico .ico-light {
  display: block;
}
/* ND Grad: a graduated filter, dark above and clear below, slides down off each photo (main.js) */
.hz-nd {
  position: relative;
  overflow: hidden;
}
.hz-nd > .nd-grad {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 4;
  height: 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  background: linear-gradient(180deg, rgba(14, 17, 21, 0.94) 0%, rgba(14, 17, 21, 0.9) 34%, rgba(14, 17, 21, 0.5) 62%, rgba(14, 17, 21, 0.12) 86%, rgba(14, 17, 21, 0) 100%);
  pointer-events: none;
}
/* the exposure scale: a small +/-EV scale slides in under a card's photo and its marker settles at 0 */
.hz-exp {
  position: relative;
  display: block;
  overflow: hidden;
}
.hz-exp img {
  transition: transform 1.1s var(--hz-ease);
}
.hz-ev {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  height: 40px;
  padding: 0 14px 7px;
  background: linear-gradient(180deg, rgba(14, 17, 21, 0) 0%, rgba(14, 17, 21, 0.78) 100%);
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--hz-ff-mono);
  font-size: 10.5px;
  line-height: 1;
  text-align: center;
  transform: translateY(100%);
  transition: transform 0.45s var(--hz-ease);
  pointer-events: none;
}
.hz-ev::before {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 22px;
  height: 6px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.7) 0 1px, transparent 1px 10%);
  background-position: 0 100%;
}
.hz-ev span:nth-child(3) {
  color: var(--hz-gold-soft);
}
.hz-ev .ev-mark {
  position: absolute;
  bottom: 21px;
  left: 22%;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid var(--hz-gold);
  transform: translate(-50%, -9px);
  transition: left 0.75s cubic-bezier(0.34, 1.4, 0.5, 1) 0.15s;
}
a:hover > .hz-ev,
.hz-exp:hover > .hz-ev,
article:hover .hz-exp > .hz-ev {
  transform: translateY(0);
}
a:hover > .hz-ev .ev-mark,
.hz-exp:hover > .hz-ev .ev-mark,
article:hover .hz-exp > .hz-ev .ev-mark {
  left: 50%;
}
.hz-exp:hover img,
article:hover .hz-exp img {
  transform: scale(1.04);
}
@media (prefers-reduced-motion: reduce) {
  .hz-ev,
  .hz-ev .ev-mark,
  .hz-exp img {
    transition: none;
  }
}
/* avatar group: overlapping round faces, a +N, two short lines */
.hz-avatars {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.hz-avatars .faces {
  display: inline-flex;
}
.hz-avatars .faces img,
.hz-avatars .faces .more {
  width: 44px;
  height: 44px;
  margin-inline-start: -12px;
  border: 3px solid var(--hz-bg);
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}
.hz-avatars .faces img:first-child {
  margin-inline-start: 0;
}
.hz-avatars .faces .more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #111111;
  color: #FFFFFF;
  font-family: var(--hz-ff-mono);
  font-size: 11.5px;
  font-weight: 500;
}
.hz-avatars .txt {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
  font-size: 14px;
  color: var(--hz-muted);
}
.hz-avatars .txt b {
  color: var(--hz-heading);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.hz-bg-band .hz-avatars .faces img,
.hz-bg-band .hz-avatars .faces .more {
  border-color: var(--hz-band);
}
.is-night .hz-avatars .faces img,
.is-night .hz-avatars .faces .more,
.hz-photo-band .hz-avatars .faces img,
.hz-photo-band .hz-avatars .faces .more {
  border-color: var(--hz-night);
}
/* the real review average and count */
.hz-review {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.hz-review > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--hz-plate);
  color: var(--hz-heading);
  font-size: 18px;
}
.hz-review .rv-score {
  color: var(--hz-heading);
  font-family: var(--hz-ff-mono);
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
}
.hz-review .rv-txt {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.hz-review small {
  color: var(--hz-muted);
  font-size: 13px;
}
.hz-panel {
  padding: 40px;
  background: var(--hz-surface);
  box-shadow: var(--hz-shadow);
}
.hz-bg-band .hz-panel {
  box-shadow: none;
}

/*======================
2. Preloader
========================*/
/*----- 2.1 Level Up -----*/
/* A camera's electronic level on a white screen: the horizon line through its ring tilts, wobbles and settles at
   0 degrees, turns gold, the label appears above it; the line runs out to both edges and the screen opens along it,
   the top half lifting and the bottom half dropping, onto the page. */
.hz-preloader {
  position: fixed;
  inset: 0;
  z-index: 5000;
  overflow: hidden;
  pointer-events: none;
}
.no-js .hz-preloader {
  display: none;
}
.pre-half {
  position: absolute;
  left: 0;
  right: 0;
  height: 50.5%;
  background: #FFFFFF;
  pointer-events: auto;
}
.pre-half.is-top {
  top: 0;
}
.pre-half.is-bottom {
  bottom: 0;
}
[data-theme="dark"] .pre-half {
  background: #0F1216;
}
.pre-level {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: min(620px, 84vw);
  height: 2px;
  transform: translate(-50%, -50%);
}
/* the fixed references at both ends of the level */
.lv-scale {
  position: absolute;
  inset: 0;
}
.lv-tick {
  position: absolute;
  top: 50%;
  width: 1px;
  height: 14px;
  background: #B5B9BD;
  transform: translateY(-50%);
}
.lv-tick.is-l3 {
  left: 0;
}
.lv-tick.is-l2 {
  left: 4%;
  height: 9px;
}
.lv-tick.is-l1 {
  left: 8%;
  height: 6px;
}
.lv-tick.is-r1 {
  right: 8%;
  height: 6px;
}
.lv-tick.is-r2 {
  right: 4%;
  height: 9px;
}
.lv-tick.is-r3 {
  right: 0;
}
/* the moving line: two arms and the ring between them, turning about the centre */
.lv-line {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 50%;
  display: flex;
  align-items: center;
  height: 22px;
  margin-top: -11px;
  transform-origin: 50% 50%;
}
.lv-arm {
  flex: 1;
  height: 2px;
  background: #111111;
}
.lv-arm.is-left {
  transform-origin: right center;
}
.lv-arm.is-right {
  transform-origin: left center;
}
.lv-ring {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin: 0 10px;
  border: 2px solid #111111;
  border-radius: 50%;
}
[data-theme="dark"] .lv-arm {
  background: #F2F2F0;
}
[data-theme="dark"] .lv-ring {
  border-color: #F2F2F0;
}
.lv-deg {
  position: absolute;
  left: 50%;
  top: 34px;
  color: #6E7276;
  font-family: var(--hz-ff-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  white-space: nowrap;
  transform: translateX(-50%);
}
.pre-mark {
  position: absolute;
  left: 50%;
  bottom: calc(50% + 46px);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  transform: translateX(-50%);
  opacity: 0;
}
.pre-mark img {
  display: block;
  width: auto;
  height: 40px;
}
.pre-mark .mk-line {
  color: #6E7276;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  white-space: nowrap;
}

/*======================
3. Header
========================*/
/* Exposa's header, after the base: a white bar with the black label on the left and the menu in tiny tracked
   capitals (style two, every page), or the base's left-menu column (style side, Home 03). */
.hz-header {
  position: relative;
  z-index: 1000;
  --hd-bar: var(--hz-bg);
  --hd-ink: var(--hz-heading);
  --hd-soft: var(--hz-muted);
  --hd-icon: var(--hz-plate);
  --hd-line: var(--hz-line);
}
.hz-header .wide {
  display: flex;
  align-items: center;
  padding: 0 44px;
}
.hz-logo {
  display: inline-flex;
  flex-shrink: 0;
}
.hz-logo img {
  height: 34px;
  width: auto;
}
.hz-logo .logo-light,
[data-theme="dark"] .hz-logo .logo-main {
  display: none;
}
[data-theme="dark"] .hz-logo .logo-light {
  display: block;
}

/*----- 3.1 Top Bar -----*/
/* a quiet line above the bar: the next golden hour, the base, links, currency, language */
.header-top {
  height: 40px;
  background: var(--hz-bg);
  border-bottom: 1px solid var(--hz-line);
  color: var(--hz-muted);
  font-size: 12.5px;
  overflow: visible;
  transition: height 0.4s var(--hz-ease), opacity 0.3s ease;
}
.header-top .wide {
  justify-content: space-between;
  height: 100%;
  gap: 30px;
}
.header-top .top-left,
.header-top .top-right {
  display: flex;
  align-items: center;
  gap: 28px;
}
.header-top a:hover {
  color: var(--hz-heading);
}
.header-top .top-addr i {
  margin-right: 6px;
  color: var(--hz-gold);
}
.hz-live {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--hz-ff-mono);
  font-size: 12.5px;
}
.hz-live b {
  font-weight: 500;
  color: var(--hz-heading);
}
.header-top .top-right > a {
  position: relative;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.header-top .top-right > a + a::before {
  content: "";
  position: absolute;
  left: -15px;
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--hz-gold);
  transform: translateY(-50%);
}

/*----- 3.2 Main Bar -----*/
.header-main {
  position: relative;
  background: var(--hd-bar);
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
}
.header-main .wide {
  height: 96px;
  gap: 40px;
}
.header-right {
  display: flex;
  align-items: center;
  gap: 26px;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.header-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--hd-icon);
  color: var(--hd-ink);
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.header-icon:hover {
  background: var(--hz-gold);
  color: #111111;
}
.header-icon .count {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--hz-gold);
  color: #111111;
  font-family: var(--hz-ff-mono);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 18px;
  text-align: center;
}
.header-icon .count:empty {
  display: none;
}
.hz-theme-toggle .ti-sun,
[data-theme="dark"] .hz-theme-toggle .ti-moon {
  display: none;
}
[data-theme="dark"] .hz-theme-toggle .ti-sun {
  display: inline-block;
}
.header-actions .header-btn {
  margin-left: 8px;
}
/* the theme switch and saved prints sit in the bar from 1600 up; below that they live in the offcanvas */
.header-actions .is-wish,
.header-actions .hz-theme-toggle {
  display: none;
}
/* the base's menu mark: three short lines, the middle one shorter */
.hz-menu-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 6px;
  width: 42px;
  height: 42px;
  padding: 0 9px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.hz-menu-toggle span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--hd-ink);
  transition: width 0.3s var(--hz-ease);
}
.hz-menu-toggle span:nth-child(2) {
  width: 15px;
}
.hz-menu-toggle span:nth-child(3) {
  width: 20px;
}
.hz-menu-toggle:hover span {
  width: 24px;
}

/*----- 3.3 Main Menu -----*/
/* the base's menu: tiny capitals tracked wide; hover and the current page by colour only */
.hz-nav {
  margin-left: auto;
}
.hz-nav > ul {
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hz-nav li {
  position: relative;
}
.hz-nav > ul > li > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 38px 0;
  color: var(--hd-soft);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hz-nav > ul > li > a i {
  font-size: 7px;
  opacity: 0.7;
  transition: transform 0.3s var(--hz-ease);
}
.hz-nav > ul > li:hover > a,
.hz-nav > ul > li.active > a {
  color: var(--hd-ink);
}
.hz-nav > ul > li:hover > a i {
  transform: rotate(180deg);
}
.hz-nav .sub-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: -28px;
  z-index: 50;
  min-width: 250px;
  margin: 0;
  padding: 16px 0;
  list-style: none;
  background: var(--hz-surface);
  box-shadow: var(--hz-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s var(--hz-ease), transform 0.35s var(--hz-ease), visibility 0.3s;
}
.hz-nav > ul > li > .sub-menu {
  top: calc(100% - 22px);
}
/* a bridge over the gap, so the menu stays open while the pointer crosses it */
.hz-nav .sub-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 20px;
}
.hz-nav li:hover > .sub-menu,
.hz-nav li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.hz-nav .sub-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 28px;
  color: var(--hz-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.3s var(--hz-ease), padding 0.35s var(--hz-ease);
}
.hz-nav .sub-menu a i {
  font-size: 8px;
  color: var(--hz-muted);
}
.hz-nav .sub-menu li:hover > a,
.hz-nav .sub-menu li.active > a {
  padding-left: 34px;
  color: var(--hz-heading);
}
.hz-nav .sub-menu .sub-menu {
  top: -16px;
  left: 100%;
}
.hz-nav .sub-menu .sub-menu::before {
  left: -12px;
  right: auto;
  top: 0;
  bottom: 0;
  width: 12px;
  height: auto;
}

/*----- 3.4 Home Mega Menu -----*/
.hz-nav .has-mega {
  position: static;
}
.hz-nav .mega-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  z-index: 50;
  width: min(960px, calc(100vw - 60px));
  padding: 30px;
  background: var(--hz-surface);
  box-shadow: var(--hz-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 12px);
  transition: opacity 0.3s var(--hz-ease), transform 0.35s var(--hz-ease), visibility 0.3s;
}
.hz-nav .mega-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 20px;
}
.hz-nav .has-mega:hover > .mega-menu,
.hz-nav .has-mega:focus-within > .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.mega-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.mega-card {
  display: block;
  color: var(--hz-heading);
}
.mega-card .shot {
  display: block;
  overflow: hidden;
  background: var(--hz-plate);
}
.mega-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  transition: transform 0.6s var(--hz-ease);
}
.mega-card:hover img {
  transform: scale(1.04);
}
.mega-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 14px;
}
.mega-meta small {
  color: var(--hz-accent-text);
  font-family: var(--hz-ff-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mega-meta b {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.mega-card.is-current b,
.mega-card:hover b {
  color: var(--hz-accent-text);
}

/*----- 3.5 Side Column -----*/
/* Home 03: the base's left-menu home - a fixed white column with the label at the top, the menu stacked in the
   middle (sub-menus fly out to the right), the actions and the socials at its foot. Below 1200 it is the white bar. */

/*----- 3.6 Sticky Header -----*/
.hz-header.is-sticky:not(.header-style-side) {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  animation: hz-header-in 0.6s var(--hz-ease) both;
}
.hz-header.is-sticky .header-top {
  height: 0;
  opacity: 0;
  overflow: hidden;
  border: 0;
}
.hz-header.is-sticky .header-main {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}
.hz-header.is-sticky:not(.header-style-side) .header-main .wide {
  height: 76px;
}
.hz-header.is-sticky .hz-nav > ul > li > a {
  padding: 28px 0;
}
.hz-header.is-sticky .hz-nav > ul > li > .sub-menu {
  top: calc(100% - 12px);
}
.hz-header-spacer {
  display: none;
}
.hz-header-spacer.is-on {
  display: block;
}
@keyframes hz-header-in {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

/*======================
4. Offcanvas Menu
========================*/
.hz-offcanvas {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2100;
  display: flex;
  flex-direction: column;
  width: min(440px, 100vw);
  background: var(--hz-surface);
  transform: translateX(105%);
  transition: transform 0.6s var(--hz-ease), box-shadow 0.6s var(--hz-ease);
  overflow-y: auto;
}
/* the shadow only while open: parked off the right edge it would still bleed into the page */
.hz-offcanvas.open {
  box-shadow: var(--hz-shadow-lg);
  transform: none;
}
.hz-offcanvas-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(12, 12, 12, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.hz-offcanvas-overlay.open {
  opacity: 1;
  visibility: visible;
}
.offcanvas-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 32px;
  border-bottom: 1px solid var(--hz-line);
}
.offcanvas-head .hz-logo img {
  height: 30px;
}
.offcanvas-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--hz-plate);
  color: var(--hz-heading);
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.4s var(--hz-ease);
}
.offcanvas-close:hover {
  background: var(--hz-gold);
  color: #111111;
  transform: rotate(90deg);
}
.offcanvas-nav {
  flex: 1;
  padding: 14px 32px 30px;
}
.oc-group {
  border-bottom: 1px solid var(--hz-line);
}
.oc-group > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 18px 0;
  border: 0;
  background: none;
  color: var(--hz-heading);
  font-family: var(--hz-ff-body);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.oc-group > button i {
  color: var(--hz-accent-text);
  font-size: 12px;
  transition: transform 0.35s var(--hz-ease);
}
.oc-group.is-open > button i {
  transform: rotate(45deg);
}
.oc-group ul {
  display: none;
  padding: 0 0 16px;
}
.oc-group.is-open ul {
  display: block;
}
.oc-group ul a {
  display: block;
  padding: 7px 0 7px 16px;
  border-left: 2px solid var(--hz-line);
  color: var(--hz-text);
  font-size: 15.5px;
}
.oc-group ul a:hover,
.oc-group ul a.is-current {
  border-color: var(--hz-gold);
  color: var(--hz-accent-text);
}
.offcanvas-foot {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 30px 32px 34px;
}
.offcanvas-foot .label {
  font-family: var(--hz-ff-mono);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hz-gold-soft);
}
.oc-phone {
  color: #FFFFFF;
  font-family: var(--hz-ff-mono);
  font-size: 22px;
  font-weight: 500;
}
.oc-mail {
  color: var(--hz-text);
}
.oc-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}
.offcanvas-foot .header-icon {
  --hd-icon: rgba(255, 255, 255, 0.1);
  --hd-ink: #FFFFFF;
}
.oc-live {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 16px 32px;
  background: var(--hz-band);
  color: var(--hz-heading);
  font-family: var(--hz-ff-mono);
  font-size: 13px;
}
.offcanvas-foot .hz-cur .cur-btn {
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
}

/*======================
5. Custom Select
========================*/
/* Native selects stay in the form (value, name, submit); a styled button and
   listbox are drawn over them and keep them in sync. */
.hz-select {
  position: relative;
}
.hz-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;
}
.hz-select .select-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  height: 54px;
  padding: 0 20px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: var(--hz-field);
  font-size: 15px;
  text-align: left;
  color: var(--hz-heading);
  transition: border-color 0.3s var(--hz-ease);
}
.hz-bg-band .hz-select .select-button,
.tour-filter .hz-select .select-button,
.ws-finder .hz-select .select-button {
  background: var(--hz-surface);
}
.hz-bg-band .hz-panel .hz-select .select-button {
  background: var(--hz-field);
}
.hz-select.is-open .select-button,
.hz-select .select-button:hover {
  border-color: var(--hz-gold);
}
.hz-select .select-button .select-value {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.hz-select .select-button i {
  flex-shrink: 0;
  font-size: 10px;
  color: var(--hz-accent-text);
  transition: transform 0.35s var(--hz-ease);
}
.hz-select.is-open .select-button i {
  transform: rotate(180deg);
}
.hz-select .select-list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  min-width: 100%;
  max-height: 340px;
  margin: 0;
  padding: 10px 0;
  overflow-x: hidden;
  overflow-y: auto;
  list-style: none;
  background-color: var(--hz-surface);
  border-top: 2px solid var(--hz-gold);
  box-shadow: var(--hz-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s var(--hz-ease), transform 0.3s var(--hz-ease), visibility 0.3s;
}
.hz-select.opens-up .select-list {
  top: auto;
  bottom: calc(100% + 8px);
  border-top: 0;
  border-bottom: 2px solid var(--hz-gold);
  transform: translateY(-10px);
}
.hz-select.is-open .select-list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.hz-select .select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 20px;
  font-size: 15px;
  color: var(--hz-heading);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s var(--hz-ease), color 0.2s var(--hz-ease);
}
.hz-select .select-option .option-meta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hz-accent-text);
}
.hz-select .select-option .option-meta.is-none {
  color: var(--hz-muted);
}
.hz-select .select-option.is-focused,
.hz-select .select-option:hover {
  background-color: var(--hz-plate);
}
.hz-select .select-option.is-disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.hz-select .select-option.is-selected {
  color: var(--hz-accent-text);
}
.hz-select .select-option.is-selected::after {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 11px;
  color: var(--hz-accent-text);
}
.hz-select.is-compact .select-button {
  height: 46px;
  border: 0;
  border-radius: 0;
  background: var(--hz-plate);
  font-size: 14px;
  font-weight: 600;
}

/*======================
6. Language Picker
========================*/
/* Language picker: a flag and a code; the menu lists the languages that read left to right and right to left.
   The demo copy stays in English, and a right-to-left language turns the layout around. */
.hz-lang {
  position: relative;
  flex-shrink: 0;
}
.hz-lang .lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 40px;
  background: var(--hz-plate);
  color: var(--hz-heading);
  font-family: var(--hz-ff-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.hz-lang .lang-btn:hover,
.hz-lang .lang-btn[aria-expanded="true"] {
  background: var(--hz-primary);
  color: var(--hz-on-primary);
}
.hz-lang .lang-btn > i {
  font-size: 9px;
  transition: transform 0.3s ease;
}
.hz-lang .lang-btn[aria-expanded="true"] > i {
  transform: rotate(180deg);
}
.hz-lang .flag {
  flex-shrink: 0;
  width: 22px;
  height: 16px;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.hz-lang.is-icon .lang-btn {
  height: 46px;
  padding: 0 15px;
  background: var(--hz-plate);
  color: var(--hz-heading);
}
.hz-lang.is-icon .lang-btn:hover,
.hz-lang.is-icon .lang-btn[aria-expanded="true"] {
  background: var(--hz-gold);
  color: #111111;
}
.hz-lang .lang-menu {
  position: absolute;
  top: calc(100% + 12px);
  inset-inline-end: 0;
  z-index: 1300;
  width: 248px;
  padding: 10px;
  border-radius: 0;
  background: var(--hz-surface);
  box-shadow: var(--hz-shadow-lg);
  font-family: var(--hz-ff-body);
  text-align: start;
  white-space: normal;
}
.hz-lang.is-up .lang-menu {
  top: auto;
  bottom: calc(100% + 12px);
}
.hz-lang.is-start .lang-menu {
  inset-inline-start: 0;
  inset-inline-end: auto;
}
.hz-lang .lang-menu[hidden] {
  display: none;
}
.hz-lang .lang-group {
  margin: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hz-muted);
}
.hz-lang .lang-menu ul {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hz-lang .lang-menu ul + .lang-group {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--hz-line);
}
.hz-lang .lang-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--hz-heading);
  font-family: var(--hz-ff-body);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: start;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s ease;
}
.hz-lang .lang-item small {
  margin-inline-start: auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--hz-muted);
}
.hz-lang .lang-item i {
  width: 12px;
  font-size: 11px;
  color: var(--hz-accent-text);
  opacity: 0;
}
.hz-lang .lang-item:hover,
.hz-lang .lang-item[aria-pressed="true"] {
  background: var(--hz-plate);
}
.hz-lang .lang-item[aria-pressed="true"] {
  font-weight: 600;
}
.hz-lang .lang-item[aria-pressed="true"] i {
  opacity: 1;
}
.hz-lang .lang-note {
  margin: 10px 10px 4px;
  padding-top: 10px;
  border-top: 1px solid var(--hz-line);
  font-size: 12px;
  line-height: 1.5;
  color: var(--hz-muted);
}
/* the currency picker beside it: the same face, a menu of three currencies; every price on the page repaints */
.hz-cur {
  position: relative;
  flex-shrink: 0;
}
.hz-cur .cur-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 12px;
  border-radius: 40px;
  background: var(--hz-plate);
  color: var(--hz-heading);
  font-family: var(--hz-ff-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.hz-cur .cur-btn b {
  font-weight: 500;
  color: var(--hz-accent-text);
}
.hz-cur .cur-btn > i {
  font-size: 9px;
  transition: transform 0.3s ease;
}
.hz-cur .cur-btn:hover,
.hz-cur .cur-btn[aria-expanded="true"] {
  background: var(--hz-primary);
  color: var(--hz-on-primary);
}
.hz-cur .cur-btn:hover b,
.hz-cur .cur-btn[aria-expanded="true"] b {
  color: inherit;
}
.hz-cur .cur-btn[aria-expanded="true"] > i {
  transform: rotate(180deg);
}
.hz-cur.is-up .cur-btn {
  height: 46px;
  padding: 0 15px;
}
.hz-cur .cur-menu {
  position: absolute;
  top: calc(100% + 12px);
  inset-inline-end: 0;
  z-index: 1300;
  width: 232px;
  padding: 10px;
  background: var(--hz-surface);
  box-shadow: var(--hz-shadow-lg);
  font-family: var(--hz-ff-body);
  text-align: start;
}
.hz-cur.is-up .cur-menu {
  top: auto;
  bottom: calc(100% + 12px);
  inset-inline-start: 0;
  inset-inline-end: auto;
}
.hz-cur .cur-menu[hidden] {
  display: none;
}
.hz-cur .lang-group {
  margin: 6px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hz-muted);
}
.hz-cur .cur-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 10px;
  color: var(--hz-heading);
  font-size: 14.5px;
  font-weight: 500;
  text-align: start;
  white-space: nowrap;
  transition: background-color 0.25s ease;
}
.hz-cur .cur-item b {
  width: 18px;
  color: var(--hz-accent-text);
  font-family: var(--hz-ff-mono);
  font-weight: 500;
}
.hz-cur .cur-item i {
  margin-inline-start: auto;
  font-size: 11px;
  color: var(--hz-accent-text);
  opacity: 0;
}
.hz-cur .cur-item:hover,
.hz-cur .cur-item[aria-pressed="true"] {
  background: var(--hz-plate);
}
.hz-cur .cur-item[aria-pressed="true"] i {
  opacity: 1;
}

/*======================
7. Components
========================*/
/*----- 7.1 Arrows & Tabs -----*/
/* the base's thin arrows, on a quiet square plate */
.slider-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: var(--hz-plate);
  color: var(--hz-heading);
  font-size: 13px;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s var(--hz-ease);
}
.slider-arrow:hover {
  background: var(--hz-primary);
  color: var(--hz-on-primary);
}
.slider-arrow.swiper-button-disabled {
  opacity: 0.4;
  cursor: default;
}
.hz-bg-band .slider-arrow {
  background: var(--hz-surface);
}
.is-night .slider-arrow,
.hz-photo-band .slider-arrow {
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
}
.is-night .slider-arrow:hover,
.hz-photo-band .slider-arrow:hover {
  background: #FFFFFF;
  color: #111111;
}
/* filter tabs: tracked caps on a tonal plate, the active one in ink */
.hz-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.hz-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  background: var(--hz-plate);
  color: var(--hz-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.hz-tabs button small {
  color: var(--hz-accent-text);
  font-family: var(--hz-ff-mono);
  font-size: 11px;
  letter-spacing: 0;
}
.hz-tabs button:hover {
  background: var(--hz-line-2);
}
.hz-tabs button.is-active {
  background: var(--hz-primary);
  color: var(--hz-on-primary);
}
.hz-tabs button.is-active small {
  color: inherit;
  opacity: 0.7;
}
.hz-bg-band .hz-tabs button {
  background: var(--hz-surface);
}
.hz-bg-band .hz-tabs button.is-active {
  background: var(--hz-primary);
}
.hz-tabs.is-small button {
  height: 38px;
  padding: 0 16px;
}
.swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: var(--hz-heading);
  opacity: 0.25;
}
.swiper-pagination-bullet-active {
  opacity: 1;
  background: var(--hz-gold);
}
.is-hidden,
.is-unmatched {
  display: none !important;
}

/*----- 7.2 Accordion -----*/
.hz-accordion .acc-item {
  border-bottom: 1px solid var(--hz-line);
}
.hz-accordion .acc-item:first-child {
  border-top: 1px solid var(--hz-line);
}
.acc-title {
  margin: 0;
  font-size: inherit;
  letter-spacing: 0;
}
.acc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 22px 0;
  color: var(--hz-heading);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-align: start;
  text-transform: uppercase;
}
.acc-head i {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--hz-plate);
  color: var(--hz-accent-text);
  font-size: 10px;
  transition: transform 0.35s var(--hz-ease), background-color 0.3s ease, color 0.3s ease;
}
.hz-bg-band .acc-head i {
  background: var(--hz-surface);
}
.acc-item.is-open .acc-head i {
  background: var(--hz-gold);
  color: #111111;
  transform: rotate(45deg);
}
.acc-body {
  padding: 0 60px 24px 0;
}
.acc-body p {
  margin: 0;
}

/*----- 7.3 Tour Cards -----*/
/* a framed photograph, the region and nights in tracked caps, the next departure and its places, live */
.tour-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.tc-media {
  aspect-ratio: 4 / 3;
  background: var(--hz-plate);
}
.tc-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tc-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-top: 26px;
}
.tc-body .hz-eyebrow {
  margin-bottom: 12px;
}
.tc-body h3 {
  margin-bottom: 20px;
}
.tc-body h3 a:hover {
  color: var(--hz-accent-text);
}
.tc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  padding-top: 20px;
}
.tour-slide {
  height: 100%;
}

/*----- 7.4 Workshop Cards -----*/
.ws-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--hz-surface);
}
.wc-media {
  aspect-ratio: 3 / 2;
  background: var(--hz-plate);
}
.wc-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wc-len {
  position: absolute;
  left: 18px;
  top: 18px;
  z-index: 3;
  padding: 7px 12px;
  background: var(--hz-surface);
  color: var(--hz-heading);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  line-height: 1;
  text-transform: uppercase;
}
.wc-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 28px 28px 30px;
}
.wc-body .hz-eyebrow {
  margin-bottom: 10px;
}
.wc-body h3 {
  margin-bottom: 18px;
}
.ws-card .tc-foot .hz-status {
  font-size: 12.5px;
}

/*----- 7.5 Print Cards -----*/
.print-card .pc-media {
  aspect-ratio: 1 / 1;
  padding: 11%;
  background: var(--hz-plate);
}
.hz-bg-band .print-card .pc-media {
  background: var(--hz-surface);
}
/* the print sits in its own white margin, like a sheet on the wall */
.print-card .pc-media > a {
  display: block;
  width: 100%;
  height: 100%;
  box-shadow: 0 12px 26px rgba(17, 17, 17, 0.14);
}
.print-card .pc-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pc-wish {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--hz-surface);
  color: var(--hz-heading);
  font-size: 14px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.pc-wish:hover,
.pc-wish.is-on {
  background: var(--hz-gold);
  color: #111111;
}
.pc-body {
  padding-top: 18px;
}
.pc-body h3 {
  margin-bottom: 2px;
}
.pc-place {
  display: block;
  color: var(--hz-muted);
  font-size: 14px;
}
.pc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}
.pc-price small {
  color: var(--hz-muted);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.pc-price b {
  color: var(--hz-heading);
  font-family: var(--hz-ff-mono);
  font-size: 16px;
  font-weight: 500;
}
/* the five sizes drawn to scale (120 x 80 cm = 100%) */
.sz-shape {
  display: block;
  border: 1.5px solid var(--hz-heading);
  background: linear-gradient(160deg, rgba(var(--hz-gold-rgb), 0.18), rgba(var(--hz-gold-rgb), 0.04));
}
.sz-s30 {
  width: 25%;
  aspect-ratio: 3 / 2;
}
.sz-s45 {
  width: 37.5%;
  aspect-ratio: 3 / 2;
}
.sz-s60 {
  width: 50%;
  aspect-ratio: 3 / 2;
}
.sz-s90 {
  width: 75%;
  aspect-ratio: 3 / 2;
}
.sz-s120 {
  width: 100%;
  aspect-ratio: 3 / 2;
}

/*----- 7.6 Guide Cards -----*/
/* the base's team: a square black-and-white portrait with the name set vertically beside it */
.guide-card {
  position: relative;
  padding-right: 34px;
}
.gd-media {
  aspect-ratio: 1 / 1;
  background: var(--hz-plate);
}
.gd-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
}
.gd-vert {
  position: absolute;
  right: 0;
  top: 0;
  color: var(--hz-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  writing-mode: vertical-rl;
}
.gd-body {
  padding-top: 24px;
}
.gd-body .hz-eyebrow {
  margin-bottom: 10px;
}
.gd-body h3 {
  margin-bottom: 18px;
}

/*----- 7.7 Work Tiles -----*/
.work-tile {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--hz-plate);
}
.work-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--hz-ease);
}
.wt-meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 50px 24px 20px;
  background: linear-gradient(180deg, rgba(14, 17, 21, 0) 0%, rgba(14, 17, 21, 0.8) 100%);
  color: #FFFFFF;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.45s ease, transform 0.5s var(--hz-ease);
}
.wt-meta small {
  color: var(--hz-gold-soft);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
.wt-meta b {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.wt-meta em {
  font-family: var(--hz-ff-mono);
  font-size: 12px;
  font-style: normal;
  opacity: 0.8;
}
.work-tile:hover img {
  transform: scale(1.04);
}
.work-tile:hover .wt-meta,
.work-tile:focus-visible .wt-meta {
  opacity: 1;
  transform: none;
}
/* the base's justified gallery: rows at one height, widths from the photographs' proportions */
.justified {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.justified .work-tile {
  flex-grow: 1;
  height: 380px;
}
.justified .work-tile.is-wide {
  flex-basis: 520px;
  flex-grow: 1.68;
}
.justified .work-tile.is-sq {
  flex-basis: 330px;
  flex-grow: 1;
}

/*----- 7.8 Voices -----*/
.voice {
  margin: 0;
}
.voice blockquote {
  margin: 22px 0 30px;
}
.voice-q {
  color: var(--hz-heading);
  font-size: clamp(19px, 1.5vw, 25px);
  font-weight: 300;
  line-height: 1.65;
}
.voice figcaption {
  display: flex;
  align-items: center;
  gap: 16px;
}
.voice figcaption span {
  display: flex;
  flex-direction: column;
  line-height: 1.4;
}
.voice figcaption b {
  color: var(--hz-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.voice figcaption small {
  color: var(--hz-muted);
  font-size: 14px;
}
.voice-foot {
  margin: 30px 0;
}
.hz-voices h2 {
  margin-bottom: 10px;
}

/*----- 7.9 Post Cards -----*/
.post-card {
  height: 100%;
}
.pcd-img {
  aspect-ratio: 3 / 2;
  background: var(--hz-plate);
}
.pcd-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pcd-body {
  padding-top: 24px;
}
.pcd-meta {
  display: block;
  margin-bottom: 10px;
  color: var(--hz-muted);
  font-size: 13.5px;
}
.pcd-meta b {
  margin-right: 8px;
  color: var(--hz-accent-text);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
.pcd-body h3 {
  margin-bottom: 10px;
}
.pcd-exif {
  display: block;
  margin-bottom: 18px;
  color: var(--hz-muted);
  font-size: 12.5px;
}

/*----- 7.10 Departure Rows -----*/
/* one row per departure: the dates, the places left (live), Guaranteed, the price and a Book button */
.dep-list {
  border-top: 1px solid var(--hz-line);
}
.dep-row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.3fr) auto minmax(0, 0.8fr) auto;
  align-items: center;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--hz-line);
}
.dr-dates {
  display: flex;
  flex-direction: column;
  line-height: 1.4;
}
.dr-dates b {
  color: var(--hz-heading);
  font-family: var(--hz-ff-mono);
  font-size: 15px;
  font-weight: 500;
}
.dr-dates small {
  color: var(--hz-muted);
  font-size: 13.5px;
}
.dr-tag {
  color: var(--hz-free-text);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.dr-tag[hidden] {
  display: block;
  visibility: hidden;
}
.dr-price {
  color: var(--hz-heading);
  font-family: var(--hz-ff-mono);
  font-size: 15px;
  text-align: end;
}
/* the season board: month, photo, tour, date, places, price, book */
.dep-board {
  border-top: 1px solid var(--hz-line);
}
.board-row {
  display: grid;
  grid-template-columns: 90px 96px minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1.3fr) 90px auto;
  align-items: center;
  gap: 22px;
  padding: 18px 0;
  border-bottom: 1px solid var(--hz-line);
}
.br-month {
  color: var(--hz-accent-text);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.br-img {
  aspect-ratio: 4 / 3;
}
.br-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.br-tour {
  display: flex;
  flex-direction: column;
  line-height: 1.45;
}
.br-tour a {
  color: var(--hz-heading);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.br-tour small {
  color: var(--hz-muted);
  font-size: 14px;
}
.br-date {
  color: var(--hz-heading);
  font-family: var(--hz-ff-mono);
  font-size: 14px;
}
.br-price {
  color: var(--hz-heading);
  font-family: var(--hz-ff-mono);
  font-size: 15px;
  text-align: end;
}

/*----- 7.11 The Light -----*/
/* the golden-hour cells: a place, its next golden hour (live), sunrise and sunset in the place's own time */
.light-cell {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lc-place {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.lc-place b {
  color: var(--hz-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.lc-place small {
  color: var(--hz-muted);
  font-size: 13px;
}
.lc-times {
  display: flex;
  gap: 22px;
}
.lc-times span {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.lc-times small {
  color: var(--hz-muted);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.lc-times b {
  color: var(--hz-heading);
  font-family: var(--hz-ff-mono);
  font-size: 15px;
  font-weight: 500;
}
.table-wrap {
  overflow-x: auto;
}
.hz-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}
.hz-table th,
.hz-table td {
  padding: 16px 14px;
  border-bottom: 1px solid var(--hz-line);
  text-align: start;
}
.hz-table thead th {
  color: var(--hz-muted);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.hz-table tbody th {
  display: flex;
  flex-direction: column;
  line-height: 1.4;
}
.hz-table tbody th b {
  color: var(--hz-heading);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.hz-table tbody th small {
  color: var(--hz-muted);
  font-size: 13.5px;
  font-weight: 400;
}
.hz-table td {
  color: var(--hz-heading);
  font-family: var(--hz-ff-mono);
  font-size: 14.5px;
}

/*----- 7.12 Day List -----*/
/* a tour's days: the number in tracked caps, a small photograph, the day's name and a line */
.day-list {
  border-top: 1px solid var(--hz-line);
}
.day-row {
  display: grid;
  grid-template-columns: 76px 120px minmax(0, 1fr);
  align-items: center;
  gap: 26px;
  padding: 18px 0;
  border-bottom: 1px solid var(--hz-line);
}
.dy-num {
  color: var(--hz-accent-text);
  font-family: var(--hz-ff-mono);
  font-size: 13px;
  font-weight: 500;
}
.dy-img {
  aspect-ratio: 3 / 2;
}
.dy-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dy-txt {
  display: flex;
  flex-direction: column;
  line-height: 1.55;
}
.dy-txt b {
  color: var(--hz-heading);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.dy-txt small {
  color: var(--hz-text);
  font-size: 15px;
}
.day-list.is-short .day-row:nth-child(n+6) {
  display: none;
}

/*======================
8. Home 01
========================*/
/*----- 8.1 Framed Hero -----*/
/* the base's main home: one photograph matted in a wide white margin, the thin arrows outside the frame, the page's
   name set down the left edge and the socials down the right; the title sits under the print like a caption */
.hero-frame {
  position: relative;
  padding: 18px 0 34px;
}
.hero-frame .frame-wrap {
  position: relative;
  padding: 0 96px;
}
.hero-frame .hero-swiper {
  overflow: hidden;
}
.hero-photo {
  position: relative;
  margin: 0;
  height: min(64vh, 640px);
  min-height: 420px;
  overflow: hidden;
  background: var(--hz-plate);
}
.hero-photo .hero-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-frame .hero-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "eye btn" "title btn";
  align-items: end;
  column-gap: 40px;
  padding-top: 30px;
}
.hero-frame .hero-copy .hz-eyebrow {
  grid-area: eye;
  justify-self: start;
  margin-bottom: 12px;
}
.hero-frame .hero-copy h1,
.hero-frame .hero-copy .hz-h1 {
  grid-area: title;
}
.hero-frame .hero-copy .hz-btns {
  grid-area: btn;
}
.hero-frame .hero-copy h1,
.hero-frame .hero-copy .hz-h1 {
  font-size: clamp(26px, 2.3vw, 40px);
}
.hero-frame .hero-copy .hz-btns {
  flex-wrap: nowrap;
  padding-bottom: 6px;
}
.hero-frame .hero-prev,
.hero-frame .hero-next {
  position: absolute;
  top: calc(min(64vh, 640px) / 2);
  z-index: 4;
  background: transparent;
  transform: translateY(-50%);
}
.hero-frame .hero-prev {
  left: 18px;
}
.hero-frame .hero-next {
  right: 18px;
}
.hero-frame .hero-prev:hover,
.hero-frame .hero-next:hover {
  background: var(--hz-plate);
  color: var(--hz-heading);
}
.hero-frame .hero-count {
  position: absolute;
  right: 96px;
  top: calc(min(64vh, 640px) + 14px);
  z-index: 3;
  color: var(--hz-muted);
  font-family: var(--hz-ff-mono);
  font-size: 12.5px;
}
.hero-frame .hero-count b {
  color: var(--hz-heading);
  font-weight: 500;
}
.hero-social {
  position: absolute;
  right: 30px;
  top: calc(min(64vh, 640px) - 150px);
  z-index: 3;
}
.hero-social .hz-social {
  flex-direction: column;
}
.hero-social .hz-social a {
  background: transparent;
}

/*----- 8.2 Light Strip -----*/
/* one bar with dividers: the four places' next golden hour, live */
.hz-light-strip {
  padding: 34px 0;
}
.light-strip {
  display: grid;
  grid-template-columns: 1.15fr repeat(4, 1fr);
  align-items: center;
}
.light-strip > * {
  padding: 0 28px;
}
.light-strip > * + * {
  border-left: 1px solid var(--hz-line);
}
.light-strip > :first-child {
  padding-left: 0;
}
.ls-head .hz-eyebrow {
  margin-bottom: 8px;
}
.ls-head b {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--hz-heading);
  font-family: var(--hz-ff-mono);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.45;
}

/*----- 8.3 Photographers First -----*/
.intro-copy h2 {
  margin-bottom: 20px;
}
.intro-copy .hz-rows {
  margin: 32px 0;
}
.intro-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}
.intro-photos {
  position: relative;
  padding: 0 0 90px 70px;
}
.ip-main {
  margin: 0;
  aspect-ratio: 13 / 9;
}
.ip-main img,
.ip-small img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ip-small {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 38%;
  margin: 0;
  aspect-ratio: 3 / 2;
  border: 12px solid var(--hz-bg);
}
.ip-caption {
  position: absolute;
  right: 0;
  bottom: 52px;
  color: var(--hz-muted);
  font-size: 12.5px;
}

/*----- 8.4 Panorama Stitch -----*/
/* five frames of one ridge, each a window onto the same picture: scattered and turned at first, they slide and
   settle edge to edge with a third of overlap; their borders thin to nothing and one panorama is left */
.hz-pano {
  overflow: clip;
}
.pano-stage {
  position: relative;
  aspect-ratio: 3 / 1;
  margin: 0 auto;
}
.pano-frame {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 26%;
  overflow: hidden;
  background: var(--hz-plate);
  outline: 6px solid var(--hz-bg);
  box-shadow: 0 18px 40px rgba(17, 17, 17, 0.16);
}
.pano-frame img {
  position: absolute;
  top: 0;
  height: 100%;
  width: 384.62%;
  max-width: none;
  object-fit: cover;
}
.pano-frame b {
  position: absolute;
  left: 12px;
  top: 10px;
  z-index: 2;
  color: #FFFFFF;
  font-family: var(--hz-ff-mono);
  font-size: 12px;
  font-weight: 500;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}
.pf-1 {
  left: 0;
}
.pf-2 {
  left: 18.5%;
}
.pf-3 {
  left: 37%;
}
.pf-4 {
  left: 55.5%;
}
.pf-5 {
  left: 74%;
}
.pf-2 img {
  left: -71.154%;
}
.pf-3 img {
  left: -142.308%;
}
.pf-4 img {
  left: -213.462%;
}
.pf-5 img {
  left: -284.615%;
}
.pano-readout {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 46px;
  border-top: 1px solid var(--hz-line);
}
.pano-readout li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 20px 0 0;
}
.pano-readout span {
  color: var(--hz-muted);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.pano-readout b {
  color: var(--hz-heading);
  font-family: var(--hz-ff-mono);
  font-size: 16px;
  font-weight: 500;
}

/*----- 8.5 Workshops List -----*/
/* the base's interactive links: one row per date; a photograph follows the pointer over the list */
.hz-ws-list {
  position: relative;
  overflow: clip;
}
.ws-list {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--hz-line);
}
.wl-row {
  display: grid;
  grid-template-columns: 170px minmax(0, 2.2fr) minmax(0, 0.9fr) minmax(0, 1.1fr) 80px 44px;
  align-items: center;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--hz-line);
  transition: padding 0.45s var(--hz-ease);
}
.wl-row:hover {
  padding-left: 14px;
}
.wl-date {
  color: var(--hz-heading);
  font-family: var(--hz-ff-mono);
  font-size: 14px;
}
.wl-name {
  display: flex;
  flex-direction: column;
  color: var(--hz-heading);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.2em;
  line-height: 1.5;
  text-transform: uppercase;
}
.wl-name small {
  color: var(--hz-muted);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.wl-level {
  color: var(--hz-text);
  font-size: 14px;
}
.wl-price {
  color: var(--hz-heading);
  font-family: var(--hz-ff-mono);
  font-size: 15px;
  text-align: end;
}
.wl-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--hz-heading);
  font-size: 13px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.wl-add:hover {
  background: var(--hz-gold);
  color: #111111;
}
.wl-float {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 300px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.86);
  transition: opacity 0.35s ease, transform 0.45s var(--hz-ease);
}
.wl-float.is-on {
  opacity: 0.9;
  transform: translate(-50%, -50%) scale(1);
}
.wl-float img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*----- 8.6 Prints By Size -----*/
.hz-prints-band h2 {
  margin-bottom: 20px;
}
.size-scale {
  display: flex;
  align-items: flex-end;
  gap: 18px;
}
.size-scale li {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex: 1 1 0;
}
.size-scale li:nth-child(1) {
  flex-grow: 2;
}
.size-scale li:nth-child(2) {
  flex-grow: 3;
}
.size-scale li:nth-child(3) {
  flex-grow: 4;
}
.size-scale li:nth-child(4) {
  flex-grow: 6;
}
.size-scale li:nth-child(5) {
  flex-grow: 8;
}
.size-scale .sz-shape {
  width: 100%;
  margin-bottom: 12px;
}
.size-scale b {
  color: var(--hz-heading);
  font-family: var(--hz-ff-mono);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.size-scale small {
  color: var(--hz-muted);
  font-family: var(--hz-ff-mono);
  font-size: 13px;
}
.prints-row {
  margin-top: 60px;
}

/*----- 8.7 Call To Action -----*/
/* a plain band with snow drifting at its edges, the copy in the clear middle */
.hz-cta {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: 130px 0;
}
.cta-inner {
  max-width: 760px;
  margin: 0 auto;
}
.cta-inner h2 {
  margin-bottom: 18px;
}
.cta-inner .hz-btns {
  margin-top: 34px;
}
.cta-inner .hz-eyebrow::after {
  content: "";
  display: inline-block;
  width: 22px;
  height: 1px;
  margin-inline-start: 12px;
  background: currentColor;
  vertical-align: middle;
}

/*======================
9. Home 02
========================*/
/*----- 9.1 Split Hero -----*/
/* the base's split showcase: two framed photographs side by side, the numbered pagination down the right edge,
   the title and the workshop finder under them */
.hero-split {
  position: relative;
  padding: 18px 0 0;
}
.hero-split .wide {
  position: relative;
  padding: 0 96px;
}
.split-swiper {
  overflow: hidden;
}
.split-pair {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 18px;
  height: min(60vh, 600px);
  min-height: 400px;
}
.sp-photo {
  margin: 0;
  overflow: hidden;
  background: var(--hz-plate);
}
.sp-photo .hero-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.split-dots {
  position: absolute;
  right: 34px;
  top: calc(min(60vh, 600px) / 2);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transform: translateY(-50%);
}
.split-dots button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  color: var(--hz-muted);
  font-family: var(--hz-ff-mono);
  font-size: 12px;
}
.split-dots button::after {
  content: "";
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.4s var(--hz-ease);
}
.split-dots button.is-active {
  color: var(--hz-heading);
}
.split-dots button.is-active::after {
  width: 22px;
}
.split-copy {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: end;
  gap: 50px;
  padding: 44px 0 40px;
}
.sc-title .hz-eyebrow {
  margin-bottom: 14px;
}
.sc-side .hz-lead {
  margin-bottom: 26px;
}
/* the finder: one tonal bar of three choices and a button */
.ws-finder {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  align-items: end;
  gap: 2px;
  padding: 22px;
  background: var(--hz-band);
}
.wf-cell {
  padding: 0 18px 0 0;
}
.wf-cell label {
  display: block;
  margin-bottom: 8px;
  color: var(--hz-muted);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.ws-finder .hz-input {
  background: var(--hz-surface);
}
.ws-finder .hz-btn {
  height: 54px;
}

/*----- 9.2 Workshops Grid -----*/
.hz-ws-grid .hz-title.is-split {
  align-items: flex-end;
}

/*----- 9.3 Set, Check, Lock -----*/
/* four photographs down the page, alternating sides; beside each, the camera's read-out: aperture, shutter, ISO and
   focal length as reels that roll through their values and lock on the photograph's own as it crosses the middle */
.lock-list {
  display: flex;
  flex-direction: column;
  gap: 90px;
}
.lock-item {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: center;
  gap: 60px;
  margin: 0;
}
.lock-item:nth-child(even) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
}
.lock-item:nth-child(even) .li-img {
  order: 2;
}
.li-img {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--hz-plate);
}
.li-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lock-item figcaption {
  display: flex;
  flex-direction: column;
}
.lock-item figcaption b {
  color: var(--hz-heading);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
/* the read-out, built by main.js: four windows, each a reel of values */
.lock-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  margin-top: 26px;
  background: var(--hz-line);
  border: 1px solid var(--hz-line);
}
.lp-cell {
  position: relative;
  padding: 16px 18px 14px;
  background: var(--hz-bg);
}
.lp-cell small {
  display: block;
  color: var(--hz-muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.lp-window {
  position: relative;
  display: block;
  height: 40px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
}
.lp-reel {
  display: block;
  will-change: transform;
}
.lp-reel span {
  display: block;
  height: 40px;
  color: var(--hz-heading);
  font-family: var(--hz-ff-mono);
  font-size: 24px;
  font-weight: 500;
  line-height: 40px;
}
.lp-cell .lp-lock {
  position: absolute;
  right: 14px;
  top: 14px;
  color: var(--hz-muted);
  font-size: 11px;
  opacity: 0.4;
  transition: color 0.3s ease, opacity 0.3s ease, transform 0.35s cubic-bezier(0.34, 1.6, 0.5, 1);
}
.lp-cell.is-locked .lp-lock {
  color: var(--hz-gold-deep);
  opacity: 1;
  transform: scale(1.2);
}
.lock-state {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  color: var(--hz-muted);
  font-family: var(--hz-ff-mono);
  font-size: 13px;
}
.lock-item.is-locked .lock-state {
  color: var(--hz-free-text);
}

/*----- 9.4 Levels Band -----*/
.hz-levels h2 {
  margin-bottom: 18px;
}
.hz-levels .hz-lead {
  margin-bottom: 30px;
}
.level-col h3 {
  margin-bottom: 18px;
}
.level-col .hz-rows li {
  padding: 16px 0;
}

/*----- 9.5 Gear Teaser -----*/
.hz-gear-teaser h2 {
  margin-bottom: 18px;
}
.bag-meter {
  margin: 30px 0 34px;
  padding: 26px 28px;
  background: var(--hz-surface);
}
.bm-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
}
.bm-head span {
  color: var(--hz-muted);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.bm-head b {
  color: var(--hz-heading);
  font-family: var(--hz-ff-mono);
  font-size: 26px;
  font-weight: 500;
}
.bm-head small {
  color: var(--hz-muted);
  font-family: var(--hz-ff-mono);
  font-size: 13px;
}
.bm-bar {
  position: relative;
  display: block;
  height: 6px;
  background: var(--hz-plate);
  overflow: hidden;
}
.bm-bar i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--hz-free);
  transition: width 0.6s var(--hz-ease), background-color 0.3s ease;
}
.bag-meter.is-near .bm-bar i {
  background: var(--hz-gold);
}
.bag-meter.is-over .bm-bar i {
  background: var(--hz-booked);
}
.bm-note {
  margin: 12px 0 0;
  color: var(--hz-muted);
  font-size: 14px;
}
.bag-meter.is-over .bm-note {
  color: var(--hz-booked-text);
}
.gear-mini {
  padding: 34px;
  background: var(--hz-surface);
}
.gear-mini .hz-tabs {
  margin-bottom: 24px;
}
.gl-groups.is-two {
  columns: 2;
  column-gap: 34px;
}
.gl-groups.is-two .gl-group {
  break-inside: avoid;
}

/*----- 9.6 Guides Rail -----*/
.hz-guides-rail .title-side {
  align-items: center;
}

/*----- 9.7 FAQ Band -----*/
.hz-faq-band h2 {
  margin-bottom: 18px;
}
.faq-photo {
  margin: 34px 0 0;
  aspect-ratio: 16 / 10;
}
.faq-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hz-faq-band .acc-item + .acc-item {
  border-top: 0;
}

/*======================
10. Home 03
========================*/
/*----- 10.1 Full Hero -----*/
/* beside the side column: one photograph to the full height of the screen, the copy low on the left under a
   blue-hour wash, the arrows and the count at the foot */
.hero-full {
  position: relative;
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
  background: var(--hz-night);
}
.hero-full .hero-swiper,
.hero-full .swiper-wrapper,
.hero-full .swiper-slide {
  height: 100%;
}
.hero-full .swiper-slide {
  position: relative;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
}
.hero-full .hero-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-full .swiper-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgba(10, 13, 17, 0.82) 0%, rgba(10, 13, 17, 0.36) 46%, rgba(10, 13, 17, 0.08) 100%);
}
.hero-full .hero-copy {
  max-width: 760px;
  padding: 0 80px 130px;
  --hz-heading: #FFFFFF;
  --hz-text: rgba(255, 255, 255, 0.86);
  --hz-accent-text: #799ECE;
  --hz-plate: rgba(255, 255, 255, 0.12);
  color: var(--hz-text);
}
.hero-full .hero-copy h1,
.hero-full .hero-copy .hz-h1 {
  margin-bottom: 20px;
}
.hero-full .hero-copy .hz-lead {
  max-width: 560px;
  margin-bottom: 32px;
}
.hero-full .hero-copy .hz-btn.is-tonal {
  color: #FFFFFF;
}
.hero-full .hero-copy .hz-btn.is-tonal:hover {
  background: #FFFFFF;
  color: #111111;
}
.hero-full .hero-nav {
  position: absolute;
  right: 60px;
  bottom: 60px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 16px;
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--hz-ff-mono);
  font-size: 13px;
}
.hero-full .hero-nav b {
  color: #FFFFFF;
  font-weight: 500;
}
.hero-full .slider-arrow {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
}
.hero-full .slider-arrow:hover {
  background: #FFFFFF;
  color: #111111;
}

/*----- 10.2 The Season Ahead -----*/
.hz-season .hz-tabs {
  margin-bottom: 30px;
}

/*----- 10.3 Star Trails -----*/
/* a night band: the canvas fills it, the copy sits low on the left */
.hz-trails {
  position: relative;
  isolation: isolate;
  overflow: clip;
  min-height: 760px;
  display: flex;
  align-items: center;
  padding: 120px 0;
}
.trails-canvas {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
}
.trails-copy {
  max-width: 470px;
  padding: 40px 0;
}
.trails-copy h2 {
  margin-bottom: 20px;
}
.trails-readout {
  margin: 30px 0 34px;
  border-top: 1px solid var(--hz-line);
}
.trails-readout li {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hz-line);
}
.trails-readout span {
  color: var(--hz-muted);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.trails-readout b {
  color: #FFFFFF;
  font-family: var(--hz-ff-mono);
  font-size: 14.5px;
  font-weight: 500;
}

/*----- 10.4 Estimator -----*/
.hz-estimate h2 {
  margin-bottom: 18px;
}
.hz-estimate .hz-rows {
  margin-top: 30px;
}
.estimate-panel .hz-field {
  margin-bottom: 6px;
}
.es-lines {
  margin-top: 20px;
}
.es-lines li > span {
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.es-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 18px 0 8px;
}
.es-total span {
  color: var(--hz-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.es-total b {
  color: var(--hz-heading);
  font-family: var(--hz-ff-mono);
  font-size: 30px;
  font-weight: 500;
}
.es-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  margin: 10px 0 14px;
}
.es-split p {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 14px 18px;
  background: var(--hz-plate);
}
.es-split small {
  color: var(--hz-muted);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.es-split b {
  color: var(--hz-heading);
  font-family: var(--hz-ff-mono);
  font-size: 18px;
  font-weight: 500;
}
.es-note {
  margin: 0 0 20px;
  color: var(--hz-muted);
  font-size: 14px;
}

/*----- 10.5 Featured Tour -----*/
.featured-copy h2 {
  margin-bottom: 18px;
}
.featured-copy .hz-rows {
  margin: 30px 0 34px;
}

/*----- 10.6 The Light Today -----*/
.hz-light-table .hz-title.is-split .hz-lead {
  max-width: 440px;
}

/*======================
11. Inner Pages
========================*/
/*----- 11.1 Sidebar & Widgets -----*/
/* the sidebar is quiet: a small heading, a short stroke, plain lists, each widget on a pale plate */
.hz-sidebar {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.hz-sidebar .widget {
  padding: 34px 32px;
  background: var(--hz-plate);
}
.hz-sidebar .widget > h2 {
  position: relative;
  margin-bottom: 22px;
  padding-bottom: 16px;
}
.hz-sidebar .widget > h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46px;
  height: 2px;
  background: var(--hz-gold);
}
.widget-search {
  position: relative;
}
.widget-search input {
  display: block;
  width: 100%;
  height: 54px;
  padding: 0 58px 0 18px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: var(--hz-field);
  color: var(--hz-heading);
  font-family: var(--hz-ff-body);
  font-size: 16px;
  outline: 0;
  transition: border-color 0.3s ease;
}
.widget-search input:focus {
  border-bottom-color: var(--hz-gold);
}
.hz-sidebar .widget .widget-search input {
  background: var(--hz-surface);
}
/* the light today and the next departures, in the sidebar */
.widget-light li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--hz-line-2);
  font-size: 15px;
}
.widget-light li:last-child {
  border-bottom: 0;
}
.widget-light span {
  color: var(--hz-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.widget-light small {
  color: var(--hz-accent-text);
  font-family: var(--hz-ff-mono);
  font-size: 12.5px;
  text-align: end;
}
.widget-deps li {
  padding: 12px 0;
  border-bottom: 1px solid var(--hz-line-2);
}
.widget-deps li:first-child {
  padding-top: 0;
}
.widget-deps li:last-child {
  border-bottom: 0;
}
.widget-deps a {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.widget-deps a b {
  color: var(--hz-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.widget-deps a span {
  color: var(--hz-muted);
  font-family: var(--hz-ff-mono);
  font-size: 12.5px;
  white-space: nowrap;
}
.widget-deps .hz-status {
  font-size: 12.5px;
}
.widget-search button {
  position: absolute;
  top: 0;
  right: 0;
  width: 54px;
  height: 54px;
  background: var(--hz-gold);
  color: #111111;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.widget-search button:hover {
  background: #111111;
  color: #FFFFFF;
}
.widget-cats li a,
.widget-cats li button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 0;
  border-bottom: 1px solid var(--hz-line-2);
  color: var(--hz-text);
  font-size: 16px;
  text-align: start;
  transition: color 0.3s ease, padding 0.3s var(--hz-ease);
}
.widget-cats li:first-child a,
.widget-cats li:first-child button {
  padding-top: 0;
}
.widget-cats li:last-child a,
.widget-cats li:last-child button {
  border-bottom: 0;
  padding-bottom: 0;
}
.widget-cats li span {
  color: var(--hz-muted);
  font-size: 14px;
}
.widget-cats li a:hover,
.widget-cats li button:hover,
.widget-cats li button.is-active {
  color: var(--hz-accent-text);
}
.widget-cats li button.is-active span {
  color: var(--hz-accent-text);
}
.widget-nav li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  padding: 15px 20px;
  background: var(--hz-surface);
  color: var(--hz-heading);
  font-weight: 500;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.widget-nav li:last-child a {
  margin-bottom: 0;
}
.widget-nav li a i {
  color: var(--hz-accent-text);
  font-size: 13px;
  transition: transform 0.3s var(--hz-ease), color 0.3s ease;
}
.widget-nav li a:hover,
.widget-nav li a.is-current {
  background: var(--hz-gold);
  color: #111111;
}
.widget-nav li a:hover i,
.widget-nav li a.is-current i {
  color: #111111;
  transform: translateX(4px);
}
.side-posts li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hz-line-2);
}
.side-posts li:first-child {
  padding-top: 0;
}
.side-posts li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.side-posts .thumb {
  flex: 0 0 78px;
  width: 78px;
  height: 78px;
  overflow: hidden;
}
.side-posts .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--hz-ease);
}
.side-posts li:hover .thumb img {
  transform: scale(1.08);
}
.side-posts .date {
  display: block;
  margin-bottom: 4px;
  color: var(--hz-accent-text);
  font-size: 13px;
  font-weight: 500;
}
.side-posts h3 a {
  color: var(--hz-heading);
}
.side-posts h3 a:hover {
  color: var(--hz-accent-text);
}
.widget-tags {
  margin: 0;
  line-height: 1.9;
}
.widget-tags a {
  color: var(--hz-text);
}
.widget-tags a:hover {
  color: var(--hz-accent-text);
}
.hz-sidebar .widget.widget-cta {
  position: relative;
  padding: 44px 34px;
  background: var(--hz-night);
  text-align: center;
}
.widget-cta .hz-script {
  display: block;
  color: var(--hz-gold-soft);
  font-size: 26px;
  line-height: 1.2;
}
.widget-cta h2 {
  margin: 6px 0 12px;
  color: #FFFFFF;
}
.widget-cta p {
  margin-bottom: 24px;
}
.widget-line .line-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hz-line-2);
}
.widget-line .line-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.widget-line .hz-ico {
  width: 54px;
  height: 54px;
}
.line-row small {
  display: block;
  color: var(--hz-muted);
  font-size: 13px;
}
.line-row b {
  color: var(--hz-heading);
  font-size: 18px;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.line-row:hover b {
  color: var(--hz-accent-text);
}

/*----- 11.2 Rows, Choices & Pages -----*/
.hz-kv {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sum-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 18px 0 24px;
  color: var(--hz-heading);
  font-size: 18px;
  font-weight: 500;
}
.sum-total b {
  color: var(--hz-heading);
  font-family: var(--hz-ff-body);
  font-size: 30px;
  font-weight: 400;
}
.hz-kv li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--hz-line);
}
.hz-kv li:first-child {
  border-top: 1px solid var(--hz-line);
}
.hz-kv li b {
  color: var(--hz-heading);
  font-weight: 500;
  text-align: end;
}
.hz-kv.is-plain li:first-child {
  border-top: 0;
}
.choice-list {
  display: grid;
  gap: 12px;
}
.choice-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 60px 16px 18px;
  background: var(--hz-plate);
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.hz-bg-band .choice-card,
.hz-bg-band .choice-card {
  background: var(--hz-surface);
}
.choice-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.choice-card:hover {
  box-shadow: inset 3px 0 0 var(--hz-line-2);
}
.choice-card:focus-within {
  box-shadow: 0 0 0 4px rgba(var(--hz-gold-rgb), 0.18);
}
.choice-card.is-checked {
  background: var(--hz-band);
  box-shadow: inset 3px 0 0 var(--hz-gold);
}
.choice-card.is-off {
  opacity: 0.45;
  cursor: not-allowed;
}
.choice-ico {
  display: inline-flex;
  flex: 0 0 48px;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--hz-plate);
  color: var(--hz-accent-text);
  font-size: 18px;
}
.choice-card.is-checked .choice-ico {
  background: var(--hz-gold);
  color: #111111;
}
.choice-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.choice-body b {
  color: var(--hz-heading);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.choice-body span,
.choice-body small {
  color: var(--hz-muted);
  font-size: 14.5px;
  line-height: 1.5;
}
.choice-tick {
  position: absolute;
  top: 50%;
  right: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-top: -13px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--hz-line-2);
  color: transparent;
  font-size: 11px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.choice-card.is-checked .choice-tick {
  background: var(--hz-gold);
  box-shadow: none;
  color: #111111;
}
.hz-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 60px;
}
.hz-pagination a,
.hz-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--hz-plate);
  color: var(--hz-heading);
  font-weight: 500;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.hz-pagination a i {
  color: var(--hz-accent-text);
  font-size: 13px;
}
.hz-pagination .is-current,
.hz-pagination a:hover,
.hz-pagination a:hover i {
  background: var(--hz-gold);
  color: #111111;
}
.hz-zoom {
  display: block;
  overflow: hidden;
}
.hz-zoom img {
  width: 100%;
  transition: transform 0.9s var(--hz-ease);
}
.hz-zoom:hover img {
  transform: scale(1.05);
}
.grid-empty {
  padding: 40px 0;
  color: var(--hz-muted);
  text-align: center;
}
.is-unmatched,
[data-filter-grid] > .is-hidden {
  display: none;
}
.hz-range {
  width: 100%;
  height: 4px;
  margin: 14px 0 10px;
  border-radius: 0;
  background: var(--hz-line-2);
  accent-color: var(--hz-gold-deep);
  appearance: none;
  -webkit-appearance: none;
}
.hz-range::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  border: 5px solid var(--hz-surface);
  border-radius: 50%;
  background: var(--hz-gold);
  box-shadow: 0 2px 8px rgba(8, 11, 15, 0.25);
  cursor: pointer;
  -webkit-appearance: none;
}
.hz-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 5px solid var(--hz-surface);
  border-radius: 50%;
  background: var(--hz-gold);
  cursor: pointer;
}
.range-ends {
  display: flex;
  justify-content: space-between;
  color: var(--hz-muted);
  font-size: 14px;
}

/* chips: tonal round faces for amounts, days and times (the input stays in the form, hidden) */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}
.chip-choice {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}
.chip-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.chip-choice > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 48px;
  padding: 0 22px;
  border-radius: 24px;
  background: var(--hz-plate);
  color: var(--hz-heading);
  font-size: 16px;
  font-weight: 500;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.hz-panel .chip-choice > span {
  background: var(--hz-plate);
}
.chip-choice:hover > span {
  background: var(--hz-band);
}
.chip-choice input:focus-visible + span {
  box-shadow: 0 0 0 4px rgba(var(--hz-gold-rgb), 0.25);
}
.chip-choice.is-checked > span {
  background: var(--hz-gold);
  color: #111111;
}
.chip-choice > span small {
  color: var(--hz-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.chip-choice.is-off {
  cursor: not-allowed;
}
.chip-choice.is-off > span {
  opacity: 0.5;
  text-decoration: line-through;
}

/*----- 11.3 Quantity Stepper -----*/
.hz-qty {
  display: inline-flex;
  align-items: center;
  background: var(--hz-plate);
}
.hz-bg-band .hz-qty {
  background: var(--hz-surface);
}
.hz-qty button {
  width: 46px;
  height: 54px;
  color: var(--hz-heading);
  font-size: 12px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.hz-qty button:hover {
  background: var(--hz-band);
  color: var(--hz-accent-text);
}
.hz-qty input {
  width: 52px;
  height: 54px;
  border: 0;
  border-inline: 1px solid var(--hz-line);
  background: transparent;
  color: var(--hz-heading);
  font-family: var(--hz-ff-body);
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  outline: 0;
  -moz-appearance: textfield;
}
.hz-qty input::-webkit-outer-spin-button,
.hz-qty input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
.hz-qty.is-sm button {
  width: 36px;
  height: 42px;
}
.hz-qty.is-sm input {
  width: 42px;
  height: 42px;
  font-size: 16px;
}

/*======================
12. Tour Pages
========================*/
/*----- 12.1 Tour Finder -----*/
/* one tonal bar: region, level, month, length, a price ceiling and Reset */
.tour-filter {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.2fr) auto;
  align-items: end;
  gap: 16px;
  padding: 24px;
  background: var(--hz-band);
}
.tf-cell label {
  display: block;
  margin-bottom: 8px;
  color: var(--hz-muted);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.tf-cell label b {
  color: var(--hz-heading);
  font-family: var(--hz-ff-mono);
  font-weight: 500;
  letter-spacing: 0;
}
.tour-filter .hz-input {
  background: var(--hz-surface);
}
.tf-cell.is-range {
  padding-bottom: 14px;
}
.tour-filter .hz-btn {
  height: 54px;
}
.tf-count {
  margin: 26px 0 34px;
  color: var(--hz-muted);
  font-size: 14px;
}
.tf-count b {
  color: var(--hz-heading);
  font-family: var(--hz-ff-mono);
  font-weight: 500;
}
.grid-empty {
  margin: 30px 0 0;
  padding: 26px;
  background: var(--hz-band);
  color: var(--hz-muted);
  text-align: center;
}

/*----- 12.2 Tour Details -----*/
.hz-tour-overview h2 {
  margin-bottom: 22px;
}
.td-sub {
  margin: 44px 0 16px;
}
.tour-light {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  align-items: center;
  margin-top: 34px;
  padding: 20px 24px;
  background: var(--hz-band);
}
.tour-light > * + * {
  padding-left: 20px;
  border-left: 1px solid var(--hz-line);
}
.tl-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-right: 20px;
}
.tl-head .hz-ico {
  width: 44px;
  height: 44px;
}
.tl-head > span {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tl-head small,
.tl-cell small {
  color: var(--hz-muted);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.tl-head .hz-status {
  font-size: 12.5px;
  font-weight: 400;
}
.tl-cell {
  display: flex;
  flex-direction: column;
}
.tl-cell b {
  color: var(--hz-heading);
  font-family: var(--hz-ff-mono);
  font-size: 15px;
  font-weight: 500;
}
.tour-side {
  position: sticky;
  top: 110px;
}
.tour-side .hz-eyebrow {
  margin-bottom: 6px;
}
.ts-price {
  display: flex;
  flex-direction: column;
  margin-bottom: 22px;
  color: var(--hz-heading);
  font-family: var(--hz-ff-mono);
  font-size: 36px;
  line-height: 1.2;
}
.ts-price small {
  color: var(--hz-muted);
  font-family: var(--hz-ff-body);
  font-size: 13.5px;
}
.tour-side .hz-rows {
  margin-bottom: 26px;
}
.tour-side .hz-more {
  margin-top: 22px;
}
.tour-side h3 {
  margin-bottom: 16px;
}
.dep-list.is-side .dep-row {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 14px;
}
.dep-list.is-side .dr-tag,
.dep-list.is-side .dr-price {
  display: none;
}
.dep-list.is-side .hz-btn {
  grid-column: 2;
  grid-row: 1 / span 2;
}
.dep-list.is-side + .hz-rows {
  margin-top: 26px;
}
.days-photo {
  margin: 34px 0 0;
  aspect-ratio: 4 / 5;
}
.days-photo img,
.info-photo img,
.night-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*----- 12.3 Tour Reel & Facts -----*/
/* gallery first: a wide reel of the tour's photographs, three at a time, its arrows at the foot */
.hz-tour-reel {
  position: relative;
  padding: 0 0 70px;
}
.reel-item {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--hz-plate);
}
.reel-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--hz-ease);
}
.reel-item:hover img {
  transform: scale(1.04);
}
.reel-nav {
  position: absolute;
  left: 50%;
  bottom: 0;
  display: flex;
  gap: 8px;
  transform: translateX(-50%);
}
.facts-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 30px 0;
}
.facts-strip li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 26px;
}
.facts-strip li + li {
  border-left: 1px solid var(--hz-line);
}
.facts-strip li:first-child {
  padding-left: 0;
}
.facts-strip small {
  color: var(--hz-muted);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.facts-strip b {
  color: var(--hz-heading);
  font-family: var(--hz-ff-mono);
  font-size: 16px;
  font-weight: 500;
}
.hz-tour-plan h2 {
  margin-bottom: 18px;
}
.hz-tour-plan .day-list {
  margin-top: 34px;
}
.night-photo {
  margin: 0;
  aspect-ratio: 4 / 3;
}
.hz-night-skies h2 {
  margin-bottom: 18px;
}
.hz-night-skies .hz-rows {
  margin-top: 30px;
}
.board-key {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 30px;
  margin-top: 26px;
}

/*----- 12.4 Booking Wizard -----*/
.wz-steps {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  margin-bottom: 50px;
  border-bottom: 1px solid var(--hz-line);
}
.wz-steps button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  padding: 16px 12px 18px 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--hz-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-align: start;
  text-transform: uppercase;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.wz-steps button b {
  font-family: var(--hz-ff-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
}
.wz-steps button.is-done {
  color: var(--hz-heading);
}
.wz-steps button.is-done b::after {
  content: " \f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 10px;
  color: var(--hz-free-text);
}
.wz-steps button.is-active {
  border-color: var(--hz-gold);
  color: var(--hz-heading);
}
.wz-step {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.wz-step legend {
  float: left;
  width: 100%;
  margin-bottom: 26px;
}
.wz-step legend + * {
  clear: both;
}
.wz-note {
  color: var(--hz-muted);
}
.wz-tour {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 4px 18px;
  align-items: center;
  height: 100%;
  padding: 12px;
  background: var(--hz-band);
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
}
.wz-tour img {
  width: 110px;
  height: 84px;
  object-fit: cover;
}
.ws-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.4;
}
.ws-txt small {
  color: var(--hz-muted);
  font-size: 12.5px;
}
.ws-txt b {
  color: var(--hz-heading);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.ws-txt em {
  color: var(--hz-text);
  font-family: var(--hz-ff-mono);
  font-size: 12.5px;
  font-style: normal;
}
.wz-tour.is-checked,
.wz-dep.is-checked,
.wz-room.is-checked {
  background: var(--hz-surface);
  box-shadow: inset 0 0 0 2px var(--hz-gold);
}
.wz-tour:focus-within,
.wz-dep:focus-within {
  outline: 2px solid var(--hz-gold);
  outline-offset: 2px;
}
.wz-deps {
  display: grid;
  gap: 10px;
}
.wz-dep {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: var(--hz-band);
}
.wz-dep.is-full {
  opacity: 0.8;
}
.wd-dates {
  display: flex;
  flex-direction: column;
  line-height: 1.45;
}
.wd-dates b {
  color: var(--hz-heading);
  font-family: var(--hz-ff-mono);
  font-size: 14.5px;
  font-weight: 500;
}
.wd-dates small {
  color: var(--hz-muted);
  font-size: 13.5px;
}
.wd-tag {
  color: var(--hz-muted);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.wz-msg {
  margin-top: 20px;
}
.wz-sub {
  margin: 10px 0 12px;
}
.wz-room {
  height: 100%;
  padding: 20px;
  background: var(--hz-band);
}
.wz-level {
  margin-top: 24px;
}
.wz-extras {
  display: grid;
  gap: 10px;
}
.wz-extras li {
  padding: 18px 20px;
  background: var(--hz-band);
}
.wz-extras .hz-check span {
  display: flex;
  flex-direction: column;
  color: var(--hz-muted);
  font-size: 14px;
  line-height: 1.5;
}
.wz-extras .hz-check b {
  color: var(--hz-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.wz-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid var(--hz-line);
}
.wz-count {
  color: var(--hz-muted);
  font-family: var(--hz-ff-mono);
  font-size: 13px;
}
.wz-done {
  padding: 44px;
  background: var(--hz-band);
  text-align: center;
}
.wd-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: var(--hz-free);
  color: #FFFFFF;
  font-size: 24px;
}
.wz-done h3 {
  margin-bottom: 14px;
}
.wz-done .hz-btns {
  justify-content: center;
  margin-top: 26px;
}
.wz-side {
  position: sticky;
  top: 110px;
  background: var(--hz-surface);
  box-shadow: var(--hz-shadow);
}
.wz-side img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.ws-body {
  padding: 26px;
}
.ws-body .hz-eyebrow {
  margin-bottom: 8px;
}
.ws-when {
  margin: 8px 0 18px;
  color: var(--hz-heading);
  font-family: var(--hz-ff-mono);
  font-size: 13.5px;
}
.ws-lines li > span {
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--hz-text);
}
.ws-sums {
  margin: 6px 0 0;
}
.ws-sums li:first-child {
  border-top: 0;
}

/*----- 12.5 Before You Travel -----*/
.info-photo {
  margin: 0;
  aspect-ratio: 4 / 3;
}
.hz-info-levels h2,
.hz-info-pay h2,
.hz-private h2 {
  margin-bottom: 18px;
}
.hz-info-pay .hz-rows,
.hz-private .hz-rows {
  margin: 30px 0;
}
.level-col h3 {
  margin-bottom: 18px;
}
.value-item {
  height: 100%;
}
.value-item .hz-ico {
  margin-bottom: 20px;
}
.value-item h3 {
  margin-bottom: 12px;
}
.value-item p {
  margin: 0;
}

/*----- 12.6 Workshops Page -----*/
.ws-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}
.wsf-selects {
  display: flex;
  gap: 14px;
}
.wsf-selects .tf-cell {
  min-width: 200px;
}
.ws-hero {
  margin: 0 0 60px;
  aspect-ratio: 21 / 8;
}
.ws-hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hz-ws-details h2 {
  margin-bottom: 18px;
}
.ws-day {
  border-top: 1px solid var(--hz-line);
}
.ws-day li {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 4px 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--hz-line);
}
.ws-day li > span {
  grid-row: span 2;
  color: var(--hz-accent-text);
  font-size: 13px;
}
.ws-day b {
  color: var(--hz-heading);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.ws-day small {
  font-size: 15px;
}
.side-light {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  margin: 0 0 22px;
  padding: 18px;
  background: var(--hz-plate);
}
.side-light .hz-status {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 12.5px;
}
.side-light span {
  display: flex;
  flex-direction: column;
}
.side-light small {
  color: var(--hz-muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.side-light b {
  color: var(--hz-heading);
  font-family: var(--hz-ff-mono);
  font-weight: 500;
}

/*----- 12.7 Gear List -----*/
/* the packing list: one group per category, its weight in the head; each item a tick, its name and its weight */
.gear-side {
  position: sticky;
  top: 110px;
}
.gear-side .bag-meter {
  margin: 0 0 24px;
}
.gear-side .bag-meter h2 {
  margin-bottom: 16px;
}
.bm-rows {
  margin: 18px 0 22px;
}
.gear-photo {
  margin: 0;
  aspect-ratio: 4 / 3;
}
.gear-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gear-head {
  margin-bottom: 34px;
}
.gear-head h2 {
  margin-bottom: 16px;
}
.gear-head .hz-tabs {
  margin-top: 26px;
}
.gl-groups {
  columns: 2;
  column-gap: 40px;
}
.gl-group {
  break-inside: avoid;
  margin-bottom: 30px;
}
.gl-group h3 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hz-line-2);
}
.gl-group h3 small {
  color: var(--hz-accent-text);
  font-family: var(--hz-ff-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.gl-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid var(--hz-line);
}
.gl-item .hz-check {
  font-size: 15px;
  line-height: 1.5;
}
.gl-item .hz-check span {
  display: flex;
  flex-direction: column;
}
.gl-item .hz-check b {
  color: var(--hz-heading);
  font-weight: 400;
}
.gl-item .hz-check small {
  color: var(--hz-accent-text);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.gl-item.is-packed .hz-check b {
  font-weight: 600;
}
.gl-g {
  flex-shrink: 0;
  padding-top: 3px;
  color: var(--hz-muted);
  font-family: var(--hz-ff-mono);
  font-size: 13px;
}

/*======================
13. Inner Page Sections
========================*/
/*----- 13.1 About & Process -----*/
/* the base's zig-zag: copy beside a tall photograph, then a smaller one beside copy */
.zig-row + .zig-row {
  margin-top: 90px;
}
.hz-story h2 {
  margin-bottom: 22px;
}
.zig-photo {
  margin: 0;
  aspect-ratio: 4 / 3;
}
.zig-photo.is-tall {
  aspect-ratio: 4 / 5;
  max-height: 720px;
}
.zig-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hz-story h3 {
  margin-bottom: 18px;
  line-height: 1.7;
}
.hz-story .hz-rows {
  margin-top: 30px;
}
/* the base's process: staggered steps, each with its number and a narrow photograph */
.process-list {
  display: flex;
  flex-direction: column;
  gap: 70px;
}
.pr-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  align-items: center;
  gap: 80px;
  max-width: 980px;
  margin: 0 auto;
}
.pr-row.is-flip .pr-copy {
  order: 2;
}
.pr-copy h3 {
  margin: 10px 0 14px;
}
.pr-num {
  display: block;
  color: var(--hz-accent-text);
  font-family: var(--hz-ff-mono);
  font-size: 13px;
}
.pr-media {
  margin: 0;
  aspect-ratio: 3 / 4;
  max-width: 340px;
}
.pr-row.is-flip .pr-media {
  justify-self: end;
}
.pr-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*----- 13.2 Guides -----*/
.hz-guides-page .hz-title {
  margin-bottom: 50px;
}
.gp-photo {
  margin: 0 0 30px;
  aspect-ratio: 1 / 1;
}
.gp-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
}
.gp-facts {
  margin-bottom: 24px;
}
.hz-guide-profile h2 {
  margin-bottom: 20px;
}
.gp-sub {
  margin: 44px 0 16px;
}
.gp-work {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.gp-work .work-tile {
  aspect-ratio: 1 / 1;
}
.hz-skills h2 {
  margin-bottom: 18px;
}
.hz-skills .hz-lead {
  margin-bottom: 30px;
}

/*----- 13.3 Portfolio -----*/
.pf-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 40px;
}
.pf-search {
  width: min(320px, 100%);
}
/* the base's Pinterest grid: four columns, each photograph at its own proportion */
.pf-grid {
  columns: 4;
  column-gap: 10px;
}
.pf-item {
  break-inside: avoid;
  margin-bottom: 10px;
}
.pf-item .work-tile img {
  height: auto;
}
.series-card {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.series-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sc-txt {
  position: absolute;
  left: 30px;
  top: 28px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  padding: 14px 20px;
  background: var(--hz-surface);
}
.sc-txt small {
  color: var(--hz-accent-text);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.sc-txt b {
  color: var(--hz-heading);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/*----- 13.4 Series -----*/
.hz-series-intro h2 {
  margin-bottom: 18px;
}
.hz-series-intro .hz-rows {
  margin-top: 30px;
}
.hz-series-intro .hz-btn {
  margin-top: 30px;
}
/* one series, large: each photograph full width in the container, its caption beneath in a row */
.series-list {
  display: flex;
  flex-direction: column;
  gap: 70px;
}
.series-item {
  margin: 0;
}
.si-img {
  display: block;
  aspect-ratio: 16 / 9;
}
.si-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.series-item figcaption,
.ss-item figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 26px;
  padding-top: 18px;
  color: var(--hz-muted);
  font-size: 14.5px;
}
.series-item figcaption b,
.ss-item figcaption b {
  color: var(--hz-heading);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.series-item figcaption .hz-mono,
.ss-item figcaption .hz-mono {
  margin-left: auto;
  font-size: 13px;
}
.series-nav {
  margin-top: 70px;
}
/* the series as a slider, one photograph at a time */
.ss-item {
  margin: 0;
}
.ss-item img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.ss-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-top: 34px;
}
.ss-dots {
  display: flex;
  gap: 4px;
}
.ss-dots.swiper-pagination-bullets {
  position: static;
  width: auto;
}
.series-pair {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 14px;
  align-items: end;
}
.series-pair figure {
  margin: 0;
  aspect-ratio: 3 / 4;
}
.series-pair figure:last-child {
  aspect-ratio: 1 / 1;
}
.series-pair img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*----- 13.5 Values -----*/
.hz-values .value-item {
  text-align: center;
}
.hz-values .value-item .hz-ico {
  margin: 0 auto 20px;
}

/*----- 13.6 Contact & Account -----*/
.info-card {
  height: 100%;
  padding: 40px 32px;
  background: var(--hz-band);
  text-align: center;
  transition: transform 0.45s var(--hz-ease), box-shadow 0.45s var(--hz-ease);
}
.info-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--hz-shadow-lg);
}
.info-card .hz-ico {
  width: 60px;
  height: 60px;
  margin-bottom: 18px;
}
.info-card h3 {
  margin-bottom: 12px;
}
.info-card p {
  margin-bottom: 14px;
}
.contact-map iframe {
  display: block;
  width: 100%;
  height: 340px;
  border: 0;
}
.article-buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin: 30px 0;
  padding: 22px 26px;
}
.ab-kit {
  display: flex;
}
.ab-kit img {
  width: 76px;
  height: 58px;
  margin-inline-start: -14px;
  object-fit: cover;
}
.ab-kit img:first-child {
  margin-inline-start: 0;
}
.ab-txt {
  display: flex;
  flex: 1;
  flex-direction: column;
  font-size: 13.5px;
  line-height: 1.5;
}
.ab-txt b {
  color: var(--hz-heading);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.dash-who {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}
.dash-who img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}
.dash-who h2 {
  margin: 0;
}
.dash-who span {
  color: var(--hz-muted);
  font-size: 13.5px;
}
.dash-counts {
  margin-bottom: 24px;
}
.dash-tabs {
  display: grid;
  gap: 6px;
  margin-bottom: 24px;
}
.dash-tabs button {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: var(--hz-plate);
  color: var(--hz-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-align: start;
  text-transform: uppercase;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.dash-tabs .hz-ico {
  width: 34px;
  height: 34px;
}
.dash-tabs button.is-active {
  background: var(--hz-primary);
  color: var(--hz-on-primary);
}
.dash-tabs button.is-active .ico-ink {
  display: none;
}
.dash-tabs button.is-active .ico-light {
  display: block;
}
[data-theme="dark"] .dash-tabs button.is-active .ico-light {
  display: none;
}
[data-theme="dark"] .dash-tabs button.is-active .ico-ink {
  display: block;
}
.dash-panel > h2 {
  margin-bottom: 24px;
}
.acc-bookings,
.acc-orders {
  display: grid;
  gap: 8px;
  margin-bottom: 30px;
}
.ab-row {
  display: grid;
  grid-template-columns: 90px 1fr auto auto;
  align-items: center;
  gap: 20px;
  padding: 12px;
  background: var(--hz-band);
}
.ab-row img {
  width: 90px;
  height: 66px;
  object-fit: cover;
}
.ab-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.4;
}
.ab-main small {
  color: var(--hz-accent-text);
  font-size: 13px;
}
.ab-main > span:last-of-type {
  color: var(--hz-muted);
  font-family: var(--hz-ff-mono);
  font-size: 12.5px;
}
.ab-price {
  color: var(--hz-heading);
  font-family: var(--hz-ff-mono);
  font-weight: 500;
}
.acc-orders li {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr auto;
  gap: 16px;
  padding: 14px 18px;
  background: var(--hz-band);
  font-family: var(--hz-ff-mono);
  font-size: 13px;
}
.acc-orders li b {
  color: var(--hz-heading);
  font-weight: 500;
}
.acc-empty {
  margin-bottom: 26px;
  padding: 22px;
  background: var(--hz-band);
  color: var(--hz-muted);
}
.account-form.is-plain {
  padding: 0;
  box-shadow: none;
}
.faq-group + .faq-group {
  margin-top: 60px;
}
.faq-group .hz-accordion {
  margin-top: 26px;
}

/*======================
14. Print Shop & Basket
========================*/
/*----- 14.1 Shop Grid -----*/
.tr-price {
  font-family: var(--hz-ff-mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--hz-accent-text);
}
.shop-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 34px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--hz-line-2);
}
.shop-toolbar p {
  margin: 0;
  color: var(--hz-muted);
  font-size: 15px;
}
.shop-toolbar p b {
  color: var(--hz-heading);
  font-family: var(--hz-ff-mono);
  font-size: 18px;
  font-weight: 500;
}
.toolbar-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.shop-sort {
  width: 210px;
}
[data-shop-grid] > .is-hidden {
  display: none;
}
.shop-empty {
  padding: 30px;
  background: var(--hz-band);
  color: var(--hz-muted);
  text-align: center;
}
.side-cats {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.side-cats button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px;
  background: var(--hz-surface);
  color: var(--hz-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.side-cats button small {
  color: var(--hz-accent-text);
  font-family: var(--hz-ff-mono);
  font-size: 11.5px;
  letter-spacing: 0;
}
.side-cats button.is-active {
  background: var(--hz-primary);
  color: var(--hz-on-primary);
}
.side-cats button.is-active small {
  color: inherit;
}
.size-scale.is-side {
  gap: 6px;
}
.size-scale.is-side b,
.size-scale.is-side small {
  font-size: 10px;
}
.price-table td,
.price-table th {
  text-align: end;
}
.price-table th:first-child {
  text-align: start;
}
.price-table tbody th {
  display: table-cell;
  color: var(--hz-heading);
  font-family: var(--hz-ff-mono);
  font-size: 14px;
  font-weight: 500;
}

/*----- 14.2 Print Page -----*/
/* the print, its thumbnails and the wall preview to scale beside a sofa; size and finish as cards */
.pd-main {
  aspect-ratio: 3 / 2;
  background: var(--hz-plate);
}
.pd-main img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pd-thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 10px;
}
.pd-thumbs button {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  opacity: 0.6;
  transition: opacity 0.3s ease, box-shadow 0.3s ease;
}
.pd-thumbs button.is-active,
.pd-thumbs button:hover {
  opacity: 1;
}
.pd-thumbs button.is-active {
  box-shadow: inset 0 0 0 2px var(--hz-gold);
}
.pd-thumbs img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wall-preview {
  position: relative;
  height: 340px;
  margin-top: 30px;
  overflow: hidden;
  background: linear-gradient(180deg, #ECE9E4 0%, #E3DFD8 78%, #CFC9BF 78%, #C9C2B7 100%);
}
[data-theme="dark"] .wall-preview {
  background: linear-gradient(180deg, #23272C 0%, #1E2226 78%, #15181B 78%, #121417 100%);
}
.wp-label {
  position: absolute;
  left: 18px;
  top: 14px;
  color: #6E6A64;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
[data-theme="dark"] .wp-label {
  color: #9AA1A8;
}
.wp-print {
  position: absolute;
  left: 50%;
  bottom: calc(22% + 104px);
  z-index: 2;
  display: block;
  box-shadow: 0 10px 22px rgba(17, 17, 17, 0.22);
  transform: translateX(-50%);
  transition: width 0.5s var(--hz-ease), height 0.5s var(--hz-ease);
}
.wp-print img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* framed: an oak or black frame and a white mount; aluminium: a thin shadow line; print only: as it is */
.wp-print[data-finish="black"] {
  padding: 8%;
  border: 3px solid #1A1A1A;
  background: #FAFAF8;
}
.wp-print[data-finish="oak"] {
  padding: 8%;
  border: 3px solid #5B7796;
  background: #FAFAF8;
}
.wp-print[data-finish="alu"] {
  box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.2), 0 14px 26px rgba(17, 17, 17, 0.26);
}
.wp-sofa {
  position: absolute;
  left: 50%;
  bottom: 22%;
  z-index: 1;
  display: block;
  transform: translate(-50%, 46%);
  border-radius: 10px 10px 4px 4px;
  background: #8E8A83;
  transition: width 0.5s var(--hz-ease), height 0.5s var(--hz-ease);
}
.wp-sofa i {
  position: absolute;
  left: 6%;
  right: 6%;
  top: -22%;
  height: 50%;
  border-radius: 10px 10px 0 0;
  background: #A29D95;
}
.wp-dims {
  position: absolute;
  right: 18px;
  top: 12px;
  color: #3F3B36;
  font-family: var(--hz-ff-mono);
  font-size: 12.5px;
}
[data-theme="dark"] .wp-dims {
  color: #C7CCD1;
}
.pd-info h2 {
  margin: 4px 0 10px;
}
.pd-price {
  display: flex;
  flex-direction: column;
  margin-bottom: 18px;
}
.pd-price b {
  color: var(--hz-heading);
  font-family: var(--hz-ff-mono);
  font-size: 32px;
  font-weight: 400;
}
.pd-price small {
  color: var(--hz-muted);
  font-size: 14px;
}
.pd-info .hz-label {
  margin: 26px 0 10px;
}
.size-choices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 6px;
}
.size-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 8px;
  min-height: 120px;
  padding: 12px;
}
.size-card .sz-shape {
  flex-shrink: 0;
}
.sz-txt {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.sz-txt b {
  color: var(--hz-heading);
  font-family: var(--hz-ff-mono);
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
}
.sz-txt small {
  color: var(--hz-muted);
  font-family: var(--hz-ff-mono);
  font-size: 11.5px;
}
.finish-choices {
  display: grid;
  gap: 6px;
}
.finish-card {
  padding: 14px 18px;
}
.finish-card em {
  margin-left: auto;
  color: var(--hz-heading);
  font-family: var(--hz-ff-mono);
  font-size: 13px;
  font-style: normal;
  white-space: nowrap;
}
.fn-swatch {
  flex-shrink: 0;
  width: 34px;
  height: 26px;
  background: var(--hz-plate);
}
.fn-print {
  box-shadow: inset 0 0 0 1px var(--hz-line-2);
}
.fn-black {
  border: 4px solid #1A1A1A;
  background: #F6F6F4;
}
.fn-oak {
  border: 4px solid #5B7796;
  background: #F6F6F4;
}
.fn-alu {
  background: linear-gradient(135deg, #D9DCDF, #A9AEB3);
}
.fn-txt {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.4;
}
.fn-txt b {
  color: var(--hz-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.fn-txt small {
  color: var(--hz-muted);
  font-size: 13.5px;
}
.pd-paper {
  margin-top: 22px;
}
.pd-buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 26px 0;
}
.pd-wish {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--hz-plate);
  color: var(--hz-heading);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.pd-wish:hover,
.pd-wish.is-on {
  background: var(--hz-gold);
  color: #111111;
}
.pd-tabs {
  margin-top: 70px;
}
.pd-tablist {
  display: flex;
  justify-content: center;
  gap: 34px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--hz-line);
}
.pd-tablist button {
  padding: 14px 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--hz-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.pd-tablist button.is-active {
  border-color: var(--hz-gold);
  color: var(--hz-heading);
}
.pd-tabs [role="tabpanel"] {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

/*----- 14.3 Bag, Checkout & Wishlist -----*/
.bag-lines {
  border-top: 1px solid var(--hz-line-2);
}
.bag-line {
  display: grid;
  grid-template-columns: 110px 1fr auto auto 40px;
  align-items: center;
  gap: 26px;
  padding: 22px 0;
  border-bottom: 1px solid var(--hz-line-2);
}
.bag-lines.is-wish .bag-line {
  grid-template-columns: 110px 1fr auto 40px;
}
.bl-img {
  padding: 4px;
  background: var(--hz-plate);
  box-shadow: inset 0 0 0 1px var(--hz-line);
}
.bl-img img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
.bl-cat {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--hz-accent-text);
}
.bl-body h4 {
  margin: 2px 0 4px;
  font-size: 20px;
}
.bl-body h4 a {
  color: var(--hz-heading);
}
.bl-price {
  font-size: 14px;
  color: var(--hz-muted);
}
.bl-total {
  min-width: 90px;
  font-family: var(--hz-ff-mono);
  font-size: 17px;
  font-weight: 500;
  text-align: right;
  color: var(--hz-heading);
}
.bl-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--hz-plate);
  color: var(--hz-heading);
  font-size: 13px;
  transition: background-color 0.3s var(--hz-ease), color 0.3s var(--hz-ease);
}
.bl-remove:hover {
  background: var(--hz-gold);
  color: #111111;
}
.cart-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 30px;
}
.coupon-form {
  position: relative;
  display: flex;
  gap: 10px;
}
.coupon-form input {
  width: 220px;
  height: 54px;
  padding: 0 18px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: var(--hz-field);
  color: var(--hz-heading);
  font-family: var(--hz-ff-body);
  font-size: 15px;
  outline: none;
}
.coupon-form input:focus {
  border-color: var(--hz-gold);
}
.coupon-form .form-status {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
  white-space: nowrap;
}
.order-summary {
  position: sticky;
  top: 120px;
}
.ship-meter {
  height: 4px;
  overflow: hidden;
  background: var(--hz-line);
}
.ship-meter span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--hz-gold);
  transition: width 0.8s var(--hz-ease);
}
.ship-note {
  margin: 10px 0 20px;
  font-size: 14px;
}
.ship-note b {
  color: var(--hz-accent-text);
}
.order-lines li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hz-line);
  font-size: 15px;
}
.ol-img {
  position: relative;
  flex: 0 0 auto;
  width: 62px;
  padding: 2px;
  background: var(--hz-plate);
  box-shadow: inset 0 0 0 1px var(--hz-line);
}
.ol-img img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
.ol-img b {
  position: absolute;
  top: -8px;
  right: -8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--hz-gold);
  color: #111111;
  font-family: var(--hz-ff-mono);
  font-size: 10.5px;
}
.ol-name {
  flex: 1 1 auto;
  color: var(--hz-heading);
}
.order-lines li > b {
  font-weight: 500;
  color: var(--hz-heading);
}
.order-summary .hz-kv {
  margin-top: 18px;
}
.choice-list.is-pay {
  margin: 10px 0 20px;
}
.pay-choice {
  padding: 14px 56px 14px 18px;
}
.co-terms {
  margin-bottom: 20px;
}
.cart-empty,
.order-done {
  max-width: 640px;
  margin: 0 auto;
  padding: 60px 50px;
  text-align: center;
}
.cart-empty > i {
  margin-bottom: 20px;
  font-size: 46px;
  color: var(--hz-accent-text);
}
.cart-empty h2,
.order-done h2 {
  margin-bottom: 12px;
}
.order-done p b {
  color: var(--hz-accent-text);
}

/*======================
15. Blog & Account
========================*/
/*----- 15.1 Blog List -----*/
/* the journal: wide photo posts with a date tile, and quote and link posts between them */
.blog-list {
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.post-thumb {
  position: relative;
  display: block;
  overflow: hidden;
}
.post-thumb img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.9s var(--hz-ease);
}
.blog-post:hover .post-thumb img {
  transform: scale(1.04);
}
.post-date {
  position: absolute;
  left: 30px;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 84px;
  background: var(--hz-gold);
  color: #111111;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
}
.post-date b {
  font-size: 32px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
}
.post-thumb.is-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(8, 11, 15, 0.28);
}
.post-thumb.is-video .hz-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  margin: -45px 0 0 -45px;
}
.post-gallery .swiper-slide img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.mini-nav {
  position: absolute;
  top: 50%;
  left: 20px;
  right: 20px;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  margin-top: -25px;
  pointer-events: none;
}
.mini-nav .slider-arrow {
  pointer-events: auto;
}
.bp-body {
  padding-top: 30px;
}
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 26px;
  margin-bottom: 14px;
  color: var(--hz-muted);
  font-size: 14.5px;
}
.post-meta li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.post-meta .hz-face {
  width: 34px;
  height: 34px;
}
.post-meta a {
  color: var(--hz-accent-text);
}
.bp-body h3 a {
  color: var(--hz-heading);
}
.bp-body h3 a:hover {
  color: var(--hz-accent-text);
}
.bp-body .hz-rule {
  margin: 18px 0 20px;
}
.bp-body p {
  margin-bottom: 18px;
}
/* the base's quote post: a white card with a hairline frame, the line set in tracked capitals, centred */
.blog-post.is-quote {
  position: relative;
  padding: 50px 56px;
  overflow: hidden;
  background: var(--hz-surface);
  box-shadow: inset 0 0 0 1px var(--hz-line-2);
  text-align: center;
}
.blog-post.is-quote .pcd-meta {
  color: var(--hz-muted);
}
.blog-post.is-quote h3 {
  position: relative;
  max-width: 620px;
  margin: 12px auto 18px;
}
.blog-post.is-quote h3 a {
  color: var(--hz-heading);
}
.blog-post.is-quote h3 a:hover {
  color: var(--hz-accent-text);
}
.blog-post .nc-by {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.blog-post.is-quote .nc-by {
  color: var(--hz-muted);
}
.bp-glyph {
  display: block;
  margin-bottom: 8px;
  color: var(--hz-heading);
  font-size: 22px;
}

/* the base's centred blog: one column, everything centred under the photograph */
.blog-tools {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  margin-bottom: 60px;
}
.blog-tools .widget-search {
  width: min(460px, 100%);
}
.blog-cats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 28px;
}
.blog-cats a {
  color: var(--hz-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.blog-cats a.is-current,
.blog-cats a:hover {
  color: var(--hz-heading);
}
.blog-list.is-centred {
  max-width: 820px;
  margin: 0 auto;
  gap: 90px;
}
.blog-list.is-centred .blog-post {
  text-align: center;
}
.blog-list.is-centred .bp-body {
  max-width: 660px;
  margin: 0 auto;
}
.blog-list.is-centred .bp-body .hz-eyebrow::before {
  display: none;
}
.blog-list.is-centred .post-meta {
  justify-content: center;
  margin: 24px 0 0;
}
.blog-list.is-centred .hz-btn {
  margin-top: 6px;
}
.blog-list.is-centred + .grid-empty + .hz-pagination {
  justify-content: center;
}
.pcd-exif {
  display: block;
  margin-bottom: 18px;
  color: var(--hz-muted);
  font-size: 12.5px;
}
.cta-news {
  max-width: 480px;
  margin: 30px auto 0;
}
.article-frame {
  margin: 34px 0;
}
.article-frame a {
  display: block;
  aspect-ratio: 3 / 2;
}
.article-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.article-frame figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 20px;
  padding-top: 14px;
  color: var(--hz-muted);
  font-size: 13px;
}
.article-frame figcaption b {
  color: var(--hz-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/*----- 15.2 Blog Details -----*/
.article-hero {
  position: relative;
  margin-bottom: 30px;
  overflow: hidden;
}
.article-hero img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.article-body > h2 {
  margin-bottom: 0;
}
.article-body > .hz-rule {
  margin: 20px 0 26px;
}
.article-body > h3 {
  margin: 40px 0 16px;
}
.article-quote {
  position: relative;
  margin: 40px 0;
  padding: 44px 50px 40px;
  background: var(--hz-band);
  border-inline-start: 4px solid var(--hz-gold);
}
.article-quote p {
  margin-bottom: 16px;
  color: var(--hz-heading);
  font-size: 22px;
  font-weight: 300;
  line-height: 1.6;
}
.article-quote cite {
  color: var(--hz-accent-text);
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.26em;
  line-height: 1;
  text-transform: uppercase;
}
.article-pair {
  margin: 10px 0 0;
}
.article-pair img {
  height: 300px;
  object-fit: cover;
}
.article-rows {
  margin: 26px 0;
}
.article-rows > div {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hz-line);
}
.article-rows > div:first-child {
  border-top: 1px solid var(--hz-line);
}
.article-rows dt {
  color: var(--hz-heading);
  font-weight: 500;
}
.article-rows dd {
  margin: 0;
}
.article-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 40px;
  padding: 24px 0;
  border-block: 1px solid var(--hz-line);
}
.share-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--hz-gold);
  color: #111111;
  font-size: 14px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.share-copy:hover,
.share-copy.is-done {
  background: #111111;
  color: #FFFFFF;
}
.author-box {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-top: 50px;
  padding: 40px;
  background: var(--hz-plate);
}
.author-box img {
  flex: 0 0 auto;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
}
.author-box .hz-eyebrow {
  display: block;
}
.author-box h3 {
  margin-bottom: 8px;
}
.post-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 50px 0;
}
.post-nav .pn-prev,
.post-nav .pn-next {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 42%;
  color: var(--hz-heading);
}
.post-nav .pn-next {
  text-align: end;
}
.post-nav small {
  display: block;
  color: var(--hz-accent-text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.post-nav b {
  font-weight: 500;
}
.post-nav > a > i {
  display: inline-flex;
  flex: 0 0 46px;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--hz-plate);
  color: var(--hz-accent-text);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.post-nav > a:hover > i {
  background: var(--hz-gold);
  color: #111111;
}
.post-nav .pn-all {
  color: var(--hz-accent-text);
  font-size: 22px;
}
.comment-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  padding: 26px 0;
  border-bottom: 1px solid var(--hz-line);
}
.comment-list li > img {
  flex: 0 0 auto;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
}
.comment-list li > div {
  flex: 1 1 0;
  min-width: 0;
}
.comment-list b {
  margin-right: 14px;
  color: var(--hz-heading);
  font-size: 18px;
  font-weight: 500;
}
.comment-list li > div > span {
  color: var(--hz-muted);
  font-size: 13.5px;
}
.comment-list p {
  margin: 8px 0 10px;
}
.comment-list ul {
  flex: 1 1 100%;
  padding-inline-start: 92px;
}
.comment-list ul li {
  padding-bottom: 0;
  border-bottom: 0;
}
.comment-form {
  margin-top: 46px;
}

/*----- 15.3 Account Pages -----*/
.account-wrap {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  max-width: 1120px;
  margin: 0 auto;
  background: var(--hz-surface);
  box-shadow: var(--hz-shadow-lg);
}
.account-side {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 600px;
  padding: 46px;
  overflow: hidden;
  background: #111111;
}
.account-side .as-photo {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.account-side::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(180deg, rgba(8, 11, 15, 0.1) 0%, rgba(8, 11, 15, 0.55) 45%, rgba(8, 11, 15, 0.95) 100%);
}
.account-side > .hz-gl {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  width: 100%;
  height: 140px;
}
.account-side .as-seal {
  width: 96px;
}
.as-copy {
  margin-top: auto;
}
.as-copy .hz-script {
  color: var(--hz-gold);
  font-size: 44px;
  line-height: 1;
}
.as-copy h2 {
  margin: 4px 0 14px;
  color: #FFFFFF;
}
.as-copy p {
  margin-bottom: 26px;
  color: rgba(255, 255, 255, 0.85);
}
.as-copy .hz-avatars .faces img,
.as-copy .hz-avatars .more {
  border-color: #111111;
}
.account-form {
  padding: 56px 54px;
}
.account-form .hz-eyebrow {
  display: block;
}
.account-form h3 {
  margin-bottom: 26px;
}
.account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 24px;
  font-size: 15px;
}
.account-row a,
.account-switch a {
  color: var(--hz-accent-text);
  font-weight: 500;
}
.account-terms {
  margin-bottom: 24px;
}
.account-switch {
  margin: 22px 0 0;
  font-size: 15px;
  text-align: center;
}
.pass-toggle {
  position: absolute;
  top: 37px;
  right: 8px;
  width: 42px;
  height: 42px;
  color: var(--hz-accent-text);
}
.pass-meter {
  height: 4px;
  margin-top: 10px;
  overflow: hidden;
  background: var(--hz-line);
}
.pass-meter span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--hz-booked);
  transition: width 0.4s var(--hz-ease), background-color 0.4s ease;
}
.pass-meter span[data-score="2"] {
  background: var(--hz-gold);
}
.pass-meter span[data-score="3"],
.pass-meter span[data-score="4"] {
  background: var(--hz-free);
}
.pass-hint {
  display: block;
  margin-top: 6px;
  color: var(--hz-muted);
  font-size: 13px;
}

/*----- 15.4 Coming Soon & 404 -----*/
/* a photograph on one side, the page on the other, the seal on the seam */
.hz-bare-page {
  min-height: 100vh;
  background: var(--hz-bg);
}
.bare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}
.bare-photo-side {
  position: relative;
  z-index: 2;
}
.bare-photo-side .bare-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 30%;
}
.bare-seal {
  position: absolute;
  top: 50%;
  right: -70px;
  z-index: 2;
  width: 140px;
  margin-top: -70px;
}
.bare-inner {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 9% 80px 12%;
  overflow: hidden;
}
.bare-inner > .hz-gl {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}
.bare-logo {
  margin-bottom: 60px;
}
.bare-logo img {
  width: auto;
  height: 42px;
}
.bare-inner h1 {
  max-width: 620px;
}
.bare-inner .hz-rule {
  margin: 24px 0;
}
.bare-inner .hz-lead {
  max-width: 560px;
}
.bare-inner .hz-btns {
  margin-top: 34px;
}
.error-code {
  display: block;
  margin-bottom: 6px;
  color: var(--hz-accent-text);
  font-size: clamp(120px, 13vw, 210px);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.04em;
}
.bare-line {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 50px;
}
.bare-line .hz-ico {
  width: 58px;
  height: 58px;
}
.bare-line small {
  display: block;
  color: var(--hz-muted);
  font-size: 13px;
}
.bare-line b {
  color: var(--hz-heading);
  font-size: 22px;
  font-weight: 500;
}
.launch-count {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  width: 100%;
  max-width: 560px;
  margin: 36px 0;
}
.launch-count span {
  display: flex;
  flex-direction: column;
  padding: 20px 10px 16px;
  background: var(--hz-surface);
  color: var(--hz-heading);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}
.launch-count .is-gold {
  background: var(--hz-gold);
  color: #111111;
}
.launch-count b {
  font-family: var(--hz-ff-mono);
  font-size: 42px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.bare-news {
  position: relative;
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 560px;
  margin-bottom: 40px;
}
.bare-news input {
  flex: 1 1 auto;
  min-width: 0;
  height: 54px;
  padding: 0 20px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: var(--hz-surface);
  color: var(--hz-heading);
  font-family: var(--hz-ff-body);
  font-size: 16px;
  outline: 0;
}
.bare-news input:focus {
  border-color: var(--hz-gold);
}
.bare-news .form-status {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
}
.mini-nav .slider-arrow {
  border-color: transparent;
  background: var(--hz-surface);
  color: #111111;
}
/* the white aperture seal on a black disc, so it reads on the photograph and on the paper alike */
.bare-seal {
  padding: 26px;
  border-radius: 50%;
  background: #111111;
  box-shadow: var(--hz-shadow-lg);
}

/*======================
16. Subheader
========================*/
/* the base's page title: centred light capitals on white, the crumbs above, the page's name set down the left
   edge; snow drifts at the band's edges (WebGL). With a photograph, the photograph follows in a white passepartout. */
.hz-subheader {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: 92px 0 96px;
  text-align: center;
}
.hz-subheader .sub-copy {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
}
.hz-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 22px;
  color: var(--hz-muted);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.hz-crumbs i {
  font-size: 7px;
  opacity: 0.6;
}
.hz-crumbs a:hover {
  color: var(--hz-heading);
}
.hz-crumbs span {
  color: var(--hz-accent-text);
}
.hz-subheader h1 {
  margin-bottom: 18px;
}
.hz-subheader .hz-lead {
  max-width: 600px;
  margin: 0 auto;
}
.hz-subheader.has-photo {
  padding-bottom: 0;
}
.sub-frame {
  margin: 62px 0 0;
  aspect-ratio: 21 / 8;
  background: var(--hz-plate);
}
.sub-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*======================
17. Footer
========================*/
/* the blue hour: the ridge (stacked profile lines, WebGL) with the label over its foot, three columns - the next
   departures, the light tonight, the desk - and the base's bottom row */
.hz-footer {
  position: relative;
  color: var(--hz-text);
}
.footer-ridge {
  position: relative;
  padding-bottom: 56px;
  text-align: center;
}
.ridge-art {
  position: relative;
  isolation: isolate;
  height: 300px;
  overflow: hidden;
}
.ridge-copy {
  position: relative;
  width: min(560px, 90%);
  margin: -26px auto 0;
}
.footer-word {
  display: inline-flex;
  margin-bottom: 16px;
}
.footer-word img {
  height: 40px;
  width: auto;
}
.ridge-copy p {
  margin: 0;
  color: var(--hz-text);
  font-size: 15.5px;
  font-weight: 300;
}
.footer-main {
  padding: 70px 0 60px;
  border-top: 1px solid var(--hz-line);
}
.hz-footer .widget h2 {
  margin-bottom: 24px;
}
.footer-deps li,
.footer-light li {
  border-bottom: 1px solid var(--hz-line);
}
.footer-deps a {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 2px 14px;
  padding: 12px 0;
}
.fd-date {
  color: var(--hz-heading);
  font-family: var(--hz-ff-mono);
  font-size: 13.5px;
}
.fd-name {
  color: var(--hz-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.footer-deps .hz-status {
  grid-column: 2;
  font-size: 12.5px;
}
.footer-light li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
}
.footer-light .fs-name {
  color: var(--hz-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.footer-light small {
  color: var(--hz-gold-soft);
  font-family: var(--hz-ff-mono);
  font-size: 13px;
  text-align: end;
}
.footer-light + .hz-more {
  margin-top: 24px;
}
.footer-address {
  margin-bottom: 14px;
  color: var(--hz-heading);
  font-size: 15.5px;
  line-height: 1.7;
}
.footer-contact ul li {
  padding: 4px 0;
}
.footer-contact ul a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.footer-contact ul i {
  width: 16px;
  color: var(--hz-gold-soft);
}
.footer-contact .nl-title {
  margin: 30px 0 16px;
}
.hz-newsletter {
  position: relative;
  display: flex;
  flex-wrap: wrap;
}
.hz-newsletter input {
  flex: 1;
  min-width: 0;
  height: 52px;
  padding: 0 18px;
  border: 0;
  background: var(--hz-field);
  color: var(--hz-heading);
  font-family: var(--hz-ff-body);
  font-size: 15px;
}
.hz-newsletter input::placeholder {
  color: var(--hz-muted);
}
.hz-newsletter input:focus {
  outline: 0;
  box-shadow: inset 0 -1px 0 var(--hz-gold);
}
.hz-newsletter button {
  width: 54px;
  height: 52px;
  background: var(--hz-gold);
  color: #111111;
  font-size: 15px;
  transition: background-color 0.3s ease;
}
.hz-newsletter button:hover {
  background: #FFFFFF;
}
.hz-newsletter .form-status {
  flex-basis: 100%;
}
/* the base's bottom row: links, the socials in the middle, the copyright */
.footer-bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 30px 0 34px;
  border-top: 1px solid var(--hz-line);
  font-size: 14px;
}
.footer-bottom p {
  margin: 0;
  text-align: end;
}
.footer-bottom p a {
  color: var(--hz-heading);
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}
.footer-links a {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.footer-links a:hover,
.footer-bottom p a:hover {
  color: var(--hz-gold-soft);
}