/* =========================================================================
   BriefNepal homepage — /css/home.css
   Loaded only by index.php, after travel.css, so every colour, radius and
   shadow below is one of the travel design tokens (--t-ink, --t-gold,
   --t-cream …). Nothing here redefines the palette: the homepage has to look
   like the same publication as /travel, it just has to be laid out for a
   visitor who has not decided anything yet.

   Motion follows one "Premium" personality, declared once as tokens and used
   everywhere: a single easing curve, three durations, no overshoot. Three
   layers on every interaction — the element moves (primary), its shadow and
   image respond (secondary), and the page has slow ambient life (the season
   band drift, the gold edge on the planner). Everything collapses under
   prefers-reduced-motion at the bottom of the file.
   ========================================================================= */

body.t-page {
  /* one curve for 80% of the motion on the page */
  --h-ease: cubic-bezier(.4, 0, .2, 1);
  --h-out:  cubic-bezier(.2, .7, .2, 1);   /* decelerate: entrances */
  --h-fast: 160ms;   /* hover, press, chip toggle */
  --h-mid:  320ms;   /* card lift, panel swap */
  --h-slow: 520ms;   /* scroll reveal */
  --h-gutter: 18px;  /* matches .container padding */
  --h-max: 1200px;   /* matches body.t-page .container max-width */

  /* --t-gold and --t-rust are tuned for white text on dark and for fills; as
     small text on the cream ground they measure 2.7:1 and 4.1:1, both under
     WCAG AA. These are the same two hues darkened until they pass at 5:1+, so
     the kickers keep the brand colour and stay readable. */
  --h-gold-ink: #7d5f10;
  --h-rust-ink: #8f3c1d;
}

.h-home { background: var(--t-cream); padding-bottom: 8px; }

/* ============================ SCROLL REVEAL ============================
   The hidden state is scoped to .h-js, which an inline <script> in the head
   adds before first paint. With JavaScript off the class never lands and
   every section renders normally. ------------------------------------- */
.h-js [data-reveal] { opacity: 0; transform: translateY(20px); }
.h-js [data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity var(--h-slow) var(--h-out), transform var(--h-slow) var(--h-out);
}

/* ================================ LEDE ================================ */
.h-lede { padding: 40px 0 28px; }
.h-lede__inner { max-width: 800px; }
.h-lede__kick {
  font-size: .7rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--h-gold-ink); margin-bottom: 14px;
  display: inline-flex; align-items: center; gap: 9px;
}
.h-lede__kick::before {
  content: ""; width: 24px; height: 1px; background: currentColor; opacity: .7;
}
.h-lede__title {
  font-family: var(--t-display); font-weight: 600; font-optical-sizing: auto;
  font-size: clamp(2.2rem, 6.4vw, 3.6rem); line-height: 1.03; letter-spacing: -.022em;
  color: var(--t-ink); margin: 0 0 16px;
}
.h-lede__lead {
  font-size: clamp(1rem, 2.4vw, 1.14rem); line-height: 1.62; color: var(--t-text);
  max-width: 62ch; margin: 0;
}

/* stat row — the trust signal, and the only numbers above the planner */
.h-stats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 22px; margin: 30px 0 0; padding: 0; list-style: none;
}
.h-stat { display: flex; flex-direction: column; gap: 4px; }
.h-stat__n {
  font-family: var(--t-display); font-weight: 700; font-size: clamp(1.6rem, 4.6vw, 2.1rem);
  line-height: 1; color: var(--t-teal); font-variant-numeric: tabular-nums;
}
.h-stat__l { font-size: .8rem; line-height: 1.35; color: var(--t-text); }
@media (min-width: 720px) {
  .h-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* =============================== PLANNER ===============================
   The homepage's whole reason to exist. A white card lifted off the cream
   with a gold top edge, so it reads as an instrument rather than a header.
   -------------------------------------------------------------------- */
.h-plan { padding: 8px 0 12px; scroll-margin-top: 76px; }
.h-plan__box {
  position: relative; background: var(--t-surface);
  border: 1px solid var(--t-line); border-radius: var(--t-r);
  box-shadow: var(--t-sh-2); padding: 26px 20px 22px; overflow: hidden;
}
/* ambient layer: a slow sheen across the gold edge, the only always-on motion */
.h-plan__box::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 4px;
  background: linear-gradient(90deg, var(--t-gold) 0%, var(--t-rust) 32%, var(--t-teal) 64%, var(--t-gold) 100%);
  background-size: 220% 100%; animation: h-edge 18s linear infinite;
}
@keyframes h-edge { from { background-position: 0 0; } to { background-position: 220% 0; } }

.h-plan__head { margin-bottom: 20px; }
.h-plan__title {
  font-family: var(--t-display); font-weight: 600; font-size: clamp(1.4rem, 3.6vw, 1.85rem);
  line-height: 1.14; color: var(--t-ink); margin: 0 0 4px; letter-spacing: -.015em;
}
.h-plan__hint { font-size: .88rem; color: var(--t-muted); margin: 0; }

.h-plan__steps { display: grid; gap: 20px; }
.h-plan__step { border: 0; padding: 0; margin: 0; min-width: 0; }
.h-plan__legend {
  display: flex; align-items: center; gap: 9px; padding: 0; margin-bottom: 11px;
  font-size: .84rem; font-weight: 700; color: var(--t-ink); letter-spacing: -.005em;
}
.h-plan__num {
  flex: 0 0 auto; width: 21px; height: 21px; display: grid; place-items: center;
  border-radius: 50%; background: var(--t-gold-soft); color: #7a5c15;
  font-size: .72rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.h-plan__opts { display: flex; flex-wrap: wrap; gap: 8px; }

/* a chip is a real radio input, so the keyboard and screen readers get the
   group semantics for free and the whole thing works with JS off */
.h-chip { position: relative; display: inline-flex; cursor: pointer; }
.h-chip input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; margin: 0; cursor: pointer;
}
.h-chip__t {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 15px;
  border: 1px solid var(--t-line); border-radius: 999px; background: var(--t-cream);
  font-size: .88rem; font-weight: 600; color: var(--t-text); white-space: nowrap;
  transition: background var(--h-fast) var(--h-ease), border-color var(--h-fast) var(--h-ease),
              color var(--h-fast) var(--h-ease), transform var(--h-fast) var(--h-ease);
}
.h-chip:hover .h-chip__t { border-color: var(--t-teal); color: var(--t-ink); }
.h-chip input:active + .h-chip__t { transform: scale(.97); }
.h-chip input:checked + .h-chip__t {
  background: var(--t-teal); border-color: var(--t-teal); color: #fff;
}
.h-chip input:focus-visible + .h-chip__t {
  outline: 3px solid var(--t-gold); outline-offset: 2px;
}
/* month chips: 12 of them, so they get a tighter target and wrap to a grid */
.h-plan__opts--months { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.h-chip--sm .h-chip__t {
  min-height: 44px; padding: 0 8px; justify-content: center; width: 100%;
  font-size: .82rem; border-radius: var(--t-r-sm);
}
@media (min-width: 620px) {
  .h-plan__opts--months { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (min-width: 940px) {
  .h-plan__box { padding: 32px 30px 26px; }
  .h-plan__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 30px; }
  .h-plan__step:last-child { grid-column: 1 / -1; }
  .h-plan__opts--months { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

.h-plan__answer {
  margin: 22px 0 16px; padding-top: 18px; border-top: 1px solid var(--t-line);
  font-size: .95rem; color: var(--t-muted);
}
.h-plan__answer strong { color: var(--t-ink); font-weight: 700; }

.h-plan__results { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 700px) { .h-plan__results { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.h-pcard { min-width: 0; }
.h-pcard[hidden] { display: none; }
.h-pcard__link {
  display: flex; flex-direction: column; height: 100%; text-decoration: none;
  background: var(--t-cream); border: 1px solid var(--t-line); border-radius: var(--t-r-sm);
  overflow: hidden;
  transition: transform var(--h-mid) var(--h-out), box-shadow var(--h-mid) var(--h-ease),
              border-color var(--h-mid) var(--h-ease);
}
.h-pcard__link:hover {
  transform: translateY(-4px); box-shadow: var(--t-sh-2);
  border-color: transparent; text-decoration: none;
}
.h-pcard__link:focus-visible { outline: 3px solid var(--t-gold); outline-offset: 3px; }
.h-pcard__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.h-pcard__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 700ms var(--h-out);
}
.h-pcard__link:hover .h-pcard__img { transform: scale(1.06); }
.h-pcard__body { display: flex; flex-direction: column; gap: 6px; padding: 14px 15px 15px; flex: 1; }
.h-pcard__kick {
  font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--h-gold-ink);
}
.h-pcard__name {
  font-family: var(--t-display); font-weight: 600; font-size: 1.12rem; line-height: 1.2;
  color: var(--t-ink);
}
.h-pcard__tag { font-size: .86rem; line-height: 1.45; color: var(--t-muted); }
.h-pcard__facts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.h-pcard__facts span {
  font-size: .72rem; font-weight: 600; color: var(--t-text);
  background: var(--t-surface); border: 1px solid var(--t-line);
  border-radius: 6px; padding: 3px 7px;
}
/* "why this matched" — written by home.js, absent server-side */
.h-pcard__why {
  font-size: .74rem; font-weight: 600; color: var(--t-teal);
  background: var(--t-teal-soft); border-radius: 6px; padding: 5px 8px; margin-top: 4px;
}
.h-pcard__cta {
  margin-top: auto; padding-top: 10px; font-size: .82rem; font-weight: 700; color: var(--t-teal);
  transition: transform var(--h-fast) var(--h-ease);
}
.h-pcard__link:hover .h-pcard__cta { transform: translateX(4px); }

/* entrance for cards the planner swaps in; 60ms stagger, ~340ms total */
.h-pcard.is-new { animation: h-pop var(--h-mid) var(--h-out) both; }
.h-pcard.is-new:nth-child(2) { animation-delay: 60ms; }
.h-pcard.is-new:nth-child(3) { animation-delay: 120ms; }
@keyframes h-pop { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.h-plan__foot { margin: 18px 0 0; font-size: .88rem; color: var(--t-muted); }
.h-plan__foot a { color: var(--t-teal); font-weight: 600; }

/* ========================= NEPAL RIGHT NOW BAND ========================
   The one dark, full-bleed band on the page, and the piece that changes on
   its own between seasons. --------------------------------------------- */
.h-now {
  position: relative; isolation: isolate; overflow: hidden;
  margin: 44px 0 0; padding: 44px 0 40px; color: #fff;
  background: linear-gradient(135deg, #16232b, #0e3b46 62%, #0e5e57);
}
.h-now__bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: -2; opacity: .34;
  animation: h-drift 34s ease-in-out infinite alternate;   /* ambient layer */
}
@keyframes h-drift {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.14) translate3d(-1.5%, -1.5%, 0); }
}
.h-now::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, rgba(12,20,28,.9) 0%, rgba(12,20,28,.72) 46%, rgba(12,20,28,.5) 100%);
}
.h-now__inner { display: grid; gap: 30px; }
.h-now__kick {
  font-size: .7rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: #f1d79e; margin: 0 0 12px;
}
.h-now__title {
  font-family: var(--t-display); font-weight: 600; font-size: clamp(1.6rem, 4.4vw, 2.5rem);
  line-height: 1.1; letter-spacing: -.018em; margin: 0 0 14px; color: #fff;
}
.h-now__body { font-size: 1rem; line-height: 1.66; color: rgba(255,255,255,.86); margin: 0 0 20px; max-width: 58ch; }
.h-now__cta {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px;
  border-radius: 999px; background: var(--t-gold); color: #22190a;
  font-size: .9rem; font-weight: 700; text-decoration: none;
  transition: background var(--h-fast) var(--h-ease), transform var(--h-fast) var(--h-ease);
}
.h-now__cta:hover { background: #d3a838; transform: translateY(-2px); text-decoration: none; }
.h-now__cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.h-now__pickslbl {
  font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.62); margin: 0 0 12px;
}
.h-now__hero {
  display: block; padding: 16px 18px; margin-bottom: 12px; text-decoration: none;
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--t-r-sm); backdrop-filter: blur(3px);
  transition: background var(--h-fast) var(--h-ease), transform var(--h-mid) var(--h-out);
}
.h-now__hero:hover { background: rgba(255,255,255,.15); transform: translateY(-3px); text-decoration: none; }
.h-now__hero:focus-visible { outline: 3px solid var(--t-gold); outline-offset: 3px; }
.h-now__hero-name {
  display: block; font-family: var(--t-display); font-weight: 600; font-size: 1.24rem;
  line-height: 1.2; color: #fff; margin-bottom: 5px;
}
.h-now__hero-tag { display: block; font-size: .88rem; line-height: 1.45; color: rgba(255,255,255,.8); margin-bottom: 8px; }
.h-now__hero-meta { display: block; font-size: .74rem; font-weight: 600; color: #f1d79e; }
/* the shared .t-mini cards need a light-on-dark repaint inside this band */
.h-now__minis { display: grid; gap: 9px; }
.h-now__minis .t-mini {
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14);
}
.h-now__minis .t-mini:hover { background: rgba(255,255,255,.13); }
.h-now__minis .t-mini__name { color: #fff; }
.h-now__minis .t-mini__tag { color: rgba(255,255,255,.7); }
@media (min-width: 900px) {
  .h-now { padding: 60px 0 56px; }
  .h-now__inner { grid-template-columns: 1.15fr .85fr; gap: 52px; align-items: start; }
}

/* ============================ BLOCK HEADINGS ============================ */
.h-block { margin: 46px 0; scroll-margin-top: 76px; }
.h-block__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; margin-bottom: 20px;
}
.h-block__headtxt { max-width: 720px; }
.h-block__title {
  font-family: var(--t-display); font-weight: 600; font-size: clamp(1.5rem, 3.4vw, 2.15rem);
  line-height: 1.13; color: var(--t-ink); letter-spacing: -.018em;
  position: relative; padding-bottom: 14px; margin: 0 0 8px;
}
.h-block__title::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 58px; height: 3px;
  background: linear-gradient(90deg, var(--t-gold), var(--t-rust)); border-radius: 3px;
}
.h-block__sub { font-size: 1rem; line-height: 1.6; color: var(--t-muted); margin: 0; }
.h-block__sub a { color: var(--t-teal); font-weight: 600; white-space: nowrap; }
.h-block__foot { margin: 18px 0 0; }
.h-block__all { font-size: .92rem; font-weight: 700; color: var(--t-teal); }

/* ================================ RAILS ================================
   One horizontal snap track per section instead of a stacked 3-column grid.
   The visitor sees a partial card at the edge, which is the affordance that
   there is more; the section costs one card-height of page instead of three.

   The track carries the gutter (not the scroller) so a percentage resolves
   against the scrollport and stays scrollbar-safe: on a wide screen the
   first card lines up with the heading above it, and the last card can
   still scroll to the left edge.
   -------------------------------------------------------------------- */
.h-rail {
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity; scroll-behavior: smooth;
  overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none;
  padding: 4px 0 6px;
  /* Snap alignment is measured from the scrollport edge, not from the track's
     gutter — without this the browser scrolls the rail by one gutter's width
     on load to sit the first card flush against the window, and the rail opens
     already nudged off its start. Must match the track padding exactly. */
  scroll-padding-inline: max(var(--h-gutter), calc((100% - var(--h-max)) / 2));
}
.h-rail::-webkit-scrollbar { display: none; }
.h-rail__track {
  display: flex; align-items: stretch; gap: 16px; margin: 0; list-style: none;
  padding-inline: max(var(--h-gutter), calc((100% - var(--h-max)) / 2));
}
.h-rail__item {
  flex: 0 0 78vw; max-width: 340px; min-width: 0; scroll-snap-align: start;
  display: flex; flex-direction: column;
}
.h-rail__item > .t-card, .h-rail__item > .h-reg { height: 100%; }
.h-rail__item--reg { flex-basis: 84vw; max-width: 380px; }
@media (min-width: 620px) {
  .h-rail__item { flex-basis: 300px; }
  .h-rail__item--reg { flex-basis: 340px; }
}
@media (min-width: 1000px) {
  .h-rail__track { gap: 20px; }
  .h-rail__item { flex-basis: 328px; }
  .h-rail__item--reg { flex-basis: 372px; }
}
.h-rail__track:focus-visible { outline: 3px solid var(--t-gold); outline-offset: 4px; border-radius: 4px; }

/* Arrow buttons — unhidden by home.js only when the track actually overflows,
   and never on a phone: swipe is the gesture there, and two 44px circles
   squeezed beside a four-line subtitle just crowd the heading. */
.h-rail__nav { display: none; gap: 8px; flex: 0 0 auto; }
@media (min-width: 700px) {
  .h-rail__nav:not([hidden]) { display: flex; }
}
.h-rail__btn {
  width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--t-line); border-radius: 50%; background: var(--t-surface);
  color: var(--t-ink);
  transition: background var(--h-fast) var(--h-ease), border-color var(--h-fast) var(--h-ease),
              opacity var(--h-fast) var(--h-ease), transform var(--h-fast) var(--h-ease);
}
.h-rail__btn:hover:not(:disabled) { background: var(--t-teal); border-color: var(--t-teal); color: #fff; }
.h-rail__btn:active:not(:disabled) { transform: scale(.94); }
.h-rail__btn:disabled { opacity: .34; cursor: default; }
.h-rail__btn:focus-visible { outline: 3px solid var(--t-gold); outline-offset: 2px; }

/* the "see all" tile that closes every rail */
.h-rail__end {
  display: flex; flex-direction: column; justify-content: center; gap: 8px; height: 100%;
  min-height: 220px; padding: 24px 22px; text-decoration: none;
  border: 1px dashed var(--t-gold); border-radius: var(--t-r);
  background: linear-gradient(150deg, var(--t-gold-soft), var(--t-cream) 70%);
  transition: transform var(--h-mid) var(--h-out), box-shadow var(--h-mid) var(--h-ease);
}
.h-rail__end:hover { transform: translateY(-4px); box-shadow: var(--t-sh-2); text-decoration: none; }
.h-rail__end:focus-visible { outline: 3px solid var(--t-teal); outline-offset: 3px; }
.h-rail__end-kick {
  font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--h-rust-ink);
}
.h-rail__end-title {
  font-family: var(--t-display); font-weight: 600; font-size: 1.3rem; line-height: 1.18;
  color: var(--t-ink);
}
.h-rail__end-cta { font-size: .86rem; font-weight: 700; color: var(--t-teal); margin-top: 4px; }

/* progress bar: how far through the rail you are, so a horizontal track
   never feels like an unmarked pit */
.h-rail__bar {
  position: relative; height: 3px; margin-top: 14px; border-radius: 3px;
  background: var(--t-cream-2); overflow: hidden;
}
.h-rail__bar-fill {
  position: absolute; top: 0; left: 0; bottom: 0; width: 30%; border-radius: 3px;
  background: linear-gradient(90deg, var(--t-gold), var(--t-rust));
  transition: transform var(--h-fast) linear;
}

/* ---------------------------- region card ---------------------------- */
.h-reg {
  display: flex; flex-direction: column; background: var(--t-surface);
  border: 1px solid var(--t-line); border-radius: var(--t-r); overflow: hidden;
  box-shadow: var(--t-sh-1);
  transition: transform var(--h-mid) var(--h-out), box-shadow var(--h-mid) var(--h-ease);
}
.h-reg:hover { transform: translateY(-4px); box-shadow: var(--t-sh-2); }
.h-reg__media {
  position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden;
  text-decoration: none;
}
.h-reg__media:focus-visible { outline: 3px solid var(--t-gold); outline-offset: -3px; }
.h-reg__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 800ms var(--h-out);
}
.h-reg:hover .h-reg__img { transform: scale(1.07); }
.h-reg__shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,20,28,.05) 30%, rgba(12,20,28,.78) 100%);
}
.h-reg__name {
  position: absolute; left: 16px; right: 16px; bottom: 13px; margin: 0;
  font-family: var(--t-display); font-weight: 600; font-size: 1.26rem; line-height: 1.16;
  color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.4);
}
.h-reg__count {
  position: absolute; top: 12px; right: 12px;
  font-size: .68rem; font-weight: 700; letter-spacing: .04em; color: #22190a;
  background: rgba(241,215,158,.95); border-radius: 999px; padding: 4px 9px;
}
.h-reg__body { display: flex; flex-direction: column; flex: 1; padding: 15px 17px 17px; }
.h-reg__blurb { font-size: .88rem; line-height: 1.55; color: var(--t-muted); margin: 0 0 13px; }
.h-reg__links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.h-reg__links a {
  font-size: .76rem; font-weight: 600; color: var(--t-text); text-decoration: none;
  background: var(--t-cream); border: 1px solid var(--t-line); border-radius: 999px;
  padding: 5px 10px;
  transition: background var(--h-fast) var(--h-ease), color var(--h-fast) var(--h-ease);
}
.h-reg__links a:hover { background: var(--t-gold-soft); color: var(--t-ink); text-decoration: none; }
.h-reg__links a:focus-visible { outline: 2px solid var(--t-teal); outline-offset: 2px; }

/* =========================== COST COMPARISON ===========================
   Tabs with no JavaScript: the three inputs are a radio group, and each
   panel is shown by a `:checked ~` sibling rule. Arrow-key navigation and
   screen-reader grouping come free with the radios.
   -------------------------------------------------------------------- */
.h-vs {
  margin: 46px 0; padding: 44px 0 42px; color: #fff; scroll-margin-top: 76px;
  background: linear-gradient(140deg, #0b3a37 0%, #0e5e57 55%, #124b52 100%);
}
.h-vs__kick {
  font-size: .7rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: #f1d79e; margin: 0 0 12px;
}
.h-vs__title {
  font-family: var(--t-display); font-weight: 600; font-size: clamp(1.55rem, 4vw, 2.3rem);
  line-height: 1.1; letter-spacing: -.018em; margin: 0 0 10px; color: #fff;
}
.h-vs__sub { font-size: 1rem; line-height: 1.6; color: rgba(255,255,255,.8); margin: 0 0 24px; max-width: 62ch; }

.h-vs__box { position: relative; }
.h-vs__radio { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.h-vs__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.h-vs__tab {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.26); border-radius: 999px;
  background: rgba(255,255,255,.07); color: rgba(255,255,255,.88);
  font-size: .86rem; font-weight: 600; white-space: nowrap;
  transition: background var(--h-fast) var(--h-ease), color var(--h-fast) var(--h-ease),
              border-color var(--h-fast) var(--h-ease);
}
.h-vs__tab:hover { background: rgba(255,255,255,.16); color: #fff; }
#vs1:checked ~ .h-vs__tabs .h-vs__tab:nth-child(1),
#vs2:checked ~ .h-vs__tabs .h-vs__tab:nth-child(2),
#vs3:checked ~ .h-vs__tabs .h-vs__tab:nth-child(3) {
  background: var(--t-gold); border-color: var(--t-gold); color: #22190a;
}
#vs1:focus-visible ~ .h-vs__tabs .h-vs__tab:nth-child(1),
#vs2:focus-visible ~ .h-vs__tabs .h-vs__tab:nth-child(2),
#vs3:focus-visible ~ .h-vs__tabs .h-vs__tab:nth-child(3) {
  outline: 3px solid #fff; outline-offset: 2px;
}

.h-vs__panel { display: none; }
#vs1:checked ~ .h-vs__panels .h-vs__panel:nth-child(1),
#vs2:checked ~ .h-vs__panels .h-vs__panel:nth-child(2),
#vs3:checked ~ .h-vs__panels .h-vs__panel:nth-child(3) {
  display: block; animation: h-fade var(--h-mid) var(--h-ease) both;
}
@keyframes h-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.h-vs__cols { display: grid; gap: 14px; }
.h-vs__col {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--t-r); padding: 20px 18px;
}
.h-vs__name {
  display: block; font-family: var(--t-display); font-weight: 600; font-size: 1.3rem;
  line-height: 1.16; color: #fff; text-decoration: none; margin-bottom: 10px;
}
.h-vs__name:hover { color: #f1d79e; text-decoration: none; }
.h-vs__name:focus-visible { outline: 3px solid var(--t-gold); outline-offset: 3px; }
.h-vs__price {
  font-family: var(--t-display); font-weight: 700; font-size: 1.5rem; line-height: 1;
  color: #f1d79e; margin: 0 0 10px; font-variant-numeric: tabular-nums;
}
.h-vs__price span { font-size: 1rem; font-weight: 600; color: rgba(255,255,255,.72); }
.h-vs__bar { height: 6px; border-radius: 6px; background: rgba(255,255,255,.14); overflow: hidden; margin-bottom: 16px; }
.h-vs__bar span {
  display: block; height: 100%; border-radius: 6px;
  background: linear-gradient(90deg, #f1d79e, var(--t-rust));
  transform-origin: left; animation: h-grow 620ms var(--h-out) both;
}
@keyframes h-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.h-vs__rows { margin: 0; display: grid; gap: 0; }
.h-vs__rows > div {
  display: flex; justify-content: space-between; gap: 14px; padding: 8px 0;
  border-top: 1px solid rgba(255,255,255,.12); font-size: .86rem;
}
.h-vs__rows dt { color: rgba(255,255,255,.66); margin: 0; }
.h-vs__rows dd { margin: 0; font-weight: 700; color: #fff; text-align: right; }
.h-vs__go {
  display: inline-block; margin-top: 14px; font-size: .84rem; font-weight: 700; color: #f1d79e;
  transition: transform var(--h-fast) var(--h-ease);
}
.h-vs__go:hover { transform: translateX(4px); color: #fff; }
.h-vs__note {
  margin: 16px 0 0; font-size: .92rem; line-height: 1.6; color: rgba(255,255,255,.78);
  padding-left: 14px; border-left: 3px solid var(--t-gold); max-width: 76ch;
}
.h-vs__all {
  display: inline-flex; align-items: center; min-height: 46px; margin-top: 26px; padding: 0 22px;
  border-radius: 999px; background: #fff; color: #0b3a37;
  font-size: .92rem; font-weight: 700; text-decoration: none;
  transition: transform var(--h-fast) var(--h-ease), box-shadow var(--h-fast) var(--h-ease);
}
.h-vs__all:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -12px rgba(0,0,0,.6); text-decoration: none; }
.h-vs__all:focus-visible { outline: 3px solid var(--t-gold); outline-offset: 3px; }
@media (min-width: 800px) {
  .h-vs { padding: 58px 0 54px; }
  .h-vs__cols { grid-template-columns: 1fr 1fr; gap: 20px; }
}

/* ============================= THREE WAYS IN ============================= */
.h-paths__grid { display: grid; gap: 18px; }
.h-path {
  display: flex; flex-direction: column; background: var(--t-surface);
  border: 1px solid var(--t-line); border-radius: var(--t-r); padding: 22px 20px 20px;
  box-shadow: var(--t-sh-1);
  transition: transform var(--h-mid) var(--h-out), box-shadow var(--h-mid) var(--h-ease);
}
.h-path:hover { transform: translateY(-3px); box-shadow: var(--t-sh-2); }
.h-path--mid { border-color: var(--t-gold); }
.h-path__kick {
  font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--h-rust-ink); margin: 0 0 8px;
}
.h-path__title {
  font-family: var(--t-display); font-weight: 600; font-size: 1.22rem; line-height: 1.22;
  color: var(--t-ink); margin: 0 0 16px;
}
.h-path__steps { margin: 0 0 18px; padding: 0; list-style: none; counter-reset: hp; }
.h-path__steps li {
  position: relative; counter-increment: hp; padding: 0 0 14px 32px;
}
.h-path__steps li::before {
  content: counter(hp); position: absolute; left: 0; top: 1px;
  width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%;
  background: var(--t-teal-soft); color: var(--t-teal);
  font-size: .72rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
/* the connecting line, so three links read as one route */
.h-path__steps li:not(:last-child)::after {
  content: ""; position: absolute; left: 10px; top: 26px; bottom: 4px; width: 1px;
  background: var(--t-line);
}
.h-path__steps a {
  display: block; font-size: .95rem; font-weight: 700; color: var(--t-ink); text-decoration: none;
}
.h-path__steps a:hover { color: var(--t-teal); text-decoration: underline; }
.h-path__steps span { display: block; font-size: .8rem; line-height: 1.4; color: var(--t-text); margin-top: 2px; }
.h-path__cta { margin-top: auto; font-size: .86rem; font-weight: 700; color: var(--t-teal); }
@media (min-width: 860px) {
  .h-paths__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
}

/* =============================== PODCAST =============================== */
.h-pod__frame { border-radius: 12px; display: block; border: 0; }

/* ============================= RESUME PROMPT =============================
   One sticky offer past the halfway mark: the guide this visitor saved with
   a heart if there is one, the cost index if there is not. Dismissible, and
   the dismissal is remembered for the session.
   -------------------------------------------------------------------- */
.h-resume {
  position: fixed; z-index: 60; left: 12px; right: 12px; bottom: 12px;
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px 11px 14px; border-radius: 999px;
  background: rgba(22,35,43,.96); color: #fff;
  box-shadow: 0 16px 40px -14px rgba(0,0,0,.6);
  backdrop-filter: blur(8px);
  transform: translateY(140%); transition: transform 380ms var(--h-out);
}
.h-resume.is-up { transform: none; }
.h-resume[hidden] { display: none; }
.h-resume__txt { flex: 1; min-width: 0; font-size: .82rem; line-height: 1.3; color: rgba(255,255,255,.78); }
.h-resume__txt b { display: block; font-size: .92rem; font-weight: 700; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-resume__go {
  flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px;
  border-radius: 999px; background: var(--t-gold); color: #22190a;
  font-size: .84rem; font-weight: 700; text-decoration: none;
  transition: background var(--h-fast) var(--h-ease);
}
.h-resume__go:hover { background: #d3a838; text-decoration: none; }
.h-resume__go:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.h-resume__x {
  flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; cursor: pointer;
  border: 0; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; font-size: 1.1rem;
  line-height: 1; transition: background var(--h-fast) var(--h-ease);
}
.h-resume__x:hover { background: rgba(255,255,255,.2); }
.h-resume__x:focus-visible { outline: 3px solid var(--t-gold); outline-offset: 2px; }
@media (min-width: 720px) {
  .h-resume { left: auto; right: 20px; bottom: 20px; max-width: 420px; }
}

/* ============================== HERO SEARCH ==============================
   For the visitor who arrives already knowing the name of the place. It
   submits to /travel, which is where the real filtering lives.
   -------------------------------------------------------------------- */
.h-find { margin: 26px 0 0; }
.h-find__lbl {
  display: block; font-size: .78rem; font-weight: 700; color: var(--t-text);
  margin-bottom: 8px;
}
.h-find__row {
  display: flex; align-items: center; gap: 8px; padding: 5px 5px 5px 14px;
  background: var(--t-surface); border: 1px solid var(--t-line);
  border-radius: 999px; box-shadow: var(--t-sh-1);
  transition: border-color var(--h-fast) var(--h-ease), box-shadow var(--h-fast) var(--h-ease);
}
.h-find__row:focus-within { border-color: var(--t-teal); box-shadow: var(--t-sh-2); }
.h-find__icon { flex: 0 0 auto; color: var(--t-muted); }
.h-find__input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font-family: inherit; font-size: 1rem; color: var(--t-ink); min-height: 44px;
}
.h-find__input::placeholder { color: var(--t-faint); }
.h-find__btn {
  flex: 0 0 auto; min-height: 44px; padding: 0 22px; cursor: pointer;
  border: 0; border-radius: 999px; background: var(--t-teal); color: #fff;
  font-family: inherit; font-size: .92rem; font-weight: 700;
  transition: background var(--h-fast) var(--h-ease), transform var(--h-fast) var(--h-ease);
}
.h-find__btn:hover { background: #0b4b45; }
.h-find__btn:active { transform: scale(.97); }
.h-find__btn:focus-visible { outline: 3px solid var(--t-gold); outline-offset: 2px; }

.h-find__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 14px 0 0; }
.h-find__chipslbl {
  font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--t-muted); margin-right: 2px;
}
.h-find__chips a {
  font-size: .82rem; font-weight: 600; color: var(--t-text); text-decoration: none;
  background: var(--t-surface); border: 1px solid var(--t-line); border-radius: 999px;
  padding: 7px 13px;
  transition: background var(--h-fast) var(--h-ease), border-color var(--h-fast) var(--h-ease);
}
.h-find__chips a:hover { background: var(--t-teal-soft); border-color: var(--t-teal); text-decoration: none; }
.h-find__chips a:focus-visible { outline: 3px solid var(--t-gold); outline-offset: 2px; }

/* budget step's small print */
.h-plan__note { margin: 10px 0 0; font-size: .78rem; line-height: 1.5; color: var(--t-text); max-width: 68ch; }
.h-plan__note a { color: var(--t-teal); font-weight: 700; }
@media (min-width: 940px) {
  .h-plan__step--wide { grid-column: 1 / -1; }
}

/* ================================ MOMENTS ===============================
   Four photographs, one true line each, no card chrome — the deliberate
   break in a page that is otherwise rows of bordered white boxes.
   -------------------------------------------------------------------- */
.h-moments { margin: 46px 0; background: var(--t-ink); }
.h-moments__h {
  /* the section needs a heading for the outline; the panels carry the design */
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.h-moments__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; }
.h-moment {
  position: relative; display: block; overflow: hidden; text-decoration: none;
  aspect-ratio: 3 / 4; isolation: isolate;
}
.h-moment__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
  transition: transform 1.1s var(--h-out);
}
.h-moment:hover .h-moment__img { transform: scale(1.07); }
.h-moment__shade {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,16,22,.16) 0%, rgba(10,16,22,.5) 52%, rgba(10,16,22,.9) 100%);
}
.h-moment__txt {
  position: absolute; inset: auto 0 0 0; display: block; padding: 20px 16px 18px; color: #fff;
}
.h-moment__line {
  display: block; font-family: var(--t-display); font-weight: 600;
  font-size: clamp(1.15rem, 3.6vw, 1.5rem); line-height: 1.16; letter-spacing: -.012em;
  margin-bottom: 7px; text-shadow: 0 2px 14px rgba(0,0,0,.45);
}
.h-moment__sub {
  display: block; font-size: .82rem; line-height: 1.45; color: rgba(255,255,255,.82);
  margin-bottom: 10px;
}
.h-moment__place {
  display: block; font-size: .76rem; font-weight: 700; letter-spacing: .04em; color: #f1d79e;
  transition: transform var(--h-fast) var(--h-ease);
}
.h-moment:hover .h-moment__place { transform: translateX(4px); }
.h-moment:focus-visible { outline: 3px solid var(--t-gold); outline-offset: -5px; }
@media (min-width: 900px) {
  .h-moments__grid { grid-template-columns: repeat(4, 1fr); }
  .h-moment { aspect-ratio: 4 / 5; }
  .h-moment__txt { padding: 26px 20px 24px; }
}

/* ================================= WATCH ================================ */
.h-watch {
  margin: 46px 0; padding: 42px 0 40px;
  background: linear-gradient(150deg, #16232b 0%, #1d3140 100%); color: #fff;
}
.h-watch__inner { display: grid; gap: 26px; align-items: center; }
.h-watch__kick {
  font-size: .7rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: #f1d79e; margin: 0 0 12px;
}
.h-watch__title {
  font-family: var(--t-display); font-weight: 600; font-size: clamp(1.5rem, 3.8vw, 2.2rem);
  line-height: 1.11; letter-spacing: -.018em; margin: 0 0 12px; color: #fff;
}
.h-watch__body { font-size: 1rem; line-height: 1.65; color: rgba(255,255,255,.84); margin: 0 0 16px; max-width: 56ch; }
.h-watch__links { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; }
.h-watch__links a { font-size: .88rem; font-weight: 700; color: #f1d79e; }
.h-watch__links a:hover { color: #fff; }
/* chapters: real transcribed timestamps, each a #t= media-fragment jump link */
.h-watch__chapters { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 1px; }
.h-watch__chapters li { border-top: 1px solid rgba(255,255,255,.14); }
.h-watch__chapters li:last-child { border-bottom: 1px solid rgba(255,255,255,.14); }
.h-watch__chapters a {
  display: flex; gap: 12px; align-items: baseline; padding: 9px 4px;
  text-decoration: none; color: rgba(255,255,255,.86);
  transition: background var(--h-fast) var(--h-ease), color var(--h-fast) var(--h-ease);
}
.h-watch__chapters a:hover { background: rgba(255,255,255,.07); color: #fff; text-decoration: none; }
.h-watch__chapters a:focus-visible { outline: 3px solid var(--t-gold); outline-offset: -2px; }
.h-watch__at {
  flex: 0 0 42px; font-size: .8rem; font-weight: 700; color: #f1d79e;
  font-variant-numeric: tabular-nums;
}
.h-watch__ch { flex: 1; font-size: .9rem; line-height: 1.4; }

.h-watch__player { position: relative; }

/* transcript: closed by default, but every word stays in the DOM */
.h-watch__trans {
  margin-top: 14px; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14); border-radius: var(--t-r-sm);
}
.h-watch__trans > summary {
  cursor: pointer; padding: 13px 16px; font-size: .88rem; font-weight: 700; color: #f1d79e;
  list-style: none;
}
.h-watch__trans > summary::-webkit-details-marker { display: none; }
.h-watch__trans > summary::after { content: " ↓"; }
.h-watch__trans[open] > summary::after { content: " ↑"; }
.h-watch__trans > summary:hover { color: #fff; }
.h-watch__trans > summary:focus-visible { outline: 3px solid var(--t-gold); outline-offset: -3px; }
.h-watch__transbody {
  padding: 0 16px 14px; max-height: 340px; overflow-y: auto;
  font-size: .88rem; line-height: 1.65; color: rgba(255,255,255,.84);
}
.h-watch__transbody p { margin: 0 0 12px; }
.h-watch__transnote {
  font-size: .76rem !important; color: rgba(255,255,255,.6);
  border-left: 2px solid var(--t-gold); padding-left: 10px;
}
.h-watch__video {
  width: 100%; height: auto; display: block; border-radius: var(--t-r);
  background: #0a1016; box-shadow: var(--t-sh-3);
}
@media (min-width: 900px) {
  .h-watch { padding: 56px 0 54px; }
  .h-watch__inner { grid-template-columns: .9fr 1.1fr; gap: 44px; }
}

/* ================================= ROUTE ================================
   A timeline. On a phone it stacks with a vertical spine; from 800px the
   spine turns horizontal and the three legs sit side by side.
   -------------------------------------------------------------------- */
.h-route__track { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; counter-reset: leg; }
.h-route__leg { position: relative; padding-left: 44px; }
.h-route__dot {
  position: absolute; left: 0; top: 0; width: 30px; height: 30px; z-index: 1;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--t-teal); color: #fff;
  font-size: .84rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
/* the spine */
.h-route__leg:not(:last-child)::before {
  content: ""; position: absolute; left: 14px; top: 34px; bottom: -22px; width: 2px;
  background: linear-gradient(180deg, var(--t-gold), var(--t-line)); border-radius: 2px;
}
.h-route__media { display: block; border-radius: var(--t-r-sm); overflow: hidden; margin-bottom: 12px; }
.h-route__media img { width: 100%; height: 150px; object-fit: cover; display: block; }
.h-route__stay {
  display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--h-gold-ink);
  background: var(--t-gold-soft); border-radius: 999px; padding: 4px 10px; margin-bottom: 8px;
}
.h-route__name { margin: 0 0 6px; font-family: var(--t-display); font-weight: 600; font-size: 1.28rem; line-height: 1.18; }
.h-route__name a { color: var(--t-ink); text-decoration: none; }
.h-route__name a:hover { color: var(--t-teal); text-decoration: underline; }
.h-route__head { margin: 0 0 6px; font-size: .95rem; font-weight: 700; color: var(--t-text); }
.h-route__body { margin: 0; font-size: .88rem; line-height: 1.55; color: var(--t-muted); }
.h-route__foot { margin: 22px 0 0; font-size: .84rem; line-height: 1.55; color: var(--t-text); }
.h-route__foot a { color: var(--t-teal); font-weight: 700; }
@media (min-width: 800px) {
  .h-route__track { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
  .h-route__leg { padding: 46px 0 0; }
  .h-route__dot { top: 0; left: 0; }
  /* spine goes horizontal, running between the numbered dots */
  .h-route__leg:not(:last-child)::before {
    left: 34px; right: -30px; top: 14px; bottom: auto; width: auto; height: 2px;
    background: linear-gradient(90deg, var(--t-gold), var(--t-line));
  }
  .h-route__media img { height: 170px; }
}

/* ================================== MAP ================================== */
.h-map__frame { position: relative; }
.h-map__canvas { min-height: 380px; }
.h-map__ph {
  position: absolute; inset: 0; display: grid; place-items: center;
  border-radius: var(--t-r-sm); border: 1px solid var(--t-line); background: var(--t-cream-2);
}
.h-map__ph p { margin: 0; font-size: .9rem; color: var(--t-text); }
.h-map__list { margin: 14px 0 0; padding-left: 20px; columns: 2; font-size: .9rem; }
.h-map__list a { color: var(--t-teal); font-weight: 600; }
.h-map__note { margin: 12px 0 0; font-size: .8rem; line-height: 1.5; color: var(--t-text); }

/* ================================ DARK ================================= */
body.t-page[data-theme="dark"] .h-home { background: #12181c; }
body.t-page[data-theme="dark"] .h-plan__box,
body.t-page[data-theme="dark"] .h-reg,
body.t-page[data-theme="dark"] .h-path { background: #182026; border-color: #2a343a; }
body.t-page[data-theme="dark"] .h-chip__t,
body.t-page[data-theme="dark"] .h-pcard__link { background: #12181c; border-color: #2a343a; color: #cfd8dd; }
body.t-page[data-theme="dark"] .h-chip input:checked + .h-chip__t { background: var(--t-teal); border-color: var(--t-teal); color: #fff; }
body.t-page[data-theme="dark"] .h-pcard__facts span,
body.t-page[data-theme="dark"] .h-reg__links a { background: #182026; border-color: #2a343a; color: #cfd8dd; }
body.t-page[data-theme="dark"] .h-rail__btn { background: #182026; border-color: #2a343a; color: #e4eaee; }
body.t-page[data-theme="dark"] .h-rail__bar { background: #232c33; }
body.t-page[data-theme="dark"] .h-rail__end { background: linear-gradient(150deg, #23303a, #182026 70%); }
body.t-page[data-theme="dark"] .h-rail__end-title { color: #f2f6f8; }
body.t-page[data-theme="dark"] .h-find__row,
body.t-page[data-theme="dark"] .h-find__chips a { background: #182026; border-color: #2a343a; }
body.t-page[data-theme="dark"] .h-find__input { color: #e4eaee; }
body.t-page[data-theme="dark"] .h-map__ph { background: #182026; border-color: #2a343a; }
body.t-page[data-theme="dark"] .h-route__name a { color: #f2f6f8; }

/* ============================ REDUCED MOTION ============================
   Everything above is decoration on top of a page that works still. Under a
   reduced-motion preference the whole motion system switches off: no drift,
   no sheen, no reveal offsets, no smooth scroll.
   -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .h-js [data-reveal],
  .h-js [data-reveal].is-in { opacity: 1; transform: none; transition: none; }
  .h-plan__box::before,
  .h-now__bg { animation: none; }
  .h-pcard.is-new,
  .h-vs__panel,
  .h-vs__bar span { animation: none; }
  .h-rail { scroll-behavior: auto; }
  .h-resume { transition: none; }
  .h-pcard__link:hover,
  .h-reg:hover,
  .h-path:hover,
  .h-now__hero:hover,
  .h-rail__end:hover,
  .h-vs__all:hover,
  .h-now__cta:hover { transform: none; }
  .h-pcard__link:hover .h-pcard__img,
  .h-reg:hover .h-reg__img,
  .h-moment:hover .h-moment__img { transform: none; }
  .h-pcard__link:hover .h-pcard__cta,
  .h-moment:hover .h-moment__place,
  .h-vs__go:hover { transform: none; }
  .h-find__btn:active { transform: none; }
}