/* =========================================================================
   VIVIDUS Bengaluru — inner-page layer
   Gives every inner page the layout, style and spacing of Vividus Sleek CN Windsor
   (ported from ../../vividus-sleek/cn-windsor/assets/css/cnw.css). Content and images
   stay VIVIDUS's own. Loaded on every inner page, never on the homepage, after
   base / vividus / inner CSS and the page <style> blocks in <head>; gdh-navbar.css and
   design-system.css follow it. Navbar and footer rules are deliberately not here: they
   stay identical to the homepage.
   ========================================================================= */

/* ---------- No section-to-section divider lines ---------- */
.rm-amenities,
.rm-intro,
.rm-cards-section,
.breadcrumb,
.fac-page-intro,
.fac-cards-section,
.rs-header,
.page-nav,
.ab-gdh-ws,
.vmv-section,
.story-section,
.page-content,
.dn-header,
.dn-sum-intro,
.dn-reserve,
.me-section-head,
.me-services,
.enq-section,
.spa-booking,
.spa-gallery,
.spa-cta-band,
.loc-page-intro-wrap,
.loc-main,
.loc-transport,
.loc-attr,
.gl-page-intro,
.inner-section + .inner-section {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

/* Meetings venue cards are link targets: 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.
   ========================================================================== */

/* The column itself */
html body nav.breadcrumb .breadcrumb-inner,
html body .dn-header,
html body .dn-sum-intro,
html body .loc-main,
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 .me-services-inner,
html body .spa-booking-inner,
html body .spa-gallery-inner,
html body .spa-cta-band {
  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 .gl-page-intro,
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,
html body .me-services,
html body .spa-booking,
html body .spa-gallery {
  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;
}

/* 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; }
}
/* Room amenity tiles: two per row on phones */
@media (max-width: 760px) { .sa-infographic { grid-template-columns: repeat(2, 1fr); } }

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

/* ---------- Restaurant: hours, reservations and contact as one centred group ---------- */
html body .dn-reserve .dn-reserve-inner.vvb-timings-inner { display: block !important; }
html body .vvb-timings-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-space-heading-grid);
  text-align: center;
}
html body .vvb-timings-group > h2 { margin: 0 !important; }
/* Hours and contact lines: plain text under the heading, set like the intro paragraphs */
html body .vvb-timings-group:has(> .vvb-hours-text) { gap: var(--ds-space-heading-text); }
html body #main .vvb-timings-group .vvb-hours-text { max-width: min(860px, 100%); }
html body #main .vvb-timings-group .vvb-hours-text p { margin: 0 !important; max-width: none !important; }
/* paragraph, then the hours lines, then the contact lines: Paragraph -> Paragraph between the groups */
html body #main .vvb-timings-group .vvb-hours-text > * + * { margin-top: var(--ds-space-heading-text) !important; }
html body #main .vvb-timings-group .vvb-hours-list p + p { margin-top: 6px !important; }
html body .vvb-timings-group .vvb-hours-text strong { font-weight: 600; color: var(--vv-ink); }
html body .vvb-timings-group .vvb-hours-text a { color: var(--vv-ink-soft); text-decoration: none; transition: color 200ms ease; }
html body .vvb-timings-group .vvb-hours-text a:hover { color: var(--vv-gold-deep); }
html body #main .vvb-timings-group .dn-reserve-btns { margin-top: var(--ds-space-text-button) !important; justify-content: center; }
html body #main .vvb-timings-group:has(> .vvb-hours-text) .dn-reserve-btns { margin-top: calc(var(--ds-space-text-button) - var(--ds-space-heading-text)) !important; }

/* ==========================================================================
   Design system spacing (/DESIGN-SYSTEM.md §4, §7.7) — tokens only
   Inner page: Breadcrumb -> H1 · intro -> first content · Image -> content ·
   Section -> section (half on each side) · Last section -> footer.
   ========================================================================== */

/* 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, a.fac-intro-cta, .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, a.fac-intro-cta, .r-head-cta, .rs-cta, div:has(> a.vv-btn:first-child)) { margin-top: var(--ds-space-text-button) !important; }

/* 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), .dn-sum-intro, .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), .dn-sum-intro, .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) + .vvb-about-strip,
html body #main .fac-page-intro + .fac-cards-section,
html body #main .rm-intro + .rm-cards-section,
html body #main .dn-sum-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; }
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; }

/* Dining venue pages: intro -> stats -> photo collage (Heading -> Grid) */
html body #main .dn-header:has(h1):has(+ .ds-collage) { padding-bottom: 0 !important; }
html body #main .dn-header:has(h1) + .ds-collage { padding-top: var(--ds-space-heading-grid) !important; }
/* collage -> the reservations group under it: Image -> Content, then the group ends the page */
html body #main > .ds-collage + .dn-reserve { padding-top: var(--ds-space-image-content) !important; }

/* 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-services, .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;
}
html body #main > .ds-collage + .dn-reserve { padding-top: var(--ds-space-image-content) !important; }

/* Last section -> footer */
html body #main :is(.vvb-about-strip:last-child, .ab-gdh-ws:last-child, .vvb-parent:last-child, .dn-reserve:last-child, .fac-cards-section:last-child, #gal-grid, .loc-transport:last-child,
              .me-section-head ~ .enq-section, .page-nav, .rm-intro ~ .rm-amenities, .spa-cta-band:last-child, .page-content > .inner-section:has(h1)) {
  padding-bottom: var(--ds-space-footer) !important;
  margin-bottom: 0 !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
   (same as the Vividus Sleek room cards: spec row with icon, label and value at the template's sizes) */
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. .vvb-book-now marks a content Book Now (the hotel has no
   booking-engine link: they go to the booking bar or the contact form). */
html body #main a:is(.vv-btn, .vv-btn-ghost, .fac-intro-cta).vvb-book-now {
  background: var(--vv-gold-deep) !important;
  border-color: var(--vv-gold-deep) !important;
  color: #FFFFFF !important;
}
html body #main a:is(.vv-btn, .vv-btn-ghost, .fac-intro-cta).vvb-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;
}

/* ---------- Card slider (same as the GDH parent's .vs-slider) ----------
   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.vvb-story-single { max-width: calc(860px + 2 * var(--ds-gutter)) !important; }
html body #main .vvb-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
   (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;
  max-width: 860px;
  margin-left: auto !important;
  margin-right: auto !important;
  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-copy p { text-align: center; max-width: none !important; margin-left: auto !important; margin-right: auto !important; margin-bottom: 0 !important; }
html body #main .enq-section .enq-copy .enq-contact-line {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 32px;
  margin-top: var(--ds-space-text-button) !important;
}
html body #main .enq-section .enq-form {
  max-width: 860px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ==========================================================================
   VIVIDUS sections CN Windsor has no counterpart for, set in the same language:
   centred section heads on the 860px measure, cards in the shared card style,
   no divider lines.
   ========================================================================== */

/* Centred section heads (About, Meetings services, Rooms standard) */
html body #main :is(.vmv-section .section-head, .vvb-centred-head, .me-services-head, .rm-amenities-head) {
  box-sizing: border-box !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: center !important;
  max-width: 860px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: var(--ds-space-heading-grid) !important;
}
html body #main :is(.vvb-centred-head, .me-services-head, .rm-amenities-head) > p {
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---------- About ---------- */
/* Hero image slider: the homepage's crossfade slides and dots (main.js "Hero Slider") inside the
   about-hero frame. The light about-hero overlay replaces the homepage's darker caption gradient;
   each slide eases from a slight zoom while it is shown. */
.about-hero--slider .slide::after { display: none; }
.about-hero--slider .slide {
  transform: scale(1.06);
  transition: opacity 900ms ease, transform 6s cubic-bezier(.22, 1, .36, 1);
}
.about-hero--slider .slide.is-active { transform: scale(1); }
/* a soft fade along the bottom edge keeps the dots readable over bright photos */
.about-hero--slider .about-hero-overlay {
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(46,40,24,.08) 0%, rgba(46,40,24,0) 55%, rgba(46,40,24,.5) 100%);
}
.about-hero--slider .hc-dot {
  background: rgba(255,255,255,.7);
  box-shadow: 0 0 0 1px rgba(46,40,24,.25), 0 1px 4px rgba(46,40,24,.45);
}
.about-hero--slider .hc-dot.is-active { background: var(--vv-gold-leaf); }
.about-hero--slider .hc-dot:focus-visible { outline: 1px solid #fff; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .about-hero--slider .slide,
  .about-hero--slider .slide.is-active { transform: none; transition: opacity 300ms ease; }
}

/* Story: one centred copy column (the side stat and the stacked photos move to the strip below) */
html body #main .story-body.vvb-story-single { display: block !important; margin-left: auto !important; margin-right: auto !important; }
html body #main .vvb-story-single .story-copy { max-width: none !important; padding: 0 !important; }
html body #main .vvb-story-single .story-copy > .vv-btn { align-self: center; }
/* Photo strip: suite photo, the stat and quote card, café photo — one row on the column */
.vvb-about-strip-inner {
  box-sizing: border-box;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1.25fr);
  gap: var(--ds-collage-gap);
}
/* the photos take the row's height, so they match the stat card */
.vvb-about-strip-inner > figure { margin: 0; position: relative; overflow: hidden; background: var(--ds-line-soft); min-height: 300px; }
.vvb-about-strip-inner > figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 700ms cubic-bezier(.4, 0, .2, 1); }
.vvb-about-strip-inner > figure:hover img { transform: scale(1.03); }
.vvb-about-quote {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  padding: var(--ds-card-pad);
  border: 1px solid var(--vv-line);
  background: var(--ds-paper);
}
html body #main .vvb-about-quote .story-stat-label {
  writing-mode: horizontal-tb !important;
  transform: none !important;
  position: static !important;
  align-self: center !important;   /* the old vertical label was pinned to the start */
  margin-bottom: 0 !important;     /* the card's gap spaces all three lines evenly */
  font-family: var(--ds-font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ds-ink-mute);
}
html body #main .vvb-about-quote .story-stat-num { color: var(--vv-gold-deep); margin: 0; }
html body #main .vvb-about-quote .story-stat-sub {
  font-family: var(--ds-font-body);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ds-ink-mute);
}
html body #main .vvb-about-quote blockquote {
  margin: var(--ds-space-card-gap) 0 0;
  padding-top: var(--ds-space-card-gap);
  border-top: 1px solid var(--vv-line-soft);
  font-family: var(--ds-font-display);
  font-style: italic;
  font-size: var(--ds-fs-h5);
  line-height: var(--ds-lh-h5);
  color: var(--ds-ink);
  max-width: 22ch;
}
html body #main .vvb-about-strip .vvb-strip-cta { text-align: center; margin-top: var(--ds-space-image-content); }
@media (max-width: 1023px) {
  .vvb-about-strip-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vvb-about-strip-inner > figure { min-height: 0; aspect-ratio: 4 / 3; }
  .vvb-about-quote { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 767px) {
  .vvb-about-strip-inner { grid-template-columns: minmax(0, 1fr); }
  .vvb-about-quote { grid-row: auto; }
}

/* Vision / mission / values: the shared card (white, 1px line, square corners, no lift) */
html body #main .vmv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ds-space-card-gap) !important; }
html body #main .vmv-card {
  background: var(--ds-paper) !important;
  border: 1px solid var(--vv-line) !important;
  padding: var(--ds-card-pad) !important;
  gap: var(--ds-space-heading-text) !important;
  box-shadow: none !important;
  transform: none !important;
}
html body #main .vmv-card h3 { margin: 0 !important; }
html body #main .vmv-card p { margin: 0 !important; }

/* Message from the CEO & Founder: a tinted band (.ds-band sets its 100 / 80 / 60 inset).
   Heading on the left, the quote with its signature on the right; stacked below 900px. */
html body #main .vvb-ceo { background: #FAF6EC; }
html body #main .vvb-ceo-inner {
  box-sizing: border-box;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  column-gap: var(--ds-space-columns);
  row-gap: var(--ds-space-content);
  align-items: center;
}

/* Two-level heading (CEO message, parent brand): a small tracked caps lead-in,
   then the key words large in gold, then a short gold rule */
html body #main h2.vvb-duo { margin: 0 !important; font-style: normal; }
html body #main h2.vvb-duo .vvb-duo-lead {
  display: block;
  font-family: var(--ds-font-body);
  font-style: normal;
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ds-ink-soft);
}
html body #main h2.vvb-duo .vvb-duo-main {
  display: block;
  margin-top: 10px;
  font-family: var(--ds-font-display);
  font-style: normal;
  font-size: clamp(36px, 3.2vw, 56px);
  line-height: 1.12;
  color: var(--vv-gold-deep);
}
html body #main h2.vvb-duo::after {
  content: "";
  display: block;
  width: 56px;
  height: 1px;
  margin-top: var(--ds-space-text-button);
  background: var(--vv-gold-deep);
}
html body #main .vvb-ceo-quote { position: relative; margin: 0; }
html body #main .vvb-ceo-mark {
  display: block;
  height: .5em;
  font-family: var(--ds-font-display);
  font-size: 120px;
  line-height: 1;
  color: var(--vv-gold-deep);
  opacity: .55;
  user-select: none;
}
html body #main .vvb-ceo-quote blockquote { margin: 0; padding: 0; border: 0; }
html body #main .vvb-ceo .vvb-ceo-quote blockquote p {
  max-width: 30em !important;
  margin: 0 !important;
  font-family: var(--ds-font-display) !important;
  font-style: italic !important;
  font-size: var(--ds-fs-h3) !important;
  line-height: var(--ds-lh-h3) !important;
  color: var(--ds-ink) !important;
  text-wrap: pretty;
}
/* signature: monogram medallion, name, role */
html body #main .vvb-ceo-sign {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: var(--ds-space-content);
}
html body #main .vvb-ceo-mono {
  flex: none;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border: 1px solid var(--vv-gold-deep);
  border-radius: 50%;
  font-family: var(--ds-font-display);
  font-style: italic;
  font-size: 17px;
  letter-spacing: .04em;
  color: var(--vv-gold-deep);
  background: var(--ds-paper);
}
html body #main .vvb-ceo-who { display: flex; flex-direction: column; gap: 4px; }
html body #main .vvb-ceo-name {
  font-family: var(--ds-font-display);
  font-size: var(--ds-fs-h6);
  line-height: var(--ds-lh-h6);
  color: var(--ds-ink);
}
html body #main .vvb-ceo-role {
  font-family: var(--ds-font-body);
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--vv-gold-deep);
}

/* Parent brand: one panel that ends the page. The company on the left;
   its hotel brands as a numbered list on the tinted right half. */
html body #main .vvb-parent-inner {
  box-sizing: border-box;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}
html body #main .vvb-parent-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border: 1px solid var(--vv-line);
  background: var(--ds-paper);
}
html body #main :is(.vvb-parent-copy, .vvb-parent-brands) {
  padding: clamp(32px, 4vw, 64px);
}
html body #main .vvb-parent-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
html body #main .vvb-parent-copy h2.vvb-duo + p { margin-top: var(--ds-space-text-button) !important; }
html body #main .vvb-parent-copy p { max-width: 46ch !important; margin-bottom: 0 !important; color: var(--ds-ink-soft); }
html body #main .vvb-parent-copy .vvb-parent-link { margin-top: var(--ds-space-text-button) !important; }
html body #main .vvb-parent-brands {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #FAF6EC;
  border-left: 1px solid var(--vv-line-soft);
}
html body #main .vvb-parent-kicker {
  display: block;
  margin-bottom: var(--ds-space-heading-text);
  font-family: var(--ds-font-body);
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ds-ink-mute);
}
html body #main .vvb-parent-list { list-style: none; margin: 0 !important; padding: 0; }
html body #main .vvb-parent-list li {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--vv-line);
}
html body #main .vvb-parent-list li:last-child { border-bottom: 0; padding-bottom: 0; }
html body #main .vvb-parent-num {
  flex: none;
  width: 2.2em;
  font-family: var(--ds-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--vv-gold-deep);
}
/* brand name (with the "You are here" tag beside it) over a one-line description */
html body #main .vvb-parent-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
html body #main .vvb-parent-name { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; }
html body #main .vvb-parent-brand {
  font-family: var(--ds-font-display);
  font-size: var(--ds-fs-h4);
  line-height: var(--ds-lh-h4);
  color: var(--ds-ink);
}
html body #main .vvb-parent-desc {
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-small);
  line-height: var(--ds-lh-small);
  color: var(--ds-ink-soft);
}
html body #main .vvb-parent-list li.is-current .vvb-parent-brand { color: var(--vv-gold-deep); font-style: italic; }
html body #main .vvb-parent-here {
  padding: 5px 12px;
  border: 1px solid var(--vv-gold-deep);
  font-family: var(--ds-font-body);
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--vv-gold-deep);
}

@media (max-width: 900px) {
  html body #main .vvb-ceo-inner { grid-template-columns: minmax(0, 1fr); }
  html body #main .vvb-ceo-mark { font-size: 96px; }
  html body #main .vvb-parent-panel { grid-template-columns: minmax(0, 1fr); }
  html body #main .vvb-parent-brands { border-left: 0; border-top: 1px solid var(--vv-line-soft); }
}
@media (max-width: 767px) {
  html body #main .vvb-ceo .vvb-ceo-quote blockquote p { font-size: var(--ds-fs-h4) !important; line-height: var(--ds-lh-h4) !important; }
  html body #main .vvb-ceo-mark { font-size: 80px; }
  html body #main .vvb-ceo-mono { width: 52px; height: 52px; font-size: 15px; }
  html body #main :is(.vvb-parent-copy, .vvb-parent-brands) { padding: var(--ds-card-pad); }
  html body #main .vvb-parent-list li { gap: 14px; padding: 14px 0; }
  html body #main .vvb-parent-list li:last-child { padding-bottom: 0; }
}

/* ---------- Rooms ---------- */
/* Every category is the same card (no featured layout), two per row */
/* (meetings has two rows of venue cards: one card gap between them, as inside a row) */
html body #main .rm-cards-inner { gap: var(--ds-space-card-gap) !important; }
html body #main .rm-amen-grid { border-radius: var(--ds-radius) !important; }

/* ---------- Dining ---------- */
/* Venue stats under the intro: no rules above and below (no divider lines) */
html body #main .dn-header-stats { border-top: 0 !important; border-bottom: 0 !important; margin-top: var(--ds-space-heading-grid) !important; }
html body #main .dn-header-stats .ab-gdh-ws-stat { border-right: 0 !important; border-top: 0 !important; padding: 0 var(--s5) !important; }
@media (max-width: 640px) { html body #main .dn-header-stats { row-gap: var(--ds-space-content); } }

/* ---------- Meetings · event services: the shared card, three per row ---------- */
html body #main .me-svc-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: var(--ds-space-card-gap) !important;
  background: none !important;
}
html body #main .me-svc {
  background: var(--ds-paper) !important;
  border: 1px solid var(--vv-line) !important;
  padding: var(--ds-card-pad) !important;
}
html body #main .me-svc-text h3 {
  font-family: var(--ds-font-display) !important;
  font-size: var(--ds-fs-h6) !important;
  line-height: var(--ds-lh-h6) !important;
  margin: 0 0 4px !important;
}
@media (max-width: 1023px) { html body #main .me-svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 767px)  { html body #main .me-svc-grid { grid-template-columns: minmax(0, 1fr) !important; } }

/* ---------- Facilities: two per row; location and hours as chips pinned to the photo ---------- */
html body #main .fac-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
@media (max-width: 767px) { html body #main .fac-grid { grid-template-columns: minmax(0, 1fr) !important; } }
html body #main .fc-card { position: relative; display: flex; flex-direction: column; }
html body #main .fc-card .fc-card-img { aspect-ratio: 3 / 2 !important; height: auto !important; }
html body #main .fc-card .fc-card-img img { width: 100%; height: 100%; object-fit: cover; }
html body #main .fc-card-body { flex: 1; }
html body #main .fc-card-body .fc-card-name { margin-bottom: 0 !important; }
html body #main .fc-card-specs {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 2;
  display: flex;
  gap: 8px;
  margin: 0 !important;
  border: 0 !important;
}
html body #main .fc-cs-item {
  flex: none;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 7px;
  padding: 7px 12px 7px 10px;
  background: rgba(250,246,238,.94);
  border-radius: var(--ds-radius, 2px);
  box-shadow: 0 2px 10px rgba(42,40,35,.14);
}
html body #main .fc-cs-item + .fc-cs-item::before { display: none; }
html body #main .fc-cs-icon { width: auto; height: auto; }
html body #main .fc-cs-icon svg { width: 14px; height: 14px; }
html body #main .fc-cs-val {
  font-family: var(--fb);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--vv-ink);
  line-height: 1;
  white-space: nowrap;
}
/* the icon says "location" / "hours"; keep the word for screen readers only */
html body #main .fc-cs-lbl {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Spa ---------- */
/* Visit and Reservations: two centred text groups on the column (no card, no divider) */
html body #main .spa-booking-inner.vvb-spa-visit {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: var(--ds-space-columns) !important;
  row-gap: var(--ds-space-section) !important;
  align-items: start !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
@media (max-width: 767px) {
  html body #main .spa-booking-inner.vvb-spa-visit { grid-template-columns: minmax(0, 1fr) !important; }
}
html body #main .vvb-spa-visit .spa-booking-actions {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 24px;
  margin-top: calc(var(--ds-space-text-button) - var(--ds-space-heading-text)) !important;
}
html body #main .spa-gallery .ds-collage { padding-left: 0; padding-right: 0; }
html body #main .spa-section-head { margin-bottom: var(--ds-space-heading-grid) !important; }
html body #main .spa-cta-band { text-align: center; background: transparent !important; }
html body #main .spa-cta-band > p { max-width: 860px; margin-left: auto !important; margin-right: auto !important; }
html body #main .spa-cta-band .spa-cta-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: var(--ds-space-text-button) !important; }

/* ---------- Location ---------- */
/* One full-width map on the column */
html body #main .loc-main.loc-map-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  min-height: 0 !important;
}
.loc-map-card .loc-map-wrap iframe { height: clamp(440px, 64vh, 560px); min-height: 0; }
@media (max-width: 767px) {
  .loc-map-card .loc-map-wrap iframe { height: 360px; }
}
/* Places near the hotel: tabs set like the gallery filter row, cards in a slider under them */
html body #main .loc-near-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  margin: 0 0 var(--ds-space-heading-grid) !important;
  border: 0 !important;
}
html body #main .loc-near-tabs .loc-tab {
  flex: none;
  padding: 14px 22px;
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  font-family: var(--ds-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ds-ink-mute);
  cursor: pointer;
  transition: color 200ms ease, border-color 200ms ease;
}
html body #main .loc-near-tabs .loc-tab:hover { color: var(--ds-ink); }
html body #main .loc-near-tabs .loc-tab.is-active { color: var(--ds-ink); border-bottom-color: var(--vv-gold-deep); }
html body #main .loc-near-pane { display: none; }
html body #main .loc-near-pane.is-active { display: block; }

/* ---------- Legal: centred heading, text on the whole column, gold dash lists ---------- */
html body #main .legal-wrap > :is(h1, .legal-updated) { text-align: center; max-width: none !important; }
html body #main .legal-wrap > .legal-updated { margin-bottom: var(--ds-space-heading-grid) !important; }
html body #main .legal-wrap > * { max-width: none !important; }
html body #main .legal-wrap h2 { font-style: italic; }
html body #main .legal-wrap ul { list-style: none !important; padding-left: 0 !important; display: grid; gap: 14px; }
html body #main .legal-wrap li { position: relative; padding-left: 26px; }
html body #main .legal-wrap li::before { content: ""; position: absolute; left: 0; top: .9em; width: 12px; height: 1px; background: var(--vv-gold-deep); }

/* ---------- Sitemap: centred heading and intro, like every other inner page ---------- */
html body #main .sitemap-wrap > h1,
html body #main .sitemap-wrap > .lede { text-align: center; margin-left: auto !important; margin-right: auto !important; }

/* ==========================================================================
   Careers (careers.html): intro, openings by department, what we look for,
   how to apply, application form. Same layout as the Ranthambhore careers page;
   icon tiles stand in for photos.
   ========================================================================== */
.vvb-cr-wrap {
  box-sizing: border-box;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
html body #main .vvb-cr-intro .vvb-centred-head { margin-bottom: 0 !important; }

/* Openings: one card per department, 4 across (2 on tablet, 1 on phones) */
.vvb-cr-depts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ds-space-card-gap);
  align-items: stretch;
}
.vvb-cr-card {
  display: flex;
  flex-direction: column;
  background: var(--ds-paper);
  border: 1px solid var(--vv-line);
}
.vvb-cr-card-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  background: #F4EFE4;
  color: var(--vv-gold-deep);
}
.vvb-cr-card-tile svg { width: 44px; height: 44px; stroke-width: 1.2; }
.vvb-cr-card-body { padding: var(--ds-card-pad); }
html body #main .vvb-cr-card .vvb-cr-card-body h3 {   /* outranks design-system.css's H3 rule, which loads later */
  margin: 0 !important;
  font-size: var(--ds-fs-h5) !important;   /* one line in a 4-up card, so every role list starts level */
  line-height: var(--ds-lh-h5) !important;
}
html body #main .vvb-cr-roles { list-style: none; margin: var(--ds-space-heading-text) 0 0 !important; padding: 0 !important; display: grid; gap: 8px; }
.vvb-cr-roles li {
  position: relative;
  padding-left: 22px;
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body);
  line-height: var(--ds-lh-body);
  color: var(--ds-ink-soft);
}
.vvb-cr-roles li::before { content: ""; position: absolute; left: 0; top: 13px; width: 12px; height: 1px; background: var(--vv-gold-deep); }

/* What we look for: four small tiles, icon over the quality */
.vvb-cr-traits {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 960px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ds-space-card-gap);
}
.vvb-cr-trait {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: var(--ds-card-pad) 16px;
  background: var(--ds-paper);
  border: 1px solid var(--vv-line);
  text-align: center;
}
.vvb-cr-trait-icon { color: var(--vv-gold-deep); display: inline-flex; }
.vvb-cr-trait-name {
  font-family: var(--ds-font-display);
  font-size: var(--ds-fs-h6);
  line-height: var(--ds-lh-h6);
  color: var(--ds-ink);
}

/* How to apply: three outlined boxes */
.vvb-cr-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ds-space-card-gap);
}
.vvb-cr-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--ds-card-pad);
  border: 1px solid var(--vv-line);
  background: var(--ds-paper);
}
.vvb-cr-step-icon { color: var(--vv-gold-deep); display: inline-flex; margin-bottom: var(--ds-space-heading-text); }
html body #main .vvb-cr-steps .vvb-cr-step h3 {
  margin: 0 !important;
  font-size: var(--ds-fs-h4) !important;
  line-height: var(--ds-lh-h4) !important;
}
html body #main .vvb-cr-step p { margin: 8px 0 0 !important; color: var(--ds-ink-soft); }
.vvb-cr-step-link {
  margin-top: auto;
  padding-top: var(--ds-space-text-button);
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body);
  font-weight: 600;
  color: var(--vv-gold-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  overflow-wrap: anywhere;
  transition: color 200ms ease;
}
.vvb-cr-step-link:hover { color: var(--ds-ink); }

/* Application form: phone = country code + number on one underline row; per-field messages */
html body #main #careers-form .vvb-phone { display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: 16px; }
html body #main #careers-form [aria-invalid="true"] { border-bottom-color: #B3261E !important; }
html body #main #careers-form .check input[aria-invalid="true"] { outline: 1px solid #B3261E; outline-offset: 2px; }
.vvb-field-err:empty { display: none; }
.vvb-field-err { font-family: var(--ds-font-body); font-size: 13px; line-height: 18px; color: #B3261E; }
.vvb-field-hint { font-family: var(--ds-font-body); font-size: 13px; line-height: 18px; color: var(--ds-ink-mute); }
.vvb-form-status {
  display: none;
  padding: 12px 16px;
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-small);
  line-height: var(--ds-lh-small);
  border-left: 2px solid currentColor;
}
.vvb-form-status.is-error { color: #B3261E; background: rgba(179,38,30,.06); }
.vvb-form-status.is-info { color: var(--vv-gold-deep); background: rgba(157,131,69,.08); }
.vvb-form-status.is-success { color: #2E6B3F; background: rgba(46,107,63,.08); }
html body #main #careers-form #cr-recaptcha:empty { display: none; }
#apply { scroll-margin-top: 130px; }

@media (max-width: 1279px) {
  .vvb-cr-depts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .vvb-cr-traits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vvb-cr-steps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .vvb-cr-depts { grid-template-columns: minmax(0, 1fr); }
  .vvb-cr-card-tile { aspect-ratio: 3 / 1; }
  .vvb-cr-card-tile svg { width: 36px; height: 36px; }
  html body #main #careers-form .vvb-phone { grid-template-columns: 96px minmax(0, 1fr); column-gap: 12px; }
}