/* =========================================================================
   VIVIDUS Sleek — sleek-brand.css
   Brand-site components that the VIVIDUS property site does not have
   (property grid, perks grid, careers blocks, contact blocks, steps).
   Built on the VIVIDUS tokens in base.css only — no new colours, no new
   font families. Load AFTER base.css · vividus.css · inner.css ·
   ../assets/css/gdh-navbar.css.
   ========================================================================= */


/* ---------- 0. Header — brand logo + gold accents ---------- */

/* VIVIDUS Sleek mark is 955×354 (2.7:1). The shared navbar pins every logo
   to 42px tall; the Sleek wordmark is wide and light, so give it a touch more. */
html body .site-header .masthead .nav-logo { height: 52px !important; width: auto !important; }
@media (max-width: 768px) {
  html body .site-header .masthead .nav-logo { height: 44px !important; }
}
.menu-overlay .tb-cent .nav-logo { height: 38px; width: auto; }

/* Keep the chrome in VIVIDUS gold (the shared navbar defaults to its own accent) */
html body .site-header .nav .nav-links > li > a:hover,
html body .site-header .nav .nav-links > li > a[aria-current] { color: var(--vv-gold-deep) !important; }
html body .site-header .masthead .back-to-gdh:hover { color: var(--vv-gold-deep) !important; }

/* Booking-bar anchor sits below the fixed header */
#searchBar { scroll-margin-top: 140px; }


/* ---------- 1. Numerals: sized by design-system.css (stat numerals = H2) ---------- */


/* ---------- 1b. Headings are upright (no italic); the accent word keeps its gold ---------- */

html body #main :is(h1, h2, h3, h4, h5, h6),
html body #main :is(h1, h2, h3, h4, h5, h6) em { font-style: normal !important; }


/* ---------- 2. Shared section scaffolding ---------- */

.vs-section {
  padding: calc(var(--ds-space-section) / 2) 0;
  background: var(--vv-paper);
}
/* sections are separated by spacing only (design system: no divider lines) */

.vs-wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* centred section head (same rhythm as VIVIDUS .me-section-head) */
.vs-head {
  max-width: var(--container);
  margin: 0 auto clamp(32px, 5vw, 56px);
  padding: 0 var(--container-pad);
  text-align: center;
}
.vs-head .label {
  display: block;
  font-weight: 600;
  letter-spacing: .22em;
  color: var(--vv-gold-deep);
}
.vs-head h1,
.vs-head h2 {
  font-size: clamp(28px, 3.5vw, 52px);
  line-height: 1.08;
  margin-top: 14px;
}
.vs-head p {
  margin: 22px auto 0;
  max-width: 58ch;
}
.vs-head--left { text-align: left; }
.vs-head--left p { margin-left: 0; }

/* gold note line under a grid */
.vs-note {
  max-width: var(--container);
  margin: clamp(28px, 4vw, 44px) auto 0;
  padding: 0 var(--container-pad);
  text-align: center;
}
.vs-note p {
  margin: 0 auto;
  font-size: 13px !important;
  letter-spacing: .02em;
  color: var(--vv-ink-mute) !important;
}

.vs-center { text-align: center; margin-top: clamp(32px, 4vw, 48px); }


/* ---------- 3. Home — "Find your stay" (r-head + rm-cards) ---------- */

.vs-stays .r-head .label { color: var(--vv-gold-deep); }
/* intro copy fills the right column, left-aligned, with the button under it */
.vs-stays .r-head-right { align-items: flex-start; }
.vs-stays .r-head-right p { max-width: none; text-align: left; }
.vs-stays .r-head-cta { justify-content: flex-start; }
.vs-stays .rm-cards-inner { padding-top: 0; padding-bottom: 0; }
.vs-stays.rm-cards-section,
.vs-stays { border-bottom: 0; }

/* property card extras */
.rm-card-meta .vs-card-loc {
  display: block;
  margin-top: 2px;
  font-family: var(--fb);
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--vv-ink-mute);
}
.vs-card-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: auto;
}

/* Name-only property: logo tile on a warm paper ground */
.rm-card-img.vs-logo-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: color-mix(in srgb, var(--vv-gold-pale) 45%, var(--vv-paper));
  border-bottom: 1px solid var(--vv-line-soft);
}
.vs-logo-tile img {
  width: min(58%, 300px);
  height: auto;
  opacity: .92;
}
.rm-card--name-only .rm-card-body { flex: 0 0 auto; }
.rm-card--name-only .rm-card-meta { margin-bottom: 0; }
.rm-card--name-only .rm-card-name { margin-bottom: 0; }

/* single-property row: keep the two cards balanced */
.rm-cards-row.vs-row-2 { align-items: stretch; }


/* ---------- 4. Perks / services grid (numbered, hairline cells) ---------- */

.vs-grid-lines {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--vv-line);
  border: 1px solid var(--vv-line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.vs-grid-lines--4 { grid-template-columns: repeat(4, 1fr); }

.vs-cell {
  background: var(--vv-paper);
  padding: clamp(24px, 2.4vw, 34px) clamp(22px, 2.2vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: background var(--m-base) var(--ease);
}
.vs-cell:hover { background: color-mix(in srgb, var(--vv-gold-pale) 35%, var(--vv-paper)); }
.vs-cell-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.vs-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--vv-gold-pale);
  color: var(--vv-gold-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vs-icon svg { width: 20px; height: 20px; }
.vs-no {
  font-family: var(--fd);
  font-size: 26px;
  line-height: 1;
  color: var(--vv-gold);
}
.vs-cell h3 {
  font-size: clamp(19px, 1.5vw, 23px);
  line-height: 1.2;
}
.body-stack .vs-cell p {
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
}

@media (max-width: 1000px) {
  .vs-grid-lines,
  .vs-grid-lines--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .vs-grid-lines,
  .vs-grid-lines--4 { grid-template-columns: 1fr; }
}


/* ---------- 4b. Home — dining & events: image beside text, alternating ---------- */

.vs-split-list {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-heading-grid);
}
.vs-split {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--ds-space-columns);
  align-items: center;   /* text is centred on the image (design system §7.7) */
}
.vs-split--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
.vs-split--flip .vs-split-img { order: 2; }
.vs-split-img { margin: 0; overflow: hidden; }
.vs-split-img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
html body #main .vs-split-copy > :is(h2, h3) { margin: 0; }
html body #main .vs-split-copy > :is(h2, h3) + p { margin-top: var(--ds-space-heading-text) !important; }

/* a brand line set off with a gold rule (About); it is a paragraph, so Body size */
html body #main .vs-split-copy > p.vs-pullquote {
  margin-top: var(--ds-space-text-button) !important;
  padding-left: 16px;
  border-left: 2px solid var(--vv-gold);
  color: var(--ds-ink);
  font-weight: 500;
}

@media (max-width: 767px) {
  .vs-split,
  .vs-split--flip { grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-image-content); }
  .vs-split--flip .vs-split-img { order: 0; }
}

/* Properties page: a hotel without photos shows the brand logo on a 3:2 tile instead */
.vs-split-img.vs-logo-tile {
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: color-mix(in srgb, var(--vv-gold-pale) 45%, var(--vv-paper));
  border: 1px solid var(--vv-line-soft);
}
.vs-split-img.vs-logo-tile img {
  width: min(58%, 300px);
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  opacity: .92;
}
html body #main .vs-split-copy > p + .vs-links { margin-top: var(--ds-space-text-button) !important; }
/* rows linked from the menu and footer (#cn-windsor, #arya-mansion) land below the fixed header */
.vs-props .vs-split { scroll-margin-top: 150px; }


/* ---------- 4c. Home — gallery: auto-scrolling photo strip ----------
   Runs edge to edge (design system §7.6a). Each photo carries its own right
   margin instead of a flex gap, so the two identical halves of the track are
   exactly equal and translateX(-50%) loops without a jump. */

.vs-marquee { overflow: hidden; }
.vs-marquee-track {
  display: flex;
  width: max-content;
  animation: vs-marquee 70s linear infinite;
  will-change: transform;
}
.vs-marquee:hover .vs-marquee-track,
.vs-marquee:focus-within .vs-marquee-track { animation-play-state: paused; }
/* every photo gets the same 4:3 frame */
.vs-marquee-item {
  flex: none;
  height: clamp(200px, 18vw, 300px);
  aspect-ratio: 4 / 3;
  margin: 0 var(--ds-space-card-gap) 0 0;
  overflow: hidden;
}
.vs-marquee-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@keyframes vs-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .vs-marquee { overflow-x: auto; }
  .vs-marquee-track { animation: none; }
}


/* ---------- 4d. Home — guest reviews ---------- */

.vs-quotes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ds-space-card-gap);
}
.vs-quote {
  margin: 0;
  display: flex;
  flex-direction: column;
  padding: var(--ds-card-pad);
  background: var(--ds-paper);
  border: 1px solid var(--ds-line);
}
.vs-quote-mark { color: var(--vv-gold); margin-bottom: var(--ds-space-heading-text); }
.vs-quote blockquote { flex: 1; margin: 0 0 var(--ds-space-text-button); }
/* review text is a normal paragraph (design system: every paragraph, quotes included, is Body 15px) */
html body #main .vs-quote blockquote p {
  margin: 0;
  font-family: var(--ds-font-body);
  font-style: normal;
  font-weight: 400;
  font-size: var(--ds-fs-body);
  line-height: var(--ds-lh-body);
  color: var(--ds-ink-soft);
}
.vs-quote figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: var(--ds-space-heading-text);
  border-top: 1px solid var(--ds-line-soft);
  font-size: var(--ds-fs-small);
  line-height: var(--ds-lh-small);
}
.vs-quote-name { font-weight: 600; color: var(--ds-ink); }
.vs-quote-src { color: var(--ds-ink-mute); }

@media (max-width: 1023px) {
  .vs-quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .vs-quotes { grid-template-columns: minmax(0, 1fr); }
}


/* ---------- 4d2. About — Mission / Vision / Values cards (About page only) ----------
   24px padding, 44px icon, heading -> text 16px, no extra gaps. */

html body #main .vmv-section .vmv-card {
  padding: var(--ds-card-pad);
  gap: 0;
}
html body #main .vmv-section .vmv-icon {
  width: 44px;
  height: 44px;
  margin-bottom: var(--ds-space-heading-text);
}
html body #main .vmv-section .vmv-icon svg { width: 22px; height: 22px; }
html body #main .vmv-section .vmv-card :is(h2, h3) { margin: 0; }
html body #main .vmv-section .vmv-card :is(h2, h3) + p { margin: var(--ds-space-heading-text) 0 0 !important; }


/* ---------- 4d3. About — Contact Us button under the collage: 50px (40 tablet, 30 mobile) ---------- */

html body #main .vs-about-cta { margin-top: var(--ds-space-button-grid) !important; }

/* About: Mission / Vision / Values cards -> collage is 50px (40 tablet, 30 mobile), not a full section gap */
html body #main .page-content > section.vs-about.vmv-section { padding-bottom: 0 !important; }
html body #main .page-content > section.vs-about + section.vs-about-photos { padding-top: var(--ds-space-heading-grid) !important; }


/* ---------- 4e. Card slider (home facilities) ----------
   Cards sit on the page column with arrows in the gutter, like the GDH
   collection slider (design system §7.6a). 3 cards in view, 2 on tablet,
   1 (with a peek of the next) on mobile; arrows move under the cards once
   the gutter is too narrow to hold them. Behaviour: main.js "Card sliders". */

.vs-slider { position: relative; display: flow-root; }   /* flow-root keeps the track's bottom margin inside */
.vs-slider-track {
  --per-view: 3;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--per-view) - 1) * var(--ds-space-card-gap)) / var(--per-view));
  gap: var(--ds-space-card-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.vs-slider-track::-webkit-scrollbar { display: none; }
.vs-slider-track > * { scroll-snap-align: start; }
.vs-slider-track:focus-visible { outline: 1px solid var(--vv-gold-deep); outline-offset: 4px; }

/* facility cards: one bordered card each; titles in the card-title (H4) style (§7.5) */
.vs-slider .vs-cell { border: 1px solid var(--vv-line); }
html body #main .vs-slider .vs-cell h3 {
  margin: 0;
  font-size: var(--ds-fs-h4) !important;
  line-height: var(--ds-lh-h4) !important;
}
html body #main .vs-slider .vs-cell p { margin: 0; }

.vs-slider-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 54px;
  height: 54px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--vv-line);
  border-radius: 50%;
  background: var(--ds-paper);
  color: var(--ds-ink);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, opacity 200ms ease;
}
.vs-slider-nav svg { width: 20px; height: 20px; }
.vs-slider-nav:is(:hover, :focus-visible):not(:disabled) {
  background: var(--ds-btn-color);
  border-color: var(--ds-btn-color);
  color: #FFFFFF;
}
.vs-slider-nav:disabled { opacity: .3; cursor: default; }
/* 16px off the cards: keeps the right arrow clear of the fixed chat / back-to-top
   buttons, which sit 30–80px from the window's right edge */
.vs-slider-prev { left: calc(var(--container-pad) - 54px - 16px); }
.vs-slider-next { right: calc(var(--container-pad) - 54px - 16px); }

@media (prefers-reduced-motion: reduce) {
  .vs-slider-track { scroll-behavior: auto; }
}
/* below 1280 the gutter is too narrow for the arrows: they sit centred under the cards
   (room reserved on the track, since wrappers carry no vertical padding) */
@media (max-width: 1279px) {
  .vs-slider-track { margin-bottom: calc(54px + var(--ds-space-text-button)); }
  .vs-slider-nav { top: auto; bottom: 0; transform: none; }
  .vs-slider-prev { left: calc(50% - 62px); }
  .vs-slider-next { right: calc(50% - 62px); }
}
@media (max-width: 1023px) {
  .vs-slider-track { --per-view: 2; }
}
@media (max-width: 767px) {
  .vs-slider-track { --per-view: 1.15; }
}


/* ---------- 5. Dark ink band (careers benefits) ---------- */

.vs-dark {
  background: var(--vv-ink);
  padding: var(--section-y) 0;
  position: relative;
  overflow: hidden;
}
.vs-dark .vs-head .label { color: var(--vv-gold-leaf); }
.vs-dark .vs-head h2 { color: var(--vv-paper); }
.vs-dark .vs-head h2 em { color: var(--vv-gold-leaf); }
.body-stack .vs-dark .vs-head p { color: rgba(248,243,230,.68); }

.vs-dark .vs-grid-lines {
  background: rgba(248,243,230,.12);
  border-color: rgba(248,243,230,.12);
}
.vs-dark .vs-cell { background: var(--vv-ink); }
.vs-dark .vs-cell:hover { background: rgba(248,243,230,.04); }
.vs-dark .vs-icon { background: rgba(200,169,104,.15); color: var(--vv-gold-leaf); }
.vs-dark .vs-cell h3 { color: var(--vv-paper); }
.body-stack .vs-dark .vs-cell p { color: rgba(248,243,230,.66); }


/* ---------- 6. Card trios (culture cards) ---------- */

.vs-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
}
.vs-grid-3 .meeting-card { display: flex; flex-direction: column; }
.vs-grid-3 .mc-body h3 { color: var(--vv-ink); }
.body-stack .vs-grid-3 .mc-body p { margin-top: 14px; font-size: 14px; }
@media (max-width: 860px) {
  .vs-grid-3 { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
}


/* ---------- 7. Inner-page intro (properties) ---------- */

.vs-intro {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(48px, 7vw, 88px) var(--container-pad) clamp(28px, 4vw, 44px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: start;   /* heading top = paragraph first line */
}
.vs-intro .label { display: block; color: var(--vv-gold-deep); font-weight: 600; letter-spacing: .22em; }
.vs-intro h1 { margin-top: 0; }   /* size comes from the design-system H1 */
.vs-intro-side p { max-width: 46ch; }
.vs-pills {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0 !important;
}
.body-stack .vs-pills li {
  font-family: var(--fb);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--vv-ink-soft);
  border: 1px solid var(--vv-line);
  border-radius: var(--r-pill);
  padding: 8px 16px;
  line-height: 1.4;
}
@media (max-width: 760px) {
  .vs-intro { grid-template-columns: 1fr; align-items: start; }
}


/* ---------- 8. Offers (card-grid + pg-card) ---------- */

.vs-offers .card-grid { margin-top: 0; }
.vs-offers .pg-card { background: var(--vv-paper); }
.vs-offers .pg-card-img { aspect-ratio: 3 / 2; }
.vs-offers .pg-card-body h3 { font-size: clamp(22px, 1.9vw, 28px); }
.vs-offers .pg-card-cta { margin-top: 26px; }


/* ---------- 9. Hiring process steps ---------- */

.vs-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3vw, 44px);
  list-style: none;
  margin: 0;
  padding: 0 !important;
}
.vs-step {
  position: relative;
  border-top: 1px solid var(--vv-line);
  padding-top: 28px;
}
.vs-step::before {
  content: "";
  position: absolute;
  top: -4px; left: 0;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--vv-gold);
}
.vs-step-no {
  display: block;
  font-family: var(--fd);
  font-size: clamp(40px, 4vw, 56px);
  line-height: 1;
  color: var(--vv-gold-deep);
}
.vs-step h3 { font-size: clamp(22px, 1.8vw, 26px); margin-top: 18px; }
.body-stack .vs-step p { margin-top: 10px; font-size: 14px; }
@media (max-width: 900px) { .vs-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .vs-steps { grid-template-columns: 1fr; } }


/* ---------- 10. Careers — apply block (enq-section extras) ---------- */

.vs-mail-card {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--vv-line-soft);
  border-radius: var(--r-md);
  padding: 16px 18px;
  margin-top: 8px;
  background: var(--vv-paper);
}
.vs-mail-k {
  display: block;
  font-family: var(--fb);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--vv-ink-mute);
}
.vs-mail-v {
  font-family: var(--fd);
  font-size: 18px;
  color: var(--vv-gold-deep);
  text-decoration: none;
}
.vs-mail-v:hover { text-decoration: underline; text-underline-offset: 3px; }
.vs-apply-note {
  margin-top: 22px;
  padding: 16px 18px;
  border-left: 2px solid var(--vv-gold);
  background: color-mix(in srgb, var(--vv-gold-pale) 30%, var(--vv-paper));
}
.body-stack .vs-apply-note p { font-size: 13px; margin: 0; }

.enq-form h3 { font-size: clamp(22px, 2vw, 30px); margin-bottom: 4px; }

/* résumé upload */
.vs-upload {
  position: relative;
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px dashed var(--vv-line);
  background: var(--vv-paper);
  cursor: pointer;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 14px !important;
  color: var(--vv-ink-soft) !important;
  transition: border-color var(--m-fast) var(--ease);
}
.vs-upload:hover,
.vs-upload:focus-within { border-color: var(--vv-gold-deep); }
.vs-upload svg { color: var(--vv-gold-deep); flex-shrink: 0; }
.vs-upload input[type="file"] {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  overflow: hidden;
}

/* form status line (shared by contact + careers) */
.vs-form-status {
  display: none;
  padding: 12px 16px;
  border-radius: 8px;
  font-family: var(--fb);
  font-size: 14px;
  line-height: 1.5;
}
.enq-field input[aria-invalid="true"],
.enq-field select[aria-invalid="true"],
.enq-field textarea[aria-invalid="true"],
.form-group input[aria-invalid="true"],
.form-group select[aria-invalid="true"],
.form-group textarea[aria-invalid="true"] { border-color: var(--vv-gold-deep); box-shadow: 0 0 0 1px var(--vv-gold-deep); }


/* ---------- 11. Contact page ---------- */

/* quick-contact strip */
.vs-quick {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
.vs-quick-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--vv-line);
}
.vs-quick-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 26px 24px;
  border-right: 1px solid var(--vv-line-soft);
  min-width: 0;
}
.vs-quick-item:first-child { padding-left: 0; }
.vs-quick-item:last-child { border-right: 0; }
.vs-quick-k {
  display: block;
  font-family: var(--fb);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--vv-ink-mute);
}
.vs-quick-v {
  font-family: var(--fd);
  font-size: 17px;
  color: var(--vv-ink);
  text-decoration: none;
  transition: color var(--m-fast) var(--ease);
}
a.vs-quick-v:hover { color: var(--vv-gold-deep); }
@media (max-width: 860px) {
  .vs-quick-row { grid-template-columns: 1fr; }
  .vs-quick-item { padding: 18px 0; border-right: 0; border-bottom: 1px solid var(--vv-line-soft); }
  .vs-quick-item:last-child { border-bottom: 0; }
}

/* corporate office (top of the contact page): one panel. The address sits on a soft gold
   tint on the left; phone, email and partnerships are three ruled rows on the right
   (label | value), so no box is stretched taller than its content. Details in the body font. */
.vs-corp-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  border: 1px solid var(--vv-line-soft);
  background: var(--vv-paper);
  box-shadow: var(--shadow-soft);
}
.vs-corp-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: var(--ds-space-content);
  background: color-mix(in srgb, var(--vv-gold-pale) 40%, var(--vv-paper));
}
.vs-corp-main .vs-icon { background: var(--vv-paper); margin-bottom: var(--ds-space-heading-text); }
.vs-corp-k {
  font-family: var(--fb);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--vv-ink-mute);
}
.vs-corp-name {
  margin-top: 8px;
  font-family: var(--ds-font-display);
  font-size: var(--ds-fs-h5);
  line-height: var(--ds-lh-h5);
  color: var(--vv-ink);
}
.vs-corp-addr {
  margin-top: 8px;
  font-family: var(--fb);
  font-size: var(--ds-fs-body);
  line-height: var(--ds-lh-body);
  color: var(--ds-ink-soft);
}
.vs-corp-list {
  list-style: none;
  margin: 0;
  padding: 0 var(--ds-space-content);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.body-stack .vs-corp-list li {
  display: grid;
  grid-template-columns: 44px 150px minmax(0, 1fr);
  align-items: center;
  column-gap: 20px;
  margin: 0;
  padding: 22px 0;
  border-bottom: 1px solid var(--vv-line-soft);
}
.body-stack .vs-corp-list li:last-child { border-bottom: 0; }
.vs-corp-v {
  font-family: var(--fb);
  font-size: 17px;
  line-height: 26px;
  color: var(--vv-ink);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color var(--m-fast) var(--ease);
}
a.vs-corp-v:hover { color: var(--vv-gold-deep); }
@media (max-width: 1023px) {
  .vs-corp-panel { grid-template-columns: minmax(0, 1fr); }
  .vs-corp-addr br { display: none; }   /* the address wraps naturally in one column */
}
/* phones: label above value */
@media (max-width: 560px) {
  .body-stack .vs-corp-list li { grid-template-columns: 44px minmax(0, 1fr); padding: 18px 0; }
  .vs-corp-list .vs-icon { grid-row: span 2; }
  .vs-corp-v { font-size: var(--ds-fs-body); }
}

/* enquiry form (last section): centred under its heading, on the 860px intro measure */
.vs-enquiry .contact-form { max-width: 860px; margin-left: auto; margin-right: auto; }
/* careers: the application form on the same 860px measure */
html body #main .vs-careers .enq-form { max-width: 860px; margin-left: auto !important; margin-right: auto !important; }
.vs-careers .vs-head a { color: var(--vv-gold-deep); text-decoration: underline; text-underline-offset: 3px; }

/* enquiry grid: form | sidebar */
.vs-contact-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.vs-contact-grid .room-detail-sidebar .fs-link { color: var(--vv-ink); transition: color 200ms; }
.vs-contact-grid .room-detail-sidebar .fs-link:hover { color: var(--vv-gold-deep); }
.vs-contact-grid .footer-social { display: flex; flex-wrap: wrap; gap: 16px; }
.vs-contact-grid .footer-social .fs-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--fb); font-size: 14px; }
.vs-side-link {
  color: var(--vv-gold-deep);
  text-decoration: none;
  font-family: var(--fb);
  font-size: 15px;
}
.vs-side-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.vs-side-text {
  font-family: var(--fb);
  font-size: 14px;
  line-height: 1.65;
  color: var(--vv-ink);
}
.contact-form .check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--fb);
  font-size: 14px;
  line-height: 1.5;
  color: var(--vv-ink-soft);
  margin-bottom: 4px;
}
.contact-form .check input { margin-top: 3px; flex-shrink: 0; accent-color: var(--vv-gold-deep); }
@media (max-width: 900px) {
  .vs-contact-grid { grid-template-columns: 1fr; }
  .vs-contact-grid .room-detail-sidebar { position: static; }
}

/* regional sales offices */
.vs-offices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
}
.vs-office {
  background: var(--vv-paper);
  border: 1px solid var(--vv-line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-soft);
  padding: var(--ds-card-pad);   /* 24px (20 mobile), the design-system card padding */
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: box-shadow var(--m-base) var(--ease), transform var(--m-base) var(--ease);
}
.vs-office:hover { box-shadow: var(--shadow-plate); transform: translateY(-3px); }
.vs-office h3 { font-size: clamp(24px, 2.2vw, 32px); }
.vs-office-who {
  display: block;
  font-family: var(--fb);
  font-size: 15px;
  font-weight: 600;
  color: var(--vv-ink);
}
.vs-office-role {
  display: block;
  margin-top: 4px;
  font-family: var(--fb);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--vv-gold-deep);
}

/* icon + link list (offices, property contact card) */
.vs-links {
  list-style: none;
  margin: 0;
  padding: 16px 0 0 !important;
  border-top: 1px solid var(--vv-line-soft);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.body-stack .vs-links li { margin: 0; }
.vs-links a,
.vs-links span {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--fb);
  font-size: 14px;
  line-height: 1.55;
  color: var(--vv-ink-soft);
  text-decoration: none;
  transition: color var(--m-fast) var(--ease);
}
.vs-links svg { color: var(--vv-gold-deep); flex-shrink: 0; margin-top: 3px; }
.vs-links a:hover { color: var(--vv-gold-deep); }
.rm-card .vs-links { margin-bottom: 22px; }

@media (max-width: 900px) {
  .vs-offices { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
}


/* ---------- 12. Booking widget — rate slot renders nothing when empty ---------- */

.bb-price:empty { display: none; }


/* ---------- 13. Footer — brand logo on ink ---------- */

.vs-footer-logo {
  display: block;
  height: 64px;
  width: auto;
  margin: 0 auto 18px;
  filter: brightness(0) invert(1);
  opacity: .92;
}
/* footer nav: title case as written in the markup (base.css set capitals),
   with the wide capitals tracking and 12px size eased for mixed-case text (same as CN Windsor) */
.dls-footer-nav a { text-transform: none; letter-spacing: .02em; font-size: 14px; }
/* footer type: Manrope throughout, like the Great Destinations Hospitality footer
   (base.css sets every p and li in Playfair for page copy) */
.dls-footer p:not(.dls-footer-name), .dls-footer li { font-family: var(--fb); }


/* ---------- 14. Page-level hooks ---------- */

/* button row (about) */
.vs-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}
.vv-btn--dark {
  background: var(--vv-ink);
  color: var(--vv-paper);
  border-color: var(--vv-ink);
}
.vv-btn--dark:hover {
  background: var(--vv-gold-deep);
  border-color: var(--vv-gold-deep);
  color: #fff;
}

/* about — centred story column, as on the VIVIDUS About page */
.vs-about-story .story-copy { text-align: center; align-items: center; }
.vs-about-story .story-copy .label { color: var(--vv-gold-deep); }
.vs-about-story .vs-btn-row { justify-content: center; }
/* a button row inside a centred section head (home gallery: one button per hotel) */
.vs-head .vs-btn-row { justify-content: center; }
.vs-about-story .story-copy h1 { font-size: clamp(34px, 3.6vw, 52px); margin-top: 16px; }

/* head inside an already-padded wrapper */
.vs-head--flush { padding-left: 0; padding-right: 0; }

/* rm-cards used inside a .vs-section */
.vs-section .rm-cards-inner { padding-top: 0; padding-bottom: 0; }
.rm-card-body .vs-card-desc { margin: 0 0 20px; }

/* offers — card headings are h2 for outline, sized like VIVIDUS card h3 */
.pg-card-body .vs-offer-h {
  margin-top: 8px;
  font-size: clamp(22px, 1.9vw, 28px);
  line-height: 1.15;
}

/* booking widget — date popups anchor to their field */
.brand-booking .date-wrapper { position: relative; }

/* careers — upload caption styled like an enquiry label */
.vs-field-k {
  font-family: var(--fb);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vv-ink-mute);
}
.vs-apply { border-top: 1px solid var(--vv-line-soft); border-bottom: 1px solid var(--vv-line-soft); }

/* contact — enquiry heading (H2; the page H1 is in the intro) + form spacing */
.body-stack .vs-contact-grid h2 + p { margin-top: 20px; }
.vs-contact-grid .contact-form { margin-top: var(--s7); }


/* ---------- 15. Mobile gutters ---------- */

/* same gutter as every other section: the shared --container-pad */
@media (max-width: 768px) {
  .vs-head,
  .vs-wrap,
  .vs-quick,
  .vs-note,
  .vs-intro,
  .vs-stays .r-head,
  .vs-stays .rm-cards-inner { padding-left: var(--container-pad); padding-right: var(--container-pad); }
}

/* ==========================================================================
   One content column for every section
   The template's sections set their widths in four different ways, so their
   edges never lined up. Everything below now sits on the same column as the
   section heads: max-width var(--container), side padding var(--container-pad).
   `html body` prefixes outrank the template's own `html body … !important` rules
   (e.g. inner.css pins the breadcrumb 100px from the page edge).
   ========================================================================== */

/* The column itself */
html body nav.breadcrumb .breadcrumb-inner,
html body .dn-header,
html body .dn-gallery,
html body .loc-main,
html body .anchor-split,
html body .gl-page-intro > *,
html body .body-stack > div:has(> .gal-item),
html body .dn-reserve-inner,
html body .fac-page-intro-inner,
html body .fac-cards-inner,
html body .loc-transport-inner,
html body .enq-inner,
html body .usp-inner,
html body .usp-tagline {
  box-sizing: border-box !important;
  max-width: var(--container) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--container-pad) !important;
  padding-right: var(--container-pad) !important;
}

/* Their outer bands stay full width (backgrounds intact) but stop adding side padding */
html body .anchor.anchor--split,
html body .gl-page-intro,
html body .vv-usp,
html body .dn-reserve,
html body .fac-page-intro,
html body .fac-cards-section,
html body .loc-transport,
html body .loc-attr,
html body .enq-section {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Blocks positioned with fixed side margins */
html body .rs-gallery {
  width: calc(100% - 2 * var(--container-pad)) !important;
  max-width: calc(var(--container) - 2 * var(--container-pad)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Left-aligned text columns start on the column's left edge */
html body .tc-wrap {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Room detail: let the main column shrink so the sidebar stays inside the column */
@media (min-width: 901px) {
  html body .room-detail-body { grid-template-columns: minmax(0, 1fr) 340px !important; }
}

/* Booking card: never wider than the column (its 24px padding sits outside the form) */
html body .search-widget-wrap {
  max-width: min(980px, calc(100% - 2 * var(--container-pad) + 48px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ==========================================================================
   Homepage hero: same visible size as the Great Destinations homepage cover
   (GDH: calc(100dvh - 118px), tucked 30px under the header, so its visible
   area runs from the header to 30px above the window bottom).
   ========================================================================== */
html body .hero-slider {
  height: calc(100dvh - 144px) !important;
  min-height: 450px !important;
}
@media (max-width: 768px) {
  html body .hero-slider { height: calc(100dvh - 134px) !important; min-height: 420px !important; }
}
@media (max-width: 480px) {
  html body .hero-slider { height: calc(70vh - 16px) !important; min-height: 0 !important; }
}

/* Room tabs: the underline spans the content column, not the column plus its padding */
html body .room-tabs {
  box-sizing: border-box !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: calc(100% - 2 * var(--container-pad)) !important;
  max-width: calc(var(--container) - 2 * var(--container-pad)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ==========================================================================
   Design system spacing (/DESIGN-SYSTEM.md §4, §7.7) — tokens only
   Breadcrumb -> H1 16 · Section -> section 100 (half each side) · Last section -> footer 100.
   ========================================================================== */

/* Text rhythm inside page content (cards excluded: the shared card rules own them) */
html body #main :is(h1, h2):not([class*="card"] *):has(+ :is(p, .lede)) { margin-bottom: 0 !important; }
html body #main :is(h1, h2):not([class*="card"] *) + :is(p, .lede) { margin-top: var(--ds-space-heading-text) !important; }
html body #main p:not([class*="card"] *):has(+ p) { margin-bottom: 0 !important; }
html body #main p:not([class*="card"] *) + p { margin-top: var(--ds-space-text-text) !important; }
html body #main :is(p, .lede, ul):not([class*="card"] *):has(+ :is(a.vv-btn, .r-head-cta, div:has(> a.vv-btn:first-child))) { margin-bottom: 0 !important; }
html body #main :is(p, .lede, ul):not([class*="card"] *) + :is(a.vv-btn, .r-head-cta, div:has(> a.vv-btn:first-child)) { margin-top: var(--ds-space-text-button) !important; }

/* Sections: half the section gap on each side, no divider lines */
html body #main > :is(section.vs-section, section.enq-section, section.anchor, section.rooms, div.vs-quick):not(.ds-band),
html body #main .page-content > :is(section.story-section, section.vmv-section) {
  padding-top: calc(var(--ds-space-section) / 2) !important;
  padding-bottom: calc(var(--ds-space-section) / 2) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}
/* (bands: hero, photo strip, dark section carry ds-band; design-system.css 10e sets the 100px around and inside them) */

/* Home: hero (+ booking card) -> first section is a full section gap */
html body #main > .search-widget-wrap { margin-bottom: 0 !important; }
html body #main > .search-widget-wrap + section.anchor { padding-top: var(--ds-space-section) !important; }
html body #main .vs-stays .r-head { margin-bottom: var(--ds-space-button-grid) !important; }

/* Properties: intro -> cards (Heading -> Grid) */
html body #main > .vs-intro { padding-bottom: 0 !important; margin-bottom: 0 !important; }
html body #main > .vs-intro + .rm-cards-section {
  padding-top: var(--ds-space-heading-grid) !important;
  padding-bottom: calc(var(--ds-space-section) / 2) !important;
  border: 0 !important;
}

/* (Breadcrumb -> first content: 80/64/48 comes from design-system.css) */

/* Last section -> footer */
html body #main > section:not(:has(~ section)):not(.hero-slider),
html body #main .page-content > section:last-child {
  padding-bottom: var(--ds-space-footer) !important;
}

/* Section heads -> their grid (Heading/Button -> Grid) */
html body #main .vs-head { margin-bottom: var(--ds-space-heading-grid) !important; }
html body #main .vs-head > :last-child { margin-bottom: 0 !important; }
/* Properties intro: heading column starts at the top so Breadcrumb -> H1 stays 16px */
html body #main > .vs-intro { align-items: start !important; }
/* Home: text -> button is the design-system gap only (no extra flex gap) */
html body #main .vs-stays .r-head-right,
html body #main .anchor .anchor-cta { gap: 0 !important; row-gap: 0 !important; }

/* About story: copy left, images right (the stat column was removed) */
@media (min-width: 768px) {
  html body #main .vs-about-story .story-body { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) !important; column-gap: var(--ds-space-columns) !important; align-items: center !important; }
}
html body #main .vs-about-story .story-copy { text-align: left !important; align-items: flex-start !important; }
html body #main .vs-about-story .story-copy .vs-btn-row { justify-content: flex-start !important; }

/* Cards: image on top at 3:2 (design system §7.5), so titles and buttons line up across a row */
html body #main .rm-card .rm-card-img {
  aspect-ratio: 3 / 2 !important;
  height: auto !important;
  min-height: 0 !important;
  flex: none !important;
}
/* Home "Find your stay": a whole card fits one viewport under the fixed header.
   Both images share one height (from the viewport, not the width) so titles still line up. */
@media (min-width: 901px) {
  html body #main .vs-stays .rm-card .rm-card-img {
    aspect-ratio: auto !important;
    height: clamp(260px, calc(100svh - var(--header-h, 150px) - 310px), 500px) !important;
  }
  html body #main .vs-stays .rm-card-meta { margin-bottom: 12px; }
}
/* Contact "Contact a property directly": horizontal cards, photo left at its natural 3:2
   and details right, stacked in one column. The details are about as tall as a 3:2 photo
   at half the width, so the card fits one viewport without squashing the photo.
   The contact list runs in two columns (address and email full width).
   Below 1024px the cards are the usual image-on-top cards. */
@media (min-width: 1024px) {
  html body #main .vs-direct .rm-cards-row { grid-template-columns: minmax(0, 1fr) !important; container-type: inline-size; }
  html body #main .vs-direct .rm-card { flex-direction: row; }
  /* on wide screens the text is shorter than a 3:2 photo: the card grows so the photo
     (half the card width) never gets flatter than 1.6:1 */
  html body #main .vs-direct .rm-card:not(.rm-card--name-only) { min-height: calc(50cqw / 1.6); }
  html body #main .vs-direct .rm-card .rm-card-img {
    flex: 0 0 50% !important;
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 0 !important;
    align-self: stretch;
  }
  html body #main .vs-direct .rm-card-body {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
  }
  html body #main .vs-direct .rm-card--name-only { min-height: 200px; }
  html body #main .vs-direct .rm-card-meta { margin-bottom: 12px; }
  .vs-direct .vs-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
  }
  .vs-direct .vs-links li:first-child,
  .vs-direct .vs-links li:last-child { grid-column: 1 / -1; }
}
/* Card buttons share the full card width */
html body #main :is(.vs-stays, .vs-direct) .vs-card-ctas > .vv-btn { flex: 1 1 0; }

/* Every Book Now (any button to the booking engine) is filled in the header Book Now's ochre, and hovers
   like it (pale gold, ochre text); outline stays for secondary actions.
   .vs-book-now marks a Book Now that cannot reach the engine yet (Aarya Mansion has no property ID,
   so it opens that hotel's Contact page) but must still look like one. */
html body #main a.vv-btn:is([href*="bookings.vividussleek.com"], .vs-book-now) {
  background: var(--vv-gold-deep) !important;
  border-color: var(--vv-gold-deep) !important;
  color: #FFFFFF !important;
}
html body #main a.vv-btn:is([href*="bookings.vividussleek.com"], .vs-book-now):is(:hover, :focus-visible) {
  background: var(--vv-gold-pale) !important;
  border-color: var(--vv-gold-pale) !important;
  color: var(--vv-gold-deep) !important;
}


/* Band neighbours get a full section gap (100 / 80 / 60) on the side that touches the band */
html body #main > :is(section.vs-section, section.enq-section, section.anchor, section.rooms, div.vs-quick):has(+ .ds-band) { padding-bottom: var(--ds-space-section) !important; }
html body #main > .ds-band + :is(section.vs-section, section.enq-section, section.anchor, section.rooms, div.vs-quick) { padding-top: var(--ds-space-section) !important; }
/* Last section -> footer: 100 / 80 / 60 */
html body #main > :is(section.vs-section, section.enq-section, section.anchor, section.rooms):not(:has(~ section)):not(.ds-band) { padding-bottom: var(--ds-space-footer) !important; }
/* Footer brand line: "Great Destinations Hospitality" links to the GDH site, styled as part of the line */
html body .dls-footer-addr a.dls-footer-gdh { color: inherit; text-decoration: underline; text-decoration-color: rgba(200, 169, 104, .6); text-underline-offset: 3px; transition: color .2s, text-decoration-color .2s; }
html body .dls-footer-addr a.dls-footer-gdh:hover { color: var(--vv, #C8A968); text-decoration-color: currentColor; }

/* Offers page: the Aarya Mansion offers (2 cards) sit on a 2-column grid so the row is complete */
@media (min-width: 761px) { .vs-offers .card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
.vs-offers + .vs-offers--aarya { padding-top: 0 !important; }

/* Offer cards: the image links to the same place as the card button */
html body #main a.pg-card-img { display: block; cursor: pointer; }
html body #main a.pg-card-img:focus-visible { outline: 2px solid var(--vv-deep, #9D8345); outline-offset: 2px; }

/* About: Mission / Vision (/ Values) icons — no ring, larger glyph, aligned to the card text */
html body #main .vmv-section .vmv-icon { width: auto !important; height: auto !important; border: 0 !important; border-radius: 0 !important; background: none !important; justify-content: flex-start; align-self: flex-start; }
html body #main .vmv-section .vmv-icon svg { width: 40px !important; height: 40px !important; }

/* Contact form (forms.js): red inline field errors + gold consent tick, as on the hotel sites */
html body #main p.ct-err { display: block; margin: 6px 0 0 !important; padding: 0; font-family: var(--fb); font-size: 12px !important; line-height: 1.4 !important; letter-spacing: 0; text-transform: none; color: #dc3545 !important; }
html body #main p.ct-err[style*="none"] { display: none !important; }
html body #contact-form .check input { accent-color: var(--vv-gold-deep, #9D8345); }

/* Careers form: consent line + upload hint */
html body .enq-form .enq-consent { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--vv-ink-soft, #5A554C); cursor: pointer; }
html body .enq-form .enq-consent input { margin-top: 3px; flex-shrink: 0; accent-color: var(--vv-gold-deep, #9D8345); }
html body .enq-form .vs-upload-hint { display: block; margin-top: 6px; font-size: 12px; color: var(--vv-ink-mute, #8A8478); }


/* ===== Chain cards: hotel chip on the image, centred last row, offers filter tabs, header fit ===== */
html body #main .pg-card-img { position: relative; }
html body #main .pg-card-chip {
  position: absolute; top: 16px; right: 16px; z-index: 1;
  font-family: var(--fb); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; line-height: 1.4;
  color: var(--vv-ink, #2A2823); background: var(--vv-gold-leaf, #E0C07A); border-radius: var(--r-pill, 999px); padding: 5px 14px;
  pointer-events: none;
}
/* 3 cards per row (2 for the 2-up grid); an incomplete last row sits centred.
   Desktop/tablet only: below 768px the shared design-system rule stacks cards in one column. */
@media (min-width: 768px) {
  html body #main .vs-offers .card-grid { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 24px; }
  html body #main .vs-offers .card-grid > .pg-card { flex: 0 0 calc((100% - 48px) / 3); max-width: calc((100% - 48px) / 3) !important; min-width: 0; }
  html body #main .vs-offers .card-grid--2 > .pg-card { flex-basis: calc((100% - 24px) / 2); max-width: calc((100% - 24px) / 2) !important; }
}
@media (min-width: 768px) and (max-width: 900px) {
  html body #main .vs-offers .card-grid > .pg-card { flex-basis: calc((100% - 24px) / 2); max-width: calc((100% - 24px) / 2) !important; }
}
html body #main .vs-offers .card-grid > .pg-card[hidden] { display: none !important; }
/* Offers filter tabs (same look as the hotel galleries' filter bar) */
html body #main .vs-filter { display: flex; justify-content: center; flex-wrap: wrap; gap: 0; margin: 0 auto var(--ds-space-button-grid, 50px); border-bottom: 1px solid var(--vv-line, #E0D2AE); max-width: 640px; }
html body #main .vs-filter-btn {
  font-family: var(--fb); font-size: 12px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; white-space: nowrap;
  color: var(--vv-ink-mute, #8A8478); background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: 16px 24px; cursor: pointer; transition: color 200ms ease, border-color 200ms ease;
}
html body #main .vs-filter-btn:hover, html body #main .vs-filter-btn:focus-visible { color: var(--vv-ink, #2A2823); }
html body #main .vs-filter-btn.is-active { color: var(--vv-ink, #2A2823); border-bottom-color: var(--vv-gold-deep, #9D8345); }
@media (max-width: 640px) { html body #main .vs-filter-btn { padding: 14px 12px; letter-spacing: .18em; } }
/* Header: 6 links + Book Now stay on one line */
html body .site-header .nav .nav-links { gap: clamp(20px, calc(3.2vw - 6px), 44px) !important; }
html body .site-header .nav .nav-book-now { white-space: nowrap !important; }

html body #main .vs-offers .pg-card-cta { max-width: 100%; white-space: normal; text-align: center; }

/* Offers filter: tabs carry city names, so give the bar more room */
html body #main .vs-filter { max-width: 900px; }
@media (max-width: 640px) { html body #main .vs-filter-btn { white-space: normal; text-align: center; } }
@media (max-width: 640px) {
  html body #main .vs-filter { flex-direction: column; align-items: stretch; border-bottom: 0; max-width: 320px; }
  html body #main .vs-filter-btn { border-bottom: 1px solid var(--vv-line, #E0D2AE); margin-bottom: 0; padding: 14px 12px; }
  html body #main .vs-filter-btn.is-active { border-bottom: 2px solid var(--vv-gold-deep, #9D8345); }
}

/* Our Properties: location chip on each hotel image (same pill as the card chips) */
html body #main .vs-split-img { position: relative; }
html body #main .vs-split-img .pg-card-chip { z-index: 2; }

/* Home · intro: heading left, copy + button right (same layout as the hotel homepages' welcome section) */
html body .anchor.anchor--split { text-align: left; }
html body .anchor-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}
html body .anchor.anchor--split .anchor-h1 { color: var(--ds-ink, #2A2823); margin: 0; text-align: left; }
html body .anchor.anchor--split .anchor-copy p { max-width: 62ch; color: var(--ds-ink-soft, #5A554C); text-align: left; margin: 0; }
html body .anchor.anchor--split .anchor-copy p + p { margin-top: var(--ds-space-text-text, 16px) !important; }
html body .anchor.anchor--split .anchor-copy .vv-btn { margin-top: var(--ds-space-text-button, 32px); }
@media (max-width: 860px) {
  html body .anchor-split { grid-template-columns: 1fr; gap: 24px; }
}

/* Home · guest reviews: cards in the card slider (same as the old facilities slider) */
.vs-quotes-track > .vs-quote { height: 100%; box-sizing: border-box; }

/* Home · Dining & Events: photo slider in the image column (photos from both hotels, hotel chip on each) */
html body #main .vs-imgslider { position: relative; }
.vs-imgslider-track { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.vs-imgslide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 600ms ease, visibility 0s linear 600ms; }
.vs-imgslide.is-active { opacity: 1; visibility: visible; transition: opacity 600ms ease, visibility 0s; }
html body #main .vs-imgslide img { position: absolute !important; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
html body #main .vs-imgslide .pg-card-chip { z-index: 2; }
.vs-imgslider-nav {
  position: absolute; top: 50%; z-index: 3; transform: translateY(-50%);
  width: 44px; height: 44px; padding: 0; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--vv-line); border-radius: 50%; background: var(--ds-paper); color: var(--ds-ink); cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.vs-imgslider-nav svg { width: 18px; height: 18px; }
.vs-imgslider-nav:is(:hover, :focus-visible) { background: var(--ds-btn-color); border-color: var(--ds-btn-color); color: #FFFFFF; }
.vs-imgslider-prev { left: 16px; }
.vs-imgslider-next { right: 16px; }
.vs-imgslider-dots { position: absolute; left: 0; right: 0; bottom: 16px; z-index: 3; display: flex; justify-content: center; gap: 8px; pointer-events: none; }
.vs-imgslider-dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .55); transition: background-color 200ms ease, transform 200ms ease; }
.vs-imgslider-dots span.is-active { background: #FFFFFF; transform: scale(1.25); }
@media (prefers-reduced-motion: reduce) { .vs-imgslide, .vs-imgslide.is-active { transition: none; } }
@media (max-width: 767px) { .vs-imgslider-nav { width: 38px; height: 38px; } .vs-imgslider-prev { left: 10px; } .vs-imgslider-next { right: 10px; } }