/* =====================================================================
   Rownez Resort — public website
   Reads from tokens.css. Nothing hard-codes a colour below this line.
   ===================================================================== */

body.rz-public {
  margin: 0;
  font-family: var(--rz-font-body);
  font-size: var(--rz-text-base);
  line-height: var(--rz-leading-body);
  color: var(--rz-text);
  background: var(--rz-bg);
}

/* ---- Page loader ----------------------------------------------------
   Shown from first paint (the stylesheet blocks render, so this never
   flashes unstyled), hidden by public.js once the page has fully
   loaded — and self-removing via CSS animation as a no-JS fallback. */
.rz-page-loader {
  position: fixed; inset: 0; z-index: 2000;
  display: grid; place-items: center;
  background: var(--rz-bg);
  opacity: 1;
  transition: opacity 0.5s var(--rz-ease), visibility 0.5s var(--rz-ease);
  animation: rz-loader-fallback-hide 0s 2.8s forwards;
}
.rz-page-loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes rz-loader-fallback-hide {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

.rz-page-loader__mark { position: relative; width: 88px; height: 88px; display: grid; place-items: center; }
.rz-page-loader__mark .rz-brand__logo {
  /* logo.png is a wide (1536x1024, 3:2) mark, not square — sizing by
     height alone rendered it ~108px wide, spilling past this 88px ring
     on both sides. Sized by width instead, with a max-height safety net
     in case the source image ever changes to a taller ratio. */
  width: 56px; height: auto; max-height: 44px;
  animation: rz-loader-pulse 1.8s ease-in-out infinite;
}
.rz-page-loader__ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid var(--rz-border);
  border-top-color: var(--rz-accent);
  animation: rz-loader-spin 0.9s linear infinite;
}
@keyframes rz-loader-spin { to { transform: rotate(360deg); } }
@keyframes rz-loader-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(0.92); }
}
@media (prefers-reduced-motion: reduce) {
  .rz-page-loader__ring { animation: none; border-top-color: var(--rz-border); }
  .rz-page-loader__mark .rz-brand__logo { animation: none; }
}

.rz-public h1, .rz-public h2, .rz-public h3 {
  font-family: var(--rz-font-display);
  font-weight: var(--rz-weight-light);
  line-height: var(--rz-leading-tight);
  letter-spacing: -0.015em;
  margin: 0;
}

.rz-container {
  width: 100%;
  max-width: var(--rz-container);
  margin: 0 auto;
  padding: 0 var(--rz-space-5);
}

.rz-section { padding: var(--rz-space-9) 0; }
.rz-section--tight { padding: var(--rz-space-7) 0; }
/* Many pages put both classes on one element; the section's padding
   shorthand must not wipe the container's side gutters, or content runs
   to the screen edges on phones. */
.rz-container.rz-section { padding-left: var(--rz-space-5); padding-right: var(--rz-space-5); }
.rz-section--alt { background: var(--rz-bg-subtle); }

.rz-section__head { max-width: 640px; margin-bottom: var(--rz-space-7); }
.rz-section__title { font-size: var(--rz-text-3xl); margin-top: var(--rz-space-3); }
.rz-section__lede { margin-top: var(--rz-space-4); color: var(--rz-text-muted); }

/* Centred section heads get the gold rule centred too. */
.rz-section__head--center { margin-inline: auto; text-align: center; }
.rz-section__head--center .rz-rule::after { margin-inline: auto; }

/* ---- Utility top bar --------------------------------------------------
   Quiet on purpose — a thin strip of real contact info, not a second nav
   competing with the header below it. */
.rz-topbar {
  background: var(--rz-navy-900);
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.7rem;
  min-height: 2.25rem;
  max-height: 2.25rem;
  overflow: hidden;
  transition: min-height var(--rz-duration) var(--rz-ease),
              max-height var(--rz-duration) var(--rz-ease),
              opacity var(--rz-duration) var(--rz-ease);
}
/* Tucked away once the visitor starts scrolling, on every page (hero
   or not) — it's a courtesy at the very top of a fresh load, not
   something worth permanent space once someone's reading the page. */
body.rz-scrolled .rz-topbar { min-height: 0; max-height: 0; opacity: 0; }
.rz-topbar__inner {
  max-width: var(--rz-container-wide);
  margin: 0 auto;
  padding: 0.4rem var(--rz-space-5);
  display: flex; align-items: center; justify-content: space-between;
}
.rz-topbar__contact { display: flex; gap: var(--rz-space-5); }
.rz-topbar__contact a { color: rgba(255, 255, 255, 0.6); display: inline-flex; align-items: center; gap: var(--rz-space-2); white-space: nowrap; }
.rz-topbar__contact a:hover { color: var(--rz-gold-bright); }
.rz-topbar__meta { display: flex; align-items: center; gap: var(--rz-space-5); }
.rz-topbar__stars { color: var(--rz-gold-bright); letter-spacing: 2px; font-size: 0.65rem; }
.rz-topbar__social { display: flex; gap: var(--rz-space-3); }
.rz-topbar__social a {
  display: inline-flex;
  color: var(--rz-gold-bright);
  font-size: var(--rz-text-sm);
  opacity: 0; transform: translateY(-6px);
  animation: rz-topbar-social-in 500ms var(--rz-ease-out) forwards;
  transition: color var(--rz-duration) var(--rz-ease), transform var(--rz-duration) var(--rz-ease-out);
}
.rz-topbar__social a:nth-child(1) { animation-delay: 60ms; }
.rz-topbar__social a:nth-child(2) { animation-delay: 130ms; }
.rz-topbar__social a:nth-child(3) { animation-delay: 200ms; }
.rz-topbar__social a:nth-child(4) { animation-delay: 270ms; }
.rz-topbar__social a:hover, .rz-topbar__social a:focus-visible {
  color: var(--rz-white);
  transform: scale(1.2) rotate(-6deg);
}
@keyframes rz-topbar-social-in {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .rz-topbar__social a { animation: none; opacity: 1; transform: none; }
  .rz-topbar__social a:hover, .rz-topbar__social a:focus-visible { transform: none; }
}

/* ---- Header -------------------------------------------------------- */
.rz-site-header {
  position: sticky; top: 0;
  z-index: var(--rz-z-header);
  background: var(--rz-glass-bg);
  backdrop-filter: blur(var(--rz-glass-blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--rz-glass-blur)) saturate(150%);
  border-bottom: 1px solid var(--rz-border);
  transition: box-shadow var(--rz-duration) var(--rz-ease);
}
.rz-site-header.is-stuck { box-shadow: var(--rz-shadow-md); }

/* Brand and actions are the only two flex children — justify-content:
   space-between pins them to the true edges no matter what. Nav is
   pulled OUT of that flow entirely (position: absolute, centred via
   left:50%/translateX) so it can never skew toward whichever side is
   heavier, and — just as important — can never affect where "actions"
   sits: on mobile, nav is display:none and simply isn't there, so
   space-between still cleanly pins brand/actions to the edges instead
   of leaving a phantom gap where a centred column used to be. This
   replaced an earlier `1fr auto 1fr` CSS Grid attempt that measured
   correctly in isolation but, combined with un-nowrapped nav text,
   let the browser shrink the middle track by wrapping "Rooms & Suites"
   across three lines rather than overflowing — a real, ugly bug, not a
   preference. */
.rz-site-header__inner {
  position: relative;
  max-width: var(--rz-container-wide);
  margin: 0 auto;
  padding: 0 var(--rz-space-5);
  height: var(--rz-header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rz-space-5);
}

/* The real logo — defined here because the public site never loads
   app.css (that stylesheet is for the admin/auth shell only), so without
   this the logo would have no sizing rules at all. */
.rz-brand__logo { display: block; height: 52px; width: auto; }
.rz-brand__logo--lg { height: 96px; }

.rz-site-brand { display: flex; align-items: center; flex: 0 0 auto; }

/* Fintech-plain nav type: sentence case, no letter-spaced small-caps —
   that treatment is the one brand ornament kept for buttons and section
   eyebrows elsewhere on the site, deliberately not repeated here so the
   nav itself reads as calm, product-grade navigation. */
.rz-site-nav {
  /* Was position:absolute + left:50% — centered on the whole header
     regardless of how wide the logo or the actions cluster (locale
     switcher, theme toggle, sign-in) actually were, so at container
     widths where nav content and the actions block were both wide
     enough, the two rendered on top of each other. A flex sibling that
     claims the space between them and centers within *that* can't
     overlap either — it shrinks the middle instead. */
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--rz-space-6);
  white-space: nowrap;
}
.rz-site-nav a {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.35em;
  padding: var(--rz-space-2) var(--rz-space-3);
  border-radius: var(--rz-radius-pill);
  color: var(--rz-text-muted);
  font-size: var(--rz-text-sm);
  font-weight: var(--rz-weight-medium);
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--rz-duration) var(--rz-ease);
}
.rz-site-nav a::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(circle, var(--rz-gold-bright) 0%, var(--rz-gold) 100%);
  transform: scale(0);
  transition: transform var(--rz-duration-slow) var(--rz-ease-out);
}
.rz-site-nav a:hover::before, .rz-site-nav a:focus-visible::before { transform: scale(1); }
.rz-site-nav a:hover, .rz-site-nav a:focus-visible { color: var(--rz-text-on-gold); }
.rz-site-nav a.is-active { color: var(--rz-text); }

/* One gold underline marks the current page. Nothing else is underlined. */
.rz-site-nav a.is-active::after {
  content: '';
  position: absolute; left: var(--rz-space-3); right: var(--rz-space-3); bottom: 2px;
  height: 1px;
  background: var(--rz-accent);
}

/* ---- Nav dropdown (desktop only — mobile gets the flyout menu) ------ */
.rz-nav-item { position: relative; }
.rz-nav-item__trigger {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.35em;
  background: none; border: none; padding: var(--rz-space-2) var(--rz-space-3);
  border-radius: var(--rz-radius-pill);
  color: var(--rz-text-muted);
  font-family: inherit;
  font-size: var(--rz-text-sm);
  font-weight: var(--rz-weight-medium);
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--rz-duration) var(--rz-ease);
}
.rz-nav-item__trigger::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(circle, var(--rz-gold-bright) 0%, var(--rz-gold) 100%);
  transform: scale(0);
  transition: transform var(--rz-duration-slow) var(--rz-ease-out);
}
.rz-nav-item__chevron { font-size: 0.6rem; transition: transform var(--rz-duration-fast) var(--rz-ease); }
.rz-nav-item:hover .rz-nav-item__trigger,
.rz-nav-item:focus-within .rz-nav-item__trigger { color: var(--rz-text-on-gold); }
.rz-nav-item:hover .rz-nav-item__trigger::before,
.rz-nav-item:focus-within .rz-nav-item__trigger::before { transform: scale(1); }
.rz-nav-item:hover .rz-nav-item__chevron,
.rz-nav-item:focus-within .rz-nav-item__chevron { transform: rotate(180deg); }

.rz-nav-item__panel {
  position: absolute; top: 100%; left: 50%;
  transform: translate(-50%, 4px);
  min-width: 208px;
  margin-top: var(--rz-space-4);
  padding: var(--rz-space-2);
  background: var(--rz-surface);
  border: 1px solid var(--rz-border);
  border-radius: var(--rz-radius-lg);
  box-shadow: var(--rz-shadow-xl);
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--rz-duration-fast) var(--rz-ease), transform var(--rz-duration-fast) var(--rz-ease), visibility var(--rz-duration-fast);
}
/* A small diamond pointer ties the panel visually back to its trigger —
   the detail that makes a dropdown read as "attached" rather than a
   card that happens to be floating nearby. */
.rz-nav-item__panel::before {
  content: '';
  position: absolute; top: -5px; left: 50%;
  width: 10px; height: 10px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--rz-surface);
  border-left: 1px solid var(--rz-border);
  border-top: 1px solid var(--rz-border);
  border-radius: 2px 0 0 0;
}
.rz-nav-item:hover .rz-nav-item__panel,
.rz-nav-item:focus-within .rz-nav-item__panel {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, 0);
}
.rz-nav-item__panel a {
  position: relative;
  display: flex; align-items: center; gap: var(--rz-space-3);
  padding: var(--rz-space-3);
  border-radius: var(--rz-radius-md);
  color: var(--rz-text-muted) !important;
  font-size: var(--rz-text-sm);
  font-weight: var(--rz-weight-medium);
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--rz-duration) var(--rz-ease);
}
.rz-nav-item__panel a::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background: radial-gradient(circle, var(--rz-gold-bright) 0%, var(--rz-gold) 100%);
  transform: scale(0);
  transition: transform var(--rz-duration-slow) var(--rz-ease-out);
}
.rz-nav-item__panel a i { color: var(--rz-accent); width: 1.1em; font-size: 0.95em; transition: color var(--rz-duration) var(--rz-ease), transform var(--rz-duration-slow) var(--rz-ease-out); }
.rz-nav-item__panel a:hover::before { transform: scale(1); }
.rz-nav-item__panel a:hover { color: var(--rz-text-on-gold) !important; }
.rz-nav-item__panel a:hover i { color: var(--rz-text-on-gold); transform: scale(1.1); }

.rz-site-header__actions {
  display: flex; align-items: center; gap: var(--rz-space-3);
}

.rz-header-divider {
  width: 1px; height: 22px;
  background: var(--rz-border);
}

.rz-site-header__signin {
  display: inline-flex; align-items: center; gap: 0.4em;
  color: var(--rz-text-muted);
  font-size: var(--rz-text-xs);
  font-weight: var(--rz-weight-medium);
  letter-spacing: var(--rz-tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--rz-duration-fast) var(--rz-ease);
}
.rz-site-header__signin:hover { color: var(--rz-text); }

.rz-icon-btn--ghost { background: transparent; }

/* ---- Language / currency switcher ----------------------------------
   Never had its own styling at all (in any stylesheet) — rendered as
   two bare native <select> elements with a visible gap between them,
   reading as two disconnected controls rather than one. A shared pill
   background with a hairline divider between the two <select>s is what
   actually fixes that — reads as one "language / currency" control,
   the way a fintech settings switcher would. */
.rz-locale-switcher {
  align-items: stretch;
  background: var(--rz-surface-sunken);
  border-radius: var(--rz-radius-pill);
  overflow: hidden;
}
.rz-locale-switcher select {
  border: none;
  background: transparent;
  padding: 0.45rem 1.5rem 0.45rem 0.85rem;
  font-family: var(--rz-font-body);
  font-size: var(--rz-text-xs);
  font-weight: var(--rz-weight-medium);
  color: var(--rz-text-muted);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%235A6B7D'%3E%3Cpath d='M4.6 6h6.8L8 10.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 9px;
}
.rz-locale-switcher select + select { border-left: 1px solid var(--rz-border); }
.rz-locale-switcher select:hover,
.rz-locale-switcher select:focus { color: var(--rz-text); background-color: var(--rz-border); }
.rz-locale-switcher select:focus-visible { outline: none; box-shadow: var(--rz-focus-ring); }

.rz-site-menu__locale { margin-top: var(--rz-space-5); }
.rz-site-menu__locale > .rz-eyebrow { display: block; margin-bottom: var(--rz-space-2); }
.rz-site-menu__locale .rz-locale-switcher { width: 100%; border: 1px solid var(--rz-border); }
.rz-site-menu__locale .rz-locale-switcher select { flex: 1; padding-top: 0.65rem; padding-bottom: 0.65rem; }

/* ---- Mobile menu --------------------------------------------------- */
.rz-site-menu {
  position: fixed; inset: 0;
  z-index: var(--rz-z-modal);
  background: var(--rz-overlay);
}
.rz-site-menu__panel {
  position: absolute; inset: 0 0 0 auto;
  width: min(420px, 100%);
  padding: var(--rz-space-5);
  background: var(--rz-surface);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--rz-duration) var(--rz-ease-out);
}
.rz-site-menu.is-open .rz-site-menu__panel { transform: translateX(0); }
.rz-site-menu__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--rz-space-5);
}
.rz-site-menu nav { display: flex; flex-direction: column; }
.rz-site-menu nav a {
  padding: var(--rz-space-4) 0;
  border-bottom: 1px solid var(--rz-border);
  color: var(--rz-text);
  font-family: var(--rz-font-display);
  font-size: var(--rz-text-xl);
}
.rz-site-menu__contact { margin-top: var(--rz-space-4); text-align: center; color: var(--rz-text-muted); font-size: var(--rz-text-sm); }

/* ---- Hero ---------------------------------------------------------- */
.rz-hero {
  position: relative;
  min-height: clamp(520px, 84vh, 900px);
  display: grid;
  align-items: end;
  overflow: hidden;
  background: var(--rz-navy-900);
}
.rz-hero__media { position: absolute; inset: 0; }
.rz-hero__media img,
.rz-hero__media video {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1);
}

/* Ken Burns — a slow, continuous drift instead of a static photo behind
   the text. Only the active slide's image moves; .rz-hero clips the
   overflow so the zoom never shows a hard edge. Respects reduced-motion
   the same way the slider's own autoplay already does. */
@media (prefers-reduced-motion: no-preference) {
  .rz-hero__slide.is-active .rz-hero__media img,
  .rz-hero__slide.is-active .rz-hero__media video {
    animation: rz-kenburns 9s var(--rz-ease) forwards;
  }
}
@keyframes rz-kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

/* The scrim is heaviest at the bottom, where the words are. */
.rz-hero__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(5, 27, 51, 0.42) 0%,
    rgba(5, 27, 51, 0.18) 35%,
    rgba(5, 27, 51, 0.82) 100%);
}

.rz-hero__inner {
  position: relative;
  max-width: var(--rz-container);
  margin: 0 auto;
  padding: var(--rz-space-9) var(--rz-space-5) var(--rz-space-8);
  color: var(--rz-white);
}
.rz-hero__eyebrow { color: var(--rz-gold); }
.rz-hero__title {
  max-width: 15ch;
  margin: var(--rz-space-4) 0;
  font-size: clamp(2.2rem, 5.5vw, var(--rz-text-4xl));
  color: var(--rz-white);
}
.rz-hero__lede {
  max-width: 46ch;
  color: rgba(255, 255, 255, 0.86);
  font-size: var(--rz-text-lg);
  font-weight: var(--rz-weight-light);
}
.rz-hero__actions { display: flex; flex-wrap: wrap; gap: var(--rz-space-3); margin-top: var(--rz-space-6); }

.rz-hero__scroll {
  position: absolute; left: 50%; bottom: var(--rz-space-4);
  /* line-height 1 keeps the link's box to the icon itself; with the page's
     line-height it rose into the slide dots above and swallowed their clicks. */
  line-height: 1;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.65);
  animation: rz-nudge 2.4s var(--rz-ease) infinite;
  z-index: 2;
}
@keyframes rz-nudge { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }

/* ---- Hero slider — each slide stacks on the others. The photo
   crossfades; the caption (eyebrow + title + lede + actions) cuts out
   fast on the outgoing slide, then the incoming one's pieces rise up
   into place from below, one after another, matching the client's real
   site (rownez-resort-media/Home...html — a Revolution Slider export
   whose layers all start at data-frame_0="y:50px" and glide up to their
   resting position with a ~200ms stagger between layers: label, then
   headline, then subtext). The outgoing/incoming swap is still staggered
   in time (the incoming caption only starts after the outgoing one has
   fully cleared) for the same reason the photo doesn't crossfade its
   text: two full text blocks visible in the same spot at once read as
   broken, not smooth. Only .is-active is interactive, so screen readers
   and tab order skip the slides waiting their turn. ------------------ */
/* Every slide is stacked full-size; hidden ones fade their contents but the
   slide box itself would still sit on top and swallow clicks meant for the
   active slide's buttons, so only the active slide takes pointer events. */
.rz-hero__slide { position: absolute; inset: 0; pointer-events: none; }
.rz-hero__slide.is-active { pointer-events: auto; }
.rz-hero__slide .rz-hero__media {
  opacity: 0;
  transition: opacity 900ms var(--rz-ease), visibility 0s linear 900ms;
  visibility: hidden;
}
.rz-hero__slide.is-active .rz-hero__media {
  opacity: 1;
  visibility: visible;
  transition: opacity 900ms var(--rz-ease), visibility 0s linear 0s;
}
.rz-hero__slide .rz-hero__inner {
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms var(--rz-ease), visibility 0s linear 200ms;
}
.rz-hero__slide.is-active .rz-hero__inner {
  opacity: 1;
  visibility: visible;
  transition: opacity 200ms var(--rz-ease) 250ms, visibility 0s linear 250ms;
}
@media (prefers-reduced-motion: no-preference) {
  .rz-hero__slide .rz-hero__eyebrow,
  .rz-hero__slide .rz-hero__title,
  .rz-hero__slide .rz-hero__lede,
  .rz-hero__slide .rz-hero__actions {
    opacity: 0;
    transform: translateY(48px);
  }
  .rz-hero__slide.is-active .rz-hero__eyebrow,
  .rz-hero__slide.is-active .rz-hero__title,
  .rz-hero__slide.is-active .rz-hero__lede,
  .rz-hero__slide.is-active .rz-hero__actions {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 1400ms var(--rz-ease), transform 1400ms var(--rz-ease);
  }
  .rz-hero__slide.is-active .rz-hero__eyebrow  { transition-delay: 300ms; }
  .rz-hero__slide.is-active .rz-hero__title    { transition-delay: 500ms; }
  .rz-hero__slide.is-active .rz-hero__lede     { transition-delay: 700ms; }
  .rz-hero__slide.is-active .rz-hero__actions  { transition-delay: 900ms; }
}
/* Pulls the caption (eyebrow/title/lede/actions) down toward the dot
   strip on any hero that actually has one — :has() scopes this to
   multi-slide heroes only, so single-slide interior pages keep the
   plain vertical centering .rz-hero--center was built for. */
.rz-hero--center:has(.rz-hero__dots) .rz-hero__inner { transform: translateY(70px); }
.rz-hero__dots {
  position: absolute; left: 50%; bottom: var(--rz-space-7);
  transform: translateX(-50%);
  display: flex; gap: var(--rz-space-2);
  z-index: 2;
}
.rz-hero__dot {
  width: 8px; height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: background var(--rz-duration-fast) var(--rz-ease), transform var(--rz-duration-fast) var(--rz-ease);
}
.rz-hero__dot.is-active { background: var(--rz-gold); transform: scale(1.3); }
.rz-hero__dot:hover { background: rgba(255, 255, 255, 0.7); }

/* ---- Centered hero (CMS interior pages) — the default hero is bottom-
   left aligned for the homepage's editorial feel; interior pages read
   better with the title dead-centered over a full-bleed carousel. */
.rz-hero--center { align-items: center; }
.rz-hero--center .rz-hero__inner { margin: 0 auto; text-align: center; }
.rz-hero--center .rz-hero__title,
.rz-hero--center .rz-hero__lede { margin-left: auto; margin-right: auto; }
.rz-hero--center .rz-hero__actions { justify-content: center; }

/* Shorter, interior-page height — kept separate from --center so the
   homepage can centre its caption without losing its taller, more
   dramatic hero. CMS pages get both classes; the homepage gets only
   --center. */
.rz-hero--compact { min-height: clamp(480px, 70vh, 760px); }

/* ---- Header blended into the hero ------------------------------------
   On any page that opens on a full-bleed hero, the header starts
   transparent and floats over the image instead of sitting in its own
   opaque strip above it — the .is-stuck class (already toggled by
   initHeader() on scroll) is what switches it back to solid once the
   visitor scrolls past the hero. Scoped to body.has-hero so every other
   page keeps the normal always-solid header untouched. */
/* The topbar (phone/email/socials) stays put rather than scrolling
   away with the page, so it's always reachable — it just needs to be
   fixed like the header now sitting below it, with that header's own
   offset pushed down by exactly the topbar's height so the two stack
   without a gap or an overlap. !important because .rz-topbar also
   carries Bootstrap's d-lg-block utility class, which sets its own
   display/position at this breakpoint and would otherwise win. */
body.has-hero .rz-topbar {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: calc(var(--rz-z-header) + 1);
}
body.has-hero .rz-site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  transition: box-shadow var(--rz-duration) var(--rz-ease), top var(--rz-duration) var(--rz-ease);
}
/* The topbar itself is d-none below lg (Bootstrap's own breakpoint,
   992px) — this offset only has anything to sit below once the topbar
   is actually there to reserve the space for, so it's scoped to the
   same breakpoint. Without this, mobile got a permanent blank 36px gap
   above the logo where the (invisible) topbar would have been. */
@media (min-width: 992px) {
  body.has-hero .rz-site-header { top: 2.25rem; }
}
/* Topbar tucks away once scrolled, and the fixed hero header — which
   normally sits below it — reclaims that space rather than leaving a
   gap, since a fixed element can't reflow into the space a sibling's
   collapse frees up the way normal document flow would. */
body.rz-scrolled.has-hero .rz-site-header { top: 0; }
body.has-hero .rz-site-header.is-stuck {
  background: var(--rz-glass-bg);
  backdrop-filter: blur(var(--rz-glass-blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--rz-glass-blur)) saturate(150%);
  border-bottom-color: var(--rz-border);
}

body.has-hero .rz-site-header:not(.is-stuck) .rz-site-nav a,
body.has-hero .rz-site-header:not(.is-stuck) .rz-nav-item__trigger,
body.has-hero .rz-site-header:not(.is-stuck) .rz-site-header__signin,
body.has-hero .rz-site-header:not(.is-stuck) .rz-locale-switcher select {
  color: rgba(255, 255, 255, 0.92);
}
body.has-hero .rz-site-header:not(.is-stuck) .rz-site-header__signin:hover {
  color: var(--rz-white);
}
body.has-hero .rz-site-header:not(.is-stuck) .rz-site-nav a:hover,
body.has-hero .rz-site-header:not(.is-stuck) .rz-site-nav a:focus-visible,
body.has-hero .rz-site-header:not(.is-stuck) .rz-nav-item:hover .rz-nav-item__trigger,
body.has-hero .rz-site-header:not(.is-stuck) .rz-nav-item:focus-within .rz-nav-item__trigger {
  color: var(--rz-text-on-gold);
}
body.has-hero .rz-site-header:not(.is-stuck) .rz-header-divider { background: rgba(255, 255, 255, 0.25); }
body.has-hero .rz-site-header:not(.is-stuck) .rz-locale-switcher {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
}
body.has-hero .rz-site-header:not(.is-stuck) .rz-locale-switcher select option { color: var(--rz-text); }
body.has-hero .rz-site-header:not(.is-stuck) .rz-locale-switcher select + select { border-left-color: rgba(255, 255, 255, 0.25); }
body.has-hero .rz-site-header:not(.is-stuck) .rz-icon-btn {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.92);
}
body.has-hero .rz-site-header:not(.is-stuck) .rz-icon-btn:hover { color: var(--rz-gold-bright); border-color: var(--rz-gold-bright); }
body.has-hero .rz-site-header:not(.is-stuck) .rz-brand__logo { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35)); }

/* ---- Booking widget ------------------------------------------------ */
.rz-book-widget {
  position: relative;
  z-index: 2;
  max-width: var(--rz-container);
  margin: calc(var(--rz-space-7) * -1) auto var(--rz-space-8);
  padding: var(--rz-space-5);
  background: var(--rz-surface);
  border: 1px solid var(--rz-border);
  border-radius: var(--rz-radius-xl);
  box-shadow: var(--rz-shadow-lg);
  /* The fixed header sits on top of the page (position:fixed, z-index above
     this widget) — without this, scrolling to #booking-widget (the "skip to
     booking" link, or just scrolling down) lands its top row of labels
     directly underneath the header instead of below it. */
  scroll-margin-top: calc(var(--rz-header-height) + var(--rz-space-4));
}
/* The widget card already separates the hero from what follows, so the
   next section starts closer instead of stacking a margin on a full
   section's top padding (that stack read as an empty band). */
.rz-book-widget { margin-bottom: 0; }
.rz-book-widget + .rz-section { padding-top: var(--rz-space-8); }
@media (max-width: 991.98px) {
  .rz-book-widget { margin: var(--rz-space-5) var(--rz-space-4) 0; }
  .rz-book-widget + .rz-section { padding-top: var(--rz-space-7); }
}

.rz-book-widget__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  gap: var(--rz-space-4);
  align-items: end;
}
/* Grid items default to min-width: auto, which resolves to their content's
   own preferred width — a native <input type="date"> has a wider intrinsic
   width than a narrow track allows, so without this the date columns were
   pushed past their 1fr share (and past the card's own padding) instead of
   shrinking to fit it. */
.rz-book-widget__grid > * { min-width: 0; }
.rz-book-widget__grid .rz-input { width: 100%; box-sizing: border-box; }
@media (max-width: 991.98px) {
  .rz-book-widget__grid { grid-template-columns: 1fr 1fr; }
  .rz-book-widget__grid > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 479.98px) {
  /* Even a shrink-to-fit date input reads cramped at two per row below
     ~480px — one field per row gives each the room a touch target needs. */
  .rz-book-widget__grid { grid-template-columns: 1fr; }
  .rz-book-widget__grid > :last-child { grid-column: 1; }
}

.rz-book-widget__lookup {
  margin: var(--rz-space-4) 0 0;
  text-align: center;
  font-size: var(--rz-text-sm);
  color: var(--rz-text-muted);
}
.rz-book-widget__lookup a {
  display: inline-flex; align-items: center; gap: 0.35em;
  color: var(--rz-accent);
  font-weight: var(--rz-weight-semibold);
}
.rz-book-widget__lookup a:hover { color: var(--rz-accent-hover); }
.rz-book-widget__lookup a i { font-size: 0.85em; transition: transform var(--rz-duration-fast) var(--rz-ease); }
.rz-book-widget__lookup a:hover i { transform: translateX(3px); }

/* ---- Scroll reveal (home page) ---------------------------------------
   Section headings and grid cards fade and rise into place once, the
   first time they scroll into view — wired up in initScrollReveal()
   (public.js), which adds .rz-reveal-ready before observing, so a JS
   failure or slow load leaves content fully visible rather than stuck
   invisible. Scoped to body.rz-home since .rz-section__head/.rz-grid are
   shared layout classes used well beyond the home page. */
body.rz-home .rz-section__head.rz-reveal-ready,
body.rz-home .rz-grid > .rz-reveal-ready {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--rz-ease), transform 0.7s var(--rz-ease);
}
body.rz-home .rz-grid > .rz-reveal-ready {
  transition-delay: calc(var(--reveal-index, 0) * 90ms);
}
body.rz-home .rz-section__head.rz-reveal-ready.is-revealed,
body.rz-home .rz-grid > .rz-reveal-ready.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  body.rz-home .rz-section__head.rz-reveal-ready,
  body.rz-home .rz-grid > .rz-reveal-ready {
    opacity: 1; transform: none; transition: none;
  }
}

/* ---- Cards --------------------------------------------------------- */
.rz-grid { display: grid; gap: var(--rz-space-5); }
.rz-grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.rz-grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.rz-grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* ---- Instagram-style photo grid (see index.php for why it isn't a
   live embed) ----------------------------------------------------------- */
.rz-instagrid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--rz-space-3);
}
@media (max-width: 767.98px) { .rz-instagrid { grid-template-columns: repeat(3, 1fr); } }
.rz-instagrid__item {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--rz-radius-md);
  position: relative;
}
.rz-instagrid__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--rz-duration) var(--rz-ease);
}
.rz-instagrid__item:hover img { transform: scale(1.06); }

/* ---- Masonry gallery — a Pinterest-style column flow instead of a
   uniform square grid, so a tall pool shot and a wide terrace shot can
   sit side by side at their own natural proportions. CSS columns handle
   the reflow; break-inside:avoid keeps each photo from splitting across
   two columns. */
.rz-masonry-gallery {
  columns: 3;
  column-gap: var(--rz-space-4);
}
@media (max-width: 991.98px) { .rz-masonry-gallery { columns: 2; } }
@media (max-width: 575.98px) { .rz-masonry-gallery { columns: 1; } }
.rz-masonry-gallery__item {
  display: block;
  break-inside: avoid;
  margin-bottom: var(--rz-space-4);
  border-radius: var(--rz-radius-lg);
  overflow: hidden;
  position: relative;
}
.rz-masonry-gallery__item img {
  display: block;
  width: 100%; height: auto;
  transition: transform var(--rz-duration) var(--rz-ease);
}
.rz-masonry-gallery__item:hover img { transform: scale(1.06); }

.rz-room-card {
  display: flex; flex-direction: column;
  background: var(--rz-surface);
  border: 1px solid var(--rz-border);
  border-radius: var(--rz-radius-lg);
  overflow: hidden;
  transition: transform var(--rz-duration) var(--rz-ease),
              box-shadow var(--rz-duration) var(--rz-ease);
}
.rz-room-card:hover { transform: translateY(-4px); box-shadow: var(--rz-shadow-lg); }

.rz-room-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.rz-room-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--rz-duration-slow) var(--rz-ease-out);
}
.rz-room-card:hover .rz-room-card__media img { transform: scale(1.04); }

.rz-room-card__badge {
  position: absolute; top: var(--rz-space-3); left: var(--rz-space-3);
  padding: 4px 12px;
  background: var(--rz-accent);
  color: var(--rz-text-on-gold);
  border-radius: var(--rz-radius-pill);
  font-size: var(--rz-text-2xs);
  font-weight: var(--rz-weight-semibold);
  letter-spacing: var(--rz-tracking-wide);
  text-transform: uppercase;
}

.rz-room-card__badge--tour {
  left: auto; right: var(--rz-space-3);
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(11, 22, 34, 0.72);
  color: #fff;
  backdrop-filter: blur(2px);
}

/* ---- Amenity preview row on room cards ------------------------------ */
.rz-room-card__amenities {
  display: flex; flex-wrap: wrap; gap: var(--rz-space-2);
  margin: var(--rz-space-3) 0;
}
.rz-room-card__amenities span {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px;
  background: var(--rz-surface-sunken);
  color: var(--rz-text-muted);
  border-radius: var(--rz-radius-pill);
  font-size: var(--rz-text-2xs);
}
.rz-room-card__amenities i { color: var(--rz-accent); }

.rz-room-card__body { flex: 1; display: flex; flex-direction: column; padding: var(--rz-space-5); }
.rz-room-card__title { font-size: var(--rz-text-xl); }
.rz-room-card__title a { color: inherit; text-decoration: none; }
.rz-room-card__title a:hover { color: var(--rz-accent); }
.rz-room-card__meta {
  display: flex; flex-wrap: wrap; gap: var(--rz-space-3);
  margin: var(--rz-space-3) 0;
  color: var(--rz-text-muted);
  font-size: var(--rz-text-xs);
}
.rz-room-card__meta span { display: inline-flex; align-items: center; gap: 5px; }
.rz-room-card__text { color: var(--rz-text-muted); font-size: var(--rz-text-sm); }

.rz-room-card__foot {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--rz-space-3);
  margin-top: auto; padding-top: var(--rz-space-4);
  border-top: 1px solid var(--rz-border);
}
.rz-room-card__price small { display: block; color: var(--rz-text-subtle); font-size: var(--rz-text-2xs);
  letter-spacing: var(--rz-tracking-wide); text-transform: uppercase; }
.rz-room-card__price strong {
  font-family: var(--rz-font-display);
  font-size: var(--rz-text-xl);
  font-weight: var(--rz-weight-medium);
}

/* ---- Availability results (booking flow, step 2) ---------------------
   A different shape from .rz-room-card's browsing grid: wider and built
   to carry one or more rate-plan choices per room, not a single price
   and a "view" link. */
.rz-avail-card {
  display: flex;
  background: var(--rz-surface);
  border: 1px solid var(--rz-border);
  border-radius: var(--rz-radius-xl);
  overflow: hidden;
  box-shadow: var(--rz-shadow-sm);
  transition: box-shadow var(--rz-duration) var(--rz-ease), transform var(--rz-duration) var(--rz-ease);
}
.rz-avail-card:hover { box-shadow: var(--rz-shadow-lg); transform: translateY(-2px); }
.rz-avail-card + .rz-avail-card { margin-top: var(--rz-space-5); }

/* The room a guest already identified on its own page (room.php's "Book
   now") — marked only once it's confirmed present in a real search
   result, never assumed. */
.rz-avail-card.is-preselected { border-color: var(--rz-gold); box-shadow: 0 0 0 2px var(--rz-gold), var(--rz-shadow-lg); }
.rz-avail-card__preselected {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 0 var(--rz-space-2);
  color: var(--rz-accent);
  font-size: var(--rz-text-2xs);
  font-weight: var(--rz-weight-semibold);
  letter-spacing: var(--rz-tracking-wide);
  text-transform: uppercase;
}

.rz-avail-card__media {
  position: relative;
  flex: 0 0 42%;
  min-height: 280px;
  overflow: hidden;
}
.rz-avail-card__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--rz-ease-out);
}
.rz-avail-card:hover .rz-avail-card__media img { transform: scale(1.05); }

.rz-avail-card__badge {
  position: absolute; top: var(--rz-space-3); left: var(--rz-space-3);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  background: rgba(11, 22, 34, 0.78);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  color: var(--rz-gold-bright);
  border-radius: var(--rz-radius-pill);
  font-size: var(--rz-text-2xs);
  font-weight: var(--rz-weight-semibold);
  letter-spacing: var(--rz-tracking-wide);
  text-transform: uppercase;
}

.rz-avail-card__body {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--rz-space-6);
}

.rz-avail-card__title {
  font-family: var(--rz-font-display);
  font-size: var(--rz-text-2xl);
  font-weight: var(--rz-weight-medium);
  margin: 0;
}

.rz-avail-card__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--rz-space-1) var(--rz-space-4);
  margin: var(--rz-space-3) 0;
  color: var(--rz-text-muted);
  font-size: var(--rz-text-xs);
}
.rz-avail-card__meta span { display: inline-flex; align-items: center; gap: 6px; }
.rz-avail-card__meta i { color: var(--rz-accent-hover); }

.rz-avail-card__amenities {
  display: flex; flex-wrap: wrap; gap: var(--rz-space-2);
  margin: 0 0 var(--rz-space-3);
}
.rz-avail-card__amenities span {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px;
  background: var(--rz-surface-sunken);
  color: var(--rz-text-muted);
  border-radius: var(--rz-radius-pill);
  font-size: var(--rz-text-2xs);
}
.rz-avail-card__amenities i { color: var(--rz-accent); }

.rz-avail-card__text {
  margin: 0 0 var(--rz-space-4);
  color: var(--rz-text-muted);
  font-size: var(--rz-text-sm);
  line-height: var(--rz-leading-body);
}

.rz-avail-card__scarcity {
  display: flex; align-items: center; gap: 6px;
  margin: 0 0 var(--rz-space-4);
  color: var(--rz-warning);
  font-size: var(--rz-text-xs);
  font-weight: var(--rz-weight-medium);
}

.rz-avail-card__offers {
  display: flex; flex-direction: column; gap: var(--rz-space-3);
  padding-top: var(--rz-space-4);
  border-top: 1px solid var(--rz-border);
}
.rz-avail-card__offers .rz-offer { margin-bottom: 0; }

@media (max-width: 767.98px) {
  .rz-avail-card { flex-direction: column; }
  .rz-avail-card__media { flex-basis: auto; aspect-ratio: 16 / 10; min-height: 0; }
  .rz-avail-card__body { padding: var(--rz-space-5); }
}

.rz-feature {
  padding: var(--rz-space-5);
  text-align: center;
}
.rz-feature i {
  display: grid; place-items: center;
  width: 56px; height: 56px; margin: 0 auto var(--rz-space-4);
  border-radius: 50%;
  background: var(--rz-accent-soft);
  color: var(--rz-accent);
  font-size: 1.4rem;
}
.rz-feature h3 { font-size: var(--rz-text-lg); }
.rz-feature p { margin: var(--rz-space-2) 0 0; color: var(--rz-text-muted); font-size: var(--rz-text-sm); }

/* ---- Dark section — always navy regardless of the light/dark theme
   toggle, same idea as .rz-hero. Used for the facilities showcase so it
   reads as a deliberate change of pace against the lighter sections
   above and below it. */
.rz-section--dark { background: var(--rz-navy-900); }
.rz-section--dark .rz-eyebrow { color: var(--rz-gold-bright); }
.rz-section--dark .rz-section__title { color: var(--rz-white); }
.rz-section--dark .rz-section__lede { color: rgba(255, 255, 255, 0.72); }

/* ---- Facility card — a full-bleed photo with the label and a small
   gold link sitting directly on the image, scrimmed at the bottom for
   legibility, instead of an icon-and-caption tile below it. */
.rz-facility-card {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: var(--rz-radius-lg);
  overflow: hidden;
}
.rz-facility-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--rz-ease);
}
.rz-facility-card:hover img { transform: scale(1.06); }
.rz-facility-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5, 27, 51, 0) 45%, rgba(5, 27, 51, 0.88) 100%);
}
.rz-facility-card__content {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--rz-space-5);
  z-index: 1;
}
.rz-facility-card__title {
  margin: 0;
  font-family: var(--rz-font-display);
  font-size: var(--rz-text-xl);
  font-weight: var(--rz-weight-medium);
  color: var(--rz-white);
}
.rz-facility-card__link {
  display: inline-flex; align-items: center; gap: 0.4em;
  margin-top: var(--rz-space-2);
  color: var(--rz-gold-bright);
  font-size: var(--rz-text-xs);
  font-weight: var(--rz-weight-semibold);
  letter-spacing: var(--rz-tracking-wide);
  text-transform: uppercase;
}
.rz-facility-card__link i { transition: transform var(--rz-duration-fast) var(--rz-ease); }
.rz-facility-card:hover .rz-facility-card__link i { transform: translateX(3px); }

/* ---- Split feature ------------------------------------------------- */
.rz-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--rz-space-7);
  align-items: center;
}
@media (max-width: 991.98px) { .rz-split { grid-template-columns: 1fr; gap: var(--rz-space-5); } }
.rz-split__media { border-radius: var(--rz-radius-lg); overflow: hidden; aspect-ratio: 5 / 4; }
.rz-split__media img { width: 100%; height: 100%; object-fit: cover; }
.rz-split--reverse .rz-split__media { order: 2; }
@media (max-width: 991.98px) { .rz-split--reverse .rz-split__media { order: 0; } }
.rz-split--start { align-items: start; }

/* ---- Photo slider — three photos per amenity section, same autoplay/
   dots/pause-on-hover contract as the hero and quote carousels
   (assets/js/public.js initPhotoSliders()), just without caption text. */
.rz-photo-slider { position: relative; }
.rz-photo-slider__slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 900ms var(--rz-ease), visibility 0s linear 900ms;
  visibility: hidden;
}
.rz-photo-slider__slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 900ms var(--rz-ease), visibility 0s linear 0s;
}
.rz-photo-slider__slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1); }
@media (prefers-reduced-motion: no-preference) {
  .rz-photo-slider__slide.is-active img { animation: rz-kenburns 7s var(--rz-ease) forwards; }
}
.rz-photo-slider__dots {
  position: absolute; left: 50%; bottom: var(--rz-space-3);
  transform: translateX(-50%);
  display: flex; gap: var(--rz-space-2);
  z-index: 2;
}
.rz-photo-slider__dot {
  width: 7px; height: 7px;
  padding: 0; border: none; border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background var(--rz-duration-fast) var(--rz-ease), transform var(--rz-duration-fast) var(--rz-ease);
}
.rz-photo-slider__dot.is-active { background: var(--rz-gold); transform: scale(1.3); }
.rz-photo-slider__dot:hover { background: rgba(255, 255, 255, 0.8); }

/* ---- Contact page: form card + direct-contact panel ------------------ */
.rz-contact-form {
  background: var(--rz-surface);
  border: 1px solid var(--rz-border);
  border-radius: var(--rz-radius-xl);
  box-shadow: var(--rz-shadow-md);
  padding: var(--rz-space-7);
}
@media (max-width: 575.98px) { .rz-contact-form { padding: var(--rz-space-5); } }

.rz-contact-panel {
  background: linear-gradient(165deg, var(--rz-navy) 0%, var(--rz-navy-900) 100%);
  border-radius: var(--rz-radius-xl);
  padding: var(--rz-space-7);
  color: rgba(255, 255, 255, 0.9);
}
@media (max-width: 575.98px) { .rz-contact-panel { padding: var(--rz-space-5); } }

.rz-contact-panel__eyebrow { color: var(--rz-gold-bright); }
.rz-contact-panel__title {
  font-family: var(--rz-font-display);
  font-weight: 400;
  font-size: var(--rz-text-2xl);
  color: var(--rz-white);
  margin: var(--rz-space-2) 0 var(--rz-space-2);
}

.rz-contact-panel__list { margin-top: var(--rz-space-5); }

.rz-contact-method {
  display: flex; gap: var(--rz-space-4);
  padding: var(--rz-space-4) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.rz-contact-method:first-child { border-top: none; padding-top: 0; }

.rz-contact-method__icon {
  display: grid; place-items: center;
  width: 44px; height: 44px; flex: 0 0 44px;
  border-radius: 50%;
  background: rgba(230, 197, 88, 0.14);
  color: var(--rz-gold-bright);
  font-size: 1.1rem;
}

.rz-contact-method__label {
  margin: 0 0 4px;
  font-size: var(--rz-text-2xs);
  letter-spacing: var(--rz-tracking-wider);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.rz-contact-method__body { min-width: 0; }
.rz-contact-method__body p { margin: 0; color: rgba(255, 255, 255, 0.9); font-size: var(--rz-text-sm); line-height: var(--rz-leading-snug); }
.rz-contact-method__body a {
  display: block;
  color: var(--rz-white);
  font-size: var(--rz-text-sm);
  line-height: var(--rz-leading-snug);
}
.rz-contact-method__body a:hover { color: var(--rz-gold-bright); }

.rz-contact-panel__foot {
  margin-top: var(--rz-space-6);
  padding-top: var(--rz-space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--rz-text-sm);
  color: rgba(255, 255, 255, 0.7);
}
.rz-contact-panel__foot a { color: var(--rz-gold-bright); }

/* ---- Testimonials -------------------------------------------------- */
.rz-quote {
  padding: var(--rz-space-6);
  background: var(--rz-surface);
  border: 1px solid var(--rz-border);
  border-radius: var(--rz-radius-lg);
}
.rz-quote__stars { color: var(--rz-accent); font-size: var(--rz-text-sm); letter-spacing: 2px; }
.rz-quote__text {
  margin: var(--rz-space-4) 0;
  font-family: var(--rz-font-display);
  font-size: var(--rz-text-lg);
  font-weight: var(--rz-weight-light);
  line-height: var(--rz-leading-snug);
}
.rz-quote__author { font-size: var(--rz-text-xs); color: var(--rz-text-muted);
  letter-spacing: var(--rz-tracking-wide); text-transform: uppercase; }

/* ---- Testimonial carousel — one quote at a time, centred, so each
   guest's words get the full width instead of competing for a third of
   a row. Slides stack in the same grid cell (rather than absolute
   positioning) so the container's height follows the tallest quote and
   nothing jumps when a shorter one becomes active. ------------------- */
.rz-quote-carousel {
  display: flex;
  align-items: center;
  gap: var(--rz-space-4);
  max-width: 720px;
  margin: 0 auto;
}
.rz-quote-carousel__track {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
}
.rz-quote-carousel__slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  text-align: center;
  transition: opacity 500ms var(--rz-ease);
}
.rz-quote-carousel__slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.rz-quote-carousel__slide .rz-quote__stars { justify-content: center; display: flex; }

.rz-quote-carousel__arrow {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--rz-border);
  border-radius: 50%;
  background: var(--rz-surface);
  color: var(--rz-text-muted);
  cursor: pointer;
  transition: all var(--rz-duration-fast) var(--rz-ease);
}
.rz-quote-carousel__arrow:hover { color: var(--rz-accent); border-color: var(--rz-accent); }
@media (max-width: 575.98px) { .rz-quote-carousel__arrow { display: none; } }

.rz-quote-carousel__dots {
  display: flex; justify-content: center; gap: var(--rz-space-2);
  margin-top: var(--rz-space-6);
}
.rz-quote-carousel__dot {
  width: 8px; height: 8px;
  padding: 0; border: none; border-radius: 50%;
  background: var(--rz-border);
  cursor: pointer;
  transition: background var(--rz-duration-fast) var(--rz-ease), transform var(--rz-duration-fast) var(--rz-ease);
}
.rz-quote-carousel__dot.is-active { background: var(--rz-accent); transform: scale(1.3); }
.rz-quote-carousel__dot:hover { background: var(--rz-accent); }

/* ---- Booking flow -------------------------------------------------- */
.rz-flow { display: grid; grid-template-columns: 1fr 380px; gap: var(--rz-space-6); align-items: start; }
/* Grid items otherwise refuse to shrink below their content's width,
   pushing the page sideways on narrow phones. */
.rz-flow > * { min-width: 0; }
@media (max-width: 1199.98px) { .rz-flow { grid-template-columns: 1fr; } }

/* The step bar is the answer to "how much more of this is there?" — so it
   shows all four steps at once, always, rather than one at a time. A
   connecting line runs behind the circles and fills in as each step is
   reached, so progress reads at a glance before anyone reads a word. */
.rz-steps {
  display: flex;
  align-items: flex-start;
  margin-bottom: var(--rz-space-7);
  padding: 0 var(--rz-space-2);
  overflow-x: auto;
}
.rz-step {
  position: relative;
  flex: 1; min-width: 84px;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--rz-space-3);
  padding: 0;
  border: none;
  background: none;
  color: var(--rz-text-subtle);
  font-size: var(--rz-text-xs);
  text-align: center;
}
.rz-step:not(:first-child)::before {
  content: '';
  position: absolute;
  top: 21px;
  right: 50%;
  width: 100%;
  height: 2px;
  background: var(--rz-border);
  z-index: 0;
  transition: background var(--rz-duration) var(--rz-ease);
}
.rz-step.is-active::before,
.rz-step.is-done::before { background: var(--rz-accent); }

.rz-step__number {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 44px; height: 44px; flex: 0 0 44px;
  border: 2px solid var(--rz-border-strong);
  border-radius: 50%;
  background: var(--rz-surface);
  color: var(--rz-text-subtle);
  font-size: var(--rz-text-sm);
  font-weight: var(--rz-weight-semibold);
  transition: all var(--rz-duration) var(--rz-ease);
}
.rz-step__check { display: none; font-size: 1.2rem; }

.rz-step.is-active .rz-step__number {
  background: var(--rz-accent);
  border-color: var(--rz-accent);
  color: var(--rz-text-on-gold);
  box-shadow: 0 0 0 5px var(--rz-accent-soft);
  transform: scale(1.06);
}
.rz-step.is-done .rz-step__number { background: var(--rz-success); border-color: var(--rz-success); color: var(--rz-white); }
.rz-step.is-done .rz-step__digit { display: none; }
.rz-step.is-done .rz-step__check { display: block; }

.rz-step__label { display: flex; flex-direction: column; line-height: var(--rz-leading-snug); }
.rz-step__label strong { font-weight: var(--rz-weight-semibold); color: var(--rz-text-subtle); transition: color var(--rz-duration) var(--rz-ease); }
.rz-step__label small { color: var(--rz-text-subtle); font-size: var(--rz-text-2xs); }
.rz-step.is-active .rz-step__label strong { color: var(--rz-text); }
.rz-step.is-done .rz-step__label strong { color: var(--rz-success); }

@media (max-width: 575.98px) {
  .rz-step__number { width: 36px; height: 36px; flex-basis: 36px; font-size: var(--rz-text-xs); }
  .rz-step:not(:first-child)::before { top: 17px; }
  .rz-step__label small { display: none; }
  .rz-step__label strong { font-size: var(--rz-text-2xs); }
}

/* ---- The premium card the four steps sit inside --------------------- */
.rz-flow__card {
  background: var(--rz-surface);
  border: 1px solid var(--rz-border);
  border-radius: var(--rz-radius-xl);
  box-shadow: var(--rz-shadow-md);
  padding: var(--rz-space-7);
}
@media (max-width: 575.98px) { .rz-flow__card { padding: var(--rz-space-5); } }

/* Inputs feel a step more considered inside the booking flow: a taller
   target, a softer focus glow instead of a bare border-color swap, and a
   hover state so the field reads as interactive before it is even focused. */
.rz-flow__card .rz-input,
.rz-flow__card select.rz-input {
  padding: 0.85rem var(--rz-space-4);
  border-radius: var(--rz-radius-md);
  border-color: var(--rz-border);
  transition: border-color var(--rz-duration-fast) var(--rz-ease), box-shadow var(--rz-duration-fast) var(--rz-ease);
}
.rz-flow__card .rz-input:hover { border-color: var(--rz-border-strong); }
.rz-flow__card .rz-input:focus { border-color: var(--rz-accent); box-shadow: var(--rz-focus-ring); }
.rz-flow__card .rz-label { letter-spacing: var(--rz-tracking-wider); }

/* The running-total sidebar gets a touch more presence in the booking
   flow specifically — this is the one place on the site where someone is
   actively deciding whether to hand over money. */
.rz-flow .rz-summary {
  border-radius: var(--rz-radius-xl);
  box-shadow: var(--rz-shadow-lg);
  border-top: 3px solid var(--rz-accent);
}

.rz-summary {
  position: sticky; top: calc(var(--rz-header-height) + var(--rz-space-4));
  background: var(--rz-surface);
  border: 1px solid var(--rz-border);
  border-radius: var(--rz-radius-lg);
  box-shadow: var(--rz-shadow-sm);
  overflow: hidden;
}
@media (max-width: 1199.98px) { .rz-summary { position: static; } }
.rz-summary__head { padding: var(--rz-space-5); border-bottom: 1px solid var(--rz-border); }
.rz-summary__body { padding: var(--rz-space-5); }
.rz-summary__line {
  display: flex; justify-content: space-between; gap: var(--rz-space-3);
  padding: var(--rz-space-2) 0;
  font-size: var(--rz-text-sm);
}
.rz-summary__line span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rz-summary__line--muted { color: var(--rz-text-muted); font-size: var(--rz-text-xs); }
.rz-summary__line--discount { color: var(--rz-success); }
.rz-summary__total {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--rz-space-3);
  margin-top: var(--rz-space-4); padding-top: var(--rz-space-4);
  border-top: 1px solid var(--rz-border);
}
.rz-summary__total strong { font-family: var(--rz-font-display); font-size: var(--rz-text-2xl); font-weight: var(--rz-weight-medium); }

.rz-hold-timer {
  display: flex; align-items: center; gap: var(--rz-space-2);
  padding: var(--rz-space-3) var(--rz-space-5);
  background: var(--rz-accent-soft);
  color: var(--rz-text);
  font-size: var(--rz-text-xs);
}
.rz-hold-timer.is-urgent { background: var(--rz-danger-soft); color: var(--rz-danger); }

.rz-offer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--rz-space-4);
  padding: var(--rz-space-4);
  border: 1px solid var(--rz-border);
  border-radius: var(--rz-radius-lg);
  margin-bottom: var(--rz-space-3);
  transition: border-color var(--rz-duration-fast) var(--rz-ease),
              box-shadow var(--rz-duration-fast) var(--rz-ease),
              transform var(--rz-duration-fast) var(--rz-ease);
}
.rz-offer:hover { border-color: var(--rz-accent); box-shadow: var(--rz-shadow-sm); transform: translateY(-1px); }
.rz-offer__name { font-weight: var(--rz-weight-semibold); font-size: var(--rz-text-sm); }
.rz-offer__terms { color: var(--rz-text-muted); font-size: var(--rz-text-xs); margin: 4px 0 0; }
.rz-offer__price { text-align: right; }
.rz-offer__price strong { font-family: var(--rz-font-display); font-size: var(--rz-text-xl); }
.rz-offer__price small { display: block; color: var(--rz-text-subtle); font-size: var(--rz-text-2xs); }

.rz-addon {
  display: flex; align-items: flex-start; gap: var(--rz-space-3);
  padding: var(--rz-space-4);
  border: 1px solid var(--rz-border);
  border-radius: var(--rz-radius-lg);
  margin-bottom: var(--rz-space-3);
  transition: border-color var(--rz-duration-fast) var(--rz-ease),
              background var(--rz-duration-fast) var(--rz-ease);
}
.rz-addon:hover { border-color: var(--rz-border-strong); }
.rz-addon:has(input:checked) { border-color: var(--rz-accent); background: var(--rz-accent-soft); }
.rz-addon input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--rz-accent); flex: 0 0 18px; }
.rz-addon__body { flex: 1; }
.rz-addon__name { font-weight: var(--rz-weight-medium); font-size: var(--rz-text-sm); }
.rz-addon__price { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---- Footer -------------------------------------------------------- */
.rz-site-footer {
  padding-top: var(--rz-space-8);
  background:
    radial-gradient(ellipse 900px 420px at 50% 0%, rgba(212, 175, 55, 0.07), transparent 70%),
    var(--rz-navy-900);
  border-top: 1px solid rgba(212, 175, 55, 0.25);
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--rz-text-sm);
}

.rz-site-footer__crest {
  text-align: center;
  max-width: var(--rz-container);
  margin: 0 auto;
  padding: 0 var(--rz-space-5) var(--rz-space-7);
}
.rz-site-footer__crest .rz-brand__logo { margin: 0 auto var(--rz-space-4); }
.rz-site-footer__stars { color: var(--rz-gold-bright); letter-spacing: 4px; font-size: 0.85rem; margin: 0 0 var(--rz-space-3); }
.rz-site-footer__tagline {
  margin: 0 auto;
  max-width: 480px;
  font-family: var(--rz-font-display);
  font-size: var(--rz-text-2xl);
  font-weight: var(--rz-weight-light);
  color: rgba(255, 255, 255, 0.92);
}

.rz-site-footer__top {
  max-width: var(--rz-container);
  margin: 0 auto;
  padding: 0 var(--rz-space-5) var(--rz-space-7);
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr) 1.6fr;
  gap: var(--rz-space-5);
}
@media (max-width: 1199.98px) { .rz-site-footer__top { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* minmax(0, …): a plain 1fr column won't shrink below its longest link,
   which pushed every page sideways on the narrowest phones. */
@media (max-width: 767.98px)  { .rz-site-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.rz-site-footer__address {
  display: flex; gap: var(--rz-space-2);
  font-style: normal; color: rgba(255, 255, 255, 0.55); font-size: var(--rz-text-xs);
}
.rz-site-footer__address i { color: var(--rz-gold); margin-top: 0.15em; }
.rz-site-footer__contact-line { margin: var(--rz-space-2) 0 0; font-size: var(--rz-text-xs); color: rgba(255, 255, 255, 0.55); }
.rz-site-footer__contact-line i { color: var(--rz-gold); width: 1.2em; }
.rz-site-footer__contact-line a { color: rgba(255, 255, 255, 0.75); }

.rz-site-footer__contact-group + .rz-site-footer__contact-group { margin-top: var(--rz-space-5); }
.rz-site-footer__contact-group .rz-eyebrow { display: block; margin-bottom: var(--rz-space-2); font-size: var(--rz-text-2xs); }
.rz-site-footer__contact-group a.rz-site-footer__contact-line { display: inline-flex; align-items: center; gap: 0.4em; }
.rz-site-footer__contact-line a:hover { color: var(--rz-gold); }

.rz-site-footer__social { display: flex; gap: var(--rz-space-3); margin-top: var(--rz-space-4); }
.rz-site-footer__social a {
  position: relative;
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--rz-radius-pill);
  color: rgba(255, 255, 255, 0.72);
  overflow: hidden; isolation: isolate;
  opacity: 0; transform: translateY(14px);
  animation: rz-social-rise 700ms var(--rz-ease-out) forwards;
  transition: color var(--rz-duration) var(--rz-ease), border-color var(--rz-duration) var(--rz-ease), transform var(--rz-duration) var(--rz-ease);
}
.rz-site-footer__social a::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(circle, var(--rz-gold-bright) 0%, var(--rz-gold) 100%);
  transform: scale(0);
  transition: transform var(--rz-duration-slow) var(--rz-ease-out);
}
.rz-site-footer__social a i { transition: transform var(--rz-duration-slow) var(--rz-ease-out); }
.rz-site-footer__social a:hover,
.rz-site-footer__social a:focus-visible {
  color: var(--rz-text-on-gold);
  border-color: var(--rz-gold-bright);
  transform: translateY(-3px) scale(1.08);
}
.rz-site-footer__social a:hover::before,
.rz-site-footer__social a:focus-visible::before { transform: scale(1); }
.rz-site-footer__social a:hover i,
.rz-site-footer__social a:focus-visible i { transform: rotate(8deg) scale(1.1); }
.rz-site-footer__social a:nth-child(1) { animation-delay: 80ms; }
.rz-site-footer__social a:nth-child(2) { animation-delay: 180ms; }
.rz-site-footer__social a:nth-child(3) { animation-delay: 280ms; }
.rz-site-footer__social a:nth-child(4) { animation-delay: 380ms; }

@keyframes rz-social-rise {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .rz-site-footer__social a { animation: none; opacity: 1; transform: none; }
}

.rz-site-footer__nav { display: flex; flex-direction: column; gap: var(--rz-space-2); }
.rz-site-footer__nav .rz-eyebrow { margin-bottom: var(--rz-space-2); }
.rz-site-footer__nav a {
  position: relative;
  display: inline-block;
  margin-left: calc(-1 * var(--rz-space-3));
  padding: 0.35em var(--rz-space-3);
  border-radius: var(--rz-radius-pill);
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--rz-text-sm);
  overflow: hidden;
  isolation: isolate;
  transition: color var(--rz-duration) var(--rz-ease);
}
.rz-site-footer__nav a::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(circle, var(--rz-gold-bright) 0%, var(--rz-gold) 100%);
  transform: scale(0);
  transition: transform var(--rz-duration-slow) var(--rz-ease-out);
}
.rz-site-footer__nav a:hover::before, .rz-site-footer__nav a:focus-visible::before { transform: scale(1); }
.rz-site-footer__nav a:hover, .rz-site-footer__nav a:focus-visible { color: var(--rz-text-on-gold); }
.rz-site-footer__newsletter p { color: rgba(255, 255, 255, 0.6); font-size: var(--rz-text-xs); margin: var(--rz-space-2) 0 var(--rz-space-3); }

.rz-newsletter { display: flex; gap: var(--rz-space-2); }
.rz-newsletter .rz-input {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--rz-white);
}
.rz-newsletter .rz-input::placeholder { color: rgba(255, 255, 255, 0.4); }
.rz-newsletter__note { margin-top: var(--rz-space-2); font-size: var(--rz-text-xs); min-height: 1.2em; }

.rz-site-footer__trust {
  display: flex; align-items: center; gap: var(--rz-space-2);
  margin-top: var(--rz-space-5);
  padding-top: var(--rz-space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--rz-text-xs);
  color: rgba(255, 255, 255, 0.5);
}
.rz-site-footer__trust i { color: var(--rz-gold); }

.rz-site-footer__bottom {
  max-width: var(--rz-container);
  margin: 0 auto;
  padding: var(--rz-space-4) var(--rz-space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--rz-space-3);
  font-size: var(--rz-text-xs);
  color: rgba(255, 255, 255, 0.5);
}
.rz-site-footer__bottom p { margin: 0; }
.rz-site-footer__bottom nav { display: flex; gap: var(--rz-space-4); }
.rz-site-footer__bottom a { color: rgba(255, 255, 255, 0.5); }
.rz-site-footer__bottom a:hover { color: var(--rz-gold); }

.rz-back-to-top {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--rz-radius-pill);
  color: rgba(255, 255, 255, 0.72) !important;
  transition: border-color var(--rz-duration-fast) var(--rz-ease), transform var(--rz-duration-fast) var(--rz-ease);
}
.rz-back-to-top:hover { border-color: var(--rz-gold); color: var(--rz-gold-bright) !important; transform: translateY(-2px); }

@media (max-width: 991.98px) { .rz-site-footer { padding-bottom: 84px; } }

/* ---- Floating actions ---------------------------------------------- */
.rz-floating {
  position: fixed;
  right: var(--rz-space-4);
  bottom: var(--rz-space-4);
  z-index: var(--rz-z-float);
  display: flex; flex-direction: column; gap: var(--rz-space-3);
}
@media (max-width: 991.98px) { .rz-floating { bottom: 84px; } }

.rz-floating__btn {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border: none; border-radius: 50%;
  color: var(--rz-white);
  font-size: 1.35rem;
  box-shadow: var(--rz-shadow-lg);
  transition: transform var(--rz-duration-fast) var(--rz-ease);
}
.rz-floating__btn:hover { transform: scale(1.06); color: var(--rz-white); }

/* A quiet fade/scale in on first paint, then a slow gold ripple behind
   the button (the ::before ring, so it never fights the button's own
   hover scale) and a gentle twinkle on the stars icon itself — signals
   "this is live and waiting," not a constant demand for attention. */
.rz-floating__btn--concierge {
  background: var(--rz-navy);
  color: var(--rz-gold);
  position: relative;
  animation: rz-concierge-in 0.5s var(--rz-ease) both;
}
.rz-floating__btn--concierge::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.45);
  animation: rz-concierge-pulse 2.8s ease-out infinite 0.6s;
  pointer-events: none;
}
.rz-floating__btn--concierge i {
  display: inline-block;
  animation: rz-concierge-twinkle 2.8s ease-in-out infinite;
}
@keyframes rz-concierge-in {
  from { opacity: 0; transform: scale(0.4); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes rz-concierge-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.45); }
  70%  { box-shadow: 0 0 0 14px rgba(212, 175, 55, 0); }
  100% { box-shadow: 0 0 0 14px rgba(212, 175, 55, 0); }
}
@keyframes rz-concierge-twinkle {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50%      { transform: scale(1.15) rotate(8deg); }
}
@media (prefers-reduced-motion: reduce) {
  .rz-floating__btn--concierge { animation: none; }
  .rz-floating__btn--concierge::before { animation: none; box-shadow: none; }
  .rz-floating__btn--concierge i { animation: none; }
}

/* Hidden until the guest has scrolled — WhatsApp used to live in this
   slot permanently; that's now a labeled link inside the concierge
   panel itself (.rz-concierge__whatsapp below), so this button only
   ever does one thing and only shows up once it's useful. */
.rz-floating__btn--top {
  background: var(--rz-gold);
  color: var(--rz-navy);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.85);
  transition: opacity var(--rz-duration) var(--rz-ease),
              transform var(--rz-duration) var(--rz-ease),
              visibility var(--rz-duration);
}
.rz-floating__btn--top.is-visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.rz-floating__btn--top:hover { color: var(--rz-navy); }
.rz-floating__btn--top i { animation: rz-float-bob 2s ease-in-out infinite; }
@keyframes rz-float-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .rz-floating__btn--top { transition: opacity var(--rz-duration) var(--rz-ease), visibility var(--rz-duration); }
  .rz-floating__btn--top i { animation: none; }
}

/* ---- Concierge chat panel -------------------------------------------- */
.rz-concierge {
  position: fixed;
  right: var(--rz-space-4);
  bottom: calc(var(--rz-space-4) + 64px);
  z-index: var(--rz-z-float);
  width: min(380px, calc(100vw - 2 * var(--rz-space-4)));
}
@media (max-width: 991.98px) { .rz-concierge { bottom: 148px; } }

.rz-concierge__panel {
  display: flex; flex-direction: column;
  height: min(560px, calc(100vh - 140px));
  background: var(--rz-surface);
  border: 1px solid var(--rz-border);
  border-radius: var(--rz-radius-lg);
  box-shadow: var(--rz-shadow-xl);
  overflow: hidden;
  animation: rz-concierge-in var(--rz-duration) var(--rz-ease-out);
}
@keyframes rz-concierge-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .rz-concierge__panel { animation: none; } }

.rz-concierge__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--rz-space-3);
  padding: var(--rz-space-4);
  background: linear-gradient(145deg, var(--rz-navy), var(--rz-navy-900));
  flex: 0 0 auto;
}
.rz-concierge__brandrow { display: flex; align-items: center; gap: var(--rz-space-3); }
.rz-concierge__mark {
  display: grid; place-items: center;
  width: 36px; height: 36px; flex: 0 0 36px;
  border-radius: var(--rz-radius-md);
  background: rgba(255, 255, 255, 0.12);
  color: var(--rz-gold-bright);
  font-size: 1rem;
}
.rz-concierge__eyebrow {
  margin: 0; font-size: var(--rz-text-2xs); letter-spacing: var(--rz-tracking-wider);
  text-transform: uppercase; color: var(--rz-gold-bright);
}
.rz-concierge__title { margin: 2px 0 0; font-family: var(--rz-font-display); font-size: var(--rz-text-lg); font-weight: 500; color: var(--rz-white); }
.rz-concierge__close {
  display: grid; place-items: center;
  width: 32px; height: 32px; flex: 0 0 32px;
  border: none; border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: var(--rz-white);
  transition: background var(--rz-duration-fast) var(--rz-ease);
}
.rz-concierge__close:hover { background: rgba(255, 255, 255, 0.22); }

/* A labeled, always-visible fallback rather than a second floating
   icon guests had to already know meant "WhatsApp" — this reads on
   its own and sits exactly where someone giving up on the chat would
   look for another way to reach a person. */
.rz-concierge__whatsapp {
  display: flex; align-items: center; gap: var(--rz-space-2);
  padding: var(--rz-space-3) var(--rz-space-4);
  background: rgba(37, 211, 102, 0.08);
  border-top: 1px solid var(--rz-border);
  border-radius: 0 0 var(--rz-radius-lg) var(--rz-radius-lg);
  color: var(--rz-text);
  font-size: var(--rz-text-xs);
  font-weight: var(--rz-weight-medium);
  flex: 0 0 auto;
  transition: background var(--rz-duration-fast) var(--rz-ease);
}
.rz-concierge__whatsapp:hover { background: rgba(37, 211, 102, 0.16); color: var(--rz-text); }
.rz-concierge__whatsapp i.bi-whatsapp { color: #25D366; font-size: 1.05rem; flex: 0 0 auto; }
.rz-concierge__whatsapp span { flex: 1 1 auto; }
.rz-concierge__whatsapp i.bi-arrow-right { font-size: 0.75rem; color: var(--rz-text-muted); flex: 0 0 auto; }

.rz-concierge__body {
  flex: 1 1 auto; overflow-y: auto;
  padding: var(--rz-space-4);
  display: flex; flex-direction: column; gap: var(--rz-space-3);
  background: var(--rz-bg-subtle);
}

.rz-concierge__msg { display: flex; }
.rz-concierge__msg p {
  margin: 0; padding: var(--rz-space-3) var(--rz-space-4);
  border-radius: var(--rz-radius-md);
  font-size: var(--rz-text-sm); line-height: var(--rz-leading-body);
  max-width: 85%; white-space: pre-wrap;
}
.rz-concierge__msg--assistant p { background: var(--rz-surface); border: 1px solid var(--rz-border); color: var(--rz-text); border-bottom-left-radius: 4px; }
.rz-concierge__msg--user { justify-content: flex-end; }
.rz-concierge__msg--user p { background: var(--rz-navy); color: var(--rz-white); border-bottom-right-radius: 4px; }
.rz-concierge__msg--error p { background: var(--rz-danger-soft); color: var(--rz-danger); border: 1px solid transparent; }
.rz-concierge__msg p a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }
.rz-concierge__msg--assistant p a { color: var(--rz-gold); }

.rz-concierge__typing { display: inline-flex; gap: 4px; padding: 2px 0; }
.rz-concierge__typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--rz-text-subtle);
  animation: rz-concierge-typing 1.1s infinite ease-in-out;
}
.rz-concierge__typing span:nth-child(2) { animation-delay: 0.15s; }
.rz-concierge__typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes rz-concierge-typing {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

.rz-concierge__form {
  flex: 0 0 auto;
  display: flex; align-items: flex-end; gap: var(--rz-space-2);
  padding: var(--rz-space-3);
  background: var(--rz-surface);
  border-top: 1px solid var(--rz-border);
}
.rz-concierge__input {
  flex: 1 1 auto; resize: none;
  max-height: 96px;
  padding: 0.6rem var(--rz-space-3);
  border: 1px solid var(--rz-border-strong);
  border-radius: var(--rz-radius-md);
  background: var(--rz-bg-subtle);
  color: var(--rz-text);
  font-family: var(--rz-font-body);
  font-size: var(--rz-text-sm);
}
.rz-concierge__input:focus { border-color: var(--rz-accent); outline: none; }
.rz-concierge__send {
  display: grid; place-items: center;
  width: 40px; height: 40px; flex: 0 0 40px;
  border: none; border-radius: 50%;
  background: var(--rz-accent); color: var(--rz-text-on-gold);
  font-size: 1rem;
  transition: all var(--rz-duration-fast) var(--rz-ease);
}
.rz-concierge__send:hover:not(:disabled) { background: var(--rz-accent-hover); }
.rz-concierge__send:disabled { opacity: 0.5; cursor: not-allowed; }

.rz-book-bar {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: var(--rz-z-sticky);
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--rz-space-4) var(--rz-space-5) calc(var(--rz-space-4) + env(safe-area-inset-bottom, 0px));
  background: var(--rz-navy);
  color: var(--rz-white);
}
.rz-book-bar strong { display: block; font-size: var(--rz-text-sm); }
.rz-book-bar small { color: var(--rz-gold); font-size: var(--rz-text-2xs);
  letter-spacing: var(--rz-tracking-wide); text-transform: uppercase; }
.rz-book-bar:hover { color: var(--rz-white); }

/* This bar is fixed (d-lg-none, shown only below the same 991.98px
   breakpoint it's built for) and was never given room by the page —
   whatever content happened to be last just ran underneath it. Reserves
   its real rendered height, safe-area inset included, as body padding. */
@media (max-width: 991.98px) {
  body:has(.rz-book-bar) { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}

/* ---- Misc ---------------------------------------------------------- */
.rz-breadcrumbs {
  display: flex; flex-wrap: wrap; gap: var(--rz-space-2);
  padding: var(--rz-space-4) 0;
  font-size: var(--rz-text-xs);
  color: var(--rz-text-muted);
}
.rz-breadcrumbs a { color: var(--rz-text-muted); }
.rz-breadcrumbs a:hover { color: var(--rz-accent); }

.rz-prose { max-width: 68ch; }
.rz-prose p { margin: 0 0 var(--rz-space-4); }
.rz-prose h2 { margin: var(--rz-space-6) 0 var(--rz-space-3); font-size: var(--rz-text-2xl); }
.rz-prose h3 { margin: var(--rz-space-5) 0 var(--rz-space-2); font-size: var(--rz-text-xl); }
.rz-prose ul, .rz-prose ol { margin: 0 0 var(--rz-space-4); padding-left: 1.4em; }
.rz-prose img { max-width: 100%; height: auto; border-radius: var(--rz-radius-md); }
.rz-prose blockquote {
  margin: var(--rz-space-5) 0;
  padding-left: var(--rz-space-5);
  border-left: 2px solid var(--rz-accent);
  font-family: var(--rz-font-display);
  font-size: var(--rz-text-lg);
}

/* ---- Staff utility-page hero — the flat navy gradient this used to be
   read as an afterthought next to the kiosk's own photo hero
   (staff/attendance.php). Same navy base, but now: two soft gold glow
   orbs drifting slowly behind the content, a gold sheen sweeping
   diagonally across the gradient, and the copy rising into place on
   load — all pure CSS (no images, no JS), so it stays fast on a kiosk
   screen that's meant to be used quickly. Shared by every page that
   still uses .rz-page-hero: face-register, face-verify, hr-query,
   hr-query-status, leave-request. */
.rz-page-hero {
  position: relative;
  padding: var(--rz-space-8) 0 var(--rz-space-7);
  color: var(--rz-white);
  overflow: hidden;
  background:
    linear-gradient(120deg, transparent 0%, rgba(212, 175, 55, 0.10) 45%, transparent 60%),
    linear-gradient(160deg, var(--rz-navy) 0%, var(--rz-navy-900) 100%);
  background-size: 250% 250%, 100% 100%;
  background-position: -20% -20%, 0 0;
}
.rz-page-hero::before,
.rz-page-hero::after {
  content: '';
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.32;
  pointer-events: none;
}
.rz-page-hero::before {
  width: 320px; height: 320px;
  background: radial-gradient(circle, var(--rz-gold) 0%, transparent 70%);
  top: -120px; left: -80px;
}
.rz-page-hero::after {
  width: 260px; height: 260px;
  background: radial-gradient(circle, var(--rz-gold-bright, var(--rz-gold)) 0%, transparent 70%);
  bottom: -100px; right: -60px;
}
.rz-page-hero > .rz-container {
  position: relative;
  z-index: 1;
  max-width: 640px;
  text-align: center;
}
.rz-page-hero h1 { font-size: clamp(2.2rem, 5vw, var(--rz-text-4xl)); color: var(--rz-white); margin-top: var(--rz-space-3); }
@media (prefers-reduced-motion: no-preference) {
  .rz-page-hero { animation: rz-sheen-sweep 11s ease-in-out infinite; }
  .rz-page-hero::before { animation: rz-orb-drift-a 14s ease-in-out infinite; }
  .rz-page-hero::after { animation: rz-orb-drift-b 18s ease-in-out infinite; }
  .rz-page-hero .rz-eyebrow,
  .rz-page-hero h1,
  .rz-page-hero p {
    opacity: 0;
    animation: rz-hero-rise 800ms var(--rz-ease) forwards;
  }
  .rz-page-hero .rz-eyebrow { animation-delay: 100ms; }
  .rz-page-hero h1 { animation-delay: 220ms; }
  .rz-page-hero p { animation-delay: 360ms; }
}
@keyframes rz-sheen-sweep {
  0%, 100% { background-position: -20% -20%, 0 0; }
  50% { background-position: 120% 120%, 0 0; }
}
@keyframes rz-orb-drift-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(40px, 30px) scale(1.15); }
}
@keyframes rz-orb-drift-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-30px, -20px) scale(1.1); }
}
@keyframes rz-hero-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Dining order screen — categories on the left, menu in the middle,
   cart pinned on the right. Same three-column idea as the staff till,
   just laid out for a guest's own screen instead of one standing at a
   pass. ------------------------------------------------------------- */
.rz-dining {
  display: grid;
  grid-template-columns: 220px 1fr 340px;
  gap: var(--rz-space-6);
  align-items: start;
}
@media (max-width: 1199.98px) { .rz-dining { grid-template-columns: 1fr; } }

.rz-dining__categories {
  position: sticky;
  top: calc(var(--rz-header-height) + var(--rz-space-4));
  display: flex; flex-direction: column; gap: var(--rz-space-2);
}
@media (max-width: 1199.98px) {
  .rz-dining__categories { position: static; flex-direction: row; overflow-x: auto; padding-bottom: var(--rz-space-2); }
}
.rz-dining__category {
  display: flex; align-items: center; gap: var(--rz-space-3);
  padding: var(--rz-space-3);
  border: 1px solid var(--rz-border);
  border-radius: var(--rz-radius-md);
  background: var(--rz-surface);
  color: var(--rz-text-muted);
  text-align: left;
  flex: 0 0 auto;
  white-space: nowrap;
}
.rz-dining__category i { color: var(--rz-accent); }
.rz-dining__category small { display: block; font-size: var(--rz-text-2xs); color: var(--rz-text-muted); white-space: normal; }
.rz-dining__category.is-active {
  background: var(--rz-primary);
  border-color: var(--rz-primary);
  color: var(--rz-white);
}
.rz-dining__category.is-active i,
.rz-dining__category.is-active small { color: rgba(255, 255, 255, 0.75); }

.rz-menu-card {
  border: 1px solid var(--rz-border);
  border-radius: var(--rz-radius-lg);
  overflow: hidden;
  background: var(--rz-surface);
  display: flex; flex-direction: column;
}
.rz-menu-card__media { position: relative; aspect-ratio: 4 / 3; background: var(--rz-surface-sunken); }
.rz-menu-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rz-menu-card__body { padding: var(--rz-space-4); display: flex; flex-direction: column; flex: 1; }
.rz-menu-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--rz-space-2); }
.rz-menu-card__head h3 { font-size: var(--rz-text-base); margin: 0; }
.rz-menu-card__price { color: var(--rz-accent); font-weight: var(--rz-weight-semibold); white-space: nowrap; }
.rz-menu-card__desc { margin: var(--rz-space-2) 0 0; font-size: var(--rz-text-xs); color: var(--rz-text-muted); flex: 1; }
.rz-menu-card__tags { display: flex; flex-wrap: wrap; gap: var(--rz-space-1); margin-top: var(--rz-space-2); }

/* ---- Cart panel ------------------------------------------------------ */
.rz-dining__cart { position: sticky; top: calc(var(--rz-header-height) + var(--rz-space-4)); }
.rz-cart-line {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--rz-space-2);
  align-items: center;
  padding: var(--rz-space-3) 0;
  border-bottom: 1px solid var(--rz-border);
  font-size: var(--rz-text-sm);
}
.rz-cart-line__qty { display: flex; align-items: center; gap: var(--rz-space-1); }
.rz-cart-line__qty button {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--rz-border); background: var(--rz-surface);
  color: var(--rz-text); line-height: 1; padding: 0;
}
.rz-cart-line__name { font-weight: var(--rz-weight-medium); }
.rz-cart-line__remove { color: var(--rz-danger); font-size: var(--rz-text-xs); background: none; border: none; padding: 0; }
.rz-dining__totals { margin-top: var(--rz-space-3); }
.rz-page-hero p { max-width: 52ch; margin: var(--rz-space-4) 0 0; color: rgba(255, 255, 255, 0.78); }

/* ---- Copy button — bank details, reference codes. Swaps to a check
   mark and a gold fill for a moment after a successful copy, so tapping
   it actually feels like it did something. */
.rz-copy-btn {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border: 1px solid var(--rz-border);
  border-radius: var(--rz-radius-md);
  background: var(--rz-surface);
  color: var(--rz-text-muted);
  font-size: 0.9rem;
  cursor: pointer;
  transition: all var(--rz-duration-fast) var(--rz-ease);
}
.rz-copy-btn:hover { color: var(--rz-accent); border-color: var(--rz-accent); }
.rz-copy-btn.is-copied { background: var(--rz-accent); border-color: var(--rz-accent); color: var(--rz-text-on-gold); }

/* ---------------------------------------------------------------------
   LIVE CLOCK — sits inside a .rz-hero__inner, so it's styled to match
   the hero's own fixed white-on-photo look rather than the theme-aware
   .rz-glass tokens, which would go muddy against the hero's dark scrim
   in dark mode. Same reasoning as .rz-hero__title being a hardcoded
   white regardless of site theme.
   ------------------------------------------------------------------- */
.rz-live-clock {
  display: inline-block;
  margin-top: var(--rz-space-7);
  padding: var(--rz-space-5) var(--rz-space-8);
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--rz-radius-lg);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.rz-live-clock__time {
  margin: 0;
  font-family: var(--rz-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  color: var(--rz-gold);
  line-height: 1;
}
.rz-live-clock__date {
  margin: var(--rz-space-2) 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--rz-text-sm);
  letter-spacing: 0.03em;
}

/* ---- Kiosk search panel — an elevated card, so the functional part of
   the page reads as deliberately designed rather than dropped onto a
   bare page background beneath the hero. ---- */
.rz-kiosk-panel {
  background: var(--rz-surface);
  border: 1px solid var(--rz-border);
  border-radius: var(--rz-radius-xl);
  box-shadow: var(--rz-shadow-md);
  padding: var(--rz-space-8) var(--rz-space-6);
  margin-top: calc(-1 * var(--rz-space-9));
  position: relative;
  z-index: 2;
}
@media (max-width: 575.98px) {
  .rz-kiosk-panel { padding: var(--rz-space-6) var(--rz-space-4); margin-top: var(--rz-space-4); }
}

/* ---------------------------------------------------------------------
   STAFF ATTENDANCE KIOSK — large, touch-friendly, minimal distraction.
   ------------------------------------------------------------------- */
.rz-input--lg {
  padding: 1.1rem var(--rz-space-5);
  font-size: var(--rz-text-lg);
  border-radius: var(--rz-radius-lg);
}
.rz-btn--lg {
  padding: 1.1rem var(--rz-space-6);
  font-size: var(--rz-text-sm);
  border-radius: var(--rz-radius-lg);
}
.rz-kiosk__search { max-width: 640px; margin: 0 auto var(--rz-space-8); }
.rz-kiosk__searchbar { display: flex; gap: var(--rz-space-3); margin-top: var(--rz-space-2); position: relative; }
.rz-kiosk__searchbar .rz-input--lg { flex: 1 1 auto; }
.rz-kiosk__searchbar .rz-btn--lg { flex: 0 0 auto; }

/* Live type-ahead dropdown under the search bar — a lightweight name
   list that appears as the guest types, distinct from the full
   .rz-kiosk-card grid below (which still needs a name picked first). */
.rz-kiosk__suggestions {
  position: absolute; top: calc(100% + var(--rz-space-2)); left: 0; right: 0; z-index: 20;
  background: var(--rz-surface);
  border: 1px solid var(--rz-border);
  border-radius: var(--rz-radius-lg);
  box-shadow: var(--rz-shadow-md);
  overflow: hidden;
  max-height: 320px; overflow-y: auto;
}
.rz-kiosk__suggestion {
  display: flex; align-items: center; gap: var(--rz-space-3);
  width: 100%; padding: var(--rz-space-3) var(--rz-space-4);
  background: none; border: none; border-bottom: 1px solid var(--rz-border);
  text-align: left; cursor: pointer;
}
.rz-kiosk__suggestion:last-child { border-bottom: none; }
.rz-kiosk__suggestion:hover, .rz-kiosk__suggestion:focus-visible { background: var(--rz-surface-sunken); }
.rz-kiosk__suggestion-avatar {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; overflow: hidden;
  background: linear-gradient(145deg, var(--rz-navy), var(--rz-navy-900));
  color: var(--rz-gold);
  display: grid; place-items: center;
  font-size: var(--rz-text-xs); font-weight: var(--rz-weight-semibold);
}
.rz-kiosk__suggestion-avatar img { width: 100%; height: 100%; object-fit: cover; }
.rz-kiosk__suggestion-name { margin: 0; font-size: var(--rz-text-sm); font-weight: var(--rz-weight-semibold); color: var(--rz-text); }
.rz-kiosk__suggestion-meta { margin: 0; font-size: var(--rz-text-2xs); color: var(--rz-text-muted); }
.rz-kiosk__suggestion-status {
  padding: var(--rz-space-3) var(--rz-space-4);
  font-size: var(--rz-text-sm); color: var(--rz-text-muted); text-align: center;
}

.rz-kiosk__results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--rz-space-5);
}
.rz-kiosk-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: var(--rz-space-6) var(--rz-space-4);
  background: var(--rz-surface);
  border: 1px solid var(--rz-border);
  border-radius: var(--rz-radius-lg);
  box-shadow: var(--rz-shadow-sm);
}
.rz-kiosk-card__photo {
  width: 88px; height: 88px; border-radius: 50%;
  object-fit: cover;
  background: var(--rz-surface-sunken);
  display: grid; place-items: center;
  color: var(--rz-text-subtle);
  font-size: 2rem;
  margin-bottom: var(--rz-space-4);
}
.rz-kiosk-card__name { font-weight: var(--rz-weight-semibold); color: var(--rz-text); margin: 0; }
.rz-kiosk-card__meta { font-size: var(--rz-text-xs); color: var(--rz-text-muted); margin: var(--rz-space-1) 0 var(--rz-space-4); }
.rz-kiosk-card .rz-btn { width: 100%; }

/* ---------------------------------------------------------------------
   FACE REGISTRATION CAPTURE
   ------------------------------------------------------------------- */
.rz-facecap { max-width: 480px; margin: 0 auto; }
.rz-facecap__panel {
  background: var(--rz-surface);
  border: 1px solid var(--rz-border);
  border-radius: var(--rz-radius-lg);
  box-shadow: var(--rz-shadow-md);
  padding: var(--rz-space-7);
  text-align: center;
}
.rz-facecap__panel h2 { margin: 0 0 var(--rz-space-2); font-size: var(--rz-text-2xl); }
.rz-facecap__consent-text { text-align: left; margin: var(--rz-space-5) 0; }
.rz-facecap__panel .rz-checkbox { text-align: left; }
.rz-facecap__icon { font-size: 3rem; margin-bottom: var(--rz-space-3); }
.rz-facecap__panel--success .rz-facecap__icon { color: var(--rz-success); }
.rz-facecap__panel--error .rz-facecap__icon { color: var(--rz-danger); }

.rz-facecap__poses { display: flex; justify-content: center; gap: var(--rz-space-3); margin-bottom: var(--rz-space-5); }
.rz-facecap__pose-dot {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: var(--rz-radius-pill);
  border: 2px solid var(--rz-border-strong);
  color: var(--rz-text-muted);
  font-weight: var(--rz-weight-semibold);
  font-size: var(--rz-text-sm);
}
.rz-facecap__pose-dot.is-active { border-color: var(--rz-accent); color: var(--rz-accent); }
.rz-facecap__pose-dot.is-done { border-color: var(--rz-success); background: var(--rz-success); color: #fff; }

.rz-facecap__camera {
  position: relative;
  width: 100%; max-width: 340px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  border-radius: var(--rz-radius-pill);
  overflow: hidden;
  background: #000;
  border: 3px solid var(--rz-accent);
}
.rz-facecap__camera video {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scaleX(-1); /* mirror, so it feels like a mirror not a recording */
}
.rz-facecap__camera canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  transform: scaleX(-1);
  pointer-events: none;
}
.rz-facecap__status {
  margin: var(--rz-space-5) 0 0;
  font-weight: var(--rz-weight-semibold);
  color: var(--rz-text-muted);
}
.rz-facecap__status--warn { color: var(--rz-warning); }
.rz-facecap__status--info { color: var(--rz-info); }
.rz-facecap__status--good { color: var(--rz-success); }

/* ---------------------------------------------------------------------
   STAFF REQUEST CARDS — leave request, HR query, HR query status.
   The one generic .rz-facecap__panel (built for face capture) was
   getting reused here with ad-hoc inline style="max-width:...;text-
   align:left" repeated at every call site, and the leave balance table,
   the reference number, and the status lookup were each just a stack
   of plain <p> tags. These give each state a proper layout instead.
   ------------------------------------------------------------------- */
.rz-staffcard {
  max-width: 560px; margin: 0 auto;
  background: var(--rz-surface);
  border: 1px solid var(--rz-border);
  border-radius: var(--rz-radius-lg);
  box-shadow: var(--rz-shadow-md);
  padding: var(--rz-space-7);
  text-align: left;
}
@media (max-width: 575.98px) { .rz-staffcard { padding: var(--rz-space-5) var(--rz-space-4); } }

.rz-staffcard__identity { display: flex; align-items: center; gap: var(--rz-space-4); margin-bottom: var(--rz-space-5); }
.rz-staffcard__avatar {
  width: 56px; height: 56px; flex-shrink: 0;
  border-radius: 50%; overflow: hidden;
  background: linear-gradient(145deg, var(--rz-navy), var(--rz-navy-900));
  color: var(--rz-gold);
  display: grid; place-items: center;
  font-family: var(--rz-font-display); font-size: 1.5rem; font-weight: 600;
}
.rz-staffcard__avatar img { width: 100%; height: 100%; object-fit: cover; }
.rz-staffcard__name { margin: 0; font-size: var(--rz-text-lg); font-weight: var(--rz-weight-semibold); color: var(--rz-text); }
.rz-staffcard__meta { margin: 2px 0 0; font-size: var(--rz-text-xs); color: var(--rz-text-muted); }

.rz-balance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--rz-space-3); margin: 0 0 var(--rz-space-5); }
.rz-balance-tile { padding: var(--rz-space-3); background: var(--rz-surface-sunken); border-radius: var(--rz-radius-md); text-align: center; }
.rz-balance-tile__label {
  display: block; font-size: var(--rz-text-2xs); font-weight: var(--rz-weight-semibold);
  letter-spacing: var(--rz-tracking-wide); text-transform: uppercase; color: var(--rz-text-muted);
}
.rz-balance-tile__value {
  display: block; margin-top: var(--rz-space-1);
  font-family: var(--rz-font-display); font-size: var(--rz-text-2xl);
  font-weight: var(--rz-weight-medium); color: var(--rz-text);
  /* The display face defaults to old-style figures, where "10" reads as "IO". */
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1.2;
}
.rz-balance-tile__value small { font-family: var(--rz-font-body); font-size: var(--rz-text-xs); color: var(--rz-text-muted); }
.rz-balance-tile__value--text { font-family: var(--rz-font-body); font-size: var(--rz-text-sm); font-weight: var(--rz-weight-semibold); padding: 0.45rem 0; }
.rz-balance-tile__meta { display: block; font-size: var(--rz-text-xs); color: var(--rz-text-muted); }

.rz-staffcard--confirm { text-align: center; }
.rz-staffcard--confirm .rz-facecap__icon { color: var(--rz-success); margin-bottom: var(--rz-space-2); }
.rz-request-reference {
  display: inline-flex; align-items: center; gap: var(--rz-space-2);
  margin: var(--rz-space-3) 0; padding: var(--rz-space-3) var(--rz-space-5);
  background: var(--rz-surface-sunken); border-radius: var(--rz-radius-pill);
  font-family: var(--rz-font-display); font-size: var(--rz-text-xl); font-weight: 600; color: var(--rz-text);
}
.rz-request-reference button {
  border: none; background: none; color: var(--rz-text-muted); cursor: pointer;
  font-size: var(--rz-text-lg); line-height: 1; padding: 0; display: grid; place-items: center;
}
.rz-request-reference button:hover { color: var(--rz-accent); }
.rz-request-reference button.is-copied { color: var(--rz-success); }

.rz-response-thread { margin-top: var(--rz-space-5); text-align: left; }
.rz-response-thread__label {
  font-size: var(--rz-text-2xs); font-weight: var(--rz-weight-semibold);
  letter-spacing: var(--rz-tracking-wide); text-transform: uppercase; color: var(--rz-text-muted);
  margin: 0 0 var(--rz-space-2);
}
.rz-response-bubble {
  padding: var(--rz-space-3) var(--rz-space-4);
  background: var(--rz-surface-sunken); border-radius: var(--rz-radius-md);
  margin-bottom: var(--rz-space-2); font-size: var(--rz-text-sm); color: var(--rz-text);
}
.rz-response-bubble:last-child { margin-bottom: 0; }