/* =========================================================================
   Vividus Sleek CN Windsor — site-level overrides
   Loaded after base / vividus / inner CSS and the page <style> blocks.
   Only CN Windsor specifics live here; the copied VIVIDUS CSS is untouched.
   ========================================================================= */

/* ---------- Masthead lock-up (955x461 stacked logo) ---------- */
html body .site-header .masthead .wordmark img.nav-logo--sleek { height: 54px !important; width: auto !important; }
@media (max-width: 768px) {
  html body .site-header .masthead .wordmark img.nav-logo--sleek { height: 46px !important; }
}
.menu-overlay .menu-topbar img.nav-logo--sleek { height: 40px; width: auto; }

/* ---------- 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 ---------- */
.dls-footer-nav a { text-transform: none; letter-spacing: .02em; font-size: 14px; }

/* ---------- Footer nav: breathing room on phones ---------- */
@media (max-width: 600px) {
  .dls-footer-nav { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ---------- No section-to-section divider lines ---------- */
.vv-usp,
.vv-meetings,
.vv-facilities,
.vv-dining,
.rooms,
.anchor,
.place,
.rm-amenities,
.rm-intro,
.rm-cards-section,
.breadcrumb,
.fac-page-intro,
.fac-cards-section,
.rs-header,
.page-nav,
.ab-gdh-ws,
.story-section,
.page-content,
.dn-header,
.dn-reserve,
.me-section-head,
.enq-section,
.loc-page-intro-wrap,
.loc-transport,
.loc-attr,
.gl-page-intro,
.inner-section + .inner-section {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

/* ---------- Home: section rhythm from the design system (100 / 80 / 60) ---------- */
.body-stack.cnw-home > section:not(.hero-slider) { padding-top: calc(var(--ds-space-section) / 2) !important; padding-bottom: calc(var(--ds-space-section) / 2) !important; }
.body-stack.cnw-home > section.anchor { padding-top: var(--ds-space-section) !important; }
.body-stack.cnw-home > section:last-of-type { padding-bottom: var(--ds-space-footer) !important; }

/* Home · Welcome: heading left, copy right */
.anchor.anchor--split { text-align: left; }
.anchor-split {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}
.anchor .anchor-h1 { color: var(--ds-ink); margin: 0; }   /* size comes from the design-system H1 */
.anchor .anchor-copy p { max-width: 62ch; color: var(--ds-ink-soft); text-align: left; margin: 0; }
.anchor .anchor-copy p + p { margin-top: var(--ds-space-text-text) !important; }
.anchor .anchor-copy a {
  color: var(--vv-gold-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  transition: color 200ms ease, text-decoration-thickness 200ms ease, text-underline-offset 200ms ease;
}
/* hover / keyboard focus: the word darkens, the gold underline thickens and drops a little */
.anchor .anchor-copy a:is(:hover, :focus-visible) {
  color: var(--ds-ink); text-decoration-color: var(--vv-gold-deep);
  text-decoration-thickness: 2px; text-underline-offset: 5px; outline: none;
}
@media (max-width: 860px) {
  .anchor-split { grid-template-columns: 1fr; gap: 24px; }
}

/* Home · rooms: two categories */
.cnw-home .room-tabs { grid-template-columns: repeat(2, 1fr); }

/* Home · meetings header: heading left, copy + button right */
.cnw-home .vv-meetings .section-head.cnw-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  margin-bottom: var(--ds-space-button-grid) !important;   /* Button -> Cards (design system) */
}
.cnw-home .vv-meetings .cnw-split-right .lede { margin-top: 0 !important; margin-bottom: 0 !important; }
.cnw-home .vv-meetings .cnw-split-right .vv-btn { margin-top: var(--ds-space-text-button) !important; }
@media (max-width: 860px) {
  .cnw-home .vv-meetings .section-head.cnw-split { grid-template-columns: 1fr; gap: 16px; }
}

/* Home · rooms header: same layout as the meetings header (copy, then button, left-aligned) */
.cnw-home .rooms .r-head { column-gap: clamp(32px, 5vw, 80px) !important; }   /* heading top = paragraph first line (design-system 12a) */
.cnw-home .rooms .r-head-right { align-items: flex-start !important; gap: 0 !important; }
.cnw-home .rooms .r-head-right p.lede { text-align: left !important; max-width: 54ch !important; margin: 0 !important; }
.cnw-home .rooms .r-head-cta { justify-content: flex-start !important; margin-top: var(--ds-space-text-button) !important; }
.cnw-home .rooms .r-head { margin-bottom: var(--ds-space-button-grid) !important; }   /* Button -> tabs/grid */
/* venue photos span the same container as the header above, so both edges line up */
.meetings-grid.meetings-grid--two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 560px) { .meetings-grid.meetings-grid--two { grid-template-columns: 1fr; } }
/* venue cards: title, short paragraph, then the card's own CTA pinned to the bottom so the
   two buttons line up whatever the paragraph length */
.meetings-grid--two .meeting-card { display: flex; flex-direction: column; }
.meetings-grid--two .mc-img { aspect-ratio: 16 / 9; }   /* a touch shorter than the default 3:2 */
.meetings-grid--two .mc-body { flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; }
.meetings-grid--two .mc-body p { margin-top: var(--ds-space-heading-text); }
/* meetings-page venue cards are link targets from the homepage: land below the fixed header */
.rm-card[id] { scroll-margin-top: 140px; }

/* ==========================================================================
   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; }
}

/* Phones: inner pages use the same gutter as the homepage (the template added 20px on top of it) */
@media (max-width: 768px) {
  html body .page-content { padding-left: 0 !important; padding-right: 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;
}

/* ---------- Restaurant: Timings, opening hours and Contact Us as one centred group (markup in dining.html) ---------- */
html body .dn-reserve .dn-reserve-inner.cnw-timings-inner { display: block !important; }
html body .cnw-timings-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-space-heading-grid);
  text-align: center;
}
html body .cnw-timings-group > h2 { margin: 0 !important; }
html body .cnw-timings-group .dn-reserve-right { max-width: 100%; }
html body .cnw-timings-group .dn-reserve-hours { justify-content: center; }
html body .cnw-timings-group .dn-reserve-hour-item { align-items: center; }
html body .cnw-timings-group .dn-reserve-btns { margin-top: 0 !important; justify-content: center; }
/* Opening hours: plain text lines under the Timings heading, set like the intro paragraphs */
html body .cnw-timings-group:has(> .cnw-hours-text) { gap: var(--ds-space-heading-text); }
html body #main .cnw-timings-group .cnw-hours-text p { margin: 0 !important; }
html body #main .cnw-timings-group .cnw-hours-text p + p { margin-top: 6px !important; }
html body .cnw-timings-group .cnw-hours-text strong { font-weight: 600; color: var(--vv-ink); }
/* Second intro paragraph -> Timings: 50px */
html body #main .cnw-dn-copy:has(+ .dn-reserve) { padding-bottom: 0 !important; margin-bottom: 0 !important; }
html body #main .cnw-dn-copy + .dn-reserve { padding-top: 50px !important; margin-top: 0 !important; }

/* ==========================================================================
   Design system spacing (/DESIGN-SYSTEM.md §4, §7.7) — tokens only
   Inner page: Breadcrumb -> H1 16 · intro -> first content 32 · Image -> content 32 ·
   Section -> section 100 (half on 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, .rs-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, .rs-cta, div:has(> a.vv-btn:first-child)) { margin-top: var(--ds-space-text-button) !important; }

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

/* Intro blocks (H1 + lede [+ button]) end flush; the block below sets the gap */
html body #main :is(.story-section:has(h1), .dn-header:has(h1), .fac-page-intro, .gl-page-intro, .loc-page-intro, .loc-page-intro-wrap,
              .me-section-head, .rs-header, .rs-header-inner, .rm-intro) { padding-bottom: 0 !important; margin-bottom: 0 !important; }
html body #main :is(.story-section:has(h1), .dn-header:has(h1), .fac-page-intro, .gl-page-intro, .loc-page-intro,
              .me-section-head, .rs-header-inner, .rm-intro) :is(h1, p, .lede, a.vv-btn, div):last-child { margin-bottom: 0 !important; }

/* Intro -> first content: Heading/Button -> Grid */
html body #main .story-section:has(h1) + .cnw-about-strip,
html body #main .fac-page-intro + .fac-cards-section,
html body #main .rm-intro + .rm-cards-section,
html body #main .me-section-head + .rm-cards-section { padding-top: var(--ds-space-heading-grid) !important; margin-top: 0 !important; }
/* (intro -> collage / filter row / map / room gallery: the shared design-system rule sets the 32px) */
html body #main #gal-filter-bar { padding-bottom: 0 !important; }   /* filter row -> grid is Button -> Grid */
html body #main #gal-filter-bar + #gal-grid { padding-top: var(--ds-space-button-grid) !important; margin-top: 0 !important; }

/* Restaurant: intro -> second paragraph (Paragraph -> Paragraph) -> Timings (section gap)
   -> collage (Heading -> Grid, design-system 10a2) -> Contact Us 50px under the collage */
html body #main .dn-header:has(h1) + .cnw-dn-copy { padding-top: var(--ds-space-text-text) !important; margin: 0 !important; }
html body #main .cnw-dn-copy .dn-header-row > :last-child { margin-bottom: 0 !important; }
html body #main > .ds-collage + #dining-cta { padding-top: var(--ds-space-button-grid) !important; text-align: center; }
/* (the hours tiles keep their own inner padding: see the Timings rules above) */

/* Sections after the intro: half the section gap on each side */
html body #main :is(.me-section-head ~ .rm-cards-section, .loc-main, .rs-gallery) { padding-bottom: 0 !important; }
html body #main .loc-main { margin-bottom: calc(var(--ds-space-section) / 2) !important; }
html body #main .me-section-head + .rm-cards-section { padding-bottom: calc(var(--ds-space-section) / 2) !important; }
html body #main :is(.dn-reserve, .loc-transport, .loc-attr, .me-section-head ~ .enq-section, .room-detail-body, .page-nav) {
  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;
}

/* Last section -> footer */
html body #main :is(.cnw-about-strip, #dining-cta, .fac-cards-section, #gal-grid, .loc-transport, .me-section-head ~ .enq-section,
              .page-nav, .rm-intro ~ .rm-cards-section, .page-content > .inner-section:has(h1)) {
  padding-bottom: var(--ds-space-footer) !important;
  margin-bottom: 0 !important;
}

/* Terms: section heading -> text */
html body #main .inner-section .section-head:has(+ .tc-wrap) { margin-bottom: 0 !important; padding-bottom: 0 !important; }
html body #main .inner-section .section-head + .tc-wrap { margin-top: var(--ds-space-heading-grid) !important; }

/* Room pages: the intro row adds no gaps of its own; the design-system rhythm applies */
html body #main .rs-header-row { gap: 0 !important; row-gap: 0 !important; }
html body #main .rs-header-row > :is(h1, p) { margin-bottom: 0 !important; }

/* Gallery: the filter row has no divider line under it (no divider lines between sections) */
html body #main #gal-filter-bar { border-bottom: 0 !important; }
/* The heading -> filter row gap (design-system 10a2) is padding, which rode along inside the
   sticky bar as an empty band under the header. Move it outside as margin so the stuck bar is
   just the tabs. Doubled id to outrank that rule, which loads after this file. */
html body #main #gal-filter-bar#gal-filter-bar {
  margin-top: var(--ds-space-heading-grid) !important;
  padding-top: 0 !important;
}
/* Mobile: one swipeable row of tabs instead of four wrapped rows filling the screen */
@media (max-width: 767px) {
  html body #main #gal-filter-bar .gal-filter-inner {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
  }
  html body #main #gal-filter-bar .gal-filter-btn { flex: 0 0 auto !important; padding: 16px 18px; }
}

/* 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;
}

/* Every Book Now 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.
   The offer cards' "Know More" (it opens each offer's page on the live site) stays outlined, like every Know More. */
html body #main a.vv-btn:is([href*="bookings.vividussleek.com"], .vs-book-now):not(.fc-card-btn) {
  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):not(.fc-card-btn):is(:hover, :focus-visible) {
  background: var(--vv-gold-pale) !important;
  border-color: var(--vv-gold-pale) !important;
  color: var(--vv-gold-deep) !important;
}


/* Location: one full-width map with the hotel's details on a small card in its top-left
   corner, so most of the map stays visible. Map and card share one grid cell (no transforms:
   the reveal animation owns transform). The card is small enough to stay clear of the map
   pin (the pin is in the map's centre) on desktop; below 1024px it sits under the map. */
html body #main .loc-main.loc-map-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: "stack";
  min-height: 0 !important;
}
.loc-map-card > .loc-map-wrap,
.loc-map-card > .loc-card { grid-area: stack; }
.loc-map-card .loc-map-wrap iframe { height: clamp(440px, 64vh, 560px); min-height: 0; }
.loc-card {
  z-index: 1;
  align-self: start;
  justify-self: start;
  width: min(320px, calc(100% - 48px));   /* wide enough for the email on one line */
  margin: 24px 0 0 24px;
  padding: 20px;
  box-sizing: border-box;
  background: var(--ds-paper);
  border: 1px solid var(--vv-line-soft);
  box-shadow: 0 10px 30px rgba(46, 40, 24, .14);
}
html body #main .loc-card h2.loc-card-name {
  margin: 0 !important;
  font-size: var(--ds-fs-h6) !important;   /* 18px */
  line-height: var(--ds-lh-h6) !important;
}
html body #main .loc-card .loc-card-list {   /* beats the site's generic list margin / indent */
  list-style: none;
  margin: 10px 0 0 !important;
  padding: 0 !important;
}
.body-stack .loc-card-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 7px 0;
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-small);    /* 14 / 22 */
  line-height: var(--ds-lh-small);
  color: var(--ds-ink-soft);
}
.loc-card-icon { flex-shrink: 0; display: inline-flex; margin-top: 3px; color: var(--vv-gold-deep); }
.loc-card-icon svg { width: 15px; height: 15px; }
.loc-card-list a { color: var(--ds-ink); text-decoration: none; overflow-wrap: anywhere; transition: color 200ms ease; }
.loc-card-list a:hover { color: var(--vv-gold-deep); }
.loc-card-link {
  display: inline-block;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--vv-line-soft);
  width: 100%;
  font-family: var(--ds-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--vv-gold-deep);
  text-decoration: none;
}
.loc-card-link:hover { color: var(--ds-ink); }
@media (max-width: 1023px) {
  html body #main .loc-main.loc-map-card { grid-template-areas: "map" "card"; }
  .loc-map-card > .loc-map-wrap { grid-area: map; }
  .loc-map-card > .loc-card { grid-area: card; }
  .loc-card { width: auto; margin: 0; box-shadow: none; border-top: 0; justify-self: stretch; }
}
@media (max-width: 767px) {
  .loc-map-card .loc-map-wrap iframe { height: 360px; }
}

/* ---------- Card slider (same as the GDH parent's .vs-slider, ../assets/css/sleek-brand.css 4e) ----------
   The wrapper is the content column; arrows sit 16px outside it, in the gutter. 3 cards in view,
   2 on tablet, 1 (with a peek of the next) on mobile; below 1280 the arrows move under the cards.
   Behaviour: main.js "Card sliders" (adds .is-static, hiding the arrows, when every card fits). */
.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; }
.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; }
.vs-slider-prev { right: calc(100% + 16px); }
.vs-slider-next { left: calc(100% + 16px); }
.vs-slider.is-static .vs-slider-nav { display: none; }
@media (prefers-reduced-motion: reduce) {
  .vs-slider-track { scroll-behavior: auto; }
}
@media (max-width: 1279px) {
  .vs-slider-track { margin-bottom: calc(54px + var(--ds-space-text-button)); }
  .vs-slider.is-static .vs-slider-track { margin-bottom: 0; }
  .vs-slider-nav { top: auto; bottom: 0; transform: none; }
  .vs-slider-prev { right: auto; left: calc(50% - 62px); }
  .vs-slider-next { left: auto; 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; }
}

/* Centred page intros use the design-system 860px measure (same as the GDH .ds-page-intro paragraph) */
html body #main .story-body.cnw-story-single { max-width: calc(860px + 2 * var(--ds-gutter)) !important; }
html body #main .cnw-story-single .story-copy > p { max-width: min(860px, 100%) !important; text-wrap: pretty; }
html body #main .gl-page-intro > p.lede {
  max-width: min(860px, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Meetings · event enquiry: same layout as the Great Destinations contact form
   (../contact.html .vs-enquiry): centred heading, then the form centred under it on the 860px measure.
   Fields, labels and the button already share the design-system form rules (design-system.css §11). */
html body #main .enq-section .enq-inner { display: block !important; }
html body #main .enq-section .enq-copy {
  text-align: center;
  margin-bottom: var(--ds-space-heading-grid) !important;
}
html body #main .enq-section .enq-copy h2 { margin: 0 !important; }
html body #main .enq-section .enq-form {
  max-width: 860px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Home · location plate: "Explore More" stays on one line; on phones the address takes the width that is left */
.map-cta-right { flex-shrink: 0; }
.map-cta-text { white-space: nowrap; }
@media (max-width: 768px) {
  /* the bar sits under the sketch instead of over it, so a wrapped address never covers a label */
  .map-plate .map-cta { position: static; display: flex; margin: var(--s3) calc(-1 * var(--s3)) calc(-1 * var(--s3)); }
}

/* Contact page sidebar: email + phone read black, turn the site gold on hover */
html body .room-detail-sidebar a.ct-side-link { color: var(--vv-ink, #2A2823); transition: color .2s ease; }
html body .room-detail-sidebar a.ct-side-link:hover,
html body .room-detail-sidebar a.ct-side-link:focus-visible { color: var(--vv-gold-deep, #9D8345); }

/* ============================================================
   Simplotel webforms (assets/js/forms.js): site colours for the
   reCAPTCHA popup and date icon, and the meetings consent line
   ============================================================ */
html body .ct-modal { background: rgba(42, 40, 35, .6); }
html body .ct-modal-card { border-radius: 0; font-family: var(--fb); }
html body .ct-modal-title, html body .ct-modal-close { color: var(--vv-ink, #2A2823); font-family: var(--fb); }
html body .ct-modal-note { color: var(--vv-ink-mute, #8F887C); }
html body input[type="date"].ct-date::-webkit-calendar-picker-indicator {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239D8345' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}
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 #contact-form .check input { accent-color: var(--vv-gold-deep, #9D8345); }

/* forms.js inline field errors: red + small, overriding the site paragraph styles */
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; }

/* In-text links on the Terms & Conditions page: same gold underline as the homepage copy links */
.tc-block .tc-list a {
  color: var(--vv-gold-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  transition: color 200ms ease, text-decoration-thickness 200ms ease, text-underline-offset 200ms ease;
}
.tc-block .tc-list a:is(:hover, :focus-visible) {
  color: var(--ds-ink); text-decoration-color: var(--vv-gold-deep);
  text-decoration-thickness: 2px; text-underline-offset: 5px; outline: none;
}

/* Location: two stacked Nearby sections (Travel Hubs, then Attractions) share one standard section gap */
html body #main .loc-transport + .loc-transport { padding-top: 0 !important; }

/* H1 -> first text: the site standard heading-to-text gap (16px / 12px phones), as on About Us */
html body #main .loc-page-intro-text + .loc-intro-right { margin-top: var(--ds-space-heading-text) !important; }
html body #main .dn-header-row .dn-h1 + .lede { margin-top: calc(var(--ds-space-heading-text) - 20px) !important; }  /* the row already adds a 20px flex gap */

/* Room pages: "Room Details" is an H2 in the site H2 style (size + italic), overriding the card-title
   style design-system.css gives sidebar titles; keeps its gap above the facts list */
html body #main aside.room-detail-sidebar.room-detail-sidebar > h2 {
  font-size: var(--ds-fs-h2) !important; line-height: var(--ds-lh-h2) !important;
  font-style: italic !important; margin: 0 0 24px !important;
}

/* Room pages, side-by-side layout: start the Room Details box level with the In-room Amenities
   grid (which sits below its H2: H2 line-height + 45px of margins) */
@media (min-width: 901px) {
  html body #main .room-detail-body > .room-detail-sidebar { margin-top: calc(var(--ds-lh-h2) + 45px) !important; }
}

/* Rooms summary cards: More Info + a filled Book Now side by side */
html body #main .rm-card-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; }
html body #main .rm-card-ctas .rm-card-cta { margin-top: 0 !important; }

/* Homepage Rooms header: centred and stacked like the About Us page text
   (single 860px column, heading -> text 16px, text -> button 24px) */
html body #main .r-head.r-head--center { display: block !important; max-width: calc(860px + 2 * var(--container-pad)); margin-left: auto !important; margin-right: auto !important; text-align: center; }
html body #main .r-head--center .r-head-right { display: block !important; width: auto !important; max-width: none !important; margin-top: var(--ds-space-heading-text) !important; padding: 0 !important; text-align: center; }
html body #main .r-head--center .lede { max-width: min(860px, 100%) !important; margin: 0 auto !important; font-size: var(--ds-fs-body) !important; line-height: var(--ds-lh-body) !important; color: var(--vv-ink-soft, #5A554C) !important; }
html body #main .r-head--center .r-head-cta { display: flex !important; justify-content: center !important; margin-top: var(--ds-space-text-button) !important; }
/* Homepage room tabs: View Details + a filled Book Now side by side */
html body #main .rc-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
html body #main .rc-ctas > a { margin-top: 0 !important; margin-bottom: 0 !important; }
html body #main .rc-panel .rc-ctas { margin-top: var(--ds-space-text-button); }

/* Homepage Offers widget (cards styled like the parent Offers page) */
html body #main .cnw-offers .r-head { margin-bottom: var(--ds-space-heading-grid) !important; }
html body #main .cnw-offers .r-head h2 em { color: var(--vv-gold-deep); font-style: italic; }
html body #main .cnw-offers-inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--container-pad); }
html body #main .cnw-offers .card-grid { margin-top: 0; grid-template-columns: 1fr !important; }
@media (min-width: 900px) { html body #main .cnw-offers .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
html body #main .cnw-offers .pg-card { background: var(--vv-paper); }
html body #main .cnw-offers .pg-card-img { aspect-ratio: 3 / 2; }
html body #main .cnw-offers .pg-card-body .vs-offer-h { font-style: normal !important; margin-top: 8px; font-size: clamp(22px, 1.9vw, 28px); line-height: 1.15; }
html body #main .cnw-offers .pg-card-cta { margin-top: 26px; }

/* Homepage USP strip under the welcome section (reuses the template's USP bar styles) */
html body #main .cnw-usp { margin: 0; padding-top: 32px !important; padding-bottom: 32px !important; }
html body #main .cnw-usp .usp-num { font-variant-numeric: lining-nums; }
@media (max-width: 600px) { html body #main .cnw-usp .usp-stat { width: 50%; box-sizing: border-box; } }

/* 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; }
html body #main .cnw-offers-more { display: flex; justify-content: center; margin-top: var(--ds-space-button-grid); }

/* USP strip — dark ink band: charcoal like the footer, light-gold italic numerals, soft white labels, gold dividers */
html body #main .vv-usp.cnw-usp {
  background: var(--vv-ink, #2A2823) !important;
  border: 0 !important;
  padding-top: 44px !important;
  padding-bottom: 44px !important;
}
html body #main .cnw-usp .usp-inner { display: flex; align-items: flex-start; justify-content: center; flex-wrap: nowrap; }
html body #main .cnw-usp .usp-divider { align-self: center; }
html body #main .cnw-usp .usp-stat { flex: 1 1 0; min-width: 0; padding: 4px 16px; }
html body #main .cnw-usp .usp-num { color: var(--vv-light, #E0C07A) !important; font-size: clamp(40px, 4vw, 56px); }
html body #main .cnw-usp .usp-label { color: rgba(255, 255, 255, .72) !important; font-size: 13px; letter-spacing: .22em; margin-top: 12px; }
html body #main .cnw-usp .usp-divider { width: 1px; height: 56px; flex: 0 0 1px; background: rgba(224, 192, 122, .45) !important; }
@media (max-width: 760px) {
  html body #main .cnw-usp .usp-inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  html body #main .cnw-usp .usp-divider { display: none; }
  html body #main .cnw-usp .usp-stat { width: auto !important; padding: 0 8px; }
  html body #main .cnw-usp .usp-label { font-size: 12px; letter-spacing: .18em; }
}
html body #main .cnw-usp .usp-icon { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin: 0 auto 14px; color: var(--vv-light, #E0C07A); opacity: .9; }
html body #main .cnw-usp .usp-icon svg { width: 100%; height: 100%; }
@media (max-width: 760px) { html body #main .cnw-usp .usp-icon { width: 28px; height: 28px; margin-bottom: 10px; } }
/* 5 highlights: on phones the first spans the row, then a 2 x 2 (a full rectangle) */
@media (max-width: 760px) { html body #main .cnw-usp .usp-stat--wide { grid-column: 1 / -1; } }

/* USP strip: the wide "Under 6 km" item gets extra room so its number and label stay on one line */
@media (min-width: 761px) {
  html body #main .cnw-usp .usp-stat--wide { flex: 1.7 1 0; }
  html body #main .cnw-usp .usp-num { white-space: nowrap; }
}
@media (min-width: 761px) and (max-width: 1280px) {
  html body #main .cnw-usp .usp-num { font-size: clamp(30px, 3.5vw, 44px) !important; }
}

/* Homepage location: CTA under the nearby-places list */
html body #main .place .p-copy .place-cta { display: inline-flex; margin-top: var(--ds-space-text-button, 32px) !important; }

/* USP strip restyled to match the VIVIDUS homepage strip: light band, gold serif numbers,
   grey spaced labels, thin gold dividers, no icons (overrides the dark-band rules above) */
html body #main .vv-usp.cnw-usp { background: transparent !important; border: 0 !important; padding-top: 56px !important; padding-bottom: 56px !important; }
html body #main .cnw-usp .usp-icon { display: none !important; }
html body #main .cnw-usp .usp-inner { align-items: flex-start; }
html body #main .cnw-usp .usp-divider { align-self: center; }
@media (max-width: 760px) { html body #main .cnw-usp .usp-inner { align-items: start; } }
html body #main .cnw-usp .usp-num { color: var(--vv-gold-deep, #9D8345) !important; font-style: normal !important; font-variant-numeric: oldstyle-nums; }
html body #main .cnw-usp .usp-label { color: var(--vv-ink-mute, #8A8478) !important; font-size: 15px; letter-spacing: .22em; margin-top: 14px; }
html body #main .cnw-usp .usp-divider { height: 60px; background: rgba(157, 131, 69, .45) !important; }
@media (max-width: 760px) {
  html body #main .cnw-usp .usp-label { font-size: 12px; letter-spacing: .18em; }
}

/* Home · location: illustrated map image fills the plate; the address bar sits below it so no label is covered */
html body #main .map-plate.map-plate--img { aspect-ratio: auto; padding: 0; }
html body #main .map-plate--img .map-plate-img { display: block; width: 100%; height: auto; }
html body #main .map-plate--img .map-cta { position: static; display: flex; margin: 0; }

/* Rooms page: the card image links to the room page, like the Room Details button */
html body #main a.rm-card-img { display: block; cursor: pointer; }
html body #main a.rm-card-img:focus-visible { outline: 2px solid var(--vv-gold-deep, #9D8345); outline-offset: 3px; }

/* Room tabs on phones: only 2 tabs, both fit, so the row never scrolls (no stray up/down scroll) */
@media (max-width: 720px) { html body .room-tabs { overflow: visible !important; } }

/* ===== Mobile only (767px and below): offers + event cards become the site's card slider; restaurant and location
   sections show their image first. Tablet/desktop keep the original grids and order. ===== */
@media (min-width: 768px) {
  html body #main .cnw-mslider .vs-slider-nav { display: none !important; }
  html body #main .cnw-mslider > .vs-slider-track {
    grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; scroll-snap-type: none;
    margin-bottom: 0 !important; gap: 24px !important;
  }
}
@media (max-width: 767px) {
  html body #main .cnw-mslider > .vs-slider-track {
    display: grid !important; grid-template-columns: none !important; grid-auto-flow: column !important;
    grid-auto-columns: calc((100% - .15 * var(--ds-space-card-gap)) / 1.15) !important;
    gap: var(--ds-space-card-gap) !important; overflow-x: auto !important; max-width: none !important;
  }
  html body #main .cnw-mslider .vs-slider-track > .reveal { opacity: 1 !important; transform: none !important; }
  html body #main .dining-canvas > :last-child { order: -1; }
  html body #main .place .p-inner > .map-plate { order: -1; }
}
@media (max-width: 767px) {
  /* events slider: same side gutter as the heading above it; long card buttons wrap inside the card */
  html body #main #events .cnw-mslider { padding-left: var(--container-pad, 24px); padding-right: var(--container-pad, 24px); }
  html body #main .cnw-mslider .vv-btn { white-space: normal; max-width: 100%; text-align: center; }
}

/* Room pages, phones only: "Back to" (left) and "Next Room" (right) sit side by side, not stacked */
@media (max-width: 767px) {
  html body #main .page-nav { flex-direction: row !important; justify-content: space-between !important; align-items: flex-start !important; gap: 16px !important; }
  html body #main .page-nav .pn-prev { align-items: flex-start; text-align: left; }
  html body #main .page-nav .pn-next { align-items: flex-end; text-align: right; margin-left: auto; }
}

/* Contact intro: phone + email links use the site's in-text link style (gold underline; darker, thicker on hover) */
html body #main p.lede a:is([href^="tel:"], [href^="mailto:"]) {
  color: var(--vv-gold-deep, #9D8345); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  overflow-wrap: anywhere;
  transition: color 200ms ease, text-decoration-thickness 200ms ease, text-underline-offset 200ms ease;
}
html body #main p.lede a:is([href^="tel:"], [href^="mailto:"]):is(:hover, :focus-visible) {
  color: var(--ds-ink, #2A2823); text-decoration-color: var(--vv-gold-deep, #9D8345);
  text-decoration-thickness: 2px; text-underline-offset: 5px; outline: none;
}


/* Home · location map: the image links to the location page, the address bar opens Google Maps */
html body #main .map-plate--img .map-plate-imglink { display: block; }
html body #main .map-plate a.map-cta { text-decoration: none; color: var(--vv-ink-mute); }

/* Footer: hotel logo in place of the name (same treatment as the brand site's footer logo) */
.dls-footer-inner .vs-footer-logo {
  display: block;
  height: 80px;
  width: auto;
  margin: 0 auto 18px;
  filter: brightness(0) invert(1);
  opacity: .92;
}
@media (max-width: 767px) { .dls-footer-inner .vs-footer-logo { height: 68px; } }

/* ---------- FAQs: accordion in the site's type and gold rules ---------- */
html body #main .sleek-faq-wrap { max-width: calc(900px + 2 * var(--container-pad)); margin: 0 auto; padding: 0 var(--container-pad); }
html body #main .sleek-faq-section { padding-top: var(--ds-space-section, 80px); scroll-margin-top: 140px; }
html body #main .sleek-faq-section > h2 { margin: 0 0 var(--ds-space-heading-grid, 32px); text-align: center; }
html body #main .sleek-faq-list { border-top: 1px solid var(--vv-line, #E0D2AE); }
html body #main .sleek-faq-item { border-bottom: 1px solid var(--vv-line, #E0D2AE); }
html body #main .sleek-faq-item > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 22px 4px;
}
html body #main .sleek-faq-item > summary::-webkit-details-marker { display: none; }
html body #main .sleek-faq-q { font-family: var(--ds-font-display, 'Playfair Display', serif); font-size: clamp(18px, 1.5vw, 21px); line-height: 1.35; color: var(--vv-ink, #2A2823); }
html body #main .sleek-faq-item > summary:is(:hover, :focus-visible) .sleek-faq-q { color: var(--vv-gold-deep, #9D8345); }
html body #main .sleek-faq-item > summary:focus-visible { outline: 2px solid var(--vv-gold-deep, #9D8345); outline-offset: 2px; }
html body #main .sleek-faq-icon { position: relative; flex: none; width: 16px; height: 16px; }
html body #main .sleek-faq-icon::before, html body #main .sleek-faq-icon::after {
  content: ""; position: absolute; left: 0; top: 50%; width: 16px; height: 1.5px; background: var(--vv-gold-deep, #9D8345);
  transition: transform 250ms ease;
}
html body #main .sleek-faq-icon::after { transform: rotate(90deg); }
html body #main .sleek-faq-item[open] .sleek-faq-icon::after { transform: rotate(0deg); }
html body #main .sleek-faq-a { padding: 0 44px 24px 4px; }
html body #main .sleek-faq-a > :first-child { margin-top: 0 !important; }
html body #main .sleek-faq-a p, html body #main .sleek-faq-a li { color: var(--ds-ink-soft, #5A554C); }
html body #main .sleek-faq-a p + ul, html body #main .sleek-faq-a ul + p { margin-top: 10px !important; }
html body #main .sleek-faq-a ul { margin: 0; padding-left: 20px; }
html body #main .sleek-faq-a li + li { margin-top: 4px; }
html body #main .sleek-faq-a a { color: var(--vv-gold-deep, #9D8345); text-decoration: underline; text-underline-offset: 3px; }
html body #main .sleek-faq-wrap + .cnw-fac-cta { margin-bottom: var(--ds-space-section, 80px); }
@media (max-width: 640px) {
  html body #main .sleek-faq-a { padding-right: 4px; }
}
html body #main .rm-intro:has(~ .sleek-faq-wrap) .lede a { color: var(--vv-gold-deep, #9D8345); text-decoration: underline; text-underline-offset: 3px; }
html body #main .cnw-fac-cta { text-align: center; margin-top: clamp(40px, 6vh, 64px); }