/* ==========================================================
   Home page, closing panel (.hx-end-*). One white panel: a wide
   photograph across the top with nothing on it, the invitation
   underneath on the left and the four kinds of journey as tiles
   on the right. Replaces the shared dark photo band.
   The rest of the home page is the .hx-* block in style.css.
   ========================================================== */
.hx-end {
  padding: 0 0 92px;
  background: var(--t-bg);
}
.hx-end-panel {
  overflow: hidden;
  border: 1px solid var(--t-line);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 40px 60px -46px rgba(var(--t-ink-rgb), 0.6);
}
.hx-end-photo {
  display: block;
  height: 300px;
  overflow: hidden;
  background: var(--t-sand);
}
.hx-end-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}
.hx-end-body {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 56px;
  align-items: center;
  padding: 46px 48px 48px;
}
.hx-end-copy .hl-sub {
  margin-bottom: 26px;
}
.hx-end-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 22px;
}
.hx-end-points {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hx-end-points li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--t-tx-2);
}
.hx-end-points i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(var(--t-btn-rgb), 0.18);
  font-size: 8px;
  color: var(--t-acc-d);
}
.hx-end-pick {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.hx-end-pick-label {
  grid-column: 1 / -1;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--t-acc);
}
.hx-end-pick-label em {
  display: block;
  margin-top: 5px;
  font-size: 13.5px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--t-tx);
}
.hx-end-tile {
  display: block;
  padding: 20px 20px 18px;
  border: 1px solid var(--t-line);
  border-radius: 18px;
  background: var(--t-bg-2);
  color: var(--t-ink);
  text-decoration: none !important;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease, background 0.3s ease;
}
.hx-end-tile:hover,
.hx-end-tile:focus-visible {
  border-color: var(--t-acc-l);
  background: #fff;
  color: var(--t-ink);
  transform: translateY(-4px);
}
.hx-end-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--t-ink);
  font-size: 16px;
  color: var(--t-acc-l);
  transition: background 0.3s ease, color 0.3s ease;
}
.hx-end-tile:hover .hx-end-ico {
  background: var(--t-btn);
  color: var(--t-on-btn);
}
.hx-end-tile b {
  display: block;
  margin-bottom: 3px;
  font-size: 15.5px;
  font-weight: 600;
}
.hx-end-tile > span:last-child {
  display: block;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--t-tx);
}
@media (max-width: 991px) {
  .hx-end {
    padding-bottom: 64px;
  }
  .hx-end-photo {
    height: 220px;
  }
  .hx-end-body {
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 34px 30px 36px;
  }
}
@media (max-width: 575px) {
  .hx-end-panel {
    border-radius: 22px;
  }
  .hx-end-photo {
    height: 170px;
  }
  .hx-end-body {
    padding: 26px 20px 28px;
  }
  .hx-end-actions .hl-btn,
  .hx-end-actions .hl-btn-ghost {
    flex: 1 1 100%;
    justify-content: center;
  }
  .hx-end-pick {
    grid-template-columns: 1fr;
  }
  .hx-end-tile {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    column-gap: 14px;
    align-items: center;
    padding: 14px 16px;
  }
  .hx-end-ico {
    grid-row: 1 / span 2;
    margin-bottom: 0;
  }
}

/* ---------- who we are: the three promises as tickets ----------
   Each promise is a ticket with a tear-off stub; the three step
   to the right like a hand of tickets being dealt. */
.hx-who {
  background: #fff;
}
.hx-who-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 64px;
  align-items: center;
}
.hx-who-lead {
  margin: 0 0 28px;
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.6;
  color: var(--t-ink);
}
.hx-who-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.hx-tickets {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.hx-ticket {
  --hx-stub: 104px;
  filter: drop-shadow(0 18px 20px rgba(var(--t-ink-d-rgb), 0.14));
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.hx-ticket:nth-child(2) {
  margin-left: 34px;
}
.hx-ticket:nth-child(3) {
  margin-left: 68px;
}
.hx-ticket:hover {
  transform: translateX(-10px);
}
.hx-ticket-in {
  display: flex;
  border-radius: 16px;
  background: var(--t-bg-2);
  -webkit-mask:
    radial-gradient(circle 9px at var(--hx-stub) 0, transparent 8.5px, #000 9px),
    radial-gradient(circle 9px at var(--hx-stub) 100%, transparent 8.5px, #000 9px);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle 9px at var(--hx-stub) 0, transparent 8.5px, #000 9px),
    radial-gradient(circle 9px at var(--hx-stub) 100%, transparent 8.5px, #000 9px);
  mask-composite: intersect;
}
.hx-ticket-stub {
  display: flex;
  flex: 0 0 var(--hx-stub);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 0;
  border-right: 2px dashed var(--t-line);
  border-radius: 16px 0 0 16px;
  background: var(--t-ink);
  color: #fff;
}
.hx-ticket-stub em {
  font-family: var(--font-display);
  font-size: 26px;
  font-style: normal;
  line-height: 1;
  color: var(--t-btn-l);
}
.hx-ticket-stub i {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.8);
}
.hx-ticket-main {
  flex: 1;
  padding: 20px 26px 21px 24px;
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--t-tx);
}
.hx-ticket-main b {
  display: block;
  margin-bottom: 4px;
  font-size: 17px;
  font-weight: 600;
  color: var(--t-ink);
}

/* ---------- why Plannex: a compass, with a reason at each quarter ----------
   The needle drifts a little at rest; point at a reason and it swings to it. */
.hx-why-sec {
  background: #fff;
}
.hx-compass {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px minmax(0, 1fr);
  gap: 44px;
  align-items: center;
  max-width: 1120px;
  margin: 0 auto;
}
.hx-points {
  display: flex;
  flex-direction: column;
  gap: 46px;
}
.hx-points-l {
  text-align: right;
}
.hx-point {
  padding: 18px 20px;
  border: 1px solid transparent;
  border-radius: 18px;
  outline: none;
  cursor: default;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.hx-point.is-on,
.hx-point:hover,
.hx-point:focus-visible {
  border-color: var(--t-line);
  background: var(--t-bg);
}
.hx-point-no {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-display);
  font-size: 22px;
  font-style: italic;
  line-height: 1;
  color: var(--t-acc);
}
.hx-point b {
  display: block;
  margin-bottom: 5px;
  font-size: 17px;
  font-weight: 600;
  color: var(--t-ink);
}
.hx-point > span:last-child {
  display: block;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--t-tx);
}
.hx-dial svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 26px 26px rgba(var(--t-ink-d-rgb), 0.18));
}
.hx-dial-ring {
  fill: #fff;
  stroke: var(--t-ink);
  stroke-width: 3;
}
.hx-dial-ring2 {
  fill: var(--t-bg);
  stroke: var(--t-line);
  stroke-width: 1;
}
.hx-dial-ticks line {
  stroke: var(--t-tx-3);
  stroke-width: 1;
}
.hx-dial-ticks line.is-major {
  stroke: var(--t-ink);
  stroke-width: 2;
}
.hx-dial-n,
.hx-dial-l {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  fill: var(--t-tx-2);
}
.hx-dial-n {
  fill: var(--t-acc-d);
}
.hx-needle {
  transform-box: view-box;
  transform-origin: 150px 150px;
  animation: hx-needle 7s ease-in-out infinite;
}
.hx-dial.is-aimed .hx-needle {
  animation: none;
  transform: rotate(var(--hx-needle, 0deg));
  transition: transform 0.9s cubic-bezier(0.34, 1.4, 0.4, 1);
}
@keyframes hx-needle {
  0%, 100% { transform: rotate(-9deg); }
  50% { transform: rotate(11deg); }
}
.hx-needle-a {
  fill: var(--t-btn);
}
.hx-needle-b {
  fill: var(--t-ink);
}
.hx-dial-hub {
  fill: #fff;
  stroke: var(--t-ink);
  stroke-width: 3;
}

@media (max-width: 1199px) {
  .hx-who-grid {
    gap: 40px;
  }
  .hx-compass {
    grid-template-columns: minmax(0, 1fr) 240px minmax(0, 1fr);
    gap: 26px;
  }
}
@media (max-width: 991px) {
  .hx-who-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .hx-ticket:nth-child(2),
  .hx-ticket:nth-child(3) {
    margin-left: 0;
  }
  /* the compass sits on top; the four reasons become a two-by-two list under it */
  .hx-compass {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
  }
  .hx-dial {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 200px;
    margin: 0 auto 14px;
  }
  .hx-points {
    gap: 12px;
  }
  .hx-points-l {
    text-align: left;
  }
  .hx-point {
    border-color: var(--t-line);
    background: var(--t-bg-2);
  }
}
@media (max-width: 575px) {
  .hx-who-lead {
    font-size: 17px;
  }
  .hx-who-actions .hl-btn,
  .hx-who-actions .hl-btn-ghost {
    flex: 1 1 100%;
    justify-content: center;
  }
  .hx-ticket {
    --hx-stub: 76px;
  }
  .hx-ticket-main {
    padding: 16px 18px 17px 16px;
  }
  /* one column: the two side lists dissolve so the reasons run 01 to 04 */
  .hx-compass {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .hx-points {
    display: contents;
  }
  .hx-points-l .hx-point:nth-child(1) { order: 1; }
  .hx-points-r .hx-point:nth-child(1) { order: 2; }
  .hx-points-l .hx-point:nth-child(2) { order: 3; }
  .hx-points-r .hx-point:nth-child(2) { order: 4; }
  .hx-dial {
    width: 170px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hx-needle {
    animation: none;
  }
  .hx-dial.is-aimed .hx-needle,
  .hx-ticket {
    transition: none;
  }
}

/* ---------- the banner (.hb-*) ----------
   Edge to edge under the header and sized to the screen, so the whole
   banner (photograph, boarding pass, the four desks) is in view when the
   page opens, on a small laptop as much as on a large monitor. The desks
   are one slim dock that sits across the bottom edge of the photograph.
   Replaces the boxed .hx-stage / .hx-desks hero in style.css; the pass
   itself (.hx-pass) is still styled there. */
.hb {
  padding: 0 0 72px;
  background: var(--t-bg);
}
.hb-stage {
  position: relative;
  /* header 118px + half the dock + a little air */
  height: clamp(440px, calc(100vh - 180px), 660px);
  overflow: hidden;
  background: var(--t-ink);
}
.hb-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.07);
  transition: opacity 1.1s ease, transform 8s ease-out;
}
.hb-media img.is-on {
  opacity: 1;
  transform: scale(1);
}
/* where each photograph's subject sits once the frame is cut wide */
.hb-media img:nth-child(1) { object-position: 62% 64%; }
.hb-media img:nth-child(2) { object-position: 70% 46%; }
.hb-media img:nth-child(3) { object-position: 80% 50%; }
.hb-media img:nth-child(4) { object-position: 72% 38%; }
.hb-in {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  /* the dock covers the bottom 50px of the photograph */
  padding-bottom: 50px;
}
.hb-card {
  --hx-stub: 76px;
  width: 520px;
  max-width: 100%;
  filter: drop-shadow(0 26px 30px rgba(var(--t-ink-d-rgb), 0.42));
  animation: hx-card-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hb-card .hx-pass-main {
  padding: 30px 34px 26px;
}
.hb-card .hx-pass-stub {
  padding: 0 34px;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.3fr) minmax(0, 0.85fr);
  gap: 0 12px;
}
.hb-card .hx-pass-field {
  padding-left: 12px;
}
.hb-card .hx-pass-field:first-child {
  padding-left: 0;
}
.hb-card .hx-pass-field b {
  font-size: 12.5px;
}

.hb-dock {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-top: -50px;
  padding: 7px;
  border: 1px solid var(--t-line);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 30px 46px -30px rgba(var(--t-ink-rgb), 0.55);
}
.hb-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 86px;
  overflow: hidden;
  padding: 14px 16px 16px;
  border-radius: 18px;
  color: var(--t-ink);
  text-decoration: none !important;
  transition: background 0.4s ease, color 0.4s ease;
}
.hb-tab:hover,
.hb-tab:focus-visible {
  color: var(--t-ink);
}
.hb-tab.is-on {
  background: radial-gradient(130% 160% at 0% 0%, var(--t-ink-l) 0%, var(--t-ink) 55%, var(--t-ink-d) 100%);
  color: #fff;
}
.hb-tab-ico {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--t-bg);
  font-size: 17px;
  color: var(--t-acc);
  transition: background 0.4s ease, color 0.4s ease;
}
.hb-tab.is-on .hb-tab-ico {
  background: var(--t-btn);
  color: var(--t-on-btn);
}
.hb-tab-body {
  flex: 1;
  min-width: 0;
}
.hb-tab-body b {
  display: block;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.3;
}
.hb-tab-body span {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--t-tx);
  transition: color 0.4s ease;
}
.hb-tab.is-on .hb-tab-body span {
  color: rgba(255, 255, 255, 0.76);
}
.hb-tab-go {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--t-acc);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), color 0.4s ease;
}
.hb-tab.is-on .hb-tab-go {
  color: var(--t-btn-l);
}
.hb-tab:hover .hb-tab-go {
  transform: translateX(4px);
}
/* the bar is the clock: when it is full the next desk takes over */
.hb-tab-bar {
  position: absolute;
  right: 18px;
  bottom: 7px;
  left: 18px;
  height: 3px;
  border-radius: 3px;
  background: transparent;
}
.hb-tab.is-on .hb-tab-bar {
  background: rgba(255, 255, 255, 0.16);
}
.hb-tab-bar i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 3px;
  background: var(--t-btn);
}
.hb-tab.is-on .hb-tab-bar i {
  animation: hx-fill 6.5s linear forwards;
}
.hb.is-paused .hb-tab-bar i,
.hb.is-hidden .hb-tab-bar i {
  animation-play-state: paused;
}
.hb .hx-ask {
  margin: 20px 0 0;
}

/* a short screen (most laptops): tighten the pass so it still clears the dock */
@media (min-width: 992px) and (max-height: 800px) {
  .hb-card {
    --hx-stub: 62px;
    width: 500px;
  }
  .hb-card .hx-pass-main {
    padding: 22px 30px 20px;
  }
  .hb-card .hx-pass-stub {
    padding: 0 30px;
  }
  .hb-card .hx-pass-label {
    margin-bottom: 10px;
  }
  .hb-card .hx-title {
    margin-bottom: 8px;
    font-size: 34px;
  }
  .hb-card .hx-text {
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 1.6;
  }
  .hb-card .hx-actions .hl-btn,
  .hb-card .hx-actions .hl-btn-ghost {
    padding: 13px 10px;
  }
  .hb-card .hx-pass-field em {
    margin-bottom: 3px;
  }
}
@media (max-width: 1399px) {
  .hb-tab {
    gap: 12px;
  }
  .hb-tab-go {
    display: none;
  }
  .hb-tab-body b {
    font-size: 15px;
  }
  .hb-tab-body span {
    font-size: 12px;
  }
}
@media (max-width: 1199px) {
  .hb-tab {
    gap: 10px;
    padding: 12px 12px 14px;
  }
  .hb-tab-go {
    display: none;
  }
  .hb-tab-body b {
    font-size: 14.5px;
  }
}
/* tablets and phones: the photograph on top, the pass under it, the desks two by two */
@media (max-width: 991px) {
  .hb {
    padding-bottom: 56px;
  }
  .hb-stage {
    height: auto;
    overflow: visible;
    background: none;
  }
  .hb-media {
    position: relative;
    height: 340px;
    overflow: hidden;
    background: var(--t-ink);
  }
  .hb-in {
    display: block;
    height: auto;
    padding-bottom: 0;
  }
  .hb-card {
    position: relative;
    width: auto;
    margin: -76px 6px 0;
  }
  .hb-dock {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 18px;
  }
  .hb .hx-ask {
    margin-top: 16px;
  }
}
@media (max-width: 575px) {
  .hb-media {
    height: 250px;
  }
  .hb-card {
    margin: -60px 0 0;
  }
  .hb-card .hx-pass-main {
    padding: 24px 22px 22px;
  }
  .hb-card .hx-pass-stub {
    padding: 16px 22px 18px;
  }
  .hb-dock {
    padding: 6px;
    border-radius: 20px;
  }
  .hb-tab {
    min-height: 0;
    padding: 12px 10px 14px;
  }
  .hb-tab-ico {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }
  .hb-tab-body b {
    font-size: 13.5px;
  }
  .hb-tab-body span {
    display: none;
  }
  .hb-tab-bar {
    right: 10px;
    left: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hb-media img,
  .hb-tab {
    transition: none;
  }
  .hb-card {
    animation: none;
  }
  .hb-tab.is-on .hb-tab-bar i {
    width: 100%;
    animation: none;
  }
}
/* phones: the stub stacks, the desk on its own line and the two facts side by side */
@media (max-width: 575px) {
  .hb-card .hx-pass-stub {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
  }
  .hb-card .hx-pass-field:nth-child(2) {
    padding-left: 0;
    border-left: 0;
  }
  .hb-card .hx-pass-field b {
    white-space: normal;
  }
}


/* ---------- new here: who is travelling, and how booking works (2026-10-23) ----------
   The owner said a first-time visitor with no travel knowledge could not
   understand the site. This block sits right under the banner: four plain
   doors (holiday / group / staff travel / company event) and the three steps
   of a booking, with WhatsApp, the form and the phone number in one row. */
.hx-start {
  padding: 64px 0 56px;
  background: #fff;
}
.hx-start-head {
  max-width: 640px;
  margin: 0 auto 32px;
  text-align: center;
}
.hx-start-head .hl-h2 {
  margin-bottom: 10px;
}
.hx-start-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 28px;
}
.hx-start-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 22px 20px;
  border: 1px solid var(--t-line);
  border-radius: 18px;
  background: #fff;
  color: var(--t-ink);
  text-decoration: none !important;
  box-shadow: 0 10px 30px rgba(var(--t-ink-rgb), 0.06);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.hx-start-card:hover,
.hx-start-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(var(--t-acc-rgb), 0.5);
  box-shadow: 0 18px 40px rgba(var(--t-ink-rgb), 0.12);
}
.hx-start-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 6px;
  border-radius: 13px;
  background: var(--t-ink);
  color: var(--t-acc-l);
  font-size: 19px;
}
.hx-start-who {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--t-ink);
}
.hx-start-what {
  flex: 1 1 auto;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--t-tx);
}
.hx-start-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t-btn-text);
}
.hx-start-go i {
  transition: transform 0.3s ease;
}
.hx-start-card:hover .hx-start-go i {
  transform: translateX(4px);
}

.hx-start-how {
  padding: 28px 32px 26px;
  border-radius: 20px;
  background: var(--t-bg);
  border: 1px solid var(--t-line-s);
}
.hx-start-how-label {
  display: block;
  margin-bottom: 18px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--t-acc);
}
.hx-start-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}
.hx-start-steps li {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 4px;
  position: static;
}
.hx-start-n {
  grid-row: 1 / 3;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--t-btn);
  color: var(--t-on-btn);
  font-weight: 600;
  font-size: 15px;
}
.hx-start-steps b {
  font-size: 16px;
  font-weight: 600;
  color: var(--t-ink);
  line-height: 1.3;
}
.hx-start-steps li > span:not(.hx-start-n) {
  font-size: 14px;
  line-height: 1.6;
  color: var(--t-tx);
}
.hx-start-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding-top: 20px;
  border-top: 1px solid var(--t-line);
}
.hx-start-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--t-tx-2);
}
.hx-start-note i {
  color: var(--t-acc);
}
.hx-start-note a {
  color: var(--t-ink);
  font-weight: 600;
  text-decoration: none;
}
@media (max-width: 1199px) {
  .hx-start-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 991px) {
  .hx-start {
    padding: 52px 0 44px;
  }
  .hx-start-steps {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .hx-start-how {
    padding: 22px 20px;
  }
}
@media (max-width: 560px) {
  .hx-start-grid {
    grid-template-columns: 1fr;
  }
  .hx-start-actions .hl-btn,
  .hx-start-actions .hl-btn-ghost {
    flex: 1 1 100%;
  }
}

/* ---------- the planner row, plain fields (2026-10-23) ----------
   Was a serif sentence with underlined italic dropdowns ("I am planning a private
   holiday anywhere in any month"), which the owner asked to have fixed. Now a label,
   three boxed selects with captions, and the button, all on one row. */
.hb .hx-ask {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  align-items: center;
  gap: 18px 28px;
  padding: 18px 22px 18px 26px;
}
.hx-ask-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hx-ask-hint {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--t-tx-2);
}
.hx-ask-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 12px;
  align-items: end;
}
.hx-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
  font: inherit;
  position: relative;
}
.hx-field > span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--t-tx-3);
}
.hx-field select {
  width: 100%;
  height: 46px;
  margin: 0;
  padding: 0 36px 0 14px;
  border: 1px solid var(--t-line);
  border-radius: 12px;
  background: var(--t-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230A2540' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center;
  box-shadow: none;
  color: var(--t-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.hx-field select:focus {
  outline: none;
  border-color: var(--t-acc);
  box-shadow: 0 0 0 3px rgba(var(--t-acc-rgb), 0.15);
}
.hx-ask-fields .hl-btn {
  height: 46px;
  padding-top: 0;
  padding-bottom: 0;
  white-space: nowrap;
}
@media (max-width: 1199px) {
  .hb .hx-ask {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}
@media (max-width: 767px) {
  .hx-ask-fields {
    grid-template-columns: 1fr 1fr;
  }
  .hx-ask-fields .hl-btn {
    grid-column: 1 / -1;
    justify-content: center;
  }
}
@media (max-width: 480px) {
  .hx-ask-fields {
    grid-template-columns: 1fr;
  }
}

/* ---------- 2026-10-23, the lower half made plain ----------
   why (photo + four reasons), price (two boxes), closing contact rows. */
.hxw-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 56px;
  align-items: center;
}
.hxw-photo {
  position: relative;
  margin: 0;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: 0 24px 56px rgba(var(--t-ink-rgb), 0.13);
}
.hxw-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hxw-photo figcaption {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--t-ink);
  font-size: 12.5px;
  font-weight: 600;
}
.hxw-photo figcaption i {
  color: var(--t-acc);
}
.hxw-copy .hl-sub {
  margin-bottom: 8px;
}
.hxw-list {
  display: grid;
  gap: 14px;
  margin: 22px 0 26px;
  padding: 0;
  list-style: none;
}
.hxw-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  position: static;
}
.hxw-list li > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--t-tx);
}
.hxw-list b {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--t-ink);
}
.hxw-ico {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--t-bg);
  color: var(--t-acc-d);
  font-size: 16px;
}
.hxw-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.hxp-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  max-width: 980px;
  margin: 0 auto;
}
.hxp-box {
  padding: 24px 26px 22px;
  border-radius: 18px;
  border: 1px solid var(--t-line);
  background: #fff;
  box-shadow: 0 10px 30px rgba(var(--t-ink-rgb), 0.06);
}
.hxp-box.is-yes {
  border-color: rgba(var(--t-acc-rgb), 0.4);
  background: rgba(var(--t-acc-rgb), 0.05);
}
.hxp-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--t-ink);
}
.hxp-head i {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 11px;
}
.is-yes .hxp-head i {
  background: var(--t-btn);
  color: var(--t-on-btn);
}
.is-no .hxp-head i {
  background: var(--t-line);
  color: var(--t-tx-2);
}
.hxp-box ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.hxp-box li {
  display: block;
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--t-tx);
}
.hxp-box li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--t-acc);
}
.is-no li::before {
  background: var(--t-tx-3);
}
.hxc {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 24px;
  border-radius: 18px;
  background: var(--t-ink);
  color: #fff;
}
.hxc-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--t-acc-l);
}
.hxc-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  text-decoration: none !important;
  transition: background 0.25s ease;
}
.hxc-row:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.hxc-row > i,
.hxc-row > svg {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--t-btn);
  color: var(--t-on-btn);
  font-size: 15px;
}
.hxc-row span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.hxc-row b {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hxc-row em {
  font-style: normal;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.72);
}
@media (max-width: 991px) {
  .hxw-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .hxw-photo {
    aspect-ratio: 16 / 10;
  }
  .hxp-grid {
    grid-template-columns: 1fr;
  }
}
.hxc-row > svg {
  padding: 10px;
  box-sizing: border-box;
}
.hxc {
  gap: 8px;
  padding: 22px 22px;
}
.hxc-row {
  padding: 10px 12px;
}

/* the planner's container must sit above the next section, or an open dropdown list
   paints under it (every .container is a z-index:1 stacking context, later ones win) */
.hb .container:has(#hx-ask) {
  z-index: 6;
}
.pj-select.is-open {
  z-index: 7;
}

/* review pass, 2026-10-24: on phones the "Or call …, Monday to Saturday" note
   was an inline-flex row, so the number broke across lines; plain text there */
.hx-start-note a {
  white-space: nowrap;
}
@media (max-width: 767px) {
  .hx-start-note {
    display: block;
    line-height: 1.6;
  }
  .hx-start-note i {
    margin-right: 6px;
  }
}

/* 2026-10-24: the "why book with us" photo is as tall as the copy beside it
   (the owner: "content ke according iski height karo"); it was a fixed 4:5
   portrait that ran well below the text. Phones keep the 4:5 crop. */
@media (min-width: 992px) {
  .hxw-grid {
    align-items: stretch;
  }
  .hxw-photo {
    aspect-ratio: auto;
    height: 100%;
    min-height: 360px;
  }
  .hxw-copy {
    align-self: center;
  }
}
@media (min-width: 992px) {
  /* the image's own 4:5 height was still setting the row; take it out of flow */
  .hxw-photo img {
    position: absolute;
    inset: 0;
  }
}

/* ---------- banner polish (2026-10-25) ----------
   The owner asked whether the banner could look better. The structure stays;
   the card loses its boarding-pass bites (the two half-circles cut into its
   edges read as dark blobs over the photo) and its "Now showing 03 / 04"
   stub, which meant nothing to a customer. The stub is now three plain
   promises; which desk is on show is a small caption on the photo. */
.hb-card {
  filter: drop-shadow(0 24px 34px rgba(var(--t-ink-d-rgb), 0.24));
}
.hb-card .hx-pass {
  -webkit-mask: none;
  mask: none;
  border-radius: 24px;
}
.hb-card .hx-pass-main {
  padding-bottom: 24px;
}
.hb-card .hx-pass-stub.hb-promises {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  height: auto;
  margin: 0;
  padding: 14px 34px 15px;
  border-top: 1px solid var(--t-line);
  list-style: none;
}
.hb-promises li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--t-ink);
}
.hb-promise-ico {
  display: inline-flex;
  flex: 0 0 26px;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(var(--t-acc-l-rgb), 0.2);
  font-size: 12px;
  color: var(--t-acc-d);
}
/* which desk the photograph belongs to, bottom right above the dock */
.hb-now {
  position: absolute;
  right: 12px;
  bottom: 70px;
  z-index: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 16px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 24px -12px rgba(var(--t-ink-d-rgb), 0.45);
  pointer-events: none;
}
.hb-now em {
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--t-tx-3);
}
.hb-now em span {
  color: var(--t-acc);
}
.hb-now b {
  font-size: 13px;
  font-weight: 600;
  color: var(--t-ink);
}
@media (min-width: 992px) and (max-height: 800px) {
  .hb-card .hx-pass-main {
    padding-bottom: 18px;
  }
  .hb-card .hx-pass-stub.hb-promises {
    padding: 11px 30px 12px;
  }
}
@media (max-width: 1199px) {
  .hb-promises li {
    font-size: 12px;
  }
}
@media (max-width: 991px) {
  /* the dock under the card already shows which desk is on */
  .hb-now {
    display: none;
  }
}
@media (max-width: 575px) {
  .hb-card .hx-pass-stub.hb-promises {
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    padding: 16px 22px 18px;
  }
}
/* the gold ticket band down the card's left edge sat half outside the
   rounded corner once the card got its plain shape; dropped */
.hb-card .hx-pass-main::before {
  display: none;
}
/* the three promises stay on one row on a short laptop too */
@media (min-width: 992px) {
  .hb-card .hx-pass-stub.hb-promises {
    flex-wrap: nowrap;
  }
}
@media (min-width: 992px) and (max-height: 800px) {
  .hb-promises li {
    gap: 6px;
    font-size: 12px;
  }
  .hb-promise-ico {
    flex-basis: 22px;
    width: 22px;
    height: 22px;
    font-size: 11px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hb-promises li {
    gap: 6px;
    font-size: 11.5px;
  }
  .hb-promise-ico {
    flex-basis: 22px;
    width: 22px;
    height: 22px;
    font-size: 11px;
  }
}

/* ---------- banner, second pass (2026-10-25) ----------
   A row of four photo pills under the buttons so a visitor can open a place in
   one click, and a frosted card. The card's drop-shadow filter is swapped for a
   box-shadow: a filter on an ancestor stops backdrop-filter from seeing the
   photograph (the filtered element becomes the backdrop root). */
.hb-card {
  filter: none;
}
.hb-card .hx-pass {
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 30px 60px -24px rgba(var(--t-ink-d-rgb), 0.45);
}
.hb-card .hx-pass-stub.hb-promises {
  background: rgba(var(--t-ink-rgb), 0.04);
}
.hb-card .hx-text {
  margin-bottom: 20px;
}
.hb-places {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px dashed var(--t-line);
}
.hb-places-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.hb-places-head span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t-tx-3);
}
.hb-places-head a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--t-acc-d);
  text-decoration: none !important;
}
.hb-places-head a i {
  font-size: 9px;
  transition: transform 0.3s ease;
}
.hb-places-head a:hover i {
  transform: translateX(3px);
}
.hb-places-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hb-place {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px 4px 4px;
  border: 1px solid var(--t-line);
  border-radius: 100px;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: var(--t-ink);
  text-decoration: none !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.hb-place img {
  display: block;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}
.hb-place:hover,
.hb-place:focus-visible {
  border-color: var(--t-acc-l);
  box-shadow: 0 8px 18px -10px rgba(var(--t-ink-rgb), 0.45);
  color: var(--t-ink);
  transform: translateY(-2px);
}
/* laptops: four pills on one row */
@media (min-width: 992px) {
  .hb-places-row {
    flex-wrap: nowrap;
    justify-content: space-between;
  }
}
@media (min-width: 992px) and (max-height: 800px) {
  .hb-card .hx-text {
    margin-bottom: 14px;
  }
  .hb-places {
    margin-top: 14px;
    padding-top: 12px;
  }
  .hb-places-head {
    margin-bottom: 8px;
  }
  .hb-place img {
    flex-basis: 26px;
    width: 26px;
    height: 26px;
  }
}
/* a very short screen keeps the buttons and the promises, not the pills */
@media (min-width: 992px) and (max-height: 700px) {
  .hb-places {
    display: none;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hb-place {
    gap: 6px;
    padding-right: 11px;
    font-size: 12.5px;
  }
}
@media (max-width: 575px) {
  .hb-places-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}