@charset "utf-8";

/*
Theme Name: Hibo - Hospitality Suite HTML5 Templates.
Author: Metropolitanthemes
Version: 1.0.0

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

1. General
   1.1 Typography
   1.2 Spacing & Grounds
   1.3 Buttons & Links
   1.4 Section Title
   1.5 Screenshot Frames
   1.6 Helpers & Reveals
2. Preloader
3. Product Colours
4. Header
5. Offcanvas Menu
6. Hero
7. Brand Wall
8. Pillars Marquee
9. Pillars
10. Showroom
11. The Suite
12. The Dashboard
13. Engine Room
14. Kit In One Scan
15. Standards
16. Forms
   16.1 Drop-downs
17. Footer
18. Back To Top
19. Cursor
*/

/*======================
1. General
========================*/
:root {
  --ho-color-ink: #0E1014;
  --ho-color-ink-rgb: 14, 16, 20;
  --ho-color-raised: #171A21;
  --ho-color-raised-rgb: 23, 26, 33;
  --ho-color-raised-2: #20242D;
  --ho-color-paper: #F4F2ED;
  --ho-color-paper-rgb: 244, 242, 237;
  --ho-color-white: #FFFFFF;
  --ho-color-white-rgb: 255, 255, 255;
  /* the four pillars: Hospitality, Intelligence, Business, Operations */
  --ho-color-coral: #FF6B4A;
  --ho-color-coral-rgb: 255, 107, 74;
  --ho-color-coral-deep: #C53F20;
  --ho-color-iris: #5B7CFF;
  --ho-color-iris-rgb: 91, 124, 255;
  --ho-color-iris-deep: #3450CC;
  --ho-color-jade: #22B07D;
  --ho-color-jade-rgb: 34, 176, 125;
  --ho-color-jade-deep: #137452;
  --ho-color-amber: #FFB547;
  --ho-color-amber-rgb: 255, 181, 71;
  --ho-color-amber-deep: #955F0B;
  --ho-color-body: #5F636C;
  --ho-color-muted: #7C818B;
  --ho-color-border: #E2DDD2;
  --ho-color-border-2: #D3CDBF;
  --ho-ff-heading: 'Schibsted Grotesk', sans-serif;
  --ho-ff-body: 'Onest', sans-serif;
  --ho-fs-h1: clamp(46px, 5.6vw, 92px);
  --ho-fs-h2: clamp(34px, 3.8vw, 60px);
  --ho-fs-h3: 30px;
  --ho-fs-h4: 22px;
  --ho-fs-h5: 18px;
  --ho-fs-h6: 15px;
  --ho-radius: 0;
  --ho-radius-sm: 0;
  --ho-shadow: 0 24px 60px rgba(14, 16, 20, 0.1);
  --ho-shadow-lg: 0 40px 100px rgba(14, 16, 20, 0.22);
  --ho-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* :root, not html: Bootstrap sets :root { scroll-behavior: smooth }, which outranks html and would turn every
   instant jump (ScrollTrigger's re-measuring, back to top) into a glide */
:root {
  scroll-behavior: auto;
}
body {
  font-family: var(--ho-ff-body);
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--ho-color-body);
  background-color: var(--ho-color-paper);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
a {
  text-decoration: none;
  color: inherit;
  transition: color 0.35s var(--ho-ease);
}
a:hover {
  color: var(--ho-color-coral-deep);
}
img {
  max-width: 100%;
  height: auto;
}
button {
  font-family: inherit;
  border: 0;
  background: none;
  cursor: pointer;
  color: inherit;
}
input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
  color: var(--ho-color-ink);
}
::selection {
  background: var(--ho-color-coral);
  color: var(--ho-color-ink);
}
.ho-reset {
  list-style: none;
  margin: 0;
  padding: 0;
}
.visually-hidden-label {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/*---- 1.1 Typography ----*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--ho-ff-heading);
  color: var(--ho-color-ink);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.035em;
}
h1 {
  font-size: var(--ho-fs-h1);
  line-height: 0.98;
}
h2 {
  font-size: var(--ho-fs-h2);
  line-height: 1.02;
}
h3 {
  font-size: var(--ho-fs-h3);
  line-height: 1.12;
  letter-spacing: -0.025em;
}
h4 {
  font-size: var(--ho-fs-h4);
  line-height: 1.25;
  letter-spacing: -0.015em;
}
h5 {
  font-size: var(--ho-fs-h5);
  line-height: 1.35;
  letter-spacing: -0.01em;
}
h6 {
  font-size: var(--ho-fs-h6);
  line-height: 1.45;
  letter-spacing: 0;
}
p {
  margin-bottom: 0;
}
p + p {
  margin-top: 16px;
}
.ho-lead {
  font-size: 19px;
  line-height: 1.65;
}
.ho-small {
  font-size: 15px;
  line-height: 1.6;
}
.ho-caps {
  font-family: var(--ho-ff-body);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.5;
}
.ho-num {
  font-family: var(--ho-ff-heading);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
.ho-accent {
  font-style: normal;
  color: var(--ho-color-coral);
}

/*---- 1.2 Spacing & Grounds ----*/
.sec-pt-130 {
  padding-top: 130px;
}
.sec-pb-130 {
  padding-bottom: 130px;
}
.sec-pt-90 {
  padding-top: 90px;
}
.sec-pb-90 {
  padding-bottom: 90px;
}
.container-wide {
  max-width: 1600px;
  padding-left: 40px;
  padding-right: 40px;
  margin: 0 auto;
  width: 100%;
}
.ho-ink {
  background-color: var(--ho-color-ink);
  color: rgba(var(--ho-color-white-rgb), 0.66);
}
.ho-ink h1,
.ho-ink h2,
.ho-ink h3,
.ho-ink h4,
.ho-ink h5,
.ho-ink h6 {
  color: var(--ho-color-white);
}
.ho-paper {
  background-color: var(--ho-color-paper);
}
.ho-white {
  background-color: var(--ho-color-white);
}

/*---- 1.3 Buttons & Links ----*/
.ho-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 58px;
  padding: 0 30px;
  border-radius: 0;
  font-family: var(--ho-ff-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ho-color-ink);
  background-color: var(--ho-color-coral);
  overflow: hidden;
  isolation: isolate;
  white-space: nowrap;
  transition: color 0.4s var(--ho-ease), transform 0.4s var(--ho-ease), box-shadow 0.4s var(--ho-ease);
}
.ho-btn::before {
  position: absolute;
  content: "";
  inset: 0;
  z-index: -1;
  background-color: var(--ho-color-white);
  transform: translateY(101%);
  transition: transform 0.5s var(--ho-ease);
}
.ho-btn:hover {
  color: var(--ho-color-ink);
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(var(--ho-color-coral-rgb), 0.28);
}
.ho-btn:hover::before {
  transform: translateY(0);
}
/* the house double arrow: one slides out, the next slides in */
.ho-btn .btn-ic {
  position: relative;
  display: inline-block;
  width: 15px;
  height: 15px;
  overflow: hidden;
}
.ho-btn .btn-ic i {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 14px;
  transition: transform 0.45s var(--ho-ease);
}
.ho-btn .btn-ic i:last-child {
  transform: translateX(-120%);
}
.ho-btn:hover .btn-ic i:first-child {
  transform: translateX(120%);
}
.ho-btn:hover .btn-ic i:last-child {
  transform: translateX(0);
}
.ho-btn-ghost {
  background-color: transparent;
  color: var(--ho-color-white);
  box-shadow: inset 0 0 0 1px rgba(var(--ho-color-white-rgb), 0.28);
}
.ho-btn-ghost:hover {
  box-shadow: none;
}
.ho-btn-outline {
  background-color: transparent;
  color: var(--ho-color-ink);
  box-shadow: inset 0 0 0 1px var(--ho-color-border-2);
}
.ho-btn-outline::before {
  background-color: var(--ho-color-ink);
}
.ho-btn-outline:hover {
  color: var(--ho-color-white);
  box-shadow: none;
}
.ho-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 3px;
  border-bottom: 1px solid currentColor;
  font-size: 15px;
  font-weight: 600;
  color: var(--ho-color-ink);
}
.ho-link i {
  font-size: 12px;
  transition: transform 0.4s var(--ho-ease);
}
.ho-link:hover {
  color: var(--ho-color-coral-deep);
}
.ho-link:hover i {
  transform: translateX(5px);
}
.ho-ink .ho-link {
  color: var(--ho-color-white);
}
.ho-ink .ho-link:hover {
  color: var(--ho-color-coral);
}

/*---- 1.4 Section Title ----*/
/* eyebrow: a four-colour dash (the pillars) then tracked caps */
.ho-eyebrow,
.ho-sec-title .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--ho-ff-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ho-color-ink);
  margin-bottom: 22px;
}
.eb-dash {
  display: inline-flex;
  gap: 3px;
  flex: none;
}
.eb-dash i {
  display: block;
  width: 10px;
  height: 4px;
  border-radius: 0;
  background-color: var(--ho-color-coral);
}
.eb-dash i:nth-child(2) {
  background-color: var(--ho-color-iris);
}
.eb-dash i:nth-child(3) {
  background-color: var(--ho-color-jade);
}
.eb-dash i:nth-child(4) {
  background-color: var(--ho-color-amber);
}
.ho-ink .ho-eyebrow,
.ho-ink .ho-sec-title .eyebrow {
  color: var(--ho-color-white);
}
.ho-sec-title h2 {
  margin-bottom: 0;
}
.ho-sec-title .lead-text {
  font-size: 19px;
  line-height: 1.65;
  margin-top: 22px;
  max-width: 640px;
}
.ho-sec-title.text-center .lead-text {
  margin-left: auto;
  margin-right: auto;
}

/*---- 1.5 Screenshot Frames ----*/
/* every page of the suite is shown in a thin browser frame, so it reads as a product */
.shot-frame {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 0;
  background-color: var(--ho-color-raised);
  box-shadow: 0 0 0 1px rgba(var(--ho-color-white-rgb), 0.08);
}
.shot-frame img {
  display: block;
  width: 100%;
  height: auto;
}
.shot-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 10px;
  background-color: var(--ho-color-raised-2);
}
.shot-bar i {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 0;
  background-color: rgba(var(--ho-color-white-rgb), 0.22);
}
.shot-bar i:first-child {
  background-color: var(--ho-color-coral);
}
.shot-bar i:nth-child(2) {
  background-color: var(--ho-color-amber);
}
.shot-bar i:nth-child(3) {
  background-color: var(--ho-color-jade);
}

/*---- 1.6 Helpers & Reveals ----*/
.ho-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.ho-word > span {
  display: inline-block;
  will-change: transform;
}
.js .fade-up,
.js .fade-in,
.js .ripple-item {
  opacity: 0;
}
/* hero titles sit on set lines: each line is its own nowrap span */
.hero-title .h-line {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}
.hero-title .h-line > span {
  display: inline-block;
}

/*======================
2. Preloader
========================*/
/* Four Pillars (P3 family): four bars in the pillar colours fill the screen, H, I, B and O rise
   inside them with their words, then the bars lift away one after another onto the page. */
.ho-preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  pointer-events: none;
}
.ho-preloader .pre-bar {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  overflow: hidden;
  background-color: var(--ho-color-ink);
}
.ho-preloader .pre-bar::before {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background-color: var(--pre-c);
}
.ho-preloader .pre-bar.is-h {
  --pre-c: var(--ho-color-coral);
}
.ho-preloader .pre-bar.is-i {
  --pre-c: var(--ho-color-iris);
}
.ho-preloader .pre-bar.is-b {
  --pre-c: var(--ho-color-jade);
}
.ho-preloader .pre-bar.is-o {
  --pre-c: var(--ho-color-amber);
}
.ho-preloader .pre-bar + .pre-bar {
  box-shadow: inset 1px 0 0 rgba(var(--ho-color-white-rgb), 0.06);
}
.ho-preloader .pre-letter {
  font-family: var(--ho-ff-heading);
  font-size: clamp(90px, 13vw, 210px);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--pre-c);
}
.ho-preloader .pre-word {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(var(--ho-color-white-rgb), 0.72);
}
/* no JS or reduced motion: the loader never shows */
.no-js .ho-preloader {
  display: none;
}

/*======================
3. Product Colours
========================*/
/* written by the build from site_data.py: each template's own ground and accent, worn by its
   chip in the mega menu, its card edge and swatches in the suite, and its ring card */
.pc-hibotel {
  --pc-ground: #14110E;
  --pc-accent: #C2A46A;
}
.pc-hiboxa {
  --pc-ground: #1D3531;
  --pc-accent: #F59288;
}
.pc-hiboski {
  --pc-ground: #063856;
  --pc-accent: #00B4D5;
}
.pc-hibojet {
  --pc-ground: #111111;
  --pc-accent: #D2C09E;
}
.pc-hibolimo {
  --pc-ground: #111111;
  --pc-accent: #D2C09E;
}
.pc-hibotour {
  --pc-ground: #1D1611;
  --pc-accent: #F79838;
}
.pc-hibomar {
  --pc-ground: #0C3A46;
  --pc-accent: #FCC024;
}
.pc-hibokids {
  --pc-ground: #005385;
  --pc-accent: #D8128B;
}
.pc-hibomerch {
  --pc-ground: #14110E;
  --pc-accent: #C2A46A;
}
.pc-hiboncierge {
  --pc-ground: #14110E;
  --pc-accent: #C2A46A;
}
.pc-hiboboard {
  --pc-ground: #0E1014;
  --pc-accent: #FF6B4A;
}

/*======================
4. Header
========================*/
/* On ink over the hero; sticky it keeps the ink and gains a hairline. The Templates item opens
   the mega menu: every template on the left, the hovered one's home pages on the right. */
.ho-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 30;
}
.ho-header .header-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 40px;
  min-height: 96px;
}
.ho-header .header-inner > * {
  min-width: 0;
}
.ho-logo {
  display: inline-block;
  line-height: 0;
}
.ho-logo img {
  display: block;
  width: auto;
  height: 58px;
}
.ho-nav > ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
}
.ho-nav > ul > li {
  position: relative;
  padding: 36px 0;
}
.ho-nav > ul > li.has-mega {
  position: static;
}
.ho-nav > ul > li > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  color: rgba(var(--ho-color-white-rgb), 0.86);
  white-space: nowrap;
}
.ho-nav > ul > li > a i {
  font-size: 10px;
  opacity: 0.6;
  transition: transform 0.35s var(--ho-ease);
}
.ho-nav > ul > li:hover > a,
.ho-nav > ul > li:focus-within > a {
  color: var(--ho-color-white);
}
.ho-nav > ul > li:hover > a i {
  transform: rotate(180deg);
}
/* first-level dropdowns hang a little below the tab, with a bridge so the pointer never falls through */
.ho-nav .sub-menu {
  position: absolute;
  top: calc(100% - 18px);
  left: -24px;
  min-width: 250px;
  list-style: none;
  margin: 0;
  padding: 14px 0;
  border-radius: 0;
  background-color: var(--ho-color-raised);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(var(--ho-color-white-rgb), 0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.35s var(--ho-ease), transform 0.35s var(--ho-ease), visibility 0.35s;
  z-index: 5;
}
.ho-nav .sub-menu::before {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  top: -18px;
  height: 18px;
}
.ho-nav li:hover > .sub-menu,
.ho-nav li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.ho-nav .sub-menu li {
  position: relative;
}
.ho-nav .sub-menu li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 24px;
  font-size: 15px;
  color: rgba(var(--ho-color-white-rgb), 0.72);
}
.ho-nav .sub-menu li > a i {
  font-size: 10px;
  opacity: 0.5;
}
.ho-nav .sub-menu li > a:hover {
  color: var(--ho-color-white);
}
.ho-nav .sub-menu .sub-menu {
  top: -14px;
  left: 100%;
  transform: translateX(12px);
}
.ho-nav .sub-menu .sub-menu::before {
  left: -14px;
  top: 0;
  width: 14px;
  height: 100%;
}
.ho-nav .sub-menu li:hover > .sub-menu {
  transform: translateX(0);
}
.header-right {
  display: flex;
  align-items: center;
  gap: 22px;
}
.suite-tally {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 0;
  box-shadow: inset 0 0 0 1px rgba(var(--ho-color-white-rgb), 0.14);
  font-size: 14px;
  color: rgba(var(--ho-color-white-rgb), 0.7);
  white-space: nowrap;
}
.suite-tally b {
  font-size: 16px;
  color: var(--ho-color-white);
}
/* the figures count up after the preloader; each holds its final width meanwhile, so the pill never jiggles */
.suite-tally .count-num {
  display: inline-block;
  min-width: 2ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.suite-tally b + .sep + b .count-num,
.suite-tally .sep ~ b .count-num {
  min-width: 3ch;
}
.suite-tally .sep {
  width: 4px;
  height: 4px;
  border-radius: 0;
  background-color: var(--ho-color-amber);
}
.ho-menu-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 50px;
  height: 50px;
  flex: none;
  border-radius: 0;
  box-shadow: inset 0 0 0 1px rgba(var(--ho-color-white-rgb), 0.18);
  transition: background-color 0.35s var(--ho-ease), box-shadow 0.35s var(--ho-ease);
}
.ho-menu-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 0;
  background-color: var(--ho-color-white);
  transition: background-color 0.35s var(--ho-ease), transform 0.35s var(--ho-ease);
}
.ho-menu-toggle:hover {
  background-color: var(--ho-color-coral);
  box-shadow: none;
}
.ho-menu-toggle:hover span {
  background-color: var(--ho-color-ink);
}

/*---- Mega menu ----*/
/* the ten templates in two columns on the left, the pointed one's home pages in a row on the right;
   never taller than the screen */
.mega-panel {
  position: absolute;
  top: calc(100% - 10px);
  left: 40px;
  right: 40px;
  padding-top: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.4s var(--ho-ease), transform 0.4s var(--ho-ease), visibility 0.4s;
  z-index: 6;
}
.has-mega:hover > .mega-panel,
.has-mega:focus-within > .mega-panel,
.has-mega.is-open > .mega-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mega-inner {
  display: grid;
  grid-template-columns: 470px minmax(0, 1fr);
  max-height: calc(100vh - 120px);
  border-radius: 0;
  overflow: hidden;
  background-color: var(--ho-color-raised);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(var(--ho-color-white-rgb), 0.08);
}
.mega-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 4px;
  padding: 18px;
  overflow-y: auto;
  background-color: var(--ho-color-ink);
}
.mega-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 0;
  color: rgba(var(--ho-color-white-rgb), 0.82);
  transition: background-color 0.3s var(--ho-ease), color 0.3s var(--ho-ease);
}
.mega-item .mi-dot {
  width: 10px;
  height: 10px;
  border-radius: 0;
  background-color: var(--pc-accent);
  box-shadow: 0 0 0 3px rgba(var(--ho-color-white-rgb), 0.06);
}
.mega-item .mi-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}
.mega-item .mi-name {
  font-family: var(--ho-ff-heading);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.mega-item .mi-niche {
  font-size: 12.5px;
  color: rgba(var(--ho-color-white-rgb), 0.5);
}
.mega-item:hover,
.mega-item.is-active {
  background-color: rgba(var(--ho-color-white-rgb), 0.07);
  color: var(--ho-color-white);
}
.mega-item.is-active .mi-niche {
  color: rgba(var(--ho-color-white-rgb), 0.7);
}
.mega-stages {
  position: relative;
  padding: 26px 28px;
  overflow-y: auto;
}
.mega-stage {
  display: none;
}
.mega-stage.is-active {
  display: block;
}
.mega-shots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.mega-shot {
  display: block;
  color: rgba(var(--ho-color-white-rgb), 0.78);
}
.mega-shot .shot-frame {
  transition: transform 0.5s var(--ho-ease), box-shadow 0.5s var(--ho-ease);
}
.mega-shot:hover .shot-frame {
  transform: translateY(-4px);
  box-shadow: 0 0 0 2px var(--pc-accent), 0 20px 40px rgba(0, 0, 0, 0.4);
}
.mega-shot .shot-cap {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 500;
}
.mega-shot:hover {
  color: var(--ho-color-white);
}
.mega-foot {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(var(--ho-color-white-rgb), 0.08);
}
.mega-foot .mega-logo {
  width: auto;
  height: 32px;
  flex: none;
}
.mega-foot p {
  flex: 1 1 auto;
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(var(--ho-color-white-rgb), 0.62);
}
.mega-count {
  display: block;
  color: rgba(var(--ho-color-white-rgb), 0.45);
}
.mega-foot .ho-link {
  color: var(--ho-color-white);
  white-space: nowrap;
}

/*---- Sticky state ----*/
.ho-header.sticky-on {
  position: fixed;
  background-color: rgba(var(--ho-color-ink-rgb), 0.92);
  /* the footer's maze, at half its strength */
  background-image: url(../img/bg/pattern-maze-soft.png);
  background-size: 1440px auto;
  background-position: center top;
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(var(--ho-color-white-rgb), 0.08);
  animation: hoSlideDown 0.55s var(--ho-ease) both;
}
@keyframes hoSlideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}
.ho-header.sticky-on .header-inner {
  min-height: 80px;
}
.ho-header.sticky-on .ho-nav > ul > li {
  padding: 28px 0;
}
.ho-header.sticky-on .ho-logo img {
  height: 50px;
}

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

/* a template link carries its niche, small and quiet */
.offcanvas-nav a span {
  margin-left: 6px;
  font-family: var(--ho-ff-body);
  font-size: 13px;
  letter-spacing: 0;
  color: rgba(var(--ho-color-white-rgb), 0.45);
}

/*---- Progress Ring (back to top) ----*/
.progress-ring-track {
  fill: none;
  stroke: rgba(var(--ho-color-white-rgb), 0.16);
  stroke-width: 1.5;
}
.progress-ring-fill {
  fill: none;
  stroke: var(--ho-color-coral);
  stroke-width: 1.5;
  stroke-linecap: butt;
}

/*======================
6. Hero
========================*/
/* Above the fold: the page wall - five columns of inner pages from across the suite, tilted and
   drifting against each other - fills the band behind a shade; the copy on the left turns through
   three statements with arrows, a count and the autoplay progress. The facts sit at the foot. */
.ho-hero {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 132px 0 48px;
}
.ho-hero .wall-cols {
  position: absolute;
  top: -180px;
  bottom: -180px;
  right: -60px;
  width: 70%;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  transform: rotate(-8deg);
  transform-origin: 60% 50%;
  z-index: 0;
}
.wall-col {
  min-width: 0;
}
.wall-col[data-wall-col="down"] {
  margin-top: -240px;
}
.wall-track {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.wall-tile {
  display: block;
}
.wall-tile .shot-frame {
  border-radius: 0;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(var(--ho-color-white-rgb), 0.08);
  transition: box-shadow 0.4s var(--ho-ease), transform 0.4s var(--ho-ease);
}
.wall-tile:hover .shot-frame {
  transform: translateY(-3px);
  box-shadow: 0 0 0 2px var(--pc-accent), 0 22px 50px rgba(0, 0, 0, 0.55);
}
.wt-cap {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 7px;
  font-size: 12.5px;
  color: rgba(var(--ho-color-white-rgb), 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wt-cap .dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 0;
  background-color: var(--pc-accent);
}
.wall-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(var(--ho-color-ink-rgb), 1) 0%, rgba(var(--ho-color-ink-rgb), 0.97) 30%, rgba(var(--ho-color-ink-rgb), 0.55) 52%, rgba(var(--ho-color-ink-rgb), 0.15) 78%, rgba(var(--ho-color-ink-rgb), 0.3) 100%),
    linear-gradient(180deg, rgba(var(--ho-color-ink-rgb), 0.85) 0%, rgba(var(--ho-color-ink-rgb), 0) 20%, rgba(var(--ho-color-ink-rgb), 0) 72%, rgba(var(--ho-color-ink-rgb), 0.95) 100%);
}
/* the WebGL light (block Pillar Light) is the hero's background: it sits behind the wall (the wall comes later at
   the same level) and glows between the tilted pages; .gl-light is the same light behind other sections */
.hero-gl,
.gl-light {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.ho-hero .container-wide {
  position: relative;
  z-index: 2;
}
/* the copy and its facts on the left, the big figure on the right */
.ho-hero > .container-wide {
  display: grid;
  grid-template-columns: minmax(0, 660px) minmax(0, 1fr);
  column-gap: 40px;
  align-items: center;
}
.hero-copy,
.hero-facts {
  grid-column: 1;
}
.hero-copy {
  max-width: 660px;
}

/*---- The big figure ----*/
/* the suite's home pages, in the four pillar colours; a soft dark glow lifts it off the wall */
/* centred in the right half, level with the copy */
.hero-total {
  position: relative;
  z-index: 2;
  grid-column: 2;
  grid-row: 1 / span 2;
  justify-self: center;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  pointer-events: none;
}
.hero-total::before {
  position: absolute;
  content: "";
  inset: -32% -45%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(var(--ho-color-ink-rgb), 0.92), rgba(var(--ho-color-ink-rgb), 0.6) 55%, rgba(var(--ho-color-ink-rgb), 0));
}
.ht-num {
  font-family: var(--ho-ff-heading);
  font-size: clamp(200px, 25vw, 380px);
  font-weight: 800;
  line-height: 0.82;
  letter-spacing: -0.06em;
  color: transparent;
  background-image: linear-gradient(100deg, var(--ho-color-coral) 0%, var(--ho-color-iris) 38%, var(--ho-color-jade) 68%, var(--ho-color-amber) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 24px 60px rgba(0, 0, 0, 0.55));
}
/* the count holds a two-figure width while it runs, so the figure does not jump; the padding carries the
   gradient past the last figure's edge (the tight tracking would otherwise cut its right side off) */
.ht-num {
  padding: 0.02em 0.14em 0;
}
.ht-num .count-num {
  display: inline-block;
  min-width: 1.2em;
  padding-right: 0.06em;
  font-variant-numeric: tabular-nums;
}
/* the label on its own ink plaque, so the wall never shows through the words */
.ht-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  margin-top: 26px;
  padding: 14px 28px 15px;
  border-top: 2px solid transparent;
  border-image: linear-gradient(90deg, var(--ho-color-coral), var(--ho-color-iris), var(--ho-color-jade), var(--ho-color-amber)) 1;
  background-color: rgba(var(--ho-color-ink-rgb), 0.9);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ho-color-white);
}
.ht-label em {
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(var(--ho-color-white-rgb), 0.82);
}

/*---- The three statements ----*/
.hero-slides {
  display: grid;
}
.hero-slide {
  grid-area: 1 / 1;
  visibility: hidden;
}
.hero-slide.is-active {
  visibility: visible;
}
.hero-slide .hero-title {
  font-size: var(--ho-fs-h1);
  line-height: 0.98;
  margin-bottom: 26px;
}
.hero-lead {
  max-width: 46ch;
  color: rgba(var(--ho-color-white-rgb), 0.7);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}
.hero-bar {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 460px;
  margin-top: 40px;
}
.hero-count {
  font-size: 15px;
  color: rgba(var(--ho-color-white-rgb), 0.5);
  white-space: nowrap;
}
.hero-count b {
  font-size: 24px;
  color: var(--ho-color-white);
}
.hero-count .sep {
  margin: 0 4px;
}
.hero-progress {
  position: relative;
  flex: 1 1 auto;
  height: 2px;
  border-radius: 0;
  background-color: rgba(var(--ho-color-white-rgb), 0.14);
  overflow: hidden;
}
.hero-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--ho-color-coral), var(--ho-color-iris), var(--ho-color-jade), var(--ho-color-amber));
  transform: scaleX(0);
  transform-origin: left center;
}
.hero-bar:hover .hero-fill {
  opacity: 0.6;
}
.slider-nav {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 0;
  font-size: 14px;
  color: var(--ho-color-white);
  box-shadow: inset 0 0 0 1px rgba(var(--ho-color-white-rgb), 0.2);
  transition: background-color 0.35s var(--ho-ease), color 0.35s var(--ho-ease), box-shadow 0.35s var(--ho-ease);
}
.slider-nav:hover {
  background-color: var(--ho-color-coral);
  color: var(--ho-color-ink);
  box-shadow: none;
}
.hero-facts {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: start;
  gap: 0 44px;
  margin-top: 44px;
  padding-top: 24px;
  max-width: 660px;
  border-top: 1px solid rgba(var(--ho-color-white-rgb), 0.1);
}
.hero-facts .fig {
  display: block;
  font-size: 38px;
  line-height: 1;
  color: var(--ho-color-white);
}
.hero-facts .cap {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  color: rgba(var(--ho-color-white-rgb), 0.55);
}

/*======================
7. Brand Wall
========================*/
/* the ten sites' logos on the ink, five by two, and the dashboard's across a row of its own; each tile wears its
   template's accent on hover */
.ho-brands {
  padding: 30px 0 110px;
  /* the maze pattern, dark lines on the ink */
  background-image: url(../img/bg/pattern-maze.png);
  background-size: cover;
  background-position: center;
}
.brands-inner {
  padding-top: 40px;
}
.brands-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 36px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ho-color-white-rgb), 0.6);
}
.brand-wall {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}
.brand-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 150px;
  padding: 26px 18px 20px;
  border-radius: 0;
  background-color: var(--ho-color-raised);
  box-shadow: inset 0 0 0 1px rgba(var(--ho-color-white-rgb), 0.06);
  overflow: hidden;
  transition: transform 0.5s var(--ho-ease), box-shadow 0.5s var(--ho-ease), background-color 0.5s var(--ho-ease);
}
.brand-tile::after {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background-color: var(--pc-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s var(--ho-ease);
}
.brand-tile img {
  width: auto;
  max-width: 82%;
  height: 46px;
  object-fit: contain;
}
.brand-tile .bt-niche {
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  color: rgba(var(--ho-color-white-rgb), 0.5);
  transition: color 0.4s var(--ho-ease);
}
.brand-tile:hover {
  transform: translateY(-4px);
  background-color: var(--ho-color-raised-2);
  box-shadow: inset 0 0 0 1px rgba(var(--ho-color-white-rgb), 0.1), 0 24px 50px rgba(0, 0, 0, 0.35);
}
.brand-tile:hover::after {
  transform: scaleX(1);
}
.brand-tile:hover .bt-niche {
  color: var(--ho-color-white);
}
/* the eleventh: Hiboboard, logo and line side by side across the row */
.brand-tile.is-wide {
  grid-column: 1 / -1;
  flex-direction: row;
  gap: 30px;
  min-height: 116px;
}
.brand-tile.is-wide img {
  max-width: 40%;
  height: 40px;
}
.brand-tile.is-wide .bt-niche {
  font-size: 15px;
}
.bt-sep {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 10px;
  vertical-align: middle;
  background-color: var(--pc-accent);
}

/*======================
8. Pillars Marquee
========================*/
/* Under the fold: Hospitality, Intelligence, Business, Operations run on a loop, each word's
   initial in its pillar colour, a four-colour disc between them; the loop quickens with the scroll. */
.ho-marquee {
  position: relative;
  padding: 34px 0;
  overflow: hidden;
  border-top: 1px solid rgba(var(--ho-color-white-rgb), 0.08);
  border-bottom: 1px solid rgba(var(--ho-color-white-rgb), 0.08);
}
.marquee-track {
  display: flex;
  width: max-content;
}
.marquee-set {
  display: flex;
  align-items: center;
  gap: 50px;
  padding-right: 50px;
}
.mq-word {
  font-family: var(--ho-ff-heading);
  font-size: 84px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(var(--ho-color-white-rgb), 0.5);
  white-space: nowrap;
}
.mq-word b {
  font-weight: 800;
  -webkit-text-stroke: 0;
}
.mq-word.is-h b {
  color: var(--ho-color-coral);
}
.mq-word.is-i b {
  color: var(--ho-color-iris);
}
.mq-word.is-b b {
  color: var(--ho-color-jade);
}
.mq-word.is-o b {
  color: var(--ho-color-amber);
}
.mq-disc {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 0;
  background: linear-gradient(var(--ho-color-coral), var(--ho-color-coral)) 0 0 / 50% 50% no-repeat,
    linear-gradient(var(--ho-color-iris), var(--ho-color-iris)) 100% 0 / 50% 50% no-repeat,
    linear-gradient(var(--ho-color-amber), var(--ho-color-amber)) 0 100% / 50% 50% no-repeat,
    linear-gradient(var(--ho-color-jade), var(--ho-color-jade)) 100% 100% / 50% 50% no-repeat;
  transform: rotate(45deg) scale(0.8);
}

/*======================
9. Pillars
========================*/
/* H, I, B, O: four tall columns on the paper, each topped with its colour, a giant outline letter
   behind the copy and one real figure from the suite at the foot. */
.pillars-head {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: 70px;
  align-items: center;
  margin-bottom: 60px;
}
.pillars-head .ho-sec-title h2 {
  max-width: 22ch;
}
.head-lead {
  max-width: 52ch;
}
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.pillar {
  --pl-c: var(--ho-color-coral);
  --pl-t: var(--ho-color-coral-deep);
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 460px;
  padding: 34px 30px 30px;
  border-radius: 0;
  background-color: var(--ho-color-white);
  box-shadow: inset 0 5px 0 var(--pl-c), 0 1px 0 var(--ho-color-border);
  overflow: hidden;
  transition: transform 0.5s var(--ho-ease), box-shadow 0.5s var(--ho-ease);
}
.pillar.is-i {
  --pl-c: var(--ho-color-iris);
  --pl-t: var(--ho-color-iris-deep);
}
.pillar.is-b {
  --pl-c: var(--ho-color-jade);
  --pl-t: var(--ho-color-jade-deep);
}
.pillar.is-o {
  --pl-c: var(--ho-color-amber);
  --pl-t: var(--ho-color-amber-deep);
}
.pillar .pl-letter {
  position: absolute;
  right: -14px;
  top: 6px;
  font-family: var(--ho-ff-heading);
  font-size: 250px;
  font-weight: 800;
  line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 2px var(--pl-c);
  opacity: 0.22;
  pointer-events: none;
  transition: opacity 0.5s var(--ho-ease), transform 0.6s var(--ho-ease);
}
.pillar .pl-index {
  position: relative;
  color: var(--pl-t);
}
.pillar h3 {
  position: relative;
  margin: 16px 0 16px;
  font-size: 32px;
}
.pillar p {
  position: relative;
}
.pl-fig {
  position: relative;
  margin-top: auto;
  padding-top: 26px;
  border-top: 1px solid var(--ho-color-border);
}
.pl-fig .fig {
  display: block;
  font-size: 56px;
  line-height: 1;
  color: var(--ho-color-ink);
}
.pl-fig .cap {
  display: block;
  margin-top: 8px;
  font-size: 15px;
  color: var(--ho-color-body);
}
.pillar:hover {
  transform: translateY(-6px);
  box-shadow: inset 0 5px 0 var(--pl-c), 0 30px 60px rgba(var(--ho-color-ink-rgb), 0.1);
}
.pillar:hover .pl-letter {
  opacity: 0.6;
  transform: translateY(-6px) rotate(-4deg);
}

/*======================
10. Showroom
========================*/
/* The showcase as a showroom: the ten templates listed on the left (each with its autoplay line), a square
   browser in the middle whose home page scrolls slowly inside it, and on the right the chosen template's
   logo, facts, home pages and a way in. */
.ho-showcase {
  position: relative;
}
/* the content sits over the pillar light */
.ho-showcase > .container-wide {
  position: relative;
  z-index: 1;
}
.showroom-head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 60px;
  align-items: center;
  margin-bottom: 56px;
}
.showroom-head .head-lead {
  color: rgba(var(--ho-color-white-rgb), 0.66);
}
/* the three columns share one height: the window grows to the list's */
.showroom {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr) 300px;
  gap: 28px;
  align-items: stretch;
}

/*---- The list ----*/
.sr-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(var(--ho-color-white-rgb), 0.08);
}
.sr-item {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 13px 14px 15px 0;
  border-bottom: 1px solid rgba(var(--ho-color-white-rgb), 0.08);
  text-align: left;
  color: rgba(var(--ho-color-white-rgb), 0.55);
  transition: color 0.35s var(--ho-ease), padding 0.45s var(--ho-ease);
}
.sr-num {
  font-size: 14px;
  color: rgba(var(--ho-color-white-rgb), 0.35);
  transition: color 0.35s var(--ho-ease);
}
.sr-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  min-width: 0;
}
.sr-name {
  font-family: var(--ho-ff-heading);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.015em;
}
.sr-niche {
  font-size: 13px;
  color: rgba(var(--ho-color-white-rgb), 0.45);
}
.sr-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  overflow: hidden;
}
.sr-fill {
  position: absolute;
  inset: 0;
  background-color: var(--pc-accent);
  transform: scaleX(0);
  transform-origin: left center;
}
.sr-item:hover {
  color: var(--ho-color-white);
}
.sr-item.is-active {
  padding-left: 12px;
  color: var(--ho-color-white);
  background: linear-gradient(90deg, rgba(var(--ho-color-white-rgb), 0.06), rgba(var(--ho-color-white-rgb), 0));
  box-shadow: inset 3px 0 0 var(--pc-accent);
}
.sr-item.is-active .sr-num {
  color: var(--pc-accent);
}
.sr-item.is-active .sr-niche {
  color: rgba(var(--ho-color-white-rgb), 0.7);
}

/*---- The stage ----*/
.sr-stage {
  display: flex;
  flex-direction: column;
}
.sr-browser {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  background-color: var(--ho-color-raised);
  box-shadow: 0 50px 110px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(var(--ho-color-white-rgb), 0.08);
}
.sr-chrome {
  display: flex;
  flex: none;
  align-items: center;
  gap: 16px;
  height: 42px;
  padding: 0 16px;
  background-color: var(--ho-color-raised-2);
}
.sr-dots {
  display: flex;
  gap: 6px;
}
.sr-dots i {
  display: block;
  width: 9px;
  height: 9px;
  background-color: var(--ho-color-coral);
}
.sr-dots i:nth-child(2) {
  background-color: var(--ho-color-amber);
}
.sr-dots i:nth-child(3) {
  background-color: var(--ho-color-jade);
}
.sr-url {
  flex: 1 1 auto;
  max-width: 420px;
  padding: 6px 14px;
  font-size: 13px;
  color: rgba(var(--ho-color-white-rgb), 0.62);
  background-color: rgba(var(--ho-color-white-rgb), 0.06);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sr-screen {
  position: relative;
  flex: 1 1 auto;
  aspect-ratio: 16 / 10.6;
  overflow: hidden;
  background-color: var(--ho-color-raised-2);
}
.sr-page {
  position: absolute;
  inset: 0;
  visibility: hidden;
}
.sr-page.is-active {
  visibility: visible;
}
.sr-page img {
  display: block;
  width: 100%;
  height: auto;
}

/*---- The card ----*/
.sr-set {
  display: none;
}
.sr-set.is-active {
  display: block;
}
.sr-logo {
  display: block;
  width: auto;
  max-width: 100%;
  height: 52px;
  object-fit: contain;
  object-position: left center;
}
.sr-engine {
  margin-top: 20px;
  color: rgba(var(--ho-color-white-rgb), 0.66);
}
.sr-facts {
  display: flex;
  gap: 28px;
  margin-top: 20px;
  padding: 18px 0;
  border-top: 1px solid rgba(var(--ho-color-white-rgb), 0.08);
  border-bottom: 1px solid rgba(var(--ho-color-white-rgb), 0.08);
  font-size: 14px;
  color: rgba(var(--ho-color-white-rgb), 0.55);
}
.sr-facts b {
  display: block;
  font-size: 30px;
  line-height: 1;
  margin-bottom: 4px;
  color: var(--ho-color-white);
}
.sr-homes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 22px;
}
.sr-home {
  display: block;
  padding: 0;
  text-align: left;
  color: rgba(var(--ho-color-white-rgb), 0.55);
}
.sr-home .shot-frame {
  transition: box-shadow 0.4s var(--ho-ease), transform 0.4s var(--ho-ease);
}
.sr-home:hover .shot-frame {
  transform: translateY(-3px);
}
.sr-home.is-active .shot-frame {
  box-shadow: 0 0 0 2px var(--pc-accent);
}
.sr-home-cap {
  display: block;
  margin-top: 8px;
  font-size: 12.5px;
}
.sr-home.is-active {
  color: var(--ho-color-white);
}
.sr-open {
  width: 100%;
  margin-top: 26px;
}

/*======================
11. The Suite
========================*/
/* Ten cards in two staggered columns on the ink, then the dashboard across the full row. Each card is a browser frame holding the top
   of its home page: hover and the page scrolls inside the frame; beneath, the logo, the niche,
   the engine and the template's home pages as small screenshots. Collection tabs filter it. */
.suite-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 30px 60px;
  margin-bottom: 60px;
}
.suite-head .ho-sec-title h2 {
  max-width: 19ch;
}
.suite-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.suite-tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  border-radius: 0;
  font-size: 15px;
  font-weight: 500;
  color: rgba(var(--ho-color-white-rgb), 0.72);
  box-shadow: inset 0 0 0 1px rgba(var(--ho-color-white-rgb), 0.14);
  transition: background-color 0.35s var(--ho-ease), color 0.35s var(--ho-ease), box-shadow 0.35s var(--ho-ease);
}
.suite-tab .st-n {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 0;
  font-size: 12.5px;
  font-weight: 600;
  background-color: rgba(var(--ho-color-white-rgb), 0.1);
}
.suite-tab:hover {
  color: var(--ho-color-white);
}
.suite-tab.is-active {
  background-color: var(--ho-color-white);
  color: var(--ho-color-ink);
  box-shadow: none;
}
.suite-tab.is-active .st-n {
  background-color: var(--ho-color-coral);
  color: var(--ho-color-ink);
}
.suite-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px 48px;
  align-items: start;
}
/* the right-hand column hangs lower; the negative margin keeps the rows to the left cards' height */
.suite-card.is-right {
  margin-top: 150px;
  margin-bottom: -150px;
}
.suite-grid.is-filtered .suite-card.is-right {
  margin-top: 0;
  margin-bottom: 0;
}
/* the last card keeps its full height inside the section */
.suite-card.is-right:last-child {
  margin-bottom: 0;
}
.suite-card.is-hidden {
  display: none;
}
.suite-card {
  position: relative;
  border-radius: 0;
  background-color: var(--ho-color-raised);
  box-shadow: inset 0 0 0 1px rgba(var(--ho-color-white-rgb), 0.07);
  transform-style: preserve-3d;
  transition: box-shadow 0.5s var(--ho-ease);
}
.suite-card:hover {
  box-shadow: inset 0 0 0 1px rgba(var(--ho-color-white-rgb), 0.12), 0 40px 90px rgba(0, 0, 0, 0.45);
}
.sc-shot {
  display: block;
  margin: 14px 14px 0;
  border-radius: 0;
  overflow: hidden;
  background-color: var(--ho-color-raised-2);
}
.sc-shot .shot-bar {
  height: 30px;
  gap: 6px;
  padding: 0 14px;
}
.sc-shot .shot-url {
  margin-left: 12px;
  padding: 3px 12px;
  border-radius: 0;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(var(--ho-color-white-rgb), 0.55);
  background-color: rgba(var(--ho-color-white-rgb), 0.06);
}
.sc-scroll {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10.4;
  overflow: hidden;
}
/* top and transform travel together: the image ends with its bottom on the frame's bottom */
.sc-scroll img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  transform: translateY(0);
  transition: top 6s linear, transform 6s linear;
}
.suite-card:hover .sc-scroll img {
  top: 100%;
  transform: translateY(-100%);
}
.sc-body {
  padding: 26px 30px 30px;
}
.sc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}
.sc-logo {
  width: auto;
  height: 38px;
}
.sc-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  color: rgba(var(--ho-color-white-rgb), 0.55);
  white-space: nowrap;
}
.sc-coll {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.sc-coll::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 0;
  background-color: var(--pc-accent);
}
.sc-pages b {
  font-size: 16px;
  color: var(--ho-color-white);
}
.sc-body h3 {
  margin-bottom: 10px;
  font-size: 28px;
}
.sc-body p {
  max-width: 48ch;
}
.sc-homes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 24px 0 24px;
}
.sc-home {
  display: block;
  color: rgba(var(--ho-color-white-rgb), 0.6);
}
.sc-home .shot-frame {
  border-radius: 0;
  transition: transform 0.45s var(--ho-ease), box-shadow 0.45s var(--ho-ease);
}
.sc-home:hover .shot-frame {
  transform: translateY(-3px);
  box-shadow: 0 0 0 2px var(--pc-accent);
}
.sc-home-cap {
  display: block;
  margin-top: 8px;
  font-size: 13px;
}
.sc-home:hover {
  color: var(--ho-color-white);
}

/*---- The eleventh card: Hiboboard across the full row ----*/
/* its overview scrolls in a wide frame on the left; its facts, two themes and two pages sit on the right. The right-hand
   card above it hangs 150px lower, so this one starts that much further down. */
.suite-card.is-full {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: stretch;
  margin-top: 150px;
}
.suite-grid.is-filtered .suite-card.is-full {
  margin-top: 0;
}
/* the frame runs the card's full height; its overview (longer than the frame) scrolls on hover */
.suite-card.is-full .sc-shot {
  display: flex;
  flex-direction: column;
  margin: 14px 0 14px 14px;
}
.suite-card.is-full .sc-scroll {
  flex: 1;
  aspect-ratio: auto;
  min-height: 440px;
}
.suite-card.is-full .sc-body {
  padding: 34px 40px;
}
.suite-card.is-full .sc-body h3 {
  font-size: 32px;
}
.sc-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 34px;
  margin: 24px 0 0;
  font-size: 14px;
  color: rgba(var(--ho-color-white-rgb), 0.55);
}
.sc-facts b {
  display: block;
  margin-bottom: 6px;
  font-family: var(--ho-ff-heading);
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ho-color-white);
}
.sc-homes.is-four {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/*---- Hiboxa's leaves ----*/
/* two at each side of the first row, hanging off the screen edge: the far one behind its card (smaller, softer),
   the near one in front, over the outer edge of the card's screenshot (clear of its words and links) */
/* clipped sideways only: the leaves hang off the screen edge without widening the page */
.ho-suite {
  position: relative;
  overflow-x: clip;
}
.suite-leaf {
  position: absolute;
  z-index: 0;
  display: block;
  width: 230px;
  pointer-events: none;
}
.suite-leaf.is-lb,
.suite-leaf.is-rb {
  z-index: 3;
}
.suite-leaf .leaf-in,
.suite-leaf img {
  display: block;
  width: 100%;
  height: auto;
}
.suite-leaf img {
  filter: drop-shadow(0 22px 26px rgba(0, 0, 0, 0.45));
}
.suite-leaf.is-far img {
  opacity: 0.8;
  filter: blur(1.5px) drop-shadow(0 12px 18px rgba(0, 0, 0, 0.35));
}
.suite-leaf.is-la {
  left: -70px;
  top: 300px;
  width: 210px;
}
.suite-leaf.is-lb {
  left: -110px;
  top: 560px;
  width: 250px;
}
.suite-leaf.is-ra {
  right: -60px;
  top: 440px;
  width: 230px;
}
.suite-leaf.is-rb {
  right: -110px;
  top: 780px;
  width: 240px;
}

/*======================
12. The Dashboard
========================*/
/* Hiboboard, the eleventh template, on the paper: the total pages in one big figure beside what they are; the
   overview in dark and light under one moving divide; six of its pages; the way in. */
.dash-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 30px 60px;
  margin-bottom: 64px;
}
.dash-head .ho-sec-title h2 {
  max-width: 21ch;
}
.dash-head .head-lead {
  max-width: 600px;
}
/* the total and the page kinds */
.dash-intro {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 40px 80px;
  margin-bottom: 60px;
}
.dash-total {
  display: flex;
  align-items: flex-end;
  gap: 20px;
}
.dt-num {
  padding: 0.02em 0.06em 0 0;
  font-family: var(--ho-ff-heading);
  font-size: 168px;
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.06em;
  color: transparent;
  background-image: linear-gradient(100deg, var(--ho-color-coral) 0%, var(--ho-color-iris) 38%, var(--ho-color-jade) 68%, var(--ho-color-amber) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.dt-num .count-num {
  display: inline-block;
  min-width: 1.8em;
}
.dt-label {
  padding-bottom: 6px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ho-color-ink);
}
.dt-label em {
  display: block;
  margin-top: 4px;
  font-size: 16px;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ho-color-muted);
}
.dash-kinds {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.dash-kinds li {
  padding: 18px 22px;
  background-color: var(--ho-color-white);
  box-shadow: inset 0 0 0 1px rgba(var(--ho-color-ink-rgb), 0.06);
}
.dash-kinds b {
  display: block;
  margin-bottom: 6px;
  font-family: var(--ho-ff-heading);
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ho-color-ink);
}
.dash-kinds span {
  font-size: 14px;
  color: var(--ho-color-muted);
}
/* dark and light: the light overview is cut at the divide; the range over the frame moves it */
.dash-compare {
  margin-bottom: 64px;
}
.dc-frame {
  padding: 0 14px 14px;
  background-color: var(--ho-color-ink);
  box-shadow: 0 60px 110px -50px rgba(var(--ho-color-ink-rgb), 0.6);
}
.dc-frame .shot-bar {
  height: 38px;
  gap: 6px;
  padding: 0 2px;
  background-color: transparent;
}
.dc-frame .shot-url {
  margin-left: 12px;
  padding: 3px 12px;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(var(--ho-color-white-rgb), 0.55);
  background-color: rgba(var(--ho-color-white-rgb), 0.06);
}
.dc-stage {
  --dc-pos: 50%;
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.dc-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}
.dc-light {
  clip-path: inset(0 0 0 var(--dc-pos));
}
.dc-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--dc-pos);
  width: 2px;
  margin-left: -1px;
  background-color: var(--ho-color-white);
  box-shadow: 0 0 0 1px rgba(var(--ho-color-ink-rgb), 0.25);
  pointer-events: none;
}
.dc-knob {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  border-radius: 50%;
  font-size: 18px;
  color: var(--ho-color-ink);
  background-color: var(--ho-color-coral);
  box-shadow: 0 0 0 5px rgba(var(--ho-color-white-rgb), 0.9), 0 18px 40px rgba(0, 0, 0, 0.35);
  transition: transform 0.35s var(--ho-ease);
}
.dc-stage:hover .dc-knob {
  transform: scale(1.08);
}
.dc-stage:focus-within .dc-knob {
  outline: 3px solid var(--ho-color-iris);
  outline-offset: 6px;
}
.dc-tag {
  position: absolute;
  bottom: 20px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  pointer-events: none;
}
.dc-tag.is-dark {
  left: 20px;
  color: var(--ho-color-white);
  background-color: rgba(var(--ho-color-ink-rgb), 0.72);
  box-shadow: inset 0 0 0 1px rgba(var(--ho-color-white-rgb), 0.2);
}
.dc-tag.is-light {
  right: 20px;
  color: var(--ho-color-ink);
  background-color: rgba(var(--ho-color-white-rgb), 0.9);
  box-shadow: inset 0 0 0 1px rgba(var(--ho-color-ink-rgb), 0.1);
}
.dc-range {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
}
/* six of its pages */
.dash-pages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
.dash-page {
  display: block;
  color: var(--ho-color-ink);
}
.dash-page .shot-frame {
  background-color: var(--ho-color-ink);
  box-shadow: 0 0 0 1px rgba(var(--ho-color-ink-rgb), 0.08);
  transition: transform 0.5s var(--ho-ease), box-shadow 0.5s var(--ho-ease);
}
.dash-page .shot-bar {
  height: 24px;
}
.dash-page:hover .shot-frame {
  transform: translateY(-4px);
  box-shadow: 0 0 0 1px rgba(var(--ho-color-ink-rgb), 0.08), 0 34px 60px -30px rgba(var(--ho-color-ink-rgb), 0.55);
}
.dp-cap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  font-size: 16px;
}
.dp-cap b {
  font-weight: 600;
}
.dp-cap i {
  font-size: 14px;
  color: var(--ho-color-coral-deep);
  transition: transform 0.4s var(--ho-ease);
}
.dash-page:hover .dp-cap i {
  transform: translateX(4px);
}
.dash-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px 36px;
  margin-top: 60px;
}

/*======================
13. Engine Room
========================*/
/* The engineering base's desk, recomposed for the paper: the eight engines as a rail of tabs on
   the left (service and the template it comes from), and one white card per engine holding the
   form and its live quote. The Intelligence pillar's iris carries the section. */
.desk-head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 60px;
  align-items: center;
  margin-bottom: 56px;
}
/* a faint runway under the paper */
.ho-desk {
  background-image: linear-gradient(rgba(var(--ho-color-paper-rgb), 0.9), rgba(var(--ho-color-paper-rgb), 0.9)),
    url(../img/bg/runway.jpg);
  background-size: cover;
  background-position: center;
}
.desk-head .ho-sec-title h2 {
  max-width: 12ch;
}
/* the panel takes the height of the tab column (the quote's total sits at its foot) */
.desk-main {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 28px;
  align-items: stretch;
}
.desk-panels {
  display: flex;
  flex-direction: column;
}
.desk-tabs {
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: sticky;
  top: 110px;
}
.desk-tab {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 12px 16px 12px 12px;
  border-radius: 0;
  text-align: left;
  color: var(--ho-color-ink);
  transition: background-color 0.35s var(--ho-ease), box-shadow 0.35s var(--ho-ease);
}
/* the template's glyph on its own ground, in its accent, inside an inset hairline frame */
.desk-tab i {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  font-size: 26px;
  color: var(--pc-accent);
  background-color: var(--pc-ground);
  box-shadow: 0 10px 22px rgba(var(--ho-color-ink-rgb), 0.14);
  transition: transform 0.45s var(--ho-ease), box-shadow 0.45s var(--ho-ease);
}
.desk-tab i::after {
  position: absolute;
  content: "";
  inset: 4px;
  border: 1px solid var(--pc-accent);
  opacity: 0.35;
  transition: opacity 0.45s var(--ho-ease), inset 0.45s var(--ho-ease);
}
.desk-tab .dt-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.desk-tab .dt-name {
  font-family: var(--ho-ff-heading);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.desk-tab .dt-from {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  color: var(--ho-color-body);
}
.desk-tab .dt-from::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 0;
  background-color: var(--pc-accent);
}
.desk-tab:hover {
  background-color: rgba(var(--ho-color-white-rgb), 0.7);
}
.desk-tab:hover i {
  transform: translateY(-2px);
}
.desk-tab:hover i::after,
.desk-tab.is-active i::after {
  inset: 3px;
  opacity: 0.9;
}
.desk-tab.is-active {
  background-color: var(--ho-color-white);
  box-shadow: 0 14px 34px rgba(var(--ho-color-ink-rgb), 0.08), inset 3px 0 0 var(--ho-color-iris);
}
.desk-tab.is-active i {
  box-shadow: 0 16px 32px rgba(var(--ho-color-ink-rgb), 0.26);
}
.desk-panel {
  display: none;
}
.desk-panel.is-active {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.desk-form {
  position: relative;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  grid-template-rows: auto 1fr;
  border-radius: 0;
  background-color: var(--ho-color-ink);
  box-shadow: 0 30px 80px rgba(var(--ho-color-ink-rgb), 0.18);
}
/* two layers behind the fields: the engine's own photograph, and in front of it the ink veil (Laramiss
   pattern-04, recoloured) whose clear heart lets the picture through; a light ink wash keeps the words readable */
.desk-form::before {
  content: "";
  grid-column: 1;
  grid-row: 1 / span 2;
  background-color: var(--ho-color-ink);
  background-size: cover, cover, cover;
  background-position: center, center, center;
  background-repeat: no-repeat;
}
.desk-form[data-engine="jet"]::before {
  background-image: url(../img/bg/engine-veil.png), linear-gradient(rgba(var(--ho-color-ink-rgb), 0.34), rgba(var(--ho-color-ink-rgb), 0.34)), url(../img/engines/jet.jpg);
}
.desk-form[data-engine="car"]::before {
  background-image: url(../img/bg/engine-veil.png), linear-gradient(rgba(var(--ho-color-ink-rgb), 0.34), rgba(var(--ho-color-ink-rgb), 0.34)), url(../img/engines/car.jpg);
}
.desk-form[data-engine="stay"]::before {
  background-image: url(../img/bg/engine-veil.png), linear-gradient(rgba(var(--ho-color-ink-rgb), 0.34), rgba(var(--ho-color-ink-rgb), 0.34)), url(../img/engines/stay.jpg);
}
.desk-form[data-engine="spa"]::before {
  background-image: url(../img/bg/engine-veil.png), linear-gradient(rgba(var(--ho-color-ink-rgb), 0.34), rgba(var(--ho-color-ink-rgb), 0.34)), url(../img/engines/spa.jpg);
}
.desk-form[data-engine="journeys"]::before {
  background-image: url(../img/bg/engine-veil.png), linear-gradient(rgba(var(--ho-color-ink-rgb), 0.34), rgba(var(--ho-color-ink-rgb), 0.34)), url(../img/engines/journeys.jpg);
}
.desk-form[data-engine="ski"]::before {
  background-image: url(../img/bg/engine-veil.png), linear-gradient(rgba(var(--ho-color-ink-rgb), 0.34), rgba(var(--ho-color-ink-rgb), 0.34)), url(../img/engines/ski.jpg);
}
.desk-form[data-engine="park"]::before {
  background-image: url(../img/bg/engine-veil.png), linear-gradient(rgba(var(--ho-color-ink-rgb), 0.34), rgba(var(--ho-color-ink-rgb), 0.34)), url(../img/engines/park.jpg);
}
.desk-form[data-engine="kids"]::before {
  background-image: url(../img/bg/engine-veil.png), linear-gradient(rgba(var(--ho-color-ink-rgb), 0.34), rgba(var(--ho-color-ink-rgb), 0.34)), url(../img/engines/kids.jpg);
}
/* the head and the fields sit on the photograph's rows (explicit rows, so the layer does not push them down) */
.desk-form .df-head,
.desk-form .df-grid {
  position: relative;
  z-index: 1;
}
.desk-form .df-head {
  grid-row: 1;
}
.desk-form .df-grid {
  grid-row: 2;
}
.desk-form .df-head {
  grid-column: 1;
  padding: 36px 40px 6px;
}
.df-from {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ho-color-white-rgb), 0.72);
}
.df-from .dot {
  width: 9px;
  height: 9px;
  border-radius: 0;
  background-color: var(--pc-accent);
  box-shadow: 0 0 0 3px rgba(var(--ho-color-white-rgb), 0.12);
}
.desk-form .df-head h3 {
  margin-bottom: 8px;
  font-size: 32px;
  color: var(--ho-color-white);
}
.desk-form .df-head p {
  max-width: 54ch;
}
.desk-form .df-grid {
  grid-column: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
  padding: 24px 40px 40px;
  align-content: start;
}
.desk-quote {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  padding: 36px 32px;
  background-color: var(--ho-color-raised);
  box-shadow: inset 1px 0 0 rgba(var(--ho-color-white-rgb), 0.08);
  color: rgba(var(--ho-color-white-rgb), 0.66);
}
.desk-quote .dq-title {
  color: var(--ho-color-white);
  margin-bottom: 16px;
}
.dq-lines li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(var(--ho-color-white-rgb), 0.08);
  font-size: 15px;
}
.dq-lines li b {
  font-weight: 600;
  color: var(--ho-color-white);
  text-align: right;
}
.dq-lines li.is-saving b {
  color: var(--ho-color-jade);
}
.dq-note {
  margin-top: 14px;
  color: rgba(var(--ho-color-white-rgb), 0.55);
}
.dq-note.is-warn {
  color: var(--ho-color-amber);
}
.dq-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  padding-top: 26px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ho-color-white-rgb), 0.55);
}
.dq-total b {
  font-size: 42px;
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: none;
  color: var(--ho-color-white);
}
.dq-open {
  width: 100%;
  margin-top: 22px;
}

/*---- The fields on the dark form ----*/
.desk-form .df-head p {
  color: rgba(var(--ho-color-white-rgb), 0.72);
}
.desk-form .df-field label,
.desk-form .df-rituals legend {
  color: rgba(var(--ho-color-white-rgb), 0.74);
}
.desk-form .df-control {
  border-color: rgba(var(--ho-color-white-rgb), 0.16);
  background-color: rgba(var(--ho-color-ink-rgb), 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.desk-form .df-control:hover {
  border-color: rgba(var(--ho-color-white-rgb), 0.3);
}
.desk-form .df-control:focus-within,
.desk-form .df-control.is-open {
  border-color: var(--ho-color-coral);
}
.desk-form .df-control i {
  color: var(--ho-color-coral);
}
.desk-form .df-control input,
.desk-form .df-control select,
.desk-form .hs-button {
  color: var(--ho-color-white);
  color-scheme: dark;
}
.desk-form .df-control input::placeholder {
  color: rgba(var(--ho-color-white-rgb), 0.45);
}
.desk-form .df-check span {
  border-color: rgba(var(--ho-color-white-rgb), 0.16);
  background-color: rgba(var(--ho-color-ink-rgb), 0.55);
  color: var(--ho-color-white);
}
.desk-form .df-check span em {
  color: rgba(var(--ho-color-white-rgb), 0.5);
}
.desk-form .df-check input:checked + span {
  border-color: var(--ho-color-white);
  background-color: var(--ho-color-white);
  color: var(--ho-color-ink);
}
.desk-form .df-check input:checked + span em {
  color: var(--ho-color-coral-deep);
}

/*======================
14. Kit In One Scan
========================*/
/* four columns of bullet rows on a white ground (between the ink suite and the paper standards): each column
   wears one pillar colour on its top rule and its bullets; the value sits flush right */
/* positioned and stacked over the section above, so the jet can rise over the top edge */
.ho-kit {
  position: relative;
  z-index: 1;
  /* sideways only: the jet flies off the edge without widening the page, and still rises over the top edge */
  overflow-x: clip;
  background-color: var(--ho-color-white);
}
/* the black jet over the top edge, facing right: it crosses the whole section left to right as it scrolls up
   (where it sits without motion: the left); clear of the heading */
.kit-jet {
  position: absolute;
  left: 3%;
  top: -56px;
  z-index: 2;
  width: clamp(220px, 28vw, 440px);
  pointer-events: none;
}
/* the limousine at the lower left, its tyres on the section's bottom edge (the columns above it end first): it
   drives in from the middle, growing as it comes (where it sits without motion); it grows from its tyres */
.kit-limo {
  position: absolute;
  left: 3%;
  bottom: -14px;
  z-index: 2;
  width: clamp(220px, 27vw, 430px);
  transform-origin: 50% 100%;
  pointer-events: none;
}
.kit-limo img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 16px rgba(var(--ho-color-ink-rgb), 0.28));
}
.kit-jet img {
  display: block;
  width: 100%;
  height: auto;
  scale: -1 1;
  filter: drop-shadow(0 26px 30px rgba(var(--ho-color-ink-rgb), 0.3));
}
.kit-head {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: 60px;
  align-items: center;
  margin-bottom: 64px;
}
.kit-head h2 {
  max-width: 18ch;
}
/* the wordmark set in the heading's line, at its cap height */
.kit-word {
  margin: 0 0.1em;
}
.kit-logo {
  display: inline-block;
  width: auto;
  height: 0.78em;
  vertical-align: -0.04em;
}
.kit-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px;
}
.kit-col {
  --kit-c: var(--ho-color-coral);
  padding-top: 26px;
  border-top: 3px solid var(--kit-c);
}
.kit-col.is-iris {
  --kit-c: var(--ho-color-iris);
}
.kit-col.is-jade {
  --kit-c: var(--ho-color-jade);
}
.kit-col.is-amber {
  --kit-c: var(--ho-color-amber);
}
.kit-title {
  margin-bottom: 8px;
  font-size: 24px;
}
.kit-list li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(var(--ho-color-ink-rgb), 0.08);
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--ho-color-body);
}
/* the bullet: a small square in the column's colour, level with the first line */
.kit-list li::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  align-self: flex-start;
  margin-top: 0.62em;
  background-color: var(--kit-c);
}
.kit-label {
  flex: 1 1 auto;
  min-width: 0;
}
.kit-value {
  flex: none;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ho-color-ink);
  white-space: nowrap;
}

/*======================
15. Standards
========================*/
/* a bento of what every template shares: the code tile is ink with the JS index set in it, the
   breakpoints tile draws the ladder, the rest are white tiles on the paper */
.standards-head {
  margin-bottom: 56px;
}
.bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(230px, auto);
  gap: 20px;
}
.bento-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px;
  border-radius: 0;
  background-color: var(--ho-color-white);
  box-shadow: 0 1px 0 var(--ho-color-border);
  overflow: hidden;
  transition: transform 0.5s var(--ho-ease), box-shadow 0.5s var(--ho-ease);
}
/* on hover a 2px ring, as on the mega menu's home shots: each tile rings in the next pillar colour (coral, iris,
   jade, amber), so no ring matches its own tile */
.bento-tile,
.help-card {
  --ring: var(--ho-color-coral);
}
.bento-tile:nth-child(4n + 2),
.help-card:nth-child(4n + 2) {
  --ring: var(--ho-color-iris);
}
.bento-tile:nth-child(4n + 3),
.help-card:nth-child(4n + 3) {
  --ring: var(--ho-color-jade);
}
.bento-tile:nth-child(4n + 4),
.help-card:nth-child(4n + 4) {
  --ring: var(--ho-color-amber);
}
.bento-tile:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 0 2px var(--ring), 0 30px 60px rgba(var(--ho-color-ink-rgb), 0.1);
}
.bento-tile .bt-ic {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  margin-bottom: 22px;
  border-radius: 0;
  font-size: 19px;
  color: var(--ho-color-ink);
  background-color: var(--ho-color-paper);
  transition: background-color 0.4s var(--ho-ease), color 0.4s var(--ho-ease);
}
.bento-tile:hover .bt-ic {
  background-color: var(--ho-color-ink);
  color: var(--ho-color-amber);
}
.bento-tile h3 {
  margin-bottom: 10px;
  font-size: 23px;
}
.bento-tile.is-code {
  grid-column: span 2;
  grid-row: span 2;
  background-color: var(--ho-color-ink);
  color: rgba(var(--ho-color-white-rgb), 0.66);
}
.bento-tile.is-code h3 {
  color: var(--ho-color-white);
  font-size: 34px;
}
.bento-tile.is-code .bt-ic {
  background-color: rgba(var(--ho-color-white-rgb), 0.08);
  color: var(--ho-color-amber);
}
.bt-code {
  margin: 30px 0 0;
  margin-top: auto;
  padding: 24px 26px;
  border-radius: 0;
  background-color: var(--ho-color-raised);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 15px;
  line-height: 1.8;
  color: rgba(var(--ho-color-white-rgb), 0.86);
  white-space: pre;
  overflow: hidden;
}
.bt-code .c {
  color: rgba(var(--ho-color-white-rgb), 0.4);
}
.bt-code .n {
  color: var(--ho-color-amber);
}
.bento-tile.is-ruler {
  grid-column: span 2;
}
.bt-ruler {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: auto;
  padding-top: 26px;
}
.bt-ruler span {
  position: relative;
  padding-top: 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ho-color-ink);
  border-top: 3px solid var(--ho-color-iris);
}
.bt-ruler span::before {
  position: absolute;
  content: "";
  left: 0;
  top: -9px;
  width: 3px;
  height: 15px;
  background-color: var(--ho-color-iris);
}
.bt-ruler span:nth-child(2) {
  border-color: var(--ho-color-jade);
}
.bt-ruler span:nth-child(2)::before {
  background-color: var(--ho-color-jade);
}
.bt-ruler span:nth-child(3) {
  border-color: var(--ho-color-amber);
}
.bt-ruler span:nth-child(3)::before {
  background-color: var(--ho-color-amber);
}
.bt-ruler span:nth-child(4) {
  border-color: var(--ho-color-coral);
}
.bt-ruler span:nth-child(4)::before {
  background-color: var(--ho-color-coral);
}
.bt-ruler span:nth-child(5) {
  border-color: var(--ho-color-ink);
}
.bt-ruler span:nth-child(5)::before {
  background-color: var(--ho-color-ink);
}
.bento-tile.is-docs {
  grid-column: span 3;
  background-color: var(--ho-color-coral);
  color: var(--ho-color-ink);
}
.bento-tile.is-docs .bt-ic {
  background-color: rgba(var(--ho-color-ink-rgb), 0.12);
}

/*---- Docs & support ----*/
/* two cards under the bento: the guide (five small shots from the suite) and the people (their faces) */
.help-row {
  margin-top: 100px;
}
.help-head {
  max-width: 860px;
  margin: 0 auto 44px;
  text-align: center;
}
.help-title {
  margin-bottom: 12px;
  font-size: 40px;
}
.help-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.help-card {
  display: flex;
  flex-direction: column;
  gap: 26px;
  overflow: hidden;
  padding: 40px 44px 36px;
  background-color: var(--ho-color-white);
  box-shadow: 0 30px 70px rgba(var(--ho-color-ink-rgb), 0.07);
  color: var(--ho-color-body);
  transition: transform 0.5s var(--ho-ease), box-shadow 0.5s var(--ho-ease);
}
.help-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 0 2px var(--ring), 0 40px 90px rgba(var(--ho-color-ink-rgb), 0.13);
}
/* the card is one link: its words keep their colour on hover (the general link hover would turn them coral) */
.help-card.is-docs:hover {
  color: var(--ho-color-body);
}
.help-card.is-support {
  background-color: var(--ho-color-ink);
  color: rgba(var(--ho-color-white-rgb), 0.66);
}
/* five shots, overlapping, spreading out on hover */
.help-shots {
  display: flex;
  height: 92px;
}
.help-shots .shot-frame {
  width: 140px;
  flex: none;
  box-shadow: 0 14px 30px rgba(var(--ho-color-ink-rgb), 0.18), 0 0 0 1px rgba(var(--ho-color-ink-rgb), 0.08);
  transition: transform 0.5s var(--ho-ease);
}
.help-shots .shot-frame + .shot-frame {
  margin-left: -58px;
}
.help-shots .shot-frame:nth-child(even) {
  transform: translateY(14px);
}
.help-card:hover .help-shots .shot-frame:nth-child(2) {
  transform: translate(12px, 14px);
}
.help-card:hover .help-shots .shot-frame:nth-child(3) {
  transform: translateX(24px);
}
.help-card:hover .help-shots .shot-frame:nth-child(4) {
  transform: translate(36px, 14px);
}
.help-card:hover .help-shots .shot-frame:nth-child(5) {
  transform: translateX(48px);
}
/* six faces, overlapping, then the headset */
.help-faces {
  display: flex;
  align-items: center;
  height: 92px;
}
.help-faces img,
.hf-more {
  width: 64px;
  height: 64px;
  flex: none;
  object-fit: cover;
  box-shadow: 0 0 0 3px var(--ho-color-ink);
  transition: transform 0.4s var(--ho-ease);
}
.help-faces img + img,
.hf-more {
  margin-left: -16px;
}
.hf-more {
  display: grid;
  place-items: center;
  font-size: 22px;
  color: var(--ho-color-ink);
  background-color: var(--ho-color-coral);
}
.help-card:hover .help-faces img:nth-child(odd) {
  transform: translateY(-6px);
}
.help-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 16px;
  line-height: 1.7;
}
.help-text b {
  font-family: var(--ho-ff-heading);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ho-color-ink);
}
.is-support .help-text b {
  color: var(--ho-color-white);
}
.help-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  align-self: flex-start;
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
  font-size: 15px;
  font-weight: 600;
  color: var(--ho-color-ink);
}
.is-support .help-link {
  color: var(--ho-color-white);
}
.help-link i {
  font-size: 12px;
  transition: transform 0.4s var(--ho-ease);
}
.help-card:hover .help-link i {
  transform: rotate(-45deg);
}

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

/*---- 16.1 Drop-downs ----*/
/* the real <select> stays in the form (it is what the engines read); a button shows the chosen option and opens
   a styled list under the field */
.df-control.is-select .hs-native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}
.df-control.is-open {
  z-index: 20;
}
.hs-button {
  display: block;
  width: 100%;
  height: 50px;
  padding: 0 44px 0 42px;
  border: 0;
  background: transparent;
  font-family: var(--ho-ff-body);
  font-size: 15px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ho-color-ink);
  cursor: pointer;
}
.hs-button:focus-visible {
  outline: 2px solid var(--ho-color-coral);
  outline-offset: 2px;
}
/* the caret: a drawn chevron that turns over when the list is open */
.df-control.is-select::after {
  position: absolute;
  content: "";
  right: 19px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -6px;
  border-right: 1.5px solid var(--ho-color-coral);
  border-bottom: 1.5px solid var(--ho-color-coral);
  transform: rotate(45deg);
  pointer-events: none;
  transition: transform 0.3s var(--ho-ease), margin 0.3s var(--ho-ease);
}
.df-control.is-open::after {
  margin-top: -2px;
  transform: rotate(-135deg);
}
.hs-list {
  position: absolute;
  left: -1px;
  right: -1px;
  top: calc(100% + 6px);
  z-index: 30;
  max-height: 264px;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  list-style: none;
  background-color: var(--ho-color-raised);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(var(--ho-color-white-rgb), 0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.25s var(--ho-ease), transform 0.25s var(--ho-ease), visibility 0.25s;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--ho-color-white-rgb), 0.25) transparent;
}
.hs-list:focus {
  outline: none;
}
/* visible at once on opening (so the list can take the focus), then it fades in */
.df-control.is-open .hs-list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.25s var(--ho-ease), transform 0.25s var(--ho-ease), visibility 0s;
}
.hs-list li {
  position: relative;
  padding: 11px 38px 11px 14px;
  font-size: 15px;
  line-height: 1.35;
  color: rgba(var(--ho-color-white-rgb), 0.78);
  cursor: pointer;
  transition: background-color 0.2s var(--ho-ease), color 0.2s var(--ho-ease);
}
.hs-list li.is-active {
  background-color: rgba(var(--ho-color-white-rgb), 0.07);
  color: var(--ho-color-white);
}
/* the chosen option: coral, with a drawn tick */
.hs-list li[aria-selected="true"] {
  color: var(--ho-color-coral);
}
.hs-list li[aria-selected="true"]::after {
  position: absolute;
  content: "";
  right: 17px;
  top: 50%;
  width: 5px;
  height: 10px;
  margin-top: -7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.hs-list li[aria-disabled="true"] {
  opacity: 0.4;
  pointer-events: none;
}

/*======================
17. Footer
========================*/
/* the acronym set large across the top, the four initials in their colours; then the logo with the
   newsletter and the four collections as link columns */
/* a block formatting context, so the slider's negative margin lifts it over the section above instead of
   collapsing into the footer's own edge */
.ho-footer {
  display: flow-root;
  background-color: var(--ho-color-ink);
  color: rgba(var(--ho-color-white-rgb), 0.62);
}
.footer-brands {
  position: relative;
  z-index: 3;
  margin-top: -92px;
}
.fb-slider {
  padding: 4px 0 30px;
}
/* the section above the footer keeps its own bottom rhythm under the floating logos: its padding grows by the
   overlap (92px; 70px on a phone) */
.ho-standards {
  padding-bottom: 222px;
}
.fb-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 172px;
  padding: 26px 18px 22px;
  background-color: var(--ho-color-raised);
  box-shadow: 0 24px 48px rgba(var(--ho-color-ink-rgb), 0.2), inset 0 0 0 1px rgba(var(--ho-color-white-rgb), 0.07);
  overflow: hidden;
  transition: transform 0.5s var(--ho-ease), background-color 0.5s var(--ho-ease);
}
.fb-tile::after {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background-color: var(--pc-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s var(--ho-ease);
}
.fb-tile img {
  width: auto;
  max-width: 82%;
  height: 46px;
  object-fit: contain;
}
.fb-niche {
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  color: rgba(var(--ho-color-white-rgb), 0.5);
}
.fb-tile:hover {
  transform: translateY(-4px);
  background-color: var(--ho-color-raised-2);
}
.fb-tile:hover::after {
  transform: scaleX(1);
}
.fb-tile:hover .fb-niche {
  color: var(--ho-color-white);
}
/* the four words over the pillar light */
.footer-acronym {
  position: relative;
  overflow: hidden;
  padding: 50px 0 70px;
  border-bottom: 1px solid rgba(var(--ho-color-white-rgb), 0.08);
}
.footer-acronym > .container-wide {
  position: relative;
  z-index: 1;
}
.acro-line {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: space-between;
  gap: 12px 24px;
  margin: 0;
  font-family: var(--ho-ff-heading);
  font-size: clamp(26px, 3.5vw, 60px);
  white-space: nowrap;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgba(var(--ho-color-white-rgb), 0.18);
}
.acro-line .fa-word b {
  font-weight: 800;
}
.acro-line .is-h b {
  color: var(--ho-color-coral);
}
.acro-line .is-i b {
  color: var(--ho-color-iris);
}
.acro-line .is-b b {
  color: var(--ho-color-jade);
}
.acro-line .is-o b {
  color: var(--ho-color-amber);
}
.footer-widget-area {
  padding: 80px 0 190px;
  /* the maze pattern, dark lines on the ink */
  background-image: url(../img/bg/pattern-maze.png);
  background-size: cover;
  background-position: center;
}
.ho-footer .footer-logo {
  width: auto;
  height: 64px;
  margin-bottom: 24px;
}
.site-info-widget p {
  max-width: 40ch;
}
.ho-footer .widget-title {
  margin-bottom: 22px;
  font-size: 18px;
  color: var(--ho-color-white);
}
.nav-widget li + li {
  margin-top: 11px;
}
.nav-widget a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 15.5px;
  color: rgba(var(--ho-color-white-rgb), 0.66);
}
/* each template's glyph on its own ground, in its accent, inside an inset hairline frame */
.nav-widget a i {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  font-size: 19px;
  color: var(--pc-accent);
  background-color: var(--pc-ground);
  box-shadow: inset 0 0 0 1px rgba(var(--ho-color-white-rgb), 0.06);
  transition: transform 0.4s var(--ho-ease);
}
.nav-widget a i::after {
  position: absolute;
  content: "";
  inset: 3px;
  border: 1px solid var(--pc-accent);
  opacity: 0.3;
  transition: opacity 0.4s var(--ho-ease);
}
.nav-widget a:hover {
  color: var(--ho-color-white);
}
.nav-widget a:hover i {
  transform: translateY(-2px);
}
.nav-widget a:hover i::after {
  opacity: 1;
}
/*---- Every home page ----*/
/* the shots float up over the foot of the links panel (its bottom padding makes the room) */
.footer-homes {
  position: relative;
  z-index: 2;
  margin-top: -120px;
  padding-bottom: 50px;
}
/* room for the hover lift inside the slider's clip */
.fh-slider {
  padding-top: 8px;
}
.fh-card {
  display: block;
  color: rgba(var(--ho-color-white-rgb), 0.55);
}
/* a small browser window: three dots and the page's address over the capture */
.fh-frame {
  position: relative;
  display: block;
  background-color: var(--ho-color-raised);
  box-shadow: 0 30px 70px rgba(var(--ho-color-ink-rgb), 0.55), 0 0 0 1px rgba(var(--ho-color-white-rgb), 0.08);
  transition: transform 0.5s var(--ho-ease), box-shadow 0.5s var(--ho-ease);
}
.fh-frame .shot-bar {
  height: 28px;
  gap: 6px;
  padding: 0 12px;
}
.fh-url {
  margin-left: 8px;
  overflow: hidden;
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: rgba(var(--ho-color-white-rgb), 0.5);
}
.fh-img {
  display: block;
  overflow: hidden;
}
.fh-img img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 1.2s var(--ho-ease);
}
/* the template's accent draws along the foot of the window */
.fh-frame::after {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background-color: var(--pc-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s var(--ho-ease);
}
.fh-card:hover .fh-frame {
  transform: translateY(-6px);
  box-shadow: 0 40px 80px rgba(var(--ho-color-ink-rgb), 0.6), 0 0 0 1px rgba(var(--ho-color-white-rgb), 0.14);
}
.fh-card:hover .fh-img img {
  transform: scale(1.04);
}
.fh-card:hover .fh-frame::after {
  transform: scaleX(1);
}
/* the caption: a hairline row, the template's name in its accent square, a diagonal arrow */
.fh-cap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(var(--ho-color-white-rgb), 0.1);
  font-size: 14.5px;
  transition: border-color 0.4s var(--ho-ease);
}
.fh-name {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.fh-name::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  background-color: var(--pc-accent);
}
.fh-name b {
  font-weight: 600;
  color: var(--ho-color-white);
}
.fh-cap i {
  flex: none;
  font-size: 12px;
  color: rgba(var(--ho-color-white-rgb), 0.4);
  transition: transform 0.4s var(--ho-ease), color 0.4s var(--ho-ease);
}
.fh-card:hover .fh-cap {
  color: var(--ho-color-white);
  border-color: var(--pc-accent);
}
.fh-card:hover .fh-cap i {
  color: var(--pc-accent);
  transform: rotate(-45deg);
}
/* the progress line under the slider (Swiper's progressbar pagination) */
.fh-progress.swiper-pagination-progressbar {
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
  height: 2px;
  margin-top: 34px;
  background-color: rgba(var(--ho-color-white-rgb), 0.1);
}
.fh-progress .swiper-pagination-progressbar-fill {
  background-image: linear-gradient(90deg, var(--ho-color-coral), var(--ho-color-iris), var(--ho-color-jade), var(--ho-color-amber));
}
.footer-copyright {
  padding: 26px 0;
  border-top: 1px solid rgba(var(--ho-color-white-rgb), 0.08);
}
.copyright-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.ho-social {
  display: flex;
  gap: 10px;
}
/* the four icons wear the four pillars, in order: coral, iris, jade, amber */
.ho-social li {
  --so-c: var(--ho-color-coral);
  --so-rgb: var(--ho-color-coral-rgb);
}
.ho-social li:nth-child(4n + 2) {
  --so-c: var(--ho-color-iris);
  --so-rgb: var(--ho-color-iris-rgb);
}
.ho-social li:nth-child(4n + 3) {
  --so-c: var(--ho-color-jade);
  --so-rgb: var(--ho-color-jade-rgb);
}
.ho-social li:nth-child(4n + 4) {
  --so-c: var(--ho-color-amber);
  --so-rgb: var(--ho-color-amber-rgb);
}
.ho-social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 0;
  font-size: 14px;
  color: var(--so-c);
  background-color: rgba(var(--so-rgb), 0.1);
  box-shadow: inset 0 0 0 1px rgba(var(--so-rgb), 0.45);
  transition: background-color 0.35s var(--ho-ease), color 0.35s var(--ho-ease), box-shadow 0.35s var(--ho-ease), transform 0.35s var(--ho-ease);
}
.ho-social a:hover {
  background-color: var(--so-c);
  color: var(--ho-color-ink);
  box-shadow: none;
  transform: translateY(-3px);
}

/*---- The promise strip ----*/
/* under everything: the purchase's promises on a steady loop, right to left, a yellow star between each */
.footer-promise {
  padding: 22px 0;
  overflow: hidden;
  background-color: var(--ho-color-raised);
  border-top: 1px solid rgba(var(--ho-color-white-rgb), 0.08);
}
/* its own spacing (the pillar marquee's set gaps do not apply) */
.promise-track .promise-set {
  gap: 0;
  padding-right: 0;
}
.pr-item {
  padding: 0 30px;
  font-family: var(--ho-ff-heading);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--ho-color-white);
}
/* every star yellow */
.promise-set i {
  flex: none;
  font-size: 13px;
  color: var(--ho-color-amber);
}

/*======================
18. Back To Top
========================*/
/* an ink square at the foot of the screen once the page is under way; its edge fills through the four
   pillar colours as the page scrolls */
.ho-back-to-top {
  position: fixed;
  right: 32px;
  bottom: 32px;
  z-index: 90;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  background-color: var(--ho-color-ink);
  box-shadow: 0 16px 40px rgba(var(--ho-color-ink-rgb), 0.35);
  color: var(--ho-color-white);
  font-size: 15px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.45s var(--ho-ease), visibility 0.45s, transform 0.45s var(--ho-ease), background-color 0.35s var(--ho-ease), color 0.35s var(--ho-ease);
}
.ho-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.ho-back-to-top:hover {
  background-color: var(--ho-color-coral);
  color: var(--ho-color-ink);
}
.ho-back-to-top i {
  position: relative;
  z-index: 1;
  transition: transform 0.35s var(--ho-ease);
}
.ho-back-to-top:hover i {
  transform: translateY(-3px);
}
.ho-back-to-top .progress-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.ho-back-to-top .progress-ring-track {
  fill: none;
  stroke: rgba(var(--ho-color-white-rgb), 0.14);
  stroke-width: 3;
}
.ho-back-to-top .progress-ring-fill {
  fill: none;
  stroke: url(#bt-pillars);
  stroke-width: 3;
}

/*======================
19. Cursor
========================*/
/* A coral square on the pointer and a frame in the four pillar colours that trails it and turns into the pillar diamond over links. Hidden until the script decides this is a pointer worth replacing: with JS off, or on a touch
   screen, the ordinary cursor is simply left alone. */
.ho-cursor-dot,
.ho-cursor-ring {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  will-change: transform;
}
.ho-cursor-dot {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background-color: var(--ho-color-coral);
}
.ho-cursor-ring {
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
}
/* the frame: H, I, B, O in their colours, one side each */
.ho-cursor-ring::before {
  position: absolute;
  content: "";
  inset: 0;
  border: 2px solid;
  border-color: var(--ho-color-coral) var(--ho-color-iris) var(--ho-color-jade) var(--ho-color-amber);
  transition: transform 0.45s var(--ho-ease), inset 0.4s var(--ho-ease), background-color 0.4s var(--ho-ease);
}
/* over something clickable the frame turns into the pillar diamond */
.ho-cursor-ring.is-active::before {
  inset: 3px;
  transform: rotate(45deg);
  background-color: rgba(var(--ho-color-white-rgb), 0.08);
}
.ho-cursor-ring.is-drag::before {
  inset: -22px;
  background-color: rgba(var(--ho-color-ink-rgb), 0.78);
}
/* over a slider that can be dragged the shape fills and says so */
.ho-cursor-ring::after {
  position: absolute;
  content: "Drag";
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #FFFFFF;
  opacity: 0;
  transition: opacity 0.3s;
}
.ho-cursor-ring.is-drag::after {
  opacity: 1;
}
.ho-cursor-dot.is-drag {
  visibility: hidden;
}
html.has-cursor,
html.has-cursor * {
  cursor: none !important;
}
/* where the real cursor carries information the shape cannot (a caret in a field, whatever lives inside an embed)
   it stays, and the shape gets out of the way */
html.has-cursor :is(input, select, textarea, iframe, [contenteditable="true"]) {
  cursor: auto !important;
}