/* ==========================================================================
   Virtual Hotelier template kit: vh-core.css
   Phone app shell: launcher (div#app-launch, placed before <main>), tab bar (nav.app-tabbar.app-dock),
   section screens (.nf-screen), detail page (#vh-detail / .vhd).
   Ported from artifact/site.css 3393-3582, the vh-patch-css .vhd/.nf rules,
   vh-gold-shine 2-5 + 123 and the tab-bar sizing style (3742).

   Breakpoint: written for 640px. vh-core.js rewrites every "640px"/"641px"
   media query in vh-*.css at runtime when VH.breakpoint != 640 (same-origin
   stylesheets only; cross-origin sheets keep 640 and core warns).
   Brand: colours come from CSS custom properties that vh-core.js writes on
   :root from VH.brand; the values below are the Virtual Hotelier defaults.
   ========================================================================== */
:root {
  --vh-primary: #063233;
  --vh-primary-deep: #031e1f;
  --vh-accent: #b9953f;
  --vh-accent-light: #d9bd6a;
  --vh-cream: #f7fcfc;
  --vh-screen-bg: #071212;
  --vh-dock-bg: #063233;
  --vh-text: #fff;
  --vh-accent-rgb: 185, 149, 63;
  --vh-primary-rgb: 6, 50, 51;
  --vh-screen-rgb: 7, 18, 18;
  --vh-tabs: 5;
}

/* Desktop never shows the phone shell (site.css 3393, 3469, 3500; vh-patch-css 516) */
.app-tabbar { display: none; }
.app-launch { display: none; }
.nf-screen { display: none; }
.vhd[hidden] { display: none !important; }

/* ================= Tab bar (site.css 3394-3398) ================= */
@media (max-width: 640px) {
  /* Bottom tab bar, iOS style */
  .app-tabbar { position: fixed; z-index: 55; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(var(--vh-tabs, 5), 1fr); align-items: end; border-top: 1px solid rgba(var(--vh-accent-rgb), .28); background: rgba(var(--vh-primary-rgb), .94); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px)); }
  .app-tabbar a, .app-tabbar button { display: grid; justify-items: center; gap: 3px; border: 0; background: none; padding: 4px 0; color: rgba(233, 245, 245, .6); font: inherit; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .app-tabbar .is-active { color: var(--vh-accent); }
  html { -webkit-text-size-adjust: 100%; }
}

/* ================= Phone launcher (Netflix profile-screen pattern) (site.css 3469-3499) ================= */
@media (max-width: 640px) {
  .app-launch { position: relative; z-index: 1; display: flex; min-height: 100svh; flex-direction: column; justify-content: flex-end; overflow: hidden; height: 100svh; background: var(--vh-primary-deep); color: var(--vh-text); }
  .launch-stage { position: absolute; inset: 0 0 30% 0; }
  .launch-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 1.2s ease, transform 6s ease-out; }
  .launch-stage img.is-on { opacity: 1; transform: scale(1); }
  .launch-stage::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3,30,31,.55) 0%, rgba(3,30,31,0) 22%, rgba(3,30,31,.1) 55%, var(--vh-primary-deep) 100%); }
  .launch-brand { position: relative; z-index: 1; display: grid; justify-items: center; gap: 8px; padding: 0 24px 18px; text-align: center; }
  .launch-logo { width: 170px; height: auto; filter: drop-shadow(0 6px 18px rgba(0,0,0,.55)); }
  .launch-tag { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: .01em; text-shadow: 0 2px 10px rgba(0,0,0,.6); }
  .launch-sheet { position: relative; z-index: 1; padding: 0 18px calc(22px + env(safe-area-inset-bottom, 0px)); }
  .launch-sheet::before { content: ''; position: absolute; inset: 44px -30% 0; z-index: -1; border-radius: 50% 50% 0 0 / 38px 38px 0 0; background: #1d3536; }
  .launch-prompt { margin: 0 0 14px; color: rgba(255,255,255,.72); font-size: 17px; text-align: center; }
  .launch-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 6px; justify-items: center; }
  .launch-tile { display: grid; justify-items: center; gap: 8px; color: var(--vh-text); text-decoration: none; -webkit-tap-highlight-color: transparent; }
  .launch-icon { display: grid; width: 62px; height: 62px; place-items: center; border-radius: 14px; background: var(--g, linear-gradient(145deg, #3b5b5c, #567d7e)); box-shadow: 0 8px 18px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.18); transition: transform 160ms ease; }
  .launch-icon svg { width: 26px; height: 26px; color: #fff; }
  .launch-tile:active .launch-icon { transform: scale(.93); }
  .launch-tile b { font-size: 12.5px; white-space: nowrap; font-weight: 700; letter-spacing: .01em; }
  /* While the launcher fills the screen, hide the site chrome like an app's start screen. */
  html.launch-active .promo-bar, html.launch-active .site-header, html.launch-active .booking-bar, html.launch-active .app-tabbar, html.launch-active .ask-vh-trigger { opacity: 0; pointer-events: none; transform: translateY(-8px); }
  html.launch-active .app-tabbar { transform: translateY(100%); }
  .promo-bar, .site-header, .booking-bar, .app-tabbar, .ask-vh-trigger { transition: opacity 260ms ease, transform 300ms ease; }
}
@media (max-width: 360px) { .launch-icon { width: 56px; height: 56px; } .launch-tile b { font-size: 11.5px; } }

/* ================= Section screens (Netflix title page) (site.css 3500-3553) ================= */
@media (max-width: 640px) {
  .nf-screen:not([hidden]) { position: fixed; z-index: 48; inset: 0; display: block; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: var(--vh-screen-bg); color: var(--vh-text); padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }
  html.nf-open { overflow: hidden; }
  html.nf-open .promo-bar, html.nf-open .site-header, html.nf-open .booking-bar, html.nf-open .app-tabbar, html.nf-open .ask-vh-trigger, html.nf-open .back-to-top { opacity: 0 !important; pointer-events: none !important; }
  /* The screen is fixed and covers the launcher: take the launcher out of the Tab order and the accessibility tree (vh-core.js also sets inert on it) */
  html.nf-open .app-launch { visibility: hidden; }
  .nf-top { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; padding: calc(14px + env(safe-area-inset-top, 0px)) 20px 10px; background: var(--vh-screen-bg); }
  .nf-top h2 { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -.01em; text-transform: none; }
  .nf-top-actions { display: flex; gap: 6px; }
  .nf-top-actions button, .nf-top-actions a { display: grid; width: 42px; height: 42px; place-items: center; border: 0; background: none; color: #fff; cursor: pointer; }
  .nf-pills { position: sticky; top: calc(65px + env(safe-area-inset-top, 0px)); z-index: 3; display: flex; gap: 8px; overflow-x: auto; padding: 4px 14px 14px; background: var(--vh-screen-bg); scrollbar-width: none; }
  .nf-pills::-webkit-scrollbar { display: none; }
  .nf-pills > button, .nf-pill-select { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; background: rgba(255,255,255,.08); padding: 9px 16px; color: #fff; font: inherit; font-size: 14.5px; font-weight: 700; white-space: nowrap; }
  .nf-pills > button.is-on { border-color: var(--vh-accent); background: rgba(var(--vh-accent-rgb), .2); }
  .nf-pill-select select { position: absolute; inset: 0; width: 100%; opacity: 0; font-size: 16px; }
  /* the transparent native select is the control; its pill is the visible proxy, so keyboard focus is shown on the pill */
  .nf-pill-select:focus-within { border-color: var(--vh-accent); box-shadow: 0 0 0 2px rgba(var(--vh-accent-rgb), .35); }
  .nf-feature { position: relative; overflow: hidden; margin: 2px 16px 22px; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; aspect-ratio: 3 / 4.1; background: #111; }
  .nf-feature > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .nf-feature-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(4,14,14,.72) 68%, rgba(4,14,14,.96) 100%); }
  .nf-feature-copy { position: absolute; right: 0; bottom: 0; left: 0; display: grid; justify-items: center; gap: 10px; padding: 0 18px 18px; text-align: center; }
  .nf-feature-kicker { margin: 0; color: var(--vh-accent); font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
  .nf-feature h3 { margin: 0; font-family: var(--font-display, inherit); font-size: 30px !important; font-weight: 800; line-height: .98 !important; text-transform: uppercase; }
  .nf-feature h3 em { font-style: normal; color: var(--vh-accent); }
  .nf-tags { display: flex; align-items: center; gap: 10px; margin: 2px 0 4px; color: rgba(255,255,255,.88); font-size: 15px; }
  .nf-tags i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.55); }
  .nf-actions { display: grid; width: 100%; grid-template-columns: 1fr 1fr; gap: 10px; }
  .nf-actions.is-one { grid-template-columns: 1fr; }
  .nf-btn { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 8px; font: inherit; font-size: 15.5px; font-weight: 800; text-decoration: none; cursor: pointer; }
  .nf-btn-primary { background: #fff; color: #0a1818; }
  .nf-btn-ghost { background: rgba(255,255,255,.16); color: #fff; }
  .nf-row { margin-bottom: 22px; }
  .nf-row h4 { margin: 0 0 10px; padding: 0 16px; font-size: 19px; font-weight: 800; letter-spacing: -.005em; text-transform: none; }
  .nf-track { display: flex; gap: 8px; overflow-x: auto; padding: 0 16px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .nf-track::-webkit-scrollbar { display: none; }
  .nf-poster { position: relative; display: flex; flex: 0 0 38%; aspect-ratio: 2 / 3; flex-direction: column; justify-content: flex-end; gap: 3px; overflow: hidden; border: 0; border-radius: 8px; background: #1a2f30; padding: 10px; color: #fff; text-align: left; text-decoration: none; scroll-snap-align: start; font: inherit; cursor: pointer; }
  .nf-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .nf-poster-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.1) 30%, rgba(3,16,16,.92) 100%); }
  .nf-poster-icon { position: absolute; top: 8px; left: 8px; display: grid; width: 30px; height: 30px; place-items: center; border-radius: 8px; background: var(--vh-accent); color: var(--vh-primary-deep); }
  .nf-poster-icon svg { width: 18px; height: 18px; }
  .nf-poster b, .nf-poster small { position: relative; }
  .nf-poster b { font-size: 15px; font-weight: 800; line-height: 1.15; }
  .nf-poster small { color: var(--vh-accent-light); font-size: 11.5px; font-weight: 700; }
}
/* Every section screen keeps the app tab bar at the bottom (no Netflix dock). (site.css 3554-3564) */
@media (max-width: 640px) {
  html.nf-open .app-tabbar { opacity: 1 !important; pointer-events: auto !important; transform: none !important; }
  .nf-feature-intro { margin: 0 0 2px; color: rgba(255,255,255,.84); font-size: 14.5px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .nf-feature h3 span { color: var(--vh-accent); }
  .nf-poster-logo { aspect-ratio: 1 / 1; flex-basis: 30%; justify-content: flex-end; align-items: center; background: #15292a; border: 1px solid rgba(var(--vh-accent-rgb), .3); }
  .nf-poster-logo .nf-logo { position: absolute; top: 28%; left: 50%; width: 40px !important; height: 40px !important; transform: translateX(-50%); object-fit: contain; }
  .nf-poster-logo b { font-size: 13px; text-align: center; }
  .nf-actions .nf-btn { font-size: 14.5px; padding: 0 8px; }
}
/* ===== Phone: the app is the launcher + screens (site.css 3575-3592). The host's own sections are hidden by the
   runtime style vh-core.js injects from VH.hideOnPhone (replaces "main > section:not(.app-launch), .site-footer, ..."). ===== */
@media (max-width: 640px) {
  body { padding-bottom: 0 !important; }
  .app-launch { height: 100svh; }
  .launch-sheet { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important; }
  html.launch-active .app-tabbar { opacity: 1 !important; pointer-events: auto !important; transform: none !important; }
  .app-dock { grid-template-columns: repeat(var(--vh-tabs, 5), 1fr); align-items: center; padding-top: 8px; }
  .app-dock a { gap: 4px !important; font-size: 10.5px !important; }
  .app-dock a i { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 9px; background: var(--g, linear-gradient(145deg, #3b5b5c, #567d7e)); color: #fff; box-shadow: 0 4px 10px rgba(0,0,0,.3); opacity: .8; transition: transform 160ms ease, opacity 160ms ease; }
  .app-dock a.is-active i { opacity: 1; box-shadow: 0 0 0 2px var(--vh-accent), 0 4px 10px rgba(0,0,0,.3); }
  .app-dock a.is-active { color: var(--vh-accent) !important; }
  .app-dock a:active i { transform: scale(.92); }
  .ask-vh-trigger { bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; }
}
@media (max-width: 640px) { .back-to-top, .back-to-top-nudge { display: none !important; } .app-dock a:last-child i { background: var(--g, linear-gradient(145deg, #3b5b5c, #567d7e)); } }
/* Tab bar sizing: 62px tiles, same as the launcher tiles (index.live.html 3742) and the solid dock colour (vh-gold-shine 123) */
@media (max-width: 640px) {
  html body .app-tabbar { grid-template-columns: repeat(var(--vh-tabs, 5), 1fr) !important; padding-top: 10px !important; padding-bottom: calc(9px + env(safe-area-inset-bottom, 0px)) !important; }
  html body .app-tabbar a i { width: 62px !important; height: 62px !important; border-radius: 14px !important; }
  html body .app-tabbar a i svg { width: 30px; height: 30px; }
  html body .app-tabbar a span { font-size: 12.5px !important; }
  html.nf-open body .nf-screen { padding-bottom: calc(124px + env(safe-area-inset-bottom, 0px)) !important; scroll-padding-bottom: 124px; }
  html body .app-tabbar a span { font-size: .64rem; white-space: nowrap; }
  html.nf-open .app-tabbar { background: var(--vh-dock-bg) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
/* Under an open detail page the bar is hidden too (vh-patch-css 523) */
@media (max-width: 640px) {
  html.vhd-open .app-tabbar { display: none !important; }
}
/* Start screen: logo small in the top-left corner. (site.css 3599-3602) */
@media (max-width: 640px) {
  .launch-brand { position: static; }
  .launch-logo { position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); left: 16px; z-index: 2; width: 96px !important; }
  /* Headline lines: first line gold, the rest white (vh-patch-css slogan rules) */
  .launch-tag { font-family: var(--font-display, inherit); letter-spacing: .02em; line-height: 1.2; }
  .launch-tag span { display: block; color: #fff; font-weight: 800; font-size: calc(1em + 2px); }
  .launch-tag span:first-child { color: var(--vh-accent); }
  /* Phone launch prompt in bold */
  .launch-prompt { font-weight: 800; }
  /* Illustrated app icons: a tile whose icon is an image URL gets it as background-image (inline style) */
  .launch-icon, .app-dock a i { background-size: cover; background-position: center; background-repeat: no-repeat; }
}
/* Mini dock only while a section page is open; the start screen is just the tiles. (site.css 3594-3597)
   KEEP THIS THE LAST RULE IN THIS FILE THAT MENTIONS .app-tabbar OR .app-dock (pitfall P1): the html.vhd-open rule and the
   .app-dock a i icon rule are deliberately placed above it. */
@media (max-width: 640px) {
  html:not(.nf-open) .app-tabbar { display: none !important; }
  .launch-sheet { padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ================= vh-patch-css: screen refinements (587-596, 367-373, 376-388, 335-338) ================= */
@media (max-width: 640px) {
  .nf-track { scroll-padding-inline: 16px; }
  .nf-feature-intro { display: block !important; -webkit-line-clamp: unset !important; overflow: visible !important; }
  .nf-feature { display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: auto !important; min-height: calc((100vw - 32px) * 1.36); }
  .nf-feature-copy { position: relative !important; inset: auto !important; padding-top: 64px !important; }
  .nf-screen .nf-feature .nf-feature-kicker, .nf-screen .nf-feature h3 { font-family: var(--font-display, inherit); font-size: 17px !important; font-weight: 800; letter-spacing: .02em; line-height: 1.2 !important; text-transform: uppercase; text-wrap: balance; }
  .nf-screen .nf-feature .nf-feature-kicker { margin-bottom: -4px; }
  .nf-screen .nf-feature-shade { background: linear-gradient(180deg, rgba(4,14,14,0) 18%, rgba(4,14,14,.6) 40%, rgba(4,14,14,.9) 62%, rgba(4,14,14,.97) 100%); }
  .nf-screen .nf-feature .nf-feature-kicker, .nf-screen .nf-feature h3 { text-shadow: 0 1px 10px rgba(0,0,0,.65); }
  /* White buttons are dark gold, with the sweeping shine (vh-gold-shine 2-5) */
  .nf-btn-primary { background: var(--vh-accent) !important; color: var(--vh-primary-deep) !important; }
  .nf-btn-primary:active { background: #a6852f !important; }
  html body .nf-btn.nf-btn-primary { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(135deg, #a8873a 0%, var(--vh-accent-light) 45%, var(--vh-accent) 60%, #9a7a2e 100%) !important; box-shadow: 0 0 0 1px rgba(255,236,170,.25) inset, 0 6px 18px -8px rgba(217,189,106,.6); }
  html body .nf-btn.nf-btn-primary::after { content: ""; position: absolute; top: -20%; left: -60%; width: 45%; height: 140%; z-index: -1; pointer-events: none; background: linear-gradient(100deg, transparent 0%, rgba(255,250,225,.15) 30%, rgba(255,252,235,.85) 50%, rgba(255,250,225,.15) 70%, transparent 100%); transform: skewX(-20deg); animation: vhGoldShine 3.2s ease-in-out infinite; }
  .nf-row { position: relative; }
  .nf-poster-icon.vh-num { font-size: 12px; font-weight: 800; }
}
@keyframes vhGoldShine { 0% { left: -60%; } 55%, 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .nf-btn.nf-btn-primary::after { animation: none; display: none; } }

/* ================= Detail page #vh-detail (.vhd) (vh-patch-css 516-570, 672-688, 734-760, 835-905) ================= */
@media (max-width: 640px) {
  .vhd { position: fixed; inset: 0; z-index: 80; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: var(--vh-screen-bg); color: #fff; font-family: var(--font-body, inherit); text-align: left; animation: vhd-in .2s ease-out; }
  .vhd-hero { position: relative; height: 62vw; height: min(66vw, 46vh); height: min(66vw, 46svh); overflow: hidden; background: #111; }
  .vhd-hero img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 45%; }
  .vhd-hero.is-portrait { height: min(125vw, 64vh); height: min(125vw, 64svh); }
  .vhd-hero.is-portrait img { object-position: 50% 0%; }
  .vhd-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(var(--vh-screen-rgb), .5) 0%, rgba(var(--vh-screen-rgb), 0) 22%, rgba(var(--vh-screen-rgb), 0) 58%, var(--vh-screen-bg) 100%); }
  .vhd-hero.is-logo { display: grid; height: 200px; place-items: center; background: radial-gradient(circle at 50% 42%, #14686b, #073436 72%); }
  .vhd-hero.is-logo::after, .vhd-hero.is-empty::after { display: none; }
  .vhd-hero.is-empty { height: 96px; background: var(--vh-screen-bg); }
  .vhd-hero.is-logo img, .vhd-hero.is-logo svg { width: 92px !important; height: 92px !important; object-fit: contain; }
  .vhd-x { position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); right: 14px; z-index: 3; display: grid; width: 42px; height: 42px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); cursor: pointer; }
  .vhd-body { position: relative; z-index: 1; margin-top: -34px; padding: 0 22px calc(28px + env(safe-area-inset-bottom, 0px)); }
  .vhd .vhd-kicker { display: flex; align-items: center; gap: 7px; margin: 0 0 8px; color: var(--vh-accent); font-size: 11.5px; font-weight: 800; letter-spacing: .14em; line-height: 1.3; text-transform: uppercase; }
  .vhd-kicker svg { width: 15px; height: 15px; flex: none; }
  .vhd .vhd-title { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; color: #fff; font-family: var(--font-display, inherit); font-size: 27px !important; font-weight: 800; letter-spacing: normal !important; line-height: 1.12 !important; text-transform: none !important; }
  .vhd .vhd-mark { display: grid; flex: none; min-width: 46px; height: 46px; padding: 0 8px; place-items: center; border-radius: 12px; background: var(--vh-accent); color: var(--vh-primary-deep); font-size: 23px; line-height: 1; }
  .vhd .vhd-sub { margin: 0 0 16px; color: var(--vh-accent-light); font-size: 14.5px; font-weight: 700; line-height: 1.35; }
  .vhd .vhd-text { max-width: none; margin: 0 0 16px; color: rgba(255,255,255,.86); font-size: 17px; line-height: 1.6; }
  .vhd .vhd-title + .vhd-text { margin-top: 12px; }
  .vhd-icon { display: inline-grid; width: 44px; height: 44px; margin: 0 0 12px; place-items: center; border-radius: 12px; background: var(--vh-accent); color: var(--vh-primary-deep); }
  .vhd .vhd-list { display: grid; gap: 8px; margin: 4px 0 20px; padding: 0; list-style: none; }
  .vhd .vhd-list li { display: flex; align-items: flex-start; gap: 11px; margin: 0; padding: 13px 14px; border: 1px solid rgba(var(--vh-accent-rgb), .24); border-radius: 12px; background: rgba(255,255,255,.04); color: rgba(255,255,255,.92); font-size: 16px; line-height: 1.4; }
  .vhd .vhd-list li svg { flex: none; width: 19px; height: 19px; margin-top: 1px; color: var(--vh-accent); }
  .vhd-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
  .vhd-chip { display: inline-flex; align-items: center; min-height: 32px; padding: 6px 12px; border: 1px solid rgba(var(--vh-accent-rgb), .5); border-radius: 999px; background: rgba(var(--vh-accent-rgb), .1); color: #f1dca4; font-size: 13.5px; font-weight: 700; line-height: 1.25; }
  .vhd .vhd-quote { margin: 0 0 22px; padding: 0 0 0 16px; border-left: 3px solid var(--vh-accent); color: rgba(255,255,255,.88); font-family: var(--font-body, inherit); font-size: 16.5px; font-style: normal; line-height: 1.62; quotes: none; }
  .vhd-cta, .vhd-back { display: flex; width: 100%; min-height: 52px; align-items: center; justify-content: center; border-radius: 12px; font: inherit; font-size: 16px; font-weight: 800; cursor: pointer; }
  .vhd-cta { margin: 0 0 10px; border: 0; background: var(--vh-accent); color: var(--vh-primary-deep); }
  .vhd-back { margin-top: 8px; border: 1px solid rgba(255,255,255,.2); background: #fff; color: var(--vh-primary-deep); }
  .vhd button:focus-visible { outline: 2px solid #f1dca4; outline-offset: 3px; }
  /* Previous and next arrows on tile detail pages */
  .vhd-nav { position: absolute; top: 50%; z-index: 2; display: grid; width: 44px; height: 44px; margin-top: -22px; place-items: center; align-self: start; justify-self: start; padding: 0; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; background: rgba(var(--vh-screen-rgb), .55); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .12s ease, background-color .12s ease; }
  .vhd-nav.is-prev { left: 10px; }
  .vhd-nav.is-next { right: 10px; }
  .vhd-nav:active { transform: scale(.92); background: rgba(var(--vh-screen-rgb), .8); }
  .vhd-hero.is-logo .vhd-nav svg { width: 24px !important; height: 24px !important; }
  .vhd-live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .vhd-hero.go-next, .vhd-body.go-next { animation: vhd-from-right .24s ease-out backwards; }
  .vhd-hero.go-prev, .vhd-body.go-prev { animation: vhd-from-left .24s ease-out backwards; }
  /* Swipe between tiles, and the animated finger that shows how */
  .vhd { touch-action: pan-y pinch-zoom; }
  .vhd.is-dragging { -webkit-user-select: none; user-select: none; }
  .vhd-hint { position: absolute; left: 50%; top: 46%; z-index: 3; width: 0; height: 0; pointer-events: none; }
  .vhd-hint-flip, .vhd-hint-move { position: absolute; left: 0; top: 0; width: 0; height: 0; }
  .vhd-hint.is-prev .vhd-hint-flip { transform: scaleX(-1); }
  .vhd-hint-touch { position: absolute; left: -32px; top: -32px; width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.55) 0%, rgba(255,255,255,.28) 55%, rgba(255,255,255,0) 72%); opacity: 0; }
  .vhd-hint-hand { position: absolute; left: -21px; top: -3px; width: 54px; height: 66px; opacity: .78; filter: drop-shadow(0 3px 7px rgba(0,0,0,.5)); transform-origin: 21px 3px; transform: rotate(-12deg); }
  .vhd-hint.is-both .vhd-hint-move { animation: vhd-hm-both 3.6s ease-in-out .7s 2 both; }
  .vhd-hint.is-both .vhd-hint-touch { animation: vhd-ht-both 3.6s ease-in-out .7s 2 both; }
  .vhd-hint.is-next .vhd-hint-move, .vhd-hint.is-prev .vhd-hint-move { animation: vhd-hm-one 2.4s ease-in-out .7s 3 both; }
  .vhd-hint.is-next .vhd-hint-touch, .vhd-hint.is-prev .vhd-hint-touch { animation: vhd-ht-one 2.4s ease-in-out .7s 3 both; }
  /* Tile pages: explainer block, and a Back button sized to its text that sits at the bottom */
  .vhd:not([hidden]) { display: flex; flex-direction: column; }
  .vhd-hero { flex: none; }
  .vhd-body { display: flex; flex: 1 0 auto; flex-direction: column; }
  .vhd-body > * { flex: none; }
  .vhd-body > :nth-last-child(2) { margin-bottom: 26px; }
  .vhd .vhd-back { display: inline-flex; align-self: center; width: auto; max-width: 100%; min-height: 48px; gap: 6px; margin: auto 0 0; padding: 0 22px 0 14px; border-radius: 999px; font-size: 15.5px; white-space: nowrap; }
  .vhd .vhd-back svg { flex: none; margin-left: -2px; }
  .vhd-explain { margin: 6px 0 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); }
  .vhd .vhd-explain-label { margin: 0 0 8px; color: var(--vh-accent); font-size: 11.5px; font-weight: 800; letter-spacing: .14em; line-height: 1.3; text-transform: uppercase; }
  .vhd .vhd-explain .vhd-text:last-child { margin-bottom: 0; }
  .vhd .vhd-back { border: 0; background: var(--vh-accent); color: var(--vh-primary-deep); }
  .vhd .vhd-back:active { background: #a6852f; }
  /* Finger hint on tile rows that scroll sideways */
  .vhd-hint.is-row { z-index: 6; }
  .vhd-hint.is-row .vhd-hint-move, .vhd-hint.is-row .vhd-hint-touch { animation-iteration-count: 2; }
  /* Tile pages: one finger pass, then a gold arrow points at each arrow button */
  .vhd-hint.is-tour .vhd-hint-move, .vhd-hint.is-tour .vhd-hint-touch { animation-iteration-count: 1; }
  .vhd-point { position: absolute; top: 50%; z-index: 4; width: 42px; height: 42px; margin-top: -21px; pointer-events: none; filter: drop-shadow(0 2px 5px rgba(0,0,0,.55)); }
  .vhd-point svg { display: block; width: 42px; height: 42px; }
  .vhd-point.is-next { right: 60px; animation: vhd-point-next 1.5s ease-in-out both; }
  .vhd-point.is-prev { left: 60px; animation: vhd-point-prev 1.5s ease-in-out both; }
  .vhd-point.is-prev svg { transform: scaleX(-1); }
  .vhd-nav.is-pointed { border-color: #e2b64b; animation: vhd-nav-pulse .5s ease-out 3; }
  /* Tile pages with an icon: the title sits beside the icon, a little larger */
  .vhd-titlerow { display: flex; align-items: center; gap: 14px; margin: 2px 0 16px; }
  .vhd-titlerow .vhd-icon { flex: none; width: 52px; height: 52px; margin: 0; border-radius: 14px; }
  .vhd-titlerow .vhd-icon svg { width: 26px; height: 26px; }
  .vhd .vhd-titlerow .vhd-title { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 30px !important; line-height: 1.1 !important; text-wrap: balance; overflow-wrap: anywhere; }
  /* Tile pages: every picture is the same size, so the arrows never move between tiles */
  .vhd-hero, .vhd-hero.is-portrait, .vhd-hero.is-logo, .vhd-hero.is-empty { height: 62vw; height: min(66vw, 46vh); height: min(66vw, 46svh); }
  .vhd-hero.is-portrait img { object-position: 50% 22%; }
  /* Tile page titles in capitals; small gold labels 2px larger */
  .vhd .vhd-title { text-transform: uppercase !important; letter-spacing: .01em !important; }
  .vhd .vhd-kicker, .vhd .vhd-explain-label { font-size: 13.5px; }
  .vhd .vhd-kicker svg { width: 16px; height: 16px; }
}
@keyframes vhd-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes vhd-from-right { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes vhd-from-left { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
@keyframes vhd-hm-both {
  0% { opacity: 0; transform: translateX(0); } 8% { opacity: 1; transform: translateX(0); } 12% { opacity: 1; transform: translateX(0); }
  34% { opacity: 1; transform: translateX(-90px); } 40% { opacity: 0; transform: translateX(-90px); } 41% { opacity: 0; transform: translateX(0); }
  47% { opacity: 1; transform: translateX(0); } 51% { opacity: 1; transform: translateX(0); }
  73% { opacity: 1; transform: translateX(90px); } 79% { opacity: 0; transform: translateX(90px); } 100% { opacity: 0; transform: translateX(0); }
}
@keyframes vhd-ht-both {
  0%, 10% { opacity: 0; transform: scale(.6); } 14%, 34% { opacity: 1; transform: scale(1); } 38% { opacity: 0; transform: scale(1.35); }
  49% { opacity: 0; transform: scale(.6); } 53%, 73% { opacity: 1; transform: scale(1); } 77% { opacity: 0; transform: scale(1.35); } 100% { opacity: 0; transform: scale(.6); }
}
@keyframes vhd-hm-one {
  0% { opacity: 0; transform: translateX(0); } 10% { opacity: 1; transform: translateX(0); } 16% { opacity: 1; transform: translateX(0); }
  50% { opacity: 1; transform: translateX(-92px); } 60% { opacity: 0; transform: translateX(-92px); } 100% { opacity: 0; transform: translateX(0); }
}
@keyframes vhd-ht-one {
  0%, 12% { opacity: 0; transform: scale(.6); } 17%, 50% { opacity: 1; transform: scale(1); } 57% { opacity: 0; transform: scale(1.35); } 100% { opacity: 0; transform: scale(.6); }
}
@keyframes vhd-point-next {
  0% { opacity: 0; transform: translateX(-14px); } 14% { opacity: 1; transform: translateX(0); }
  27% { transform: translateX(8px); } 40% { transform: translateX(0); } 53% { transform: translateX(8px); } 66% { transform: translateX(0); }
  79% { opacity: 1; transform: translateX(8px); } 100% { opacity: 0; transform: translateX(8px); }
}
@keyframes vhd-point-prev {
  0% { opacity: 0; transform: translateX(14px); } 14% { opacity: 1; transform: translateX(0); }
  27% { transform: translateX(-8px); } 40% { transform: translateX(0); } 53% { transform: translateX(-8px); } 66% { transform: translateX(0); }
  79% { opacity: 1; transform: translateX(-8px); } 100% { opacity: 0; transform: translateX(-8px); }
}
@keyframes vhd-nav-pulse { 0% { box-shadow: 0 0 0 0 rgba(226,182,75,.75); } 100% { box-shadow: 0 0 0 12px rgba(226,182,75,0); } }
@media (prefers-reduced-motion: reduce) {
  .vhd { animation: none; }
  .vhd-hero.go-next, .vhd-body.go-next, .vhd-hero.go-prev, .vhd-body.go-prev { animation: none; }
  .vhd-nav { transition: none; }
  .vhd-point, .vhd-nav.is-pointed { animation: none; }
}