/* ==========================================================================
   GREAT DESTINATIONS HOSPITALITY: DESIGN SYSTEM
   Spec: /DESIGN-SYSTEM.md. Loaded as the LAST stylesheet in <head> on every
   page of every property. Brand accents come from <html data-brand="…">
   (gdh | myspace | vividus).

   The property templates carry many `html body … !important` rules, so the
   shared components below use the same prefix and !important. Site CSS should
   consume the tokens instead of fighting them.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* layout */
  --ds-container: 1920px;
  --ds-gutter: 150px;
  --container: var(--ds-container);          /* legacy tokens follow the system */
  --container-pad: var(--ds-gutter);

  /* spacing */
  --ds-space-nav-crumb: 24px;
  --ds-space-hero-crumb: 24px;
  --ds-space-crumb-content: 80px;            /* breadcrumb -> first content on the page */
  --ds-space-crumb-heading: var(--ds-space-crumb-content);   /* legacy name */
  --ds-space-columns: 80px;                  /* gap between the two columns of a two-column row */
  --ds-space-heading-text: 16px;
  --ds-space-text-text: 12px;
  --ds-space-text-button: 24px;
  --ds-space-heading-grid: calc(var(--ds-space-section) / 2);   /* intro text / button -> its cards or grid: 50 / 40 / 30 */
  --ds-space-button-grid: calc(var(--ds-space-section) / 2);
  --ds-space-card-gap: 24px;
  --ds-space-image-content: 32px;
  --ds-space-content: 40px;
  --ds-space-section: 100px;
  --ds-space-footer: 100px;
  --ds-header-clear: 20px;                   /* content starts 20px under the fixed header */

  /* typography */
  --ds-font-display: 'Playfair Display', 'Times New Roman', serif;
  --ds-font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ds-fs-h1: 48px;  --ds-lh-h1: 58px;
  --ds-fs-h2: 40px;  --ds-lh-h2: 48px;
  --ds-fs-h3: 32px;  --ds-lh-h3: 40px;
  --ds-fs-h4: 26px;  --ds-lh-h4: 34px;
  --ds-fs-h5: 22px;  --ds-lh-h5: 30px;
  --ds-fs-h6: 18px;  --ds-lh-h6: 26px;
  --ds-fs-body: 15px;   --ds-lh-body: 26px;
  --ds-fs-small: 14px;  --ds-lh-small: 22px;
  --ds-fs-button: 12px; --ds-lh-button: 18px;
  --ds-fs-crumb: 14px;  --ds-lh-crumb: 20px;

  /* colour */
  --ds-ink: #2A2823;
  --ds-ink-soft: #5A554C;
  --ds-ink-mute: #8F887C;
  --ds-paper: #FFFFFF;
  --ds-line: #E3D9C3;
  --ds-line-soft: #ECE4D0;
  --ds-accent: #C06B40;
  --ds-btn-color: var(--ds-ink);

  /* components */
  --ds-radius: 0px;
  --ds-btn-height: 48px;
  --ds-btn-pad-x: 28px;
  --ds-card-pad: 24px;
  --ds-collage-gap: 20px;
}
@media (max-width: 1279px) {
  :root { --ds-gutter: 80px; --ds-space-columns: 64px; }
}
@media (max-width: 1023px) {
  :root { --ds-gutter: 40px; --ds-space-section: 80px; --ds-space-footer: 80px; --ds-space-crumb-content: 64px; --ds-space-columns: 48px; }
}
@media (max-width: 767px) {
  :root {
    --ds-gutter: 24px;
    --ds-space-nav-crumb: 16px;
    --ds-space-hero-crumb: 16px;
    --ds-space-crumb-content: 48px;
    --ds-space-heading-text: 12px;
    --ds-space-text-text: 12px;
    --ds-space-text-button: 20px;
    --ds-space-card-gap: 16px;
    --ds-space-image-content: 24px;
    --ds-space-content: 24px;
    --ds-space-section: 60px;
    --ds-space-footer: 60px;
    --ds-fs-h1: 32px;  --ds-lh-h1: 40px;
    --ds-fs-h2: 28px;  --ds-lh-h2: 36px;
    --ds-fs-h3: 24px;  --ds-lh-h3: 32px;
    --ds-fs-h4: 22px;  --ds-lh-h4: 30px;
    --ds-fs-h5: 20px;  --ds-lh-h5: 28px;
    --ds-fs-h6: 18px;  --ds-lh-h6: 26px;
    --ds-lh-body: 24px;
    --ds-lh-small: 20px;
    --ds-fs-crumb: 13px;
    --ds-card-pad: 20px;
    --ds-collage-gap: 16px;
  }
}

/* Template section padding token: half the section gap on each side, so two
   neighbouring sections add up to --ds-space-section (100 / 80 / 60). */
:root { --section-y: calc(var(--ds-space-section) / 2); }

/* Brand accents */
html[data-brand="gdh"]     { --ds-accent: #C06B40; }
html[data-brand="vividus"] { --ds-accent: #9D8345; }
html[data-brand="myspace"] { --ds-accent: #EF6C1C; --ds-btn-color: #1F3A62; }

/* Never scroll sideways */
html, body { max-width: 100%; overflow-x: clip; }

/* --------------------------------------------------------------------------
   2. Inner-page hero banner (homepage heroes are not touched)
   The banner fills the first screen. Only the breadcrumb line shows under it:
   88 (banner top: 118px header - 10px tuck) + 24 + 20 (crumb line) + 24 = 156.
   -------------------------------------------------------------------------- */
html body #main.body-stack > :is(.inner-hero, .ms-inner-hero, .page-hero, .about-hero, .fac-hero, .gal-page-hero, .loc-hero, .me-hero, .spa-hero) {
  height: calc(100vh - 156px) !important;
  min-height: 420px !important;
  max-height: none !important;
  margin-top: -10px !important;
  margin-left: 50px !important;
  margin-right: 50px !important;
  margin-bottom: 0 !important;
}
@media (max-width: 768px) {
  html body #main.body-stack > :is(.inner-hero, .ms-inner-hero, .page-hero, .about-hero, .fac-hero, .gal-page-hero, .loc-hero, .me-hero, .spa-hero) {
    height: 60vh !important; min-height: 360px !important; margin-left: 24px !important; margin-right: 24px !important;
  }
}
@media (max-width: 600px) {
  html body #main.body-stack > :is(.inner-hero, .ms-inner-hero, .page-hero, .about-hero, .fac-hero, .gal-page-hero, .loc-hero, .me-hero, .spa-hero) {
    height: 55vh !important; margin-left: 16px !important; margin-right: 16px !important;
  }
}
@media (max-width: 480px) {
  html body #main.body-stack > :is(.inner-hero, .ms-inner-hero, .page-hero, .about-hero, .fac-hero, .gal-page-hero, .loc-hero, .me-hero, .spa-hero) {
    height: 50vh !important; min-height: 320px !important;
  }
}

/* --------------------------------------------------------------------------
   3. Breadcrumb: plain text on the page column
   -------------------------------------------------------------------------- */
html body #main > nav:is(.breadcrumb, .ct-breadcrumb, .ms-breadcrumb)[aria-label="Breadcrumb"] {
  display: block !important;
  max-width: none !important;
  margin: var(--ds-header-clear) 0 0 !important;    /* no hero: clear the fixed header */
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
html body #main > :is(.inner-hero, .ms-inner-hero, .page-hero, .about-hero, .fac-hero, .gal-page-hero, .loc-hero, .me-hero, .spa-hero) + nav:is(.breadcrumb, .ct-breadcrumb, .ms-breadcrumb)[aria-label="Breadcrumb"] {
  margin-top: 0 !important;
}
html body #main > nav:is(.breadcrumb, .ct-breadcrumb, .ms-breadcrumb)[aria-label="Breadcrumb"] > :is(ol, ul) {
  box-sizing: border-box !important;
  max-width: var(--ds-container) !important;
  margin: 0 auto !important;
  padding: var(--ds-space-hero-crumb) var(--ds-gutter) var(--ds-space-crumb-heading) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  list-style: none !important;
  background: transparent !important;
  border: 0 !important;
  font-family: var(--ds-font-body) !important;
  font-size: var(--ds-fs-crumb) !important;
  line-height: var(--ds-lh-crumb) !important;
  font-weight: 500 !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
  color: var(--ds-ink-mute) !important;
}
html body #main > nav:is(.breadcrumb, .ct-breadcrumb, .ms-breadcrumb)[aria-label="Breadcrumb"] > :is(ol, ul) > li {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  color: var(--ds-ink-mute) !important;
}
html body #main > nav:is(.breadcrumb, .ct-breadcrumb, .ms-breadcrumb)[aria-label="Breadcrumb"] > :is(ol, ul) > li > :is(a, span) {
  font: inherit !important;
  letter-spacing: inherit !important;
  color: inherit !important;
  text-decoration: none !important;
  transition: color 160ms ease;
}
html body #main > nav:is(.breadcrumb, .ct-breadcrumb, .ms-breadcrumb)[aria-label="Breadcrumb"] > :is(ol, ul) > li > a:hover { color: var(--ds-ink) !important; }
html body #main > nav:is(.breadcrumb, .ct-breadcrumb, .ms-breadcrumb)[aria-label="Breadcrumb"] > :is(ol, ul) > li + li::before {
  content: "\203A" !important;
  font-size: 1.15em !important;
  line-height: 1 !important;
  color: var(--ds-ink) !important;
  opacity: .6 !important;
}
html body #main > nav:is(.breadcrumb, .ct-breadcrumb, .ms-breadcrumb)[aria-label="Breadcrumb"] > :is(ol, ul) > li[aria-current] { color: var(--ds-ink) !important; }

/* --------------------------------------------------------------------------
   4. Typography (page content only: navbar, menu, heroes and footer keep theirs)
   -------------------------------------------------------------------------- */
html body #main :is(h1, h2, h3):not(:is([class*="hero"], .hero-ed, .cover) *) {
  font-family: var(--ds-font-display) !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}
html body #main h1:not(:is([class*="hero"], .hero-ed, .cover) *) { font-size: var(--ds-fs-h1) !important; line-height: var(--ds-lh-h1) !important; }
html body #main h2:not(:is([class*="hero"], .hero-ed, .cover) *) { font-size: var(--ds-fs-h2) !important; line-height: var(--ds-lh-h2) !important; }
html body #main h3:not(:is([class*="hero"], .hero-ed, .cover) *) { font-size: var(--ds-fs-h3) !important; line-height: var(--ds-lh-h3) !important; }
html body #main :is(h1, h2, h3) em { color: var(--ds-accent); font-style: italic; }

/* Stat numerals (108 rooms, 4,000 sq. ft., 2010…) use the H2 size on every site.
   An old sitewide rule forced every [class*="-num"] to 12px. Index numbers such as "01" are not stats. */
html body #main :is(.usp-num, .ms-sp-num, .story-stat-num, .ip-stat-num, .kd-usp-num, .ds-num, .dining-chip-num, .kd-meet-num) {
  font-family: var(--ds-font-display) !important;
  font-size: var(--ds-fs-h2) !important;
  line-height: var(--ds-lh-h2) !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
}
/* MySpace homepage About: the copy column adds no dead space under its button */
html body #main .ms-about-copy { padding-top: 0 !important; padding-bottom: 0 !important; }

/* Card titles use the H4 style whatever their tag */
html body #main :is(.ip-offer-card, .ip-team-card, .ip-culture-card, .ip-model-card, .ct-card, .smx-card, .ms-offer-card, .ms-ab-mvv-card, .ms-cr-dept-card, .ms-cr-cult-card, .ms-hc, .fc-card, .rm-card, .rm-tile, .meeting-card, .me-card, .vmv-card, .team-card, .pg-card, .coll-card, .fac-card, .kd-fac-card)
  :is(h2, h3, h4, .fc-card-name, .rm-card-name, .fac-card-name, .me-card-name, .kd-fac-card-name, .coll-card-name, .vs-offer-h, .ct-city, .ms-hc-name) {
  font-family: var(--ds-font-display) !important;
  font-size: var(--ds-fs-h4) !important;
  line-height: var(--ds-lh-h4) !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

/* Body and small text */
html body #main p:not(:is([class*="hero"], .hero-ed, .cover, .story-quote, .spa-booking-cta, blockquote) *):not(.english) {
  font-size: var(--ds-fs-body) !important;
  line-height: var(--ds-lh-body) !important;
}
/* No paragraph ends on a lone hanging word */
html body #main p { text-wrap: pretty; }
html body #main :is(p, span, li):is(.ip-team-role, .legal-updated, .smx-sub, .ms-hs-tagline, .vs-apply-note, .vs-note, .ip-offer-brand),
html body #main :is(.me-svc-text, .vs-cell, .vs-step) p,
html body #main small {
  font-size: var(--ds-fs-small) !important;
  line-height: var(--ds-lh-small) !important;
}

/* --------------------------------------------------------------------------
   5. Eyebrows: removed unless the content needs them (job department and
      offer brand stay, because they are content)
   -------------------------------------------------------------------------- */
html body #main :is(.ip-section-eyebrow, .ip-brand-eyebrow, .ip-vmv-eyebrow, .cover-eyebrow, .ct-section-eyebrow, .smx-eyebrow,
                   .ms-inner-eyebrow, .ms-eyebrow, .kd-rx-panel-eyebrow, .pg-card-label, .inner-hero-eyebrow,
                   .room-tab-label, .marginalia),
html body #main :is(.label, .label-bi, .label--gold, .kd-label-row):has(+ :is(h1, h2, h3)) {
  display: none !important;
}

/* --------------------------------------------------------------------------
   6. Buttons: one style for every content CTA (navbar Book Now excluded)
   -------------------------------------------------------------------------- */
html body #main :is(.vv-btn, .vv-btn-ghost, .vv-btn-dir, .rc-cta, .fac-intro-cta, .rm-card-cta, .fc-card-btn, .enq-submit, .formSubmitButton,
                   .ip-cta, .ip-job-apply, .ip-offer-book, .ip-form-submit, .ch-dev-cta,
                   .ms-btn, .ms-hc-cta, .kd-btn-outline, .kd-btn-solid, .kd-rx-panel-cta, .pg-card-cta) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-sizing: border-box !important;
  width: auto;
  min-height: var(--ds-btn-height) !important;
  height: auto !important;
  padding: 11px var(--ds-btn-pad-x) !important;
  font-family: var(--ds-font-body) !important;
  font-size: var(--ds-fs-button) !important;
  line-height: var(--ds-lh-button) !important;
  font-weight: 700 !important;
  font-style: normal !important;
  letter-spacing: .24em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  white-space: nowrap;
  color: var(--ds-btn-color) !important;
  background: transparent !important;
  border: 1px solid var(--ds-btn-color) !important;
  border-radius: var(--ds-radius) !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease !important;
}
html body #main :is(.vv-btn, .vv-btn-ghost, .vv-btn-dir, .rc-cta, .fac-intro-cta, .rm-card-cta, .fc-card-btn, .enq-submit, .formSubmitButton,
                   .ip-cta, .ip-job-apply, .ip-offer-book, .ip-form-submit, .ch-dev-cta,
                   .ms-btn, .ms-hc-cta, .kd-btn-outline, .kd-btn-solid, .kd-rx-panel-cta, .pg-card-cta):is(:hover, :focus-visible) {
  background: var(--ds-btn-color) !important;
  color: #FFFFFF !important;
  border-color: var(--ds-btn-color) !important;
}
html body #main :is(.vv-btn, .vv-btn-ghost, .vv-btn-dir, .rc-cta, .fac-intro-cta, .rm-card-cta, .fc-card-btn, .enq-submit, .formSubmitButton,
                   .ip-cta, .ip-job-apply, .ip-offer-book, .ip-form-submit, .ch-dev-cta,
                   .ms-btn, .ms-hc-cta, .kd-btn-outline, .kd-btn-solid, .kd-rx-panel-cta, .pg-card-cta) :is(svg, .arrow, [class*="arrow"]) {
  color: inherit !important;
}

/* --------------------------------------------------------------------------
   7. Cards and card grids
   -------------------------------------------------------------------------- */
/* One corner radius for every card, panel and image (MySpace's stylesheet rounded them to 12px) */
html body #main :is(.ip-offer-card, .ip-team-card, .ip-culture-card, .ip-model-card, .ct-card, .smx-card, .ms-offer-card, .ms-ab-mvv-card, .ms-cr-dept-card, .ms-cr-cult-card, .ms-hc, .fc-card, .rm-card, .rm-tile, .meeting-card, .me-card, .vmv-card, .team-card, .pg-card, .coll-card, .fac-card, .kd-fac-card),
html body #main :is([class$="-card"], [class*="-card "], [class$="-panel"], [class*="-panel "], [class$="-tile"], [class*="-tile "],
                    [class$="-img"], [class*="-img "], [class$="-image"], [class*="-image "], [class$="-img-wrap"], [class*="-img-wrap "], [class$="-photo"], [class*="-photo "]) {
  border-radius: var(--ds-radius) !important;
}
/* Card text area: 24px padding (20 mobile) */
html body #main :is(.ms-hc-body, .fc-card-body, .rm-card-body, .rm-tile-body, .mc-body, .ip-offer-body, .pg-card-body, .ms-offer-body) {
  padding: var(--ds-card-pad) !important;
}
/* (Card button spacing lives in section 10d.) */
/* Card grids: 24px gap (16 mobile), on the column. Carousels (.coll-card, .fac-card,
   .kd-fac-card tracks) keep their own scrolling layout. */
html body #main :is(div, section, ul):has(> :is(.ip-offer-card, .ip-team-card, .ip-culture-card, .ip-model-card, .ct-card, .smx-card, .ms-offer-card, .ms-ab-mvv-card, .ms-cr-dept-card, .ms-cr-cult-card, .ms-hc, .fc-card, .rm-card, .rm-tile, .meeting-card, .me-card, .vmv-card, .team-card, .pg-card)) {
  gap: var(--ds-space-card-gap) !important;
}
html body #main .ms-hc-grid { padding-left: 0 !important; padding-right: 0 !important; }
@media (max-width: 1023px) and (min-width: 768px) {
  html body #main :is(div, section, ul):has(> :is(.ip-offer-card, .ip-culture-card, .ip-model-card, .ct-card, .smx-card, .ms-offer-card, .ms-ab-mvv-card, .ms-cr-dept-card, .ms-cr-cult-card, .ms-hc, .fc-card, .rm-card, .rm-tile, .meeting-card, .me-card, .vmv-card, .pg-card)) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 767px) {
  html body #main :is(div, section, ul):has(> :is(.ip-offer-card, .ip-team-card, .ip-culture-card, .ip-model-card, .ct-card, .smx-card, .ms-offer-card, .ms-ab-mvv-card, .ms-cr-dept-card, .ms-cr-cult-card, .ms-hc, .fc-card, .rm-card, .rm-tile, .meeting-card, .me-card, .vmv-card, .team-card, .pg-card)) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    overflow: visible !important;
  }
  html body #main :is(.ip-offer-card, .ip-team-card, .ip-culture-card, .ip-model-card, .ct-card, .smx-card, .ms-offer-card, .ms-ab-mvv-card, .ms-cr-dept-card, .ms-cr-cult-card, .ms-hc, .fc-card, .rm-card, .rm-tile, .meeting-card, .me-card, .vmv-card, .team-card, .pg-card) {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: none !important;
  }
}

/* --------------------------------------------------------------------------
   8. Collage gallery (replaces the hover "strip" gallery)
   Desktop: large image left, two stacked, two tall on the right, two across
   the bottom. The 6-image variant joins the bottom pair. Mobile: 2 columns.
   -------------------------------------------------------------------------- */
.ds-collage {
  box-sizing: content-box;          /* padding (column + section spacing) sits outside the photo grid */
  max-width: calc(var(--ds-container) - 2 * var(--ds-gutter));
  margin: 0 auto;
  padding: 0 var(--ds-gutter);
  display: grid;
  gap: var(--ds-collage-gap);
  grid-template-columns: 4.6fr 1fr 3.4fr 4.6fr;
  grid-template-rows: repeat(6, minmax(0, 1fr));
  grid-template-areas:
    "a a b d"
    "a a b d"
    "a a c d"
    "a a c g"
    "e f f g"
    "e f f g";
  aspect-ratio: 1596 / 745;
}
.ds-collage--6 {
  grid-template-areas:
    "a a b d"
    "a a b d"
    "a a c d"
    "a a c f"
    "e e e f"
    "e e e f";
}
.ds-collage--5 {
  grid-template-areas:
    "a a b d"
    "a a b d"
    "a a c d"
    "a a c d"
    "e e e d"
    "e e e d";
}
.ds-collage--2 {
  grid-template-areas:
    "a a a b"
    "a a a b"
    "a a a b"
    "a a a b"
    "a a a b"
    "a a a b";
}
.ds-collage__item { position: relative; margin: 0; overflow: hidden; background: var(--ds-line-soft); min-height: 0; }
.ds-collage__item:nth-child(1) { grid-area: a; }
.ds-collage__item:nth-child(2) { grid-area: b; }
.ds-collage__item:nth-child(3) { grid-area: c; }
.ds-collage__item:nth-child(4) { grid-area: d; }
.ds-collage__item:nth-child(5) { grid-area: e; }
.ds-collage__item:nth-child(6) { grid-area: f; }
.ds-collage__item:nth-child(7) { grid-area: g; }
.ds-collage__item:nth-child(8) { grid-area: h; }
/* 8 photos: the right-hand column splits into three, so the mosaic still closes as a full rectangle */
.ds-collage--8 {
  grid-template-areas:
    "a a b d"
    "a a b d"
    "a a c g"
    "a a c g"
    "e f f h"
    "e f f h";
}
.ds-collage__item img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  transition: transform 700ms cubic-bezier(.4, 0, .2, 1);
}
.ds-collage__item:hover img { transform: scale(1.03); }
@media (max-width: 767px) {
  .ds-collage,
  .ds-collage--6 {
    aspect-ratio: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: 150px;
    grid-template-areas:
      "a a"
      "a a"
      "b c"
      "d d"
      "e f"
      "g g";
  }
  .ds-collage--6 {
    grid-template-areas:
      "a a"
      "a a"
      "b c"
      "d d"
      "e f";
  }
  .ds-collage--5 {
    grid-template-areas:
      "a a"
      "a a"
      "b c"
      "d e";
  }
  .ds-collage--2 {
    grid-template-areas:
      "a a"
      "a a"
      "b b"
      "b b";
  }
  .ds-collage--8 {
    grid-template-areas:
      "a a"
      "a a"
      "b c"
      "d d"
      "e f"
      "g g"
      "h h";
  }
}
@media (prefers-reduced-motion: reduce) {
  .ds-collage__item img { transition: none; }
  .ds-collage__item:hover img { transform: none; }
}

/* --------------------------------------------------------------------------
   9. Page column: every page's content sits 150px from the window edge on
      desktop (80 / 40 / 24 below). These are the template containers that
      set their own widths; each now uses the shared column.
   -------------------------------------------------------------------------- */
/* 9a. Containers that ARE the column */
html body #main :is(
    .ip-container, .ip-container--narrow, .ct-wrap, .smx-wrap,
    .fa-wrap, .cover-logos, .chapter-head, .ch-dev-wrap,
    .ms-ip-container, .ms-about-inner, .ms-hs-inner, .ms-perks-inner, .ms-prop-section-inner,
    .kd-usp, .kd-rooms-intro, .kd-dining-grid, .kd-sec-inner, .kd-place-inner,
    .usp-inner, .usp-tagline, .dn-reserve-inner, .fac-page-intro-inner, .fac-cards-inner, .loc-transport-inner, .enq-inner
  ),
html body #main > section > :is([class^="ms-"][class$="-inner"]),
html body #main > .page-content > section > :is([class^="ms-"][class$="-inner"]) {
  box-sizing: border-box !important;
  width: auto !important;
  max-width: var(--ds-container) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--ds-gutter) !important;
  padding-right: var(--ds-gutter) !important;
}
/* 9b. Bands that carry the column themselves (no inner container) */
html body #main :is(.dn-header, .gl-page-intro, .loc-main, .ms-prop-intro, .ms-testi-viewport),
html body #main > div:has(> .gal-item),
html body #main > .page-content > div:has(> .gal-item) {
  box-sizing: border-box !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: var(--ds-gutter) !important;
  padding-right: var(--ds-gutter) !important;
}
/* 9c. Outer bands whose inner container is the column: no side padding of their own */
html body #main :is(.brand-strip, .vv-usp, .kd-usp-wrap, .ms-ct-quick, .fac-page-intro, .fac-cards-section, .dn-reserve, .loc-transport, .enq-section) {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
html body #main .ms-ct-quick { padding-left: var(--ds-gutter) !important; padding-right: var(--ds-gutter) !important; }
/* 9d. Blocks placed with side margins */
html body #main .rs-gallery {
  box-sizing: border-box !important;
  width: auto !important;
  max-width: none !important;
  margin-left: var(--ds-gutter) !important;
  margin-right: var(--ds-gutter) !important;
}
/* 9e. Heading blocks inside the column use its full width */
html body #main .chapter-head .chapter-title { max-width: none !important; }
/* 9f. Two-column cards grid capped at 900px (offers) spans the column */
html body #main .fac-grid { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
/* 9g. GDH homepage collection slider: cards on the column, arrows in the gutter */
html body #main .collection-slider {
  box-sizing: border-box !important;
  max-width: var(--ds-container) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--ds-gutter) !important;
  padding-right: var(--ds-gutter) !important;
}
@media (min-width: 1025px) {
  html body #main .collection-slider .coll-nav-prev { left: calc(var(--ds-gutter) / 2 - 27px) !important; }
  html body #main .collection-slider .coll-nav-next { right: calc(var(--ds-gutter) / 2 - 27px) !important; }
}
/* 9h. GDH Our Story vision / mission / values: images may bleed, text sits on the column */
html body #main .ip-vmv-vision-text { padding-left: var(--ds-gutter) !important; }
html body #main .ip-vmv-mission-text { padding-right: var(--ds-gutter) !important; }
html body #main .ip-vmv-values-wrap { padding-left: var(--ds-gutter) !important; padding-right: var(--ds-gutter) !important; }
/* 9i. MySpace: testimonial header on the column; properties band defers to its inner container */
html body #main .ms-testi-top {
  box-sizing: border-box !important;
  max-width: var(--ds-container) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--ds-gutter) !important;
  padding-right: var(--ds-gutter) !important;
}
html body #main .ms-prop-section { padding-left: 0 !important; padding-right: 0 !important; }

/* 9j. Page wrappers never add their own side padding (the column already does) */
html body #main .page-content { padding-left: 0 !important; padding-right: 0 !important; }
html body #main .ms-hc-grid,
html body #main .ms-hs-inner > div:has(> .ms-hc-grid) { margin-left: 0 !important; margin-right: 0 !important; }
/* Long emails, phone numbers and addresses wrap instead of pushing the layout wider */
html body #main :is(a[href^="mailto:"], a[href^="tel:"], .dn-contact-val) { overflow-wrap: anywhere; }

/* 9k. Phones and small tablets: nothing wider than the screen, nothing cut off */
@media (max-width: 767px) {
  /* inline two-column grids (style="grid-template-columns: …") stack */
  html body #main [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  /* grid / flex children may shrink below their content width */
  html body #main :is(.dn-reserve-inner, .dn-reserve-right, .loc-main, .room-detail-body, [style*="grid-template-columns"]) > * { min-width: 0 !important; }
  html body #main .room-detail-sidebar { width: auto !important; min-width: 0 !important; max-width: 100% !important; }
  html body #main :is(iframe, video, embed, object) { max-width: 100% !important; }
  /* filter tabs and stat pills wrap from the left instead of overflowing off-screen */
  html body #main :is(.ip-filter-bar, .gal-filter-inner, .ms-prop-stats, .loc-tabs) {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    overflow: visible !important;
    height: auto !important;
    max-width: 100% !important;
  }
  html body #main :is(.ip-filter-bar, .gal-filter-inner, .ms-prop-stats, .loc-tabs) > * { flex: 0 1 auto !important; min-width: 0 !important; }
  /* room gallery sits on the 24px gutter */
  html body #main .rs-gallery { padding-left: 0 !important; padding-right: 0 !important; }
}

/* --------------------------------------------------------------------------
   10. Vertical rhythm
   -------------------------------------------------------------------------- */
/* 10a. Section -> section (homepages included): every top-level block pads half the
   section gap above and below, so neighbours add up to 100 / 80 / 60. No divider lines.
   Heroes, breadcrumbs, booking widgets, image bands and the trailing spacer are not sections.
   Specificity stays at (1,0,2) so page-level relationship rules can refine it. */
html body #main > :where(section, div):not(:where(.page-content, .inner-hero, .ms-inner-hero, .page-hero, .about-hero, .fac-hero, .gal-page-hero, .loc-hero, .me-hero, .spa-hero, .hero-slider, .cover, .kd-hero, .ms-hero-carousel, .vv-parallax-break, .search-widget-wrap, .vv-bk, [class*="booking-bar"], [class*="search-widget"], [aria-hidden="true"], :empty)),
html body #main > :where(.page-content) > :where(section, div):not(:where([aria-hidden="true"], :empty)) {
  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;
}
/* Inner wrappers don't add vertical padding on top of the section's (panels, cards, boxes and
   forms keep theirs) */
html body #main > :where(section, div) > :where([class$="-inner"], [class*="-inner "], [class$="-wrap"], [class*="-wrap "], [class$="-container"], [class*="-container "], .container, .inner-section, .story-body):not(:where([class$="card"], [class*="card "], [class$="box"], [class*="box "], [class$="panel"], [class*="panel "], form)),
html body #main > :where(.page-content) > :where(section, div) > :where([class$="-inner"], [class*="-inner "], [class$="-wrap"], [class*="-wrap "], [class$="-container"], [class*="-container "], .container, .inner-section, .story-body):not(:where([class$="card"], [class*="card "], [class$="box"], [class*="box "], [class$="panel"], [class*="panel "], form)),
html body #main :where(.kd-usp) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* The last element inside a block adds no space below itself */
html body #main :where(section, div, article, header, aside) > :where(p, ul, ol, div, h1, h2, h3, h4, form, blockquote, figure, aside, table):last-child {
  margin-bottom: 0 !important;
}
/* A heading that opens a block (or follows a hidden eyebrow) has no top margin */
html body #main :where(section, div, header, article) > :where(h1, h2, h3):first-child,
html body #main :where(.label, .label-bi, .label--gold, .kd-label-row, .kd-label, .ms-inner-eyebrow, .ms-eyebrow, .ip-section-eyebrow, .ip-brand-eyebrow, .ip-vmv-eyebrow, .ct-section-eyebrow, .smx-eyebrow, .sr-only, .visually-hidden) + :where(h1, h2, h3) {
  margin-top: 0 !important;
}

/* 10a2. Heading block -> the grid it introduces: 32px (24 mobile).
   A heading block is a text-only block (no photos, cards or forms). The grids that a heading
   block introduces are listed explicitly (a nested :has() would be invalid CSS). */
html body #main > :is(section, div):not(:has(img, picture, video, iframe, form, [class*="card"], [style*="background-image"])):has(+ :is(.fac-cards-section, .spa-booking, .rm-cards-section, .me-venues, .loc-main, .rs-gallery, .ds-collage, .ms-prop-section, #gal-filter-bar, #gal-grid, .gal-grid, .ct-offices)),
html body #main > .page-content > :is(section, div):not(:has(img, picture, video, iframe, form, [class*="card"], [style*="background-image"])):has(+ :is(.fac-cards-section, .spa-booking, .rm-cards-section, .me-venues, .loc-main, .rs-gallery, .ds-collage, .ms-prop-section, #gal-filter-bar, #gal-grid, .gal-grid, .ct-offices)) {
  padding-bottom: 0 !important;
}
html body #main > :is(section, div):not(:has(img, picture, video, iframe, form, [class*="card"], [style*="background-image"])):has(+ :is(.fac-cards-section, .spa-booking, .rm-cards-section, .me-venues, .loc-main, .rs-gallery, .ds-collage, .ms-prop-section, #gal-filter-bar, #gal-grid, .gal-grid, .ct-offices)) :is(div, section, header, article),
html body #main > .page-content > :is(section, div):not(:has(img, picture, video, iframe, form, [class*="card"], [style*="background-image"])):has(+ :is(.fac-cards-section, .spa-booking, .rm-cards-section, .me-venues, .loc-main, .rs-gallery, .ds-collage, .ms-prop-section, #gal-filter-bar, #gal-grid, .gal-grid, .ct-offices)) :is(div, section, header, article) {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
html body #main > :is(section, div):not(:has(img, picture, video, iframe, form, [class*="card"], [style*="background-image"])) + :is(.fac-cards-section, .spa-booking, .rm-cards-section, .me-venues, .loc-main, .rs-gallery, .ds-collage, .ms-prop-section, #gal-filter-bar, #gal-grid, .gal-grid, .ct-offices),
html body #main > .page-content > :is(section, div):not(:has(img, picture, video, iframe, form, [class*="card"], [style*="background-image"])) + :is(.fac-cards-section, .spa-booking, .rm-cards-section, .me-venues, .loc-main, .rs-gallery, .ds-collage, .ms-prop-section, #gal-filter-bar, #gal-grid, .gal-grid, .ct-offices) {
  padding-top: var(--ds-space-heading-grid) !important;
}

/* 10a3. Photo collage / room gallery -> the content under it: 32px (24 mobile) */
html body #main > :is(.ds-collage, .rs-gallery),
html body #main > .page-content > :is(.ds-collage, .rs-gallery) { padding-bottom: 0 !important; }
html body #main > :is(.ds-collage, .rs-gallery) + :is(section, div):not(.page-content),
html body #main > .page-content > :is(.ds-collage, .rs-gallery) + :is(section, div),
html body #main > :is(.ds-collage, .rs-gallery) + .page-content > :first-child {
  padding-top: var(--ds-space-image-content) !important;
}
html body #main > :is(.ds-collage, .rs-gallery) + .page-content { padding-top: 0 !important; }

/* 10b. Breadcrumb -> page heading: the block after the breadcrumb starts flush,
   and when it holds the page H1, every wrapper down to the H1 does too
   (a band keeps its inset: its painted edge is the first content under the breadcrumb) */
html body #main > nav[aria-label="Breadcrumb"] + :not(.page-content, .ds-band),
html body #main > nav[aria-label="Breadcrumb"] + .page-content > :first-child:not(.ds-band) {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
html body #main > nav[aria-label="Breadcrumb"] + :is(div, section) :is(div, section, header, article):has(h1),
html body #main > nav[aria-label="Breadcrumb"] + .page-content > :first-child :is(div, section, header, article):has(h1) {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
html body #main > nav[aria-label="Breadcrumb"] + :is(div, section) h1,
html body #main > nav[aria-label="Breadcrumb"] + .page-content > :first-child h1 { margin-top: 0 !important; }
/* Intro rows that put the page heading beside a photo or a paragraph align to the top,
   so the heading sits right under the breadcrumb */
html body #main :is(.ms-ab-about-grid, .ms-prop-intro-top, .ip-founding-grid) { align-items: start !important; }
/* The page heading comes straight after the breadcrumb: eyebrow labels above it go
   (card / tile category labels stay, they are content) */
html body #main > nav[aria-label="Breadcrumb"] + :is(div, section) :is(span, small, .label, .label-bi, .label--gold, .kd-label-row):has(~ :is(h1, h2), ~ * :is(h1, h2)):not(:is([class*="card"], [class*="tile"], .ms-hc) *),
html body #main > nav[aria-label="Breadcrumb"] + .page-content > :first-child :is(span, small, .label, .label-bi, .label--gold, .kd-label-row):has(~ :is(h1, h2), ~ * :is(h1, h2)):not(:is([class*="card"], [class*="tile"], .ms-hc) *) {
  display: none !important;
}

/* 10c. Last section -> footer */
html body #main > :where(:nth-last-child(1 of :not(script, style, noscript, template, link, dialog, [aria-hidden="true"], [hidden], [role="dialog"], [style*="display:none"], [style*="display: none"], [class*="lightbox"], [class*="modal"], :empty))):not(:where(.page-content)),
html body #main > :where(.page-content:nth-last-child(1 of :not(script, style, noscript, template, link, dialog, [aria-hidden="true"], [hidden], [role="dialog"], [style*="display:none"], [style*="display: none"], [class*="lightbox"], [class*="modal"], :empty))) > :where(:nth-last-child(1 of :not(script, style, noscript, template, link, dialog, [aria-hidden="true"], [hidden], [role="dialog"], [style*="display:none"], [style*="display: none"], [class*="lightbox"], [class*="modal"], :empty))) {
  padding-bottom: var(--ds-space-footer) !important;
}

/* 10e. Bands: blocks that paint their own background (a colour, photo or video), marked
   with .ds-band in the HTML. Content sits a full section gap (100 / 80 / 60) from a band's
   edge on both sides: inside the band, and in the blocks next to it. Neighbouring bands
   simply meet. Heroes and photo strips keep their own height; only the space around them
   changes. A painted panel nested inside a section is a band too and gets the same inset. */
html body #main > :where(section, div).ds-band:not(:where(.cover, .kd-hero, .hero-slider, .ms-hero-carousel, .vv-parallax-break)),
html body #main > .page-content > :where(section, div).ds-band,
html body #main > :where(section, div) :where(section, div).ds-band {
  padding-top: var(--ds-space-section) !important;
  padding-bottom: var(--ds-space-section) !important;
}
/* (inline <style>/<script> tags and hidden template leftovers between sections are skipped:
   up to three) */
html body #main > :where(.ds-band, .page-content > .ds-band) + :where(section, div):not(:where(.ds-band, .page-content, .search-widget-wrap, .vv-bk, [class*="booking-bar"], [class*="search-widget"], [aria-hidden="true"], :empty)),
html body #main > :where(.ds-band) + :where(style, script, link, noscript, template, .masthead, .menu-overlay) + :where(section, div):not(:where(.ds-band, .page-content, .search-widget-wrap, .vv-bk, [class*="booking-bar"], [class*="search-widget"], [aria-hidden="true"], :empty)),
html body #main > :where(.ds-band) + :where(style, script, link, noscript, template, .masthead, .menu-overlay) + :where(style, script, link, noscript, template, .masthead, .menu-overlay) + :where(section, div):not(:where(.ds-band, .page-content, .search-widget-wrap, .vv-bk, [class*="booking-bar"], [class*="search-widget"], [aria-hidden="true"], :empty)),
html body #main > :where(.ds-band) + :where(style, script, link, noscript, template, .masthead, .menu-overlay) + :where(style, script, link, noscript, template, .masthead, .menu-overlay) + :where(style, script, link, noscript, template, .masthead, .menu-overlay) + :where(section, div):not(:where(.ds-band, .page-content, .search-widget-wrap, .vv-bk, [class*="booking-bar"], [class*="search-widget"], [aria-hidden="true"], :empty)),
html body #main > .page-content > :where(.ds-band) + :where(section, div):not(:where(.ds-band, [aria-hidden="true"], :empty)),
html body #main > .page-content > :where(.ds-band) + :where(style, script, link, noscript, template, .masthead, .menu-overlay) + :where(section, div):not(:where(.ds-band, [aria-hidden="true"], :empty)) {
  padding-top: var(--ds-space-section) !important;
}
html body #main > :where(section, div):not(:where(.ds-band, .page-content, .search-widget-wrap, .vv-bk, [class*="booking-bar"], [class*="search-widget"], [aria-hidden="true"], :empty)):has(+ .ds-band, + :where(style, script, link, noscript, template, .masthead, .menu-overlay) + .ds-band, + :where(style, script, link, noscript, template, .masthead, .menu-overlay) + :where(style, script, link, noscript, template, .masthead, .menu-overlay) + .ds-band, + :where(style, script, link, noscript, template, .masthead, .menu-overlay) + :where(style, script, link, noscript, template, .masthead, .menu-overlay) + :where(style, script, link, noscript, template, .masthead, .menu-overlay) + .ds-band),
html body #main > .page-content > :where(section, div):not(:where(.ds-band, [aria-hidden="true"], :empty)):has(+ .ds-band, + :where(style, script, link, noscript, template, .masthead, .menu-overlay) + .ds-band) {
  padding-bottom: var(--ds-space-section) !important;
}
/* The last section on the page that ends in a painted panel lets the panel meet the footer
   (the panel's own inset already puts its content 100px from the footer) */
html body #main > :where(:nth-last-child(1 of :not(script, style, noscript, template, link, dialog, [aria-hidden="true"], [hidden], [role="dialog"], [style*="display:none"], [style*="display: none"], [class*="lightbox"], [class*="modal"], :empty))):has(> .ds-band:last-child) {
  padding-bottom: 0 !important;
}
/* Small labels that open a section sit on its top edge (inline, they sat 5px low in the
   26px line box), and stat cells carry no vertical padding of their own */
html body #main :is(.fa-eyebrow, .brand-strip-label, section.anchor > .label) { display: block !important; }
html body #main .usp-stat { padding-top: 0 !important; padding-bottom: 0 !important; }
/* The MySpace guest-voices slider keeps 24px under its cards for their shadows; the shadow room
   overlaps the section padding instead of adding to it */
html body #main .ms-testi-viewport { margin-bottom: -24px !important; }
/* A floating card that hangs below its photo reserves its overhang, so the space under it is
   measured from the card (GDH homepage stats card: bottom -32px, -28px up to 900px wide,
   in the flow from 768px down) */
html body #main .ch-dev-right { margin-bottom: 32px !important; }
@media (max-width: 900px) { html body #main .ch-dev-right { margin-bottom: 28px !important; } }
@media (max-width: 768px) { html body #main .ch-dev-right { margin-bottom: 0 !important; } }
/* Stacked layouts: the last visible thing ends the section, never an empty strip.
   GDH founding photo frame: square box, photo inset 8%, chip 6% from the bottom */
@media (max-width: 860px) { html body #main .fa-block > .fa-figure:last-child { margin-bottom: calc(min(100%, 360px) * -0.06) !important; } }
/* Swipe rows keep room under their cards for shadows; it overlaps the section padding */
@media (max-width: 768px) { html body #main :is(.ab-gdh-ws-props, .team-grid):last-child { margin-bottom: -8px !important; } }
@media (max-width: 600px) { html body #main :is(.ms-hc-row-3, .ms-hc-row-2):last-child { margin-bottom: -16px !important; } }
/* GDH Our Story: the vision text opens the section; the last value cell sits on the panel edge */
@media (max-width: 768px) { html body #main .ip-vmv-vision-text { padding-top: 0 !important; } }
@media (max-width: 540px) { html body #main .ip-vmv-val:last-child { padding-bottom: 0 !important; } }
/* Room prev / next: the empty placeholder that keeps "Next" on the right goes once they stack */
@media (max-width: 480px) { html body #main .page-nav > :empty { display: none !important; } }

/* 10d. Inside a section */
html body #main :is(h1, h2, h3, h4):not(:is([class*="hero"], .hero-ed, .cover) *):has(+ p) { margin-bottom: 0 !important; }
html body #main :is(h1, h2, h3, h4):not(:is([class*="hero"], .hero-ed, .cover) *) + p { margin-top: var(--ds-space-heading-text) !important; }
html body #main p:not(:is([class*="hero"], .hero-ed, .cover) *):has(+ p) { margin-bottom: 0 !important; }
html body #main p:not(:is([class*="hero"], .hero-ed, .cover) *) + p { margin-top: var(--ds-space-text-text) !important; }
/* Paragraph -> button: 24px. Text columns that space their children with
   flex/grid gap drop that gap so the margins below are the only spacing. */
html body #main :is(div, header, article):has(> p + :is(.vv-btn, .vv-btn-ghost, .vv-btn-dir, .rc-cta, .fac-intro-cta, .ip-cta, .ms-btn, .ms-hc-cta, .kd-btn-outline, .kd-btn-solid, .kd-rx-panel-cta, .ch-dev-cta)):not(:is(.fc-card-body, .rm-card-body, .rm-tile-body, .mc-body, .ip-offer-body, .pg-card-body, .ms-hc-body)),
html body #main :is(div, header, article):has(> p + :is(div, p) > :is(.vv-btn, .vv-btn-ghost, .vv-btn-dir, .rc-cta, .fac-intro-cta, .ip-cta, .ms-btn, .ms-hc-cta, .kd-btn-outline, .kd-btn-solid, .kd-rx-panel-cta, .ch-dev-cta)):not(:is(.fc-card-body, .rm-card-body, .rm-tile-body, .mc-body, .ip-offer-body, .pg-card-body, .ms-hc-body)) {
  row-gap: 0 !important;
}
html body #main :not(:is(.fc-card-body, .rm-card-body, .rm-tile-body, .mc-body, .ip-offer-body, .pg-card-body, .ms-hc-body)) > p:has(+ :is(.vv-btn, .vv-btn-ghost, .vv-btn-dir, .rc-cta, .fac-intro-cta, .ip-cta, .ms-btn, .ms-hc-cta, .kd-btn-outline, .kd-btn-solid, .kd-rx-panel-cta, .ch-dev-cta)),
html body #main :not(:is(.fc-card-body, .rm-card-body, .rm-tile-body, .mc-body, .ip-offer-body, .pg-card-body, .ms-hc-body)) > p:has(+ :is(div, p) > :is(.vv-btn, .vv-btn-ghost, .vv-btn-dir, .rc-cta, .fac-intro-cta, .ip-cta, .ms-btn, .ms-hc-cta, .kd-btn-outline, .kd-btn-solid, .kd-rx-panel-cta, .ch-dev-cta)) {
  margin-bottom: 0 !important;
}
html body #main :not(:is(.fc-card-body, .rm-card-body, .rm-tile-body, .mc-body, .ip-offer-body, .pg-card-body, .ms-hc-body)) > p + :is(.vv-btn, .vv-btn-ghost, .vv-btn-dir, .rc-cta, .fac-intro-cta, .ip-cta, .ms-btn, .ms-hc-cta, .kd-btn-outline, .kd-btn-solid, .kd-rx-panel-cta, .ch-dev-cta),
html body #main :not(:is(.fc-card-body, .rm-card-body, .rm-tile-body, .mc-body, .ip-offer-body, .pg-card-body, .ms-hc-body)) > p + :is(div, p):has(> :is(.vv-btn, .vv-btn-ghost, .vv-btn-dir, .rc-cta, .fac-intro-cta, .ip-cta, .ms-btn, .ms-hc-cta, .kd-btn-outline, .kd-btn-solid, .kd-rx-panel-cta, .ch-dev-cta)) {
  margin-top: var(--ds-space-text-button) !important;
}
/* Cards: at least 24px (20 mobile) above the button, button pinned to the card
   bottom so buttons line up across a row */
html body #main :is(.fc-card-body, .rm-card-body, .rm-tile-body, .mc-body, .ip-offer-body, .pg-card-body) > :is(p, ul, .r-facts):has(+ :is(a, button, span, div)) {
  margin-bottom: var(--ds-space-text-button) !important;
}
html body #main :is(.fc-card-body, .rm-card-body, .rm-tile-body, .mc-body, .ip-offer-body, .pg-card-body) > :is(.vv-btn, .fc-card-btn, .rm-card-cta, .ip-offer-book, .pg-card-cta, .ip-job-apply) {
  margin-top: auto !important;
}
html body #main .ms-hc-body > p:has(+ .ms-hc-cta) { margin-bottom: 12px !important; }   /* + the card's 12px gap = 24 */
/* The same for the MySpace hotel and offer cards and the Kadison offer cards: the card is a column, its text
   area takes the spare height and the button sits at the bottom, so buttons line up whatever the text length */
html body #main :is(.fc-card, .ms-hc, .ms-offer-card):has(> :is(.fc-card-body, .ms-hc-body, .ms-offer-body) > :is(.vv-btn, .fc-card-btn, .ms-hc-cta, .ms-btn)) {
  display: flex !important;
  flex-direction: column !important;
}
html body #main :is(.fc-card, .ms-hc, .ms-offer-card) > :is(.fc-card-body, .ms-hc-body, .ms-offer-body) { flex: 1 1 auto !important; }
html body #main :is(.ms-hc-body, .ms-offer-body) > :is(.ms-hc-cta, .ms-btn) { margin-top: auto !important; }
html body #main .ms-offer-body > :is(p, ul):has(+ .ms-btn) { margin-bottom: 14px !important; }   /* + the card's 10px gap = 24 */

/* --------------------------------------------------------------------------
   11. Forms: one look everywhere (the Great Destinations contact form).
   Uppercase labels, underline-only fields, two fields per row, outlined
   submit. Covers .ip-form (GDH), .ms-contact-form / .ms-cr-form (MySpace),
   .contact-form and .enq-form (VIVIDUS family).
   -------------------------------------------------------------------------- */
html body #main :is(.ip-form, .ms-contact-form, .ms-cr-form, .enq-form) {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--ds-space-card-gap) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
html body #main .contact-form {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: 32px !important;
  row-gap: var(--ds-space-card-gap) !important;
}
html body #main .contact-form > .full { grid-column: 1 / -1 !important; }
/* rows of two fields */
html body #main :is(.ip-form-row, .ms-form-row, .ms-cr-form-row, .enq-row) {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: 32px !important;
  row-gap: var(--ds-space-card-gap) !important;
  margin: 0 !important;
}
/* one field: label above control */
html body #main :is(.ip-field, .ms-field, .ms-cr-field, .form-group, .enq-field) {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0;
}
/* labels */
html body #main :is(.ip-form, .ms-contact-form, .ms-cr-form, .contact-form, .enq-form) label:not(:has(input[type="checkbox"], input[type="radio"])):not(.check) {
  display: block !important;
  margin: 0 !important;
  font-family: var(--ds-font-body) !important;
  font-size: 12px !important;
  line-height: 18px !important;
  font-weight: 500 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--ds-ink-soft) !important;
}
/* controls: underline only */
html body #main :is(.ip-form, .ms-contact-form, .ms-cr-form, .contact-form, .enq-form)
  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]):not([type="file"]), select, textarea) {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 12px 0 !important;
  font-family: var(--ds-font-body) !important;
  font-size: var(--ds-fs-body) !important;
  line-height: 24px !important;
  font-weight: 400 !important;
  color: var(--ds-ink) !important;
  background-color: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ds-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color 200ms ease !important;
}
html body #main :is(.ip-form, .ms-contact-form, .ms-cr-form, .contact-form, .enq-form) :is(input, select, textarea)::placeholder {
  color: var(--ds-ink-mute) !important;
  opacity: 1 !important;
}
html body #main :is(.ip-form, .ms-contact-form, .ms-cr-form, .contact-form, .enq-form)
  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]), select, textarea):focus {
  border-bottom-color: var(--ds-ink) !important;
}
html body #main :is(.ip-form, .ms-contact-form, .ms-cr-form, .contact-form, .enq-form) textarea {
  min-height: 120px !important;
  resize: vertical !important;
}
html body #main :is(.ip-form, .ms-contact-form, .ms-cr-form, .contact-form, .enq-form) select {
  -webkit-appearance: none !important;
  appearance: none !important;
  padding-right: 28px !important;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%235A554C' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1,1.5 6,6.5 11,1.5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 4px center !important;
  background-size: 12px 8px !important;
}
/* file upload: underline row with a small outlined button */
html body #main :is(.ip-form, .ms-contact-form, .ms-cr-form, .contact-form, .enq-form) input[type="file"] {
  box-sizing: border-box !important;
  width: 100% !important;
  padding: 10px 0 !important;
  font-family: var(--ds-font-body) !important;
  font-size: var(--ds-fs-small) !important;
  color: var(--ds-ink-soft) !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ds-line) !important;
  border-radius: 0 !important;
}
html body #main :is(.ip-form, .ms-contact-form, .ms-cr-form, .contact-form, .enq-form) input[type="file"]::file-selector-button {
  margin-right: 16px;
  padding: 8px 16px;
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-button);
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ds-btn-color);
  background: transparent;
  border: 1px solid var(--ds-btn-color);
  border-radius: 0;
  cursor: pointer;
}
/* consent checkbox rows: sentence case, small text */
html body #main :is(.ip-form, .ms-contact-form, .ms-cr-form, .contact-form, .enq-form) label:is(.check, :has(input[type="checkbox"], input[type="radio"])) {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  font-family: var(--ds-font-body) !important;
  font-size: var(--ds-fs-small) !important;
  line-height: var(--ds-lh-small) !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: var(--ds-ink-soft) !important;
}
html body #main :is(.ip-form, .ms-contact-form, .ms-cr-form, .contact-form, .enq-form) input[type="checkbox"] {
  width: 16px; height: 16px; margin-top: 3px; accent-color: var(--ds-btn-color);
}
/* submit sits 32px below the last field and keeps its own width */
html body #main :is(.ip-form, .ms-contact-form, .ms-cr-form, .enq-form) > :is(button, .ip-form-submit, .ms-btn, .enq-submit, .formSubmitButton) {
  align-self: flex-start !important;
  margin-top: 8px !important;
}
/* form cards become plain, like the reference form */
html body #main :is(.ms-contact-form-wrap, .ms-cr-form-wrap) {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
@media (max-width: 767px) {
  html body #main .contact-form,
  html body #main :is(.ip-form-row, .ms-form-row, .ms-cr-form-row, .enq-row) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* --------------------------------------------------------------------------
   12. Two-column rows
   -------------------------------------------------------------------------- */
/* 12a. Split headers: the heading in one column, its paragraph and buttons in the other.
   Both columns start on the same line, so the heading's first line is level with the
   paragraph's first line. Never bottom- or centre-aligned. */
html body #main :is(.r-head, .section-head.cnw-split, .ab-gdh-ws-header, .kd-rooms-intro, .vs-intro, .anchor-split, .ms-hs-header, .ms-prop-intro-top) {
  align-items: start !important;
}
html body #main :is(.r-head, .section-head.cnw-split, .ab-gdh-ws-header, .kd-rooms-intro, .vs-intro, .anchor-split) > * {
  align-self: start !important;
}
/* Wrapping flex headers: no top offset on the side column; when they wrap to a stack,
   the row gap is the heading -> text space */
html body #main :is(.ms-hs-header, .ms-prop-intro-top) { row-gap: var(--ds-space-heading-text) !important; }
html body #main :is(.ms-hs-header > .ms-hs-tagline, .ms-prop-intro-top > .ms-prop-intro-sub) {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* Kadison room header: heading and intro sit side by side above 768px */
@media (min-width: 769px) {
  html[data-brand="myspace"] body #main .rs-header-row > :not(:first-child) {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* 12b. Text beside an image (or a map / stats panel): the text block is centred on the
   image. Page-intro rows directly under the breadcrumb stay top-aligned instead, so the
   page heading sits right under the breadcrumb. */
html body #main :is(.dining-canvas, .ch-dev-wrap, .fa-block, .ip-brand-row, .ip-why-grid, .kd-dining-grid, .kd-meetings-layout, .p-inner) {
  align-items: center !important;
}
/* VIVIDUS-family dining row: two equal columns, the paragraph uses the whole text column,
   the photo is a 4:3 landscape, paragraph -> button 24px */
@media (min-width: 901px) {
  html body #main .dining-canvas {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: var(--ds-space-columns) !important;
  }
}
@media (max-width: 900px) {
  html body #main .dining-canvas { row-gap: var(--ds-space-heading-grid) !important; }
}
html body #main .dining-canvas :is(.dining-subhead, .dining-right > p) {
  max-width: none !important;
  padding-bottom: 0 !important;
}
html body #main .dining-canvas .dining-img-wrap { height: auto !important; }
html body #main .dining-canvas .dining-img-main {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
html body #main .dining-canvas .dining-subhead + .dining-stats { margin-top: var(--ds-space-heading-grid) !important; }
html body #main .dining-canvas .dining-cta-row { margin-top: var(--ds-space-text-button) !important; }

/* --------------------------------------------------------------------------
   13. Page intro and heading roles
   -------------------------------------------------------------------------- */
/* 13a. Page intro: every inner page opens with its H1 and an intro paragraph,
   centred under the breadcrumb */
html body #main .ds-page-intro { text-align: center !important; }
html body #main .ds-page-intro > * { margin-left: auto !important; margin-right: auto !important; }
html body #main .ds-page-intro > h1 { max-width: 1040px; }
html body #main .ds-page-intro > p { max-width: 860px !important; text-align: center !important; }
html body #main .ds-page-intro + * { margin-top: var(--ds-space-heading-grid) !important; }
/* Centred heading + paragraph groups (page intros and section heads) use the same measure as .ds-page-intro:
   the paragraph runs up to 860px; wrappers narrower than that are widened. Split layouts and card text are not included.
   .ds-measure marks a centred group whose wrapper class is also used by split layouts (room headers, rooms intro). */
html body #main :is(.smx-intro, .loc-intro-right, .ds-measure) { max-width: min(860px, 100%) !important; }
html body #main :is(.smx-intro, .dn-header-row, .dn-sum-intro, .fac-page-intro-inner, .gl-page-intro, .loc-intro-right, .me-section-head,
  .me-services-head, .rm-amenities-head, .spa-cta-band, .inner-section > .section-head, .vs-head, .ms-ab-mvv-head, .ms-ab-awards-head,
  .ms-cr-perks-head, .ds-measure) > p { max-width: min(860px, 100%) !important; text-wrap: pretty; }
html body #main :is(.gl-page-intro, .ms-ab-mvv-head, .ms-ab-awards-head, .ms-cr-perks-head) > p { margin-left: auto !important; margin-right: auto !important; }

/* 13b. Sidebar box titles are headings: the card-title (H4) style at whatever level the
   hierarchy needs (e.g. an h3 sidebar title under the page's h2 sections) */
html body #main aside.room-detail-sidebar > :is(h2, h3, h4) {
  font-family: var(--ds-font-display) !important;
  font-size: var(--ds-fs-h4) !important;
  line-height: var(--ds-lh-h4) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: var(--ds-ink) !important;
  margin: 0 0 24px !important;
}
html body #main div.me-svc-text > :is(h3, h4, h5) {   /* small item titles: the H6 style */
  font-family: var(--ds-font-display) !important;
  font-size: var(--ds-fs-h6) !important;
  line-height: var(--ds-lh-h6) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  margin: 0 !important;
}
/* Panel headings in the spa booking block and the VIVIDUS homepage room panels are h2 by
   level but sit at the H3 size */
html body #main div:is(.spa-info-block, .spa-booking-cta, .rc-panel) > h2 {
  font-size: var(--ds-fs-h3) !important;
  line-height: var(--ds-lh-h3) !important;
}

/* --------------------------------------------------------------------------
   Paragraph size: every paragraph on every site is 15px — page content, cards,
   heroes, quotes, footer and side menu. <p> tags used as a footer title or an
   eyebrow label are not paragraphs and keep their own size.
   -------------------------------------------------------------------------- */
html body :is(#main, footer, .menu-overlay) p:not(.dls-footer-name):not([class*="eyebrow"]) {
  font-size: var(--ds-fs-body) !important;
  line-height: var(--ds-lh-body) !important;
}

/* --------------------------------------------------------------------------
   Headings H4-H6 follow the scale wherever they appear in page content.
   Small item titles (service lists) use the H6 style (rule 13b).
   -------------------------------------------------------------------------- */
html body #main h4:not(:is([class*="hero"], .hero-ed, .cover) *) { font-family: var(--ds-font-display) !important; font-weight: 400 !important; font-size: var(--ds-fs-h4) !important; line-height: var(--ds-lh-h4) !important; letter-spacing: normal !important; text-transform: none !important; }
html body #main h5:not(:is([class*="hero"], .hero-ed, .cover) *) { font-family: var(--ds-font-display) !important; font-weight: 400 !important; font-size: var(--ds-fs-h5) !important; line-height: var(--ds-lh-h5) !important; letter-spacing: normal !important; text-transform: none !important; }
html body #main h6:not(:is([class*="hero"], .hero-ed, .cover) *) { font-family: var(--ds-font-display) !important; font-weight: 400 !important; font-size: var(--ds-fs-h6) !important; line-height: var(--ds-lh-h6) !important; letter-spacing: normal !important; text-transform: none !important; }


/* --------------------------------------------------------------------------
   Buttons: one style on every site — 12px uppercase Manrope 700, .24em, square.
   Content buttons are outlined (brand colour); the booking CTAs (navbar and
   booking-bar "Book Now") keep their filled brand colour but share the same type
   and shape.
   -------------------------------------------------------------------------- */
html body #main :is(.btn-link, .kd-dn-cta) {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  box-sizing: border-box !important; min-height: var(--ds-btn-height) !important; height: auto !important;
  padding: 11px var(--ds-btn-pad-x) !important;
  font-family: var(--ds-font-body) !important; font-size: var(--ds-fs-button) !important; line-height: var(--ds-lh-button) !important;
  font-weight: 700 !important; font-style: normal !important; letter-spacing: .24em !important; text-transform: uppercase !important;
  text-decoration: none !important; color: var(--ds-btn-color) !important; background: transparent !important;
  border: 1px solid var(--ds-btn-color) !important; border-radius: var(--ds-radius) !important; box-shadow: none !important;
}
html body #main :is(.btn-link, .kd-dn-cta):is(:hover, :focus-visible) { background: var(--ds-btn-color) !important; color: #FFFFFF !important; }
html body .site-header .nav-book-now,
html body #main .bb-book-btn {
  font-family: var(--ds-font-body) !important;
  font-size: var(--ds-fs-button) !important;
  font-weight: 700 !important;
  letter-spacing: .24em !important;
  text-transform: uppercase !important;
  border-radius: var(--ds-radius) !important;
}
/* Footer bottom bar (matches the Great Destinations Hospitality site):
   copyright left, Simplotel credit right, inset to the page gutter */
html body .dls-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 24px;
  padding-left: var(--ds-gutter, 32px); padding-right: var(--ds-gutter, 32px); }
html body .dls-footer-copy { order: -1; text-align: left; font-size: 12px; color: var(--ft-mute); }
html body .dls-footer-credit { text-align: right; }
@media (max-width: 768px) {
  html body .dls-footer-bottom { justify-content: center; text-align: center; }
  html body .dls-footer-copy, html body .dls-footer-credit { text-align: center; }
}

/* Skip link: fully off-screen until a keyboard user tabs to it, then it slides in at the top-left */
html body .skip-link {
  position: fixed !important; top: 0 !important; left: 0; z-index: 10000;
  transform: translateY(-110%); opacity: 0; pointer-events: none;
  background: var(--vv-ink, #2A2823); color: #fff; padding: 10px 18px;
  font-family: var(--ds-font-body, 'Manrope', sans-serif); font-size: 14px; text-decoration: none;
  transition: transform 120ms ease, opacity 120ms ease;
}
html body .skip-link:focus:not(:focus-visible) { transform: translateY(-110%) !important; opacity: 0 !important; pointer-events: none; }
html body .skip-link:focus-visible { transform: none; opacity: 1; pointer-events: auto; outline: 2px solid var(--vv-light, #E0C07A); outline-offset: 2px; }
/* Footer link list: a "|" only before Manage Booking */
html body .dls-footer-nav > li:has(> a[href*="bookings/manage"]) { display: inline-flex; align-items: center; }
html body .dls-footer-nav > li:has(> a[href*="bookings/manage"])::before { content: "|"; margin-right: 20px; color: var(--ft-mute); opacity: .55; font-size: 12px; }
@media (max-width: 768px) { html body .dls-footer-nav > li:has(> a[href*="bookings/manage"])::before { margin-right: 14px; } }

/* ==========================================================================
   Dropdown lists (every <select> on the site): padded, on-brand option lists.
   Browsers that support customisable selects (Chrome / Edge 135+) get the styled
   list; others keep their native dropdown, so no form behaviour changes.
   The closed field keeps its existing look; the browser's own arrow is hidden
   because every field already draws its own chevron.
   ========================================================================== */
@supports (appearance: base-select) {
  html body select,
  html body select::picker(select) { appearance: base-select !important; }
  /* the shared form rule above forces appearance:none !important on form fields; same selector, later, wins */
  html body #main :is(.ip-form, .ms-contact-form, .ms-cr-form, .contact-form, .enq-form) select { -webkit-appearance: base-select !important; appearance: base-select !important; }
  html body select::picker-icon { display: none; }

  html body select::picker(select) {
    margin-top: 6px; padding: 6px 0;
    border: 1px solid var(--vv-line, #E0D2AE); border-radius: 0;
    background: #fff; color: var(--ink, #2A2823);
    box-shadow: 0 18px 40px -16px rgba(42, 40, 35, .28);
    max-height: 320px; overflow-y: auto;
  }
  html body select option {
    padding: 11px 18px; min-height: 0;
    font-family: var(--fb, 'Manrope', sans-serif); font-size: 14px; line-height: 1.35;
    color: var(--ink, #2A2823); background: #fff;
  }
  html body select option::checkmark { display: none; }
  html body select option:hover,
  html body select option:focus-visible { background: var(--vv-pale, #F1E8CE); color: var(--ink, #2A2823); outline: none; }
  html body select option:checked { background: rgba(157, 131, 69, .14); color: var(--vv-deep, #9D8345); font-weight: 600; }
  html body select option:disabled { color: var(--ink-mute, #8F887C); }
}