/* =========================================================================
   VIVIDUS — inner.css
   Shared styles for all inner / secondary pages.
   Imports base.css tokens. Does NOT re-declare them.
   ========================================================================= */

/* ---------- Page hero (full-width image banner — image only, no text) ---------- */

/* inner hero — 50px top/left/right inset (Aman-style), sits below the fixed nav */
.page-hero {
  position: relative;
  height: calc(100dvh - 118px - 20px - 80px);
  min-height: 420px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  margin: 50px 50px 0;
}
@media (max-width: 768px) { .page-hero { margin: 24px 24px 0; height: 60vh; min-height: 360px; } }
@media (max-width: 600px) { .page-hero { margin: 16px 16px 0; height: 55vh; } }
@media (max-width: 480px) { .page-hero { margin: 16px 16px 0; height: 50vh; } }
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(46,40,24,.10) 0%,
    rgba(46,40,24,.22) 100%);
  z-index: 0;
}
.page-hero-body { display: none; }

/* ---------- Breadcrumb ---------- */

/* breadcrumb — matched to GDH .ct-breadcrumb (position, size, style) */
.breadcrumb {
  background: var(--vv-paper-ivory);
  border-bottom: 1px solid var(--vv-line);
}
.breadcrumb-inner {
  max-width: none;
  margin: 0;
  padding: 18px clamp(28px,6vw,96px);
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--fb);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: none;
  color: var(--vv-ink-mute);
}
.breadcrumb-inner a {
  color: var(--vv-ink-mute);
  text-decoration: none;
  transition: color var(--m-fast) var(--ease);
}
.breadcrumb-inner a:hover { color: var(--vv-gold-deep); }
.breadcrumb-sep { font-size: 16px; opacity: .6; }
.breadcrumb-inner .current { color: var(--vv-gold-deep); }
/* Semantic <ol>/<li> breadcrumb (separators via ::before) */
.breadcrumb-inner { list-style: none; flex-wrap: wrap; }
.breadcrumb-inner li { display: flex; align-items: center; gap: 6px; }
.breadcrumb-inner li + li::before { content: "›"; font-size: 16px; opacity: .6; }

/* ---------- Page content wrapper ---------- */

.page-content {
  background: var(--vv-paper);
}

/* ---------- Inner section ---------- */

.inner-section {
  padding: var(--section-y) var(--container-pad);
  max-width: var(--container);
  margin: 0 auto;
}

.inner-section--wide {
  padding: var(--section-y) 0;
  max-width: none;
}

.inner-section + .inner-section {
  border-top: 1px solid var(--vv-line-soft);
}

/* ---------- Split layout (image | copy) ---------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}
.split--flip { direction: rtl; }
.split--flip > * { direction: ltr; }

.split-img {
  width: 100%;
  aspect-ratio: 4/3;
  background-size: cover;
  background-position: center;
  border-radius: var(--r-md);
  overflow: hidden;
}
.split-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.split-copy { display: flex; flex-direction: column; }

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; direction: ltr; }
  .split--flip { direction: ltr; }
}

/* ---------- Stats row ---------- */

.stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-top: 1px solid var(--vv-line-soft);
  border-bottom: 1px solid var(--vv-line-soft);
  margin: var(--s8) 0;
}
.stat-item {
  flex: 1 1 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--s6) var(--s5);
  border-right: 1px solid var(--vv-line-soft);
}
.stat-item:last-child { border-right: none; }
.stat-num {
  font-family: var(--fd);
  font-style: italic;
  font-size: clamp(28px, 3.5vw, 48px);
  color: var(--vv-gold-deep);
  line-height: 1;
}
.stat-label {
  font-family: var(--fb);
  font-size: var(--t-sm);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--vv-ink-mute);
  margin-top: var(--s2);
}

/* ---------- Feature grid (amenities / inclusions) ---------- */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--s5);
  margin-top: var(--s6);
}
.feature-item {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  font-family: var(--fb);
  font-size: 14px;
  color: var(--vv-ink-soft);
  line-height: 1.5;
}
.feature-item::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--vv-gold);
  flex-shrink: 0;
  margin-top: 6px;
}

/* ---------- Card grid (rooms list, dining list) ---------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--s6);
  margin-top: var(--s7);
}

.pg-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--vv-line-soft);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--vv-paper-ivory);
  text-decoration: none;
  color: var(--vv-ink);
  transition: box-shadow var(--m-base) var(--ease),
              transform var(--m-base) var(--ease);
}
.pg-card:hover {
  box-shadow: var(--shadow-plate);
  transform: translateY(-3px);
}
.pg-card-img {
  width: 100%;
  aspect-ratio: 16/9;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  transition: transform 500ms var(--ease);
}
.pg-card:hover .pg-card-img { transform: scale(1.03); }

.pg-card-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--vv-gold-deep);
  color: #fff;
  font-family: var(--fb);
  font-size: 12px;
  letter-spacing: .24em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--r-pill);
}
.pg-card-body {
  padding: var(--s5) var(--s6) var(--s6);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.pg-card-label {
  font-family: var(--fb);
  font-size: var(--t-sm);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--vv-gold-deep);
}
.pg-card-body h3 {
  margin-top: 8px;
  font-style: italic;
}
.pg-card-body p {
  margin-top: 12px;
  flex: 1;
}
.pg-card-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s5);
  margin-top: var(--s4);
  list-style: none;
  padding: 0;
}
.pg-card-facts li {
  font-family: var(--fb);
  font-size: 12px;
  color: var(--vv-ink-mute);
  display: flex;
  align-items: center;
  gap: 6px;
}
.pg-card-facts li::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--vv-gold);
  flex-shrink: 0;
}
.pg-card-cta {
  margin-top: var(--s5);
  align-self: flex-start;
}

/* ---------- Room detail specific ---------- */

.room-detail-hero {
  position: relative;
  height: calc(100dvh - 118px - 20px - 80px);
  min-height: 420px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  margin: 50px 50px 0;
}
@media (max-width: 768px) { .room-detail-hero { margin: 24px 24px 0; height: 60vh; min-height: 360px; } }
@media (max-width: 480px) { .room-detail-hero { margin: 16px 16px 0; height: 50vh; } }
.room-detail-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(46,40,24,.1) 0%, rgba(46,40,24,.6) 100%);
}
.room-detail-hero-body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--container-pad) clamp(40px,7vh,72px);
  color: #fff;
}
.room-detail-hero-body .label { color: var(--vv-gold-leaf); display: block; margin-bottom: 10px; }
.room-detail-hero-body h1 { color: #fff; font-style: italic; }
.room-detail-hero-body h1 em { color: var(--vv-gold-leaf); }

.room-detail-body {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--section-y) var(--container-pad);
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
@media (max-width: 900px) {
  .room-detail-body { grid-template-columns: 1fr; }
}

.room-detail-sidebar {
  background: var(--vv-paper-ivory);
  border: 1px solid var(--vv-line-soft);
  border-radius: var(--r-md);
  padding: var(--s6);
  position: sticky;
  top: 130px;
}
.room-detail-sidebar h4 {
  font-family: var(--fb);
  font-size: var(--t-sm);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--vv-gold-deep);
  margin-bottom: var(--s5);
}
.sidebar-fact {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--vv-line-soft);
  font-size: 14px;
}
.sidebar-fact:last-of-type { border-bottom: none; }
.sidebar-fact-label { color: var(--vv-ink-mute); font-family: var(--fb); }
.sidebar-fact-value { color: var(--vv-ink); font-family: var(--fd); font-style: italic; font-size: 17px; }

/* ---------- Gallery grid ---------- */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}
.gallery-grid .g-cell {
  aspect-ratio: 4/3;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  transition: transform 500ms var(--ease);
  cursor: pointer;
}
.gallery-grid .g-cell:hover { transform: scale(1.02); }
.gallery-grid .g-cell--wide {
  grid-column: span 2;
  aspect-ratio: 16/7;
}
.gallery-grid .g-cell--tall {
  grid-row: span 2;
  aspect-ratio: auto;
}
@media (max-width: 700px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid .g-cell--wide { grid-column: span 2; }
  .gallery-grid .g-cell--tall { grid-row: auto; }
}
@media (max-width: 480px) {
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-grid .g-cell--wide { grid-column: span 1; }
}

/* ---------- Contact form ---------- */

.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s5);
  margin-top: var(--s6);
}
.contact-form .full { grid-column: 1 / -1; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label {
  font-family: var(--fb);
  font-size: var(--t-sm);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--vv-ink-mute);
}
.form-group input,
.form-group select,
.form-group textarea {
  font-family: var(--fb);
  font-size: 15px;
  color: var(--vv-ink);
  background: var(--vv-paper-ivory);
  border: 1px solid var(--vv-line);
  border-radius: var(--r-sm);
  padding: 12px 16px;
  outline: none;
  transition: border-color var(--m-fast) var(--ease);
  width: 100%;
  appearance: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--vv-gold-deep);
}
.form-group textarea { resize: vertical; min-height: 120px; line-height: 1.6; }

@media (max-width: 640px) {
  .contact-form { grid-template-columns: 1fr; }
  .contact-form .full { grid-column: 1; }
}

/* ---------- Pull section (dark band) ---------- */

.pull-band {
  background: var(--vv-ink);
  color: var(--vv-paper);
  padding: var(--s9) var(--container-pad);
  text-align: center;
}
.pull-band h2 {
  color: var(--vv-paper);
  font-style: italic;
}
.pull-band h2 em { color: var(--vv-gold-leaf); }
.pull-band p {
  color: rgba(248,243,230,.72);
  margin: 24px auto 0;
  max-width: 52ch;
}
.pull-band .vv-btn--solid {
  margin-top: 36px;
  background: var(--vv-gold-deep);
  border-color: var(--vv-gold-deep);
  color: #fff;
}
.pull-band .vv-btn--solid:hover {
  background: var(--vv-gold);
  border-color: var(--vv-gold);
}

/* ---------- Page nav (prev / next room) ---------- */

.page-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s7) var(--container-pad);
  border-top: 1px solid var(--vv-line-soft);
  max-width: var(--container);
  margin: 0 auto;
}
.page-nav a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
}
.page-nav .pn-dir {
  font-family: var(--fb);
  font-size: var(--t-sm);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--vv-ink-mute);
}
.page-nav .pn-title {
  font-family: var(--fd);
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 24px);
  color: var(--vv-ink);
  transition: color var(--m-fast) var(--ease);
}
.page-nav a:hover .pn-title { color: var(--vv-gold-deep); }
.page-nav .pn-next { text-align: right; }

/* ==========================================================================
   ABOUT US PAGE
   ========================================================================== */

/* ---------- Our Story section ---------- */

.story-section { overflow: hidden; }
.story-section h1 + p { margin-top: 30px; }

/* full-bleed banner image with big italic word */
.story-banner--no-img {
  display: none !important;
}
.story-banner {
  position: relative;
  height: clamp(280px, 42vh, 520px);
  overflow: hidden;
}
.story-banner-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 40%;
  transform: scale(1.04);
  transition: transform 8s ease;
}
.story-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(46,40,24,.28) 0%,
    rgba(46,40,24,.55) 100%
  );
}
/* giant watermark word */
.story-banner-word {
  position: absolute;
  bottom: -0.18em;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--fd);
  font-style: italic;
  font-size: clamp(80px, 14vw, 200px);
  color: rgba(248,243,230,.10);
  white-space: nowrap;
  line-height: 1;
  pointer-events: none;
  letter-spacing: -.01em;
  z-index: 1;
}
.story-banner-year {
  position: absolute;
  top: 32px;
  right: var(--container-pad);
  font-family: var(--fb);
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(248,243,230,.65);
  z-index: 2;
}
.story-banner-year em {
  font-family: var(--fd);
  font-style: italic;
  font-size: 15px;
  color: var(--vv-gold-leaf);
}

/* 3-col body */
.story-body {
  display: grid;
  grid-template-columns: 180px 1fr 340px;
  gap: clamp(32px, 4vw, 72px);
  padding: var(--section-y) var(--container-pad);
  max-width: var(--container);
  margin: 0 auto;
  align-items: start;
}

/* left col — rotated label + big stat */
.story-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 8px;
  border-top: 1px solid var(--vv-line);
}
.story-stat-label {
  font-family: var(--fb);
  font-size: 12px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--vv-ink-mute);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  margin-bottom: 20px;
  align-self: flex-start;
}
.story-stat-num {
  font-family: var(--fd);
  font-style: italic;
  font-size: clamp(50px, 5vw, 60px);
  color: var(--vv-gold-deep);
  line-height: 1;
}
.story-stat-sub {
  font-family: var(--fb);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--vv-ink-mute);
  margin-top: 8px;
}

/* centre col — copy */
.story-copy { display: flex; flex-direction: column; }
.story-copy h2 { margin-top: 16px; }
.story-copy p {
  color: var(--vv-ink-soft);
  line-height: 1.75;
}
.story-copy p + p { margin-top: 16px; }

/* right col — stacked images + quote card */
.story-imgs {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.story-img-top,
.story-img-bot {
  width: 100%;
  background-size: cover;
  background-position: center;
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform 600ms var(--ease);
}
.story-img-top { aspect-ratio: 4/3; }
.story-img-bot { aspect-ratio: 4/3; }
.story-img-top:hover,
.story-img-bot:hover { transform: scale(1.015); }

/* floating quote card between images */
.story-quote {
  background: var(--vv-ink);
  color: var(--vv-paper);
  padding: 28px 28px 24px;
  margin: -20px 24px;
  border-radius: var(--r-md);
  position: relative;
  z-index: 2;
  box-shadow: var(--shadow-plate);
}
.story-quote-mark {
  display: block;
  font-family: var(--fd);
  font-size: 56px;
  line-height: .6;
  color: var(--vv-gold-leaf);
  margin-bottom: 12px;
  font-style: italic;
}
.story-quote p {
  font-family: var(--fd);
  font-style: italic;
  font-size: clamp(16px, 1.3vw, 20px);
  color: var(--vv-paper);
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 1060px) {
  .story-body { grid-template-columns: 140px 1fr 280px; }
}
@media (max-width: 860px) {
  .story-body { grid-template-columns: 1fr; }
  .story-stat {
    flex-direction: row;
    align-items: baseline;
    gap: 20px;
    border-top: none;
    border-left: 2px solid var(--vv-gold);
    padding: 0 0 0 20px;
  }
  .story-stat-label { writing-mode: horizontal-tb; transform: none; margin-bottom: 0; }
  .story-stat-num { font-size: clamp(50px, 8vw, 60px); }
  .story-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .story-quote { grid-column: 1 / -1; margin: 0; }
  .story-img-top, .story-img-bot { aspect-ratio: 4/3; }
}
@media (max-width: 560px) {
  .story-imgs { grid-template-columns: 1fr; }
  .story-img-bot { display: none; }
}

/* ---------- About hero (image-only banner, same height as .page-hero) ---------- */

.about-hero {
  position: relative;
  height: calc(100dvh - 118px - 20px - 80px);
  min-height: 420px;
  overflow: hidden;
  margin: 50px 50px 0;
}
@media (max-width: 768px) { .about-hero { margin: 24px 24px 0; height: 60vh; min-height: 360px; } }
@media (max-width: 480px) { .about-hero { margin: 16px 16px 0; height: 50vh; } }
.about-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
  transition: transform 1.6s cubic-bezier(.22,1,.36,1);
}
.about-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(46,40,24,.10) 0%,
    rgba(46,40,24,.22) 100%
  );
  z-index: 1;
}
.about-hero-body { display: none; }
.about-hero-body--hidden {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--container-pad) clamp(60px, 9vh, 110px);
}
.about-hero-label {
  color: var(--vv-gold-leaf);
  display: block;
  margin-bottom: 20px;
}
.about-hero-h1 {
  color: #fff;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 1.0;
  font-style: italic;
}
.about-hero-h1 em { color: var(--vv-gold-leaf); }
.about-hero-sub {
  color: rgba(248,243,230,.80);
  font-size: clamp(15px, 1.2vw, 20px);
  max-width: 50ch;
  margin-top: 24px;
  line-height: 1.65;
}
.about-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}
.about-hero-ghost {
  border-color: rgba(248,243,230,.5) !important;
  color: var(--vv-paper) !important;
}
.about-hero-ghost:hover {
  border-color: var(--vv-gold-leaf) !important;
  color: var(--vv-gold-leaf) !important;
}

/* Scroll cue */
.about-hero-scroll {
  position: absolute;
  bottom: 32px;
  right: var(--container-pad);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.scroll-line {
  display: block;
  width: 1px;
  height: 52px;
  background: linear-gradient(to bottom, transparent, rgba(248,243,230,.5));
  animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { opacity: .4; transform: scaleY(1); }
  50% { opacity: 1; transform: scaleY(1.12); }
}
.scroll-word {
  font-family: var(--fb);
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(248,243,230,.55);
  writing-mode: vertical-rl;
}

/* ---------- Collage section ---------- */

.about-collage {
  padding: var(--section-y) var(--container-pad);
  max-width: var(--container);
  margin: 0 auto;
}
.collage-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: clamp(10px, 1.5vw, 20px);
  align-items: start;
}
.cg-img {
  background-size: cover;
  background-position: center;
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform 600ms var(--ease);
}
.cg-img:hover { transform: scale(1.015); }

.cg-img--main {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  aspect-ratio: 3/4;
}
.cg-img--top {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  aspect-ratio: 4/3;
}
.cg-img--mid {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
  aspect-ratio: 4/3;
}
.cg-img--bot {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  aspect-ratio: 4/3;
}
.cg-copy {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(16px, 2vw, 32px) clamp(16px, 2vw, 32px);
}
.cg-copy h2 { margin-top: 16px; }
.cg-copy p { color: var(--vv-ink-soft); line-height: 1.7; }
.cg-copy p + p { margin-top: 16px; }

@media (max-width: 900px) {
  .collage-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  .cg-img--main { grid-column: 1 / 2; grid-row: 1 / 2; aspect-ratio: 4/3; }
  .cg-img--top  { grid-column: 2 / 3; grid-row: 1 / 2; }
  .cg-img--mid  { grid-column: 1 / 2; grid-row: 2 / 3; }
  .cg-img--bot  { grid-column: 2 / 3; grid-row: 2 / 3; }
  .cg-copy      { grid-column: 1 / -1; grid-row: 3 / 4; padding: 0; }
}
@media (max-width: 600px) {
  .collage-grid { grid-template-columns: 1fr; }
  .cg-img--main, .cg-img--top, .cg-img--mid, .cg-img--bot {
    grid-column: 1; grid-row: auto; aspect-ratio: 16/9;
  }
  .cg-copy { grid-column: 1; grid-row: auto; }
}

/* ---------- USP section ---------- */

.about-usp { overflow: hidden; }

.usp-ticker {
  background: var(--vv-ink);
  overflow: hidden;
  white-space: nowrap;
  padding: 14px 0;
  border-top: 1px solid var(--vv-line-soft);
  border-bottom: 1px solid var(--vv-line-soft);
}
.usp-ticker-track {
  display: inline-flex;
  gap: 0;
  animation: tickerScroll 18s linear infinite;
}
.usp-ticker-track span {
  font-family: var(--fd);
  font-style: italic;
  font-size: clamp(16px, 1.6vw, 22px);
  color: var(--vv-paper);
  padding: 0 clamp(18px, 2.5vw, 36px);
  letter-spacing: .04em;
}
.usp-ticker-track .ticker-dot {
  color: var(--vv-gold-leaf);
  padding: 0;
  font-style: normal;
}
@keyframes tickerScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.usp-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  background: var(--vv-line-soft);
}
.usp-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--vv-ink);
  background: var(--vv-paper);
  overflow: hidden;
  position: relative;
  transition: background var(--m-base) var(--ease);
}
.usp-card-img {
  width: 100%;
  aspect-ratio: 3/4;
  background-size: cover;
  background-position: center;
  transition: transform 700ms var(--ease);
  flex-shrink: 0;
}
.usp-card:hover .usp-card-img { transform: scale(1.06); }
.usp-card-body {
  padding: var(--s5) var(--s5) var(--s6);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.usp-card-num {
  font-family: var(--fb);
  font-size: 12px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--vv-gold-deep);
  margin-bottom: 8px;
}
.usp-card-body h3 {
  font-size: clamp(18px, 1.4vw, 24px);
  font-style: italic;
  margin: 0;
}
.usp-card-body p {
  font-size: 13px;
  color: var(--vv-ink-soft);
  line-height: 1.6;
  margin-top: 10px;
  flex: 1;
}
.usp-card-link {
  display: inline-block;
  margin-top: 16px;
  font-family: var(--fb);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--vv-gold-deep);
  transition: letter-spacing var(--m-base) var(--ease);
}
.usp-card:hover .usp-card-link { letter-spacing: .28em; }

@media (max-width: 1100px) {
  .usp-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .usp-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 460px) {
  .usp-grid { grid-template-columns: 1fr; }
  .usp-card-img { aspect-ratio: 16/9; }
}

/* ---------- Vision / Mission / Values ---------- */

.vmv-section { background: var(--vv-paper-sepia); }

.vmv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s6);
}
.vmv-card {
  background: var(--vv-paper-ivory);
  border: 1px solid var(--vv-line-soft);
  border-radius: var(--r-md);
  padding: var(--s7) var(--s6);
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  transition: box-shadow var(--m-base) var(--ease), transform var(--m-base) var(--ease);
}
.vmv-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--vv-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vv-gold-deep);
  flex-shrink: 0;
}
.vmv-card h3 {
  font-size: clamp(20px, 1.6vw, 28px);
  font-style: italic;
  margin: 0;
}
.vmv-card p {
  color: var(--vv-ink-soft);
  line-height: 1.7;
  margin: 0;
}
.vmv-values {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vmv-values li {
  font-family: var(--fb);
  font-size: 14px;
  color: var(--vv-ink-soft);
  line-height: 1.5;
  padding-left: 16px;
  position: relative;
}
.vmv-values li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--vv-gold);
}
.vmv-values li span {
  font-family: var(--fd);
  font-style: italic;
  color: var(--vv-gold-deep);
}

@media (max-width: 860px) {
  .vmv-grid { grid-template-columns: 1fr; }
}

/* ---------- Team section ---------- */

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s6);
}
.team-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--vv-paper);
  border: 1px solid var(--vv-line-soft);
  transition: box-shadow var(--m-base) var(--ease), transform var(--m-base) var(--ease);
}
.team-card:hover {
  box-shadow: var(--shadow-plate);
  transform: translateY(-4px);
}
.team-img {
  width: 100%;
  aspect-ratio: 3/4;
  background-size: cover;
  background-position: center top;
  flex-shrink: 0;
  transition: transform 600ms var(--ease);
}
.team-card:hover .team-img { transform: scale(1.04); }
.team-body {
  padding: var(--s5) var(--s5) var(--s6);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.team-body h4 {
  font-size: clamp(16px, 1.2vw, 20px);
  font-style: italic;
  margin: 0;
}
.team-role {
  font-family: var(--fb);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--vv-gold-deep);
}
.team-body p {
  font-size: 13px;
  color: var(--vv-ink-soft);
  line-height: 1.65;
  margin-top: 8px;
}

@media (max-width: 1000px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .team-grid { grid-template-columns: 1fr; }
  .team-img { aspect-ratio: 16/9; background-position: center 20%; }
}

/* ---------- GDH strip ---------- */

.gdh-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 520px;
}
.gdh-strip-img {
  background-size: cover;
  background-position: center;
}
.gdh-strip-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--section-y) clamp(40px, 7vw, 100px);
  background: var(--vv-paper-vellum);
}
.gdh-strip-body h2 { margin-top: 16px; }
.gdh-strip-body p { color: var(--vv-ink-soft); line-height: 1.7; }
.gdh-strip-body p + p { margin-top: 16px; }

@media (max-width: 860px) {
  .gdh-strip { grid-template-columns: 1fr; }
  .gdh-strip-img { min-height: 320px; }
  .gdh-strip-body { padding: var(--section-y) var(--container-pad); }
}

/* ---------- Newsletter ---------- */

.newsletter-section {
  position: relative;
  background: var(--vv-ink);
  overflow: hidden;
}
.newsletter-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Ccircle cx='60' cy='60' r='58' fill='none' stroke='%23E0C07A' stroke-width='0.35' opacity='0.12'/%3E%3Ccircle cx='60' cy='60' r='36' fill='none' stroke='%23E0C07A' stroke-width='0.25' opacity='0.08'/%3E%3C/svg%3E")
    center / 320px 320px;
  pointer-events: none;
}
.newsletter-section .inner-section { position: relative; z-index: 1; }

.newsletter-section .newsletter-copy .label--gold { color: var(--vv-gold-leaf); }
.newsletter-section .newsletter-copy h2 { color: var(--vv-paper); }
.newsletter-section .newsletter-copy h2 em { color: var(--vv-gold-leaf); }
.newsletter-section .newsletter-copy p { color: rgba(248,243,230,.65); }

.newsletter-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}
/* label → h2: 16px | h2 → p: 24px */
.newsletter-copy h2 { margin-top: 16px; }
.newsletter-copy p { color: var(--vv-ink-soft); line-height: 1.7; margin-top: 24px; }

.newsletter-form { display: flex; flex-direction: column; gap: 14px; }
.nl-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}
.nl-row input {
  font-family: var(--fb);
  font-size: 14px;
  color: var(--vv-paper);
  background: rgba(248,243,230,.08);
  border: 1px solid rgba(248,243,230,.22);
  border-radius: var(--r-sm);
  padding: var(--btn-py, 13px) 16px;
  outline: none;
  transition: border-color var(--m-fast) var(--ease), background var(--m-fast) var(--ease);
  width: 100%;
}
.nl-row input:focus {
  border-color: var(--vv-gold-leaf);
  background: rgba(248,243,230,.13);
}
.nl-row input::placeholder { color: rgba(248,243,230,.4); }
.nl-submit {
  flex-shrink: 0;
  background: var(--vv-gold-deep);
  border: 1px solid var(--vv-gold-deep);
  color: #fff;
  padding: var(--btn-py, 13px) var(--btn-px, 28px);
  font-family: var(--fb);
  font-size: var(--btn-fs, 11px);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  border-radius: 2px;
  transition: background 200ms ease, border-color 200ms ease;
}
.nl-submit:hover {
  background: var(--vv-gold);
  border-color: var(--vv-gold);
}
.nl-fine {
  font-family: var(--fb);
  font-size: 12px;
  color: rgba(248,243,230,.75);
  margin: 0;
}
.nl-fine a { color: var(--vv-gold-leaf); text-decoration: underline; }
.nl-fine a:hover { color: #fff; }

@media (max-width: 900px) {
  .newsletter-inner { grid-template-columns: 1fr; }
}

/* ---------- Page Links ---------- */
.page-links {
  border-top: 1px solid var(--vv-line);
  background: var(--vv-paper);
}
.page-links-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.pl-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px var(--container-pad);
  border-right: 1px solid var(--vv-line);
  text-decoration: none;
  color: var(--vv-ink);
  transition: background 180ms;
}
.pl-item:last-child { border-right: none; }
.pl-item:hover { background: #EDE6D4; }
.pl-label {
  font-family: var(--fb);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.pl-arrow {
  font-size: 18px;
  color: var(--vv-gold-deep);
  transition: transform 200ms;
}
.pl-item:hover .pl-arrow { transform: translateX(4px); }
@media (max-width: 640px) {
  .page-links-inner { grid-template-columns: 1fr; }
  .pl-item { border-right: none; border-bottom: 1px solid var(--vv-line); }
  .pl-item:last-child { border-bottom: none; }
}

/* ---------- Enquiry Form ---------- */
.enq-section {
  background: var(--vv-paper);
  padding: var(--section-y) var(--container-pad);
}
.enq-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
@media (max-width: 768px) { .enq-inner { grid-template-columns: 1fr; } }
.enq-copy h2 { font-family: var(--fd); font-size: clamp(28px,3.5vw,48px); margin: 12px 0; }
.enq-copy p { font-size: 15px; color: var(--vv-ink-soft); line-height: 1.7; margin: 0 0 20px; }
.enq-contact-line { display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.enq-contact-item { display: flex; align-items: center; gap: 10px; color: var(--vv-gold-deep); text-decoration: none; }
.enq-contact-item svg { flex-shrink: 0; color: var(--vv-gold-deep); }
.enq-contact-item:hover { text-decoration: underline; }
.enq-form { display: flex; flex-direction: column; gap: 16px; }
.enq-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .enq-row { grid-template-columns: 1fr; } }
.enq-field { display: flex; flex-direction: column; gap: 6px; }
.enq-field--full { grid-column: 1 / -1; }
.enq-field label { font-family: var(--fb); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--vv-ink-mute); }
.enq-field input,
.enq-field select,
.enq-field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--vv-line);
  background: var(--vv-paper);
  color: var(--vv-ink);
  font-family: var(--fb);
  font-size: 14px;
  outline: none;
  transition: border-color 180ms;
  box-sizing: border-box;
}
.enq-field input:focus,
.enq-field select:focus,
.enq-field textarea:focus { border-color: var(--vv-gold-deep); }
.enq-field textarea { resize: vertical; }
.enq-submit { align-self: flex-start; margin-top: 8px; }
@media (max-width: 640px) {
  .nl-row { grid-template-columns: 1fr; }
  .nl-submit { width: 100%; }
}

/* ==========================================================================
   ABOUT PAGE — ab-* sections
   ========================================================================== */

/* ---------- Opening ---------- */

.ab-opening { border-bottom: 1px solid var(--vv-line-soft); }
.ab-opening-inner {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--section-y) var(--container-pad);
}
.ab-opening-left { display: flex; flex-direction: column; }
.ab-opening-h1 {
  font-size: clamp(40px, 5.5vw, 80px);
  font-style: italic;
  margin-top: 12px;
  line-height: 1.0;
}
.ab-opening-lede {
  color: var(--vv-ink-soft);
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.7;
  max-width: 50ch;
  margin-top: 24px;
}
.ab-opening-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.ab-num-col { display: flex; flex-direction: column; padding-top: 6px; }
.ab-num-item {
  display: flex;
  flex-direction: column;
  padding: var(--s5) 0;
  border-top: 1px solid var(--vv-line-soft);
}
.ab-num-item:last-child { border-bottom: 1px solid var(--vv-line-soft); }
.ab-num {
  font-family: var(--fd);
  font-style: italic;
  font-size: clamp(36px, 3.5vw, 52px);
  color: var(--vv-gold-deep);
  line-height: 1;
}
.ab-num small { font-size: .45em; letter-spacing: .05em; vertical-align: super; }
.ab-num-lbl {
  font-family: var(--fb);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--vv-ink-mute);
  margin-top: 4px;
}
@media (max-width: 860px) {
  .ab-opening-inner { grid-template-columns: 1fr; }
  .ab-num-col { flex-direction: row; flex-wrap: wrap; }
  .ab-num-item { flex: 1 1 50%; border-right: 1px solid var(--vv-line-soft); padding: 20px; }
  .ab-num-item:nth-child(even) { border-right: none; }
}

/* ---------- Story rows ---------- */

.ab-story { border-bottom: 1px solid var(--vv-line-soft); }
.ab-story-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: clamp(440px, 60vh, 680px);
  border-bottom: 1px solid var(--vv-line-soft);
}
.ab-story-row:last-child { border-bottom: none; }
.ab-story-row--flip .ab-story-img { order: 2; }
.ab-story-row--flip .ab-story-copy { order: 1; }
.ab-story-img {
  background-size: cover;
  background-position: center;
  overflow: hidden;
  transition: transform 800ms var(--ease);
}
.ab-story-row:hover .ab-story-img { transform: scale(1.025); }
.ab-story-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--section-y) clamp(28px, 4.5vw, 72px);
  background: var(--vv-paper);
  position: relative;
}
.ab-story-row:nth-child(even) .ab-story-copy { background: var(--vv-paper-vellum); }
.ab-story-index {
  font-family: var(--fd);
  font-style: italic;
  font-size: clamp(40px, 4.5vw, 64px);
  color: var(--vv-line);
  line-height: 1;
  position: absolute;
  top: clamp(16px, 3vh, 36px);
  right: clamp(16px, 3vw, 48px);
  pointer-events: none;
}
.ab-story-copy h2 { margin-top: 16px; }
@media (max-width: 860px) {
  .ab-story-row { grid-template-columns: 1fr; min-height: auto; }
  .ab-story-img { aspect-ratio: 16/9; order: 1 !important; }
  .ab-story-copy { order: 2 !important; }
  .ab-story-index { display: none; }
}

/* ---------- VMV — dark ink ruled list ---------- */

.ab-vmv { background: var(--vv-ink); color: var(--vv-paper); }
.ab-vmv-inner {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--section-y) var(--container-pad);
}
.ab-vmv-head { position: sticky; top: 130px; }
.ab-vmv-head .label--gold { color: var(--vv-gold-leaf); }
.ab-vmv-head h2 { color: var(--vv-paper); margin-top: 12px; }
.ab-vmv-head h2 em { color: var(--vv-gold-leaf); }
.ab-vmv-list { display: flex; flex-direction: column; }
.ab-vmv-item {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 24px;
  padding: var(--s7) 0;
  border-top: 1px solid rgba(248,243,230,.12);
  align-items: start;
}
.ab-vmv-item:last-child { border-bottom: 1px solid rgba(248,243,230,.12); }
.ab-vmv-num {
  font-family: var(--fd);
  font-style: italic;
  font-size: clamp(28px, 2.5vw, 40px);
  color: var(--vv-gold-deep);
  line-height: 1;
  padding-top: 4px;
}
.ab-vmv-content h3 { font-size: clamp(20px, 1.8vw, 28px); font-style: italic; color: var(--vv-paper); margin-top: 0; }
.ab-vmv-content p { color: rgba(248,243,230,.65); margin-top: 12px; }
.ab-values-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.ab-value {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 0;
  border-top: 1px solid rgba(248,243,230,.10);
}
.ab-value-name { font-family: var(--fd); font-style: italic; font-size: 18px; color: var(--vv-gold-leaf); }
.ab-value-desc {
  font-family: var(--fb);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(248,243,230,.5);
}
@media (max-width: 900px) {
  .ab-vmv-inner { grid-template-columns: 1fr; }
  .ab-vmv-head { position: static; }
}
@media (max-width: 560px) { .ab-values-row { grid-template-columns: 1fr; } }

/* ---------- Team — sepia mosaic 4-col ---------- */

.ab-team { background: var(--vv-paper-sepia); }
.ab-team-head {
  text-align: center;
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--section-y) var(--container-pad) 0;
}
.ab-team-head h2 { margin-top: 12px; }
.ab-team-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: var(--vv-line-soft);
  margin-top: var(--s7);
}
.ab-team-card {
  display: flex;
  flex-direction: column;
  background: var(--vv-paper);
  overflow: hidden;
  transition: box-shadow var(--m-base) var(--ease);
}
.ab-team-card:hover { box-shadow: var(--shadow-plate); }
.ab-team-img {
  width: 100%;
  aspect-ratio: 3/4;
  background-size: cover;
  background-position: center top;
  flex-shrink: 0;
  transition: transform 700ms var(--ease);
}
.ab-team-card:hover .ab-team-img { transform: scale(1.04); }
.ab-team-body {
  padding: var(--s5) var(--s5) var(--s6);
  border-top: 2px solid var(--vv-gold);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.ab-team-body h4 { font-size: clamp(16px, 1.2vw, 20px); font-style: italic; margin: 0; }
.ab-team-role {
  font-family: var(--fb);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--vv-gold-deep);
  margin-top: 4px;
}
.ab-team-body p { font-size: 13px; color: var(--vv-ink-soft); line-height: 1.65; margin-top: 10px; }
@media (max-width: 1000px) { .ab-team-track { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ab-team-track { grid-template-columns: 1fr; } }

/* ---------- GDH — airy white-space editorial layout ---------- */

.ab-gdh-ws {
  background: var(--vv-paper);
  border-top: 1px solid var(--vv-line-soft);
  border-bottom: 1px solid var(--vv-line-soft);
}
.ab-gdh-ws-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--section-y) var(--container-pad);
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 72px);
}

/* top — centered label */
.ab-gdh-ws-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

/* header — headline left, body right */
.ab-gdh-ws-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 120px);
  align-items: end;
}
.ab-gdh-ws-sup {
  font-family: var(--fb);
  font-size: var(--t-sm);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--vv-ink-mute);
  margin: 16px 0 14px;
}
.ab-gdh-ws-h2 {
  font-size: clamp(36px, 5vw, 72px);
  font-style: italic;
  line-height: 1.0;
  margin: 0;
  color: var(--vv-ink);
}
.ab-gdh-ws-h2 em { color: var(--vv-gold-deep); }
.ab-gdh-ws-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 4px;
}
.ab-gdh-ws-body p { color: var(--vv-ink-soft); line-height: 1.75; max-width: 48ch; }
.ab-gdh-ws-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--fd);
  font-style: italic;
  font-size: clamp(16px, 1.2vw, 19px);
  color: var(--vv-ink);
  margin-top: 14px;
  border-bottom: 1px solid var(--vv-line);
  padding-bottom: 3px;
  text-decoration: none;
  transition: color var(--m-fast) var(--ease), border-color var(--m-fast) var(--ease);
  align-self: flex-start;
}
.ab-gdh-ws-link:hover { color: var(--vv-gold-deep); border-color: var(--vv-gold-deep); }
.ab-gdh-ws-link svg { transition: transform var(--m-base) var(--ease-out); }
.ab-gdh-ws-link:hover svg { transform: translate(2px, -2px); }

/* stats row */
.ab-gdh-ws-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--vv-line-soft);
  border-bottom: 1px solid var(--vv-line-soft);
}
.ab-gdh-ws-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(28px, 4vw, 52px) var(--s5);
  border-right: 1px solid var(--vv-line-soft);
  gap: 6px;
}
.ab-gdh-ws-stat:last-child { border-right: none; }
.ab-gdh-ws-snum {
  font-family: var(--fd);
  font-style: italic;
  font-size: clamp(36px, 4vw, 60px);
  color: var(--vv-gold-deep);
  line-height: 1;
}
.ab-gdh-ws-slbl {
  font-family: var(--fb);
  font-size: 12px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--vv-ink-mute);
}

/* property image tiles */
.ab-gdh-ws-props {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.5vw, 24px);
}
.ab-gdh-ws-prop {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--vv-line-soft);
  overflow: hidden;
  transition: box-shadow var(--m-base) var(--ease);
}
.ab-gdh-ws-prop:hover { box-shadow: var(--shadow-plate); }
.ab-gdh-ws-prop-img {
  width: 100%;
  aspect-ratio: 3/4;
  background-size: cover;
  background-position: center;
  transition: transform 700ms var(--ease);
}
.ab-gdh-ws-prop:hover .ab-gdh-ws-prop-img { transform: scale(1.04); }
.ab-gdh-ws-prop-foot {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px 18px;
  border-top: 1px solid var(--vv-line-soft);
  background: var(--vv-paper-ivory);
}
.ab-gdh-ws-prop-state {
  font-family: var(--fb);
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--vv-gold-deep);
}
.ab-gdh-ws-prop-name {
  font-family: var(--fd);
  font-style: italic;
  font-size: clamp(15px, 1.1vw, 18px);
  color: var(--vv-ink);
  line-height: 1.2;
}

@media (max-width: 1000px) {
  .ab-gdh-ws-header { grid-template-columns: 1fr; gap: 28px; }
  .ab-gdh-ws-props { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .ab-gdh-ws-stats { grid-template-columns: repeat(2, 1fr); }
  .ab-gdh-ws-stat:nth-child(2) { border-right: none; }
  .ab-gdh-ws-stat:nth-child(3) { border-right: 1px solid var(--vv-line-soft); border-top: 1px solid var(--vv-line-soft); }
  .ab-gdh-ws-stat:nth-child(4) { border-top: 1px solid var(--vv-line-soft); }
}
@media (max-width: 480px) {
  .ab-gdh-ws-props { grid-template-columns: 1fr 1fr; gap: 10px; }
}

/* (old ab-gdh-brand kept here for reference — class no longer used) */
.ab-gdh-brand {
  position: relative;
  min-height: clamp(700px, 90vh, 960px);
  display: flex;
  align-items: stretch;
  overflow: hidden;
  background: var(--vv-ink);
}
.ab-gdh-brand-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 30%;
  transform: scale(1.04);
  transition: transform 1.6s var(--ease);
}
.ab-gdh-brand:hover .ab-gdh-brand-bg { transform: scale(1); }
.ab-gdh-brand-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(46,40,24,.92) 0%,
    rgba(46,40,24,.80) 45%,
    rgba(46,40,24,.55) 100%
  );
  z-index: 1;
}
.ab-gdh-brand-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--section-y) var(--container-pad);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(36px, 5vh, 64px);
}
.ab-gdh-topbar { display: flex; align-items: center; gap: 20px; }
.ab-gdh-eyebrow {
  font-family: var(--fb);
  font-size: 12px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--vv-gold-leaf);
  white-space: nowrap;
}
.ab-gdh-line {
  flex: 1;
  height: 1px;
  background: rgba(224,192,122,.25);
  max-width: 120px;
}
.ab-gdh-mono {
  font-family: var(--fd);
  font-style: italic;
  font-size: clamp(13px, 1.2vw, 17px);
  letter-spacing: .18em;
  color: rgba(248,243,230,.35);
}
.ab-gdh-headline {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
}
.ab-gdh-h2 {
  font-size: clamp(40px, 5.5vw, 80px);
  font-style: italic;
  color: var(--vv-paper);
  line-height: 1.0;
  margin: 0;
}
.ab-gdh-h2 em { color: var(--vv-gold-leaf); font-style: italic; }
.ab-gdh-lede {
  color: rgba(248,243,230,.65);
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.7;
  max-width: 46ch;
  align-self: center;
}
.ab-gdh-properties {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: rgba(248,243,230,.07);
  border: 1px solid rgba(248,243,230,.07);
}
.ab-gdh-prop {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  cursor: default;
  transition: background var(--m-base) var(--ease);
}
.ab-gdh-prop:hover { background: rgba(248,243,230,.04); }
.ab-gdh-prop-img {
  width: 100%;
  aspect-ratio: 4/3;
  background-size: cover;
  background-position: center;
  opacity: .72;
  transition: opacity var(--m-base) var(--ease), transform 700ms var(--ease);
}
.ab-gdh-prop:hover .ab-gdh-prop-img { opacity: .9; transform: scale(1.04); }
.ab-gdh-prop-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-top: 1px solid rgba(248,243,230,.08);
}
.ab-gdh-prop-state {
  font-family: var(--fb);
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--vv-gold-leaf);
  opacity: .75;
}
.ab-gdh-prop-name {
  font-family: var(--fd);
  font-style: italic;
  font-size: clamp(15px, 1.1vw, 18px);
  color: var(--vv-paper);
  line-height: 1.2;
}
.ab-gdh-bottombar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(248,243,230,.12);
  padding-top: clamp(20px, 3vh, 36px);
}
.ab-gdh-stat { display: flex; align-items: baseline; gap: 14px; }
.ab-gdh-stat-num {
  font-family: var(--fd);
  font-style: italic;
  font-size: clamp(40px, 4vw, 60px);
  color: var(--vv-gold-leaf);
  line-height: 1;
}
.ab-gdh-stat-lbl {
  font-family: var(--fb);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(248,243,230,.45);
}
.ab-gdh-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fd);
  font-style: italic;
  font-size: clamp(16px, 1.3vw, 20px);
  color: var(--vv-paper);
  border-bottom: 1px solid rgba(248,243,230,.25);
  padding-bottom: 2px;
  text-decoration: none;
  transition: color var(--m-fast) var(--ease), border-color var(--m-fast) var(--ease);
}
.ab-gdh-cta:hover { color: var(--vv-gold-leaf); border-color: var(--vv-gold-leaf); }
.ab-gdh-cta svg { transition: transform var(--m-base) var(--ease-out); }
.ab-gdh-cta:hover svg { transform: translate(3px, -3px); }
@media (max-width: 1000px) {
  .ab-gdh-headline { grid-template-columns: 1fr; gap: 20px; }
  .ab-gdh-properties { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .ab-gdh-brand { min-height: auto; }
  .ab-gdh-properties { grid-template-columns: 1fr 1fr; gap: 1px; }
  .ab-gdh-bottombar { flex-direction: column; align-items: flex-start; gap: 20px; }
}

/* ==========================================================================
   ROOMS PAGE
   ========================================================================== */

/* ---------- Rooms hero ---------- */

.rooms-hero {
  position: relative;
  height: calc(100dvh - 118px - 20px - 80px);
  min-height: 420px;
  overflow: hidden;
  margin: 50px 50px 0;
}
@media (max-width: 768px) { .rooms-hero { margin: 24px 24px 0; height: 60vh; min-height: 360px; } }
@media (max-width: 480px) { .rooms-hero { margin: 16px 16px 0; height: 50vh; } }
.rooms-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
  transition: transform 1.6s cubic-bezier(.22,1,.36,1);
}
.rooms-hero:is(:hover, :focus-within) .rooms-hero-bg { transform: scale(1); }
.rooms-hero-body,
.rooms-hero-index { display: none; }

.rooms-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(46,40,24,.10) 0%,
    rgba(46,40,24,.22) 100%
  );
  z-index: 1;
}
.rooms-hero-body {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--container-pad) clamp(60px, 9vh, 110px);
}
.rooms-hero-label { color: var(--vv-gold-leaf); display: block; margin-bottom: 20px; }
.rooms-hero-h1 {
  color: #fff;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 1.0;
  font-style: italic;
}
.rooms-hero-h1 em { color: var(--vv-gold-leaf); }
.rooms-hero-sub {
  color: rgba(248,243,230,.78);
  font-size: clamp(15px, 1.2vw, 19px);
  max-width: 50ch;
  margin-top: 24px;
  line-height: 1.65;
}
.rooms-hero-index {
  position: absolute;
  bottom: clamp(36px, 7vh, 72px);
  right: var(--container-pad);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--fb);
  font-size: 12px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(248,243,230,.5);
}
.rhi-sep { color: var(--vv-gold-leaf); }

/* ---------- Rooms intro ---------- */
/* label → h2: 16px | h2 stays flush (left col) | p → btn: 30px (right col) */
.rm-intro { border-bottom: 1px solid var(--vv-line-soft); }
.rm-intro-left .label + h2 { margin-top: 16px; }
.rm-intro-right p + .vv-btn { margin-top: 30px; }
.rm-intro-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--section-y) var(--container-pad);
}
@media (max-width: 860px) { .rm-intro-inner { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- Room rows (alternating full-bleed) ---------- */

.rm-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: clamp(500px, 70vh, 760px);
  border-bottom: 1px solid var(--vv-line-soft);
}
.rm-row--flip .rm-row-img { order: 2; }
.rm-row--flip .rm-row-copy { order: 1; }
.rm-row-img {
  background-size: cover;
  background-position: center;
  overflow: hidden;
  transition: transform 800ms var(--ease);
}
.rm-row:hover .rm-row-img { transform: scale(1.025); }
.rm-row-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--section-y) clamp(32px, 5vw, 80px);
  background: var(--vv-paper);
  position: relative;
}
.rm-row:nth-child(even) .rm-row-copy { background: var(--vv-paper-ivory); }
.rm-row-index {
  font-family: var(--fd);
  font-style: italic;
  font-size: clamp(48px, 5vw, 72px);
  color: var(--vv-line);
  line-height: 1;
  position: absolute;
  top: clamp(20px, 3vh, 40px);
  right: clamp(20px, 3vw, 48px);
  pointer-events: none;
}
/* label → h2: 16px | h2 → p: 24px | p → list: 16px | list → btn: 30px */
.rm-row-copy .label { margin-bottom: 16px; }
.rm-row-copy h2 { margin-top: 0; }
.rm-row-copy h2 + p { margin-top: 24px; }
.rm-row-copy p + p { margin-top: 16px; }
.rm-row-copy p + .rm-facts { margin-top: 16px; }
.rm-row-copy .rm-facts + .vv-btn { margin-top: 30px; }
.rm-facts {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--vv-line-soft);
}
.rm-facts li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--vv-line-soft);
  font-size: 14px;
}
.rm-fact-k {
  font-family: var(--fb);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--vv-ink-mute);
}
.rm-fact-v {
  font-family: var(--fd);
  font-style: italic;
  font-size: 17px;
  color: var(--vv-ink);
}
@media (max-width: 900px) {
  .rm-row { grid-template-columns: 1fr; min-height: auto; }
  .rm-row-img { aspect-ratio: 16/9; order: 1 !important; }
  .rm-row-copy { order: 2 !important; border-right: none !important; border-left: none !important; }
  .rm-row-index { display: none; }
}

/* ---------- Inclusions band ---------- */

.rm-inclusions { background: var(--vv-ink); overflow: hidden; }
.rm-incl-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--section-y) var(--container-pad);
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}
/* label → h2: 16px | h2 → p: 24px | p → btn: 30px */
.rm-incl-head .label--gold { color: var(--vv-gold-leaf); }
.rm-incl-head h2 { color: var(--vv-paper); margin-top: 16px; }
.rm-incl-head h2 em { color: var(--vv-gold-leaf); }
.rm-incl-head p { color: rgba(248,243,230,.6); margin-top: 24px; }
.rm-incl-head p + .vv-btn { margin-top: 30px; }
.rm-incl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(248,243,230,.08);
  border: 1px solid rgba(248,243,230,.08);
}
.rm-incl-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 28px 20px;
  background: var(--vv-ink);
  transition: background var(--m-base) var(--ease);
}
.rm-incl-item:hover { background: rgba(248,243,230,.05); }
.rm-incl-icon { color: var(--vv-gold-leaf); flex-shrink: 0; opacity: .85; }
.rm-incl-name {
  font-family: var(--fb);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(248,243,230,.7);
  line-height: 1.4;
}
@media (max-width: 1000px) { .rm-incl-inner { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .rm-incl-grid { grid-template-columns: repeat(2, 1fr); } }


/* ============================================================
   ROOMS — Card grid (2-up layout)
   ============================================================ */

/* ---------- Section wrapper ---------- */

.rm-cards-section {
  border-bottom: 1px solid var(--vv-line-soft);
}
.rm-cards-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(40px, 5vh, 72px) var(--container-pad);
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vw, 48px);
}

/* ---------- Two-column row ---------- */

.rm-cards-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 40px);
}

/* ---------- Card shell ---------- */

.rm-card {
  display: flex;
  flex-direction: column;
  background: var(--vv-paper-ivory);
  border: 1px solid var(--vv-line-soft);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: box-shadow var(--m-base) var(--ease), transform var(--m-base) var(--ease);
}
/* lift only for cards that link somewhere (venue cards with no link stay still) */
.rm-card:has(a[href]):hover {
  box-shadow: var(--shadow-plate);
  transform: translateY(-3px);
}

/* ---------- Featured card — horizontal split ---------- */

.rm-card--featured {
  flex-direction: row;
  min-height: clamp(420px, 58vh, 600px);
  max-height: 600px;
}
.rm-card--featured .rm-card-img {
  flex: 0 0 55%;
  align-self: stretch;
  min-height: 0;
}
.rm-card--featured .rm-card-body {
  flex: 1;
  justify-content: center;
  overflow: hidden;
}

/* ---------- Card image ---------- */

.rm-card-img {
  position: relative;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  flex: 1;
  min-height: 260px;
  transition: transform 800ms var(--ease);
}
.rm-card:has(a[href]):hover .rm-card-img { transform: scale(1.03); }

.rm-card-num {
  display: none;
}
.rm-card-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  font-family: var(--fb);
  font-size: 12px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--vv-ink);
  background: var(--vv-gold-leaf);
  border-radius: var(--r-pill);
  padding: 5px 14px;
}

/* ---------- Card body ---------- */

.rm-card-body {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 30px;
  flex: 1;
}

/* meta: label + heading + desc */
.rm-card-meta { margin-bottom: 20px; }
.rm-card-meta .label { display: block; margin-bottom: 6px; }
.rm-card-name {
  font-size: clamp(20px, 2vw, 30px);
  line-height: 1.08;
  margin: 0 0 10px;
}
.rm-card--featured .rm-card-name { font-size: clamp(26px, 2.6vw, 38px); }
.rm-card-desc {
  font-size: 14px;
  line-height: 1.7;
  color: var(--vv-ink-soft);
  max-width: 52ch;
  margin: 0;
}

/* ---------- Spec strip (horizontal row of stats) ---------- */

.rm-card-specs {
  display: flex;
  border-top: 1px solid var(--vv-line-soft);
  border-bottom: 1px solid var(--vv-line-soft);
  margin-bottom: 20px;
}
.rm-cs-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 6px;
  text-align: center;
  position: relative;
}
.rm-cs-item + .rm-cs-item::before {
  content: "";
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 1px;
  background: var(--vv-line-soft);
}
.rm-cs-icon {
  color: var(--vv-gold-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
}
.rm-cs-lbl {
  font-family: var(--fb);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--vv-ink-mute);
  line-height: 1;
}
.rm-cs-val {
  font-family: var(--fd);
  font-style: normal;
  font-size: 15px;
  color: var(--vv-ink);
  line-height: 1.15;
}
.rm-cs-val em {
  font-family: var(--fd);
  font-style: normal;
  font-size: 15px;
  color: var(--vv-ink);
  line-height: 1.15;
  letter-spacing: normal;
}

/* ---------- Card CTA ---------- */

.rm-card-cta { align-self: flex-start; }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .rm-cards-row { grid-template-columns: 1fr; }
  .rm-card--featured {
    flex-direction: column;
    max-height: none;
    min-height: auto;
  }
  .rm-card--featured .rm-card-img {
    flex: none;
    aspect-ratio: 16/9;
    height: auto;
  }
}
@media (max-width: 640px) {
  .rm-card-body { padding: 18px 18px 22px; }
  .rm-cs-item { padding: 10px 4px; }
  .rm-cs-lbl { display: none; }
}


/* ============================================================
   ROOMS — Amenities section
   ============================================================ */

.rm-amenities {
  background: var(--vv-paper-vellum);
  border-bottom: 1px solid var(--vv-line-soft);
}
.rm-amenities-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--section-y) var(--container-pad);
}
.rm-amenities-head {
  text-align: center;
  margin-bottom: clamp(40px, 6vh, 64px);
}
.rm-amenities-head .label { display: block; margin-bottom: 16px; }
.rm-amenities-head h2 { margin-top: 0; margin-bottom: 16px; }
.rm-amenities-head p { margin: 0 auto; text-align: center; max-width: 44ch; }

/* 6-column icon grid */
.rm-amen-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--vv-line);
  border: 1px solid var(--vv-line);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: clamp(32px, 5vh, 56px);
}
.rm-amen-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px 16px;
  background: var(--vv-paper-ivory);
  text-align: center;
  transition: background var(--m-fast) var(--ease);
}
.rm-amen-item:hover { background: var(--vv-gold-pale); }
.rm-amen-icon {
  color: var(--vv-gold-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .9;
}
.rm-amen-name {
  font-family: var(--fb);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--vv-ink-soft);
  line-height: 1.4;
}

.rm-amenities-cta { text-align: center; }

@media (max-width: 900px) { .rm-amen-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 600px) { .rm-amen-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 400px) { .rm-amen-grid { grid-template-columns: repeat(2, 1fr); } }


/* ============================================================
   ROOM SUITE — editorial header + image slider
   ============================================================ */

/* ---------- Suite pill bar — right after breadcrumb ---------- */

.rs-pill-bar {
  background: var(--vv-ink);
  border-bottom: 1px solid rgba(248,243,230,.08);
}
.rs-pill-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: flex;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.rs-pill-inner::-webkit-scrollbar { display: none; }
.rs-pill-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 14px 28px;
  flex-shrink: 0;
  text-align: center;
}
.rs-pill-val {
  font-family: var(--fd);
  font-style: italic;
  font-size: 17px;
  color: var(--vv-gold-leaf);
  line-height: 1.1;
  white-space: nowrap;
}
.rs-pill-lbl {
  font-family: var(--fb);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(248,243,230,.4);
  white-space: nowrap;
}
.rs-pill-div {
  width: 1px;
  height: 28px;
  background: rgba(248,243,230,.12);
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .rs-pill-item { padding: 12px 18px; }
}

/* ---------- Suite header ---------- */

.rs-header {
  background: var(--vv-paper);
  border-bottom: 1px solid var(--vv-line-soft);
}
.rs-header-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(48px, 8vh, 100px) var(--container-pad) clamp(40px, 6vh, 80px);
}
.rs-header-left .label { display: block; margin-bottom: 16px; }
.rs-header-row {
  display: flex;
  align-items: flex-start;
  gap: clamp(32px, 5vw, 72px);
  justify-content: space-between;
}
.rs-title {
  font-size: clamp(50px, 5vw, 60px);
  line-height: 1;
  margin: 0;
  flex-shrink: 0;
}
.rs-lede {
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.75;
  color: var(--vv-ink-soft);
  max-width: 52ch;
  margin: 0;
  padding-top: 6px;
}


/* ---------- Gallery — luxury split ---------- */

.rs-gallery {
  display: grid;
  grid-template-columns: 60% 40%;
  background: var(--vv-paper-ivory, #F5EFE0);
  height: clamp(480px, 72vh, 780px);
  user-select: none;
  margin: 0 200px;
  border-top: none !important;
}
@media (max-width: 1200px) { .rs-gallery { margin: 0 80px; } }
@media (max-width: 860px)  { .rs-gallery { margin: 0; } }

/* Stage — image area */
.rs-stage {
  position: relative;
  overflow: hidden;
  cursor: grab;
}
.rs-stage:active { cursor: grabbing; }

.rs-stage-track {
  position: relative;
  width: 100%;
  height: 100%;
}

/* crossfade slides */
.rs-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 900ms cubic-bezier(.4,0,.2,1);
}
.rs-slide.is-active { opacity: 1; z-index: 1; }

.rs-slide-img {
  width: 100%; height: 100%;
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
  transition: transform 6s ease-out;
}
.rs-slide.is-active .rs-slide-img { transform: scale(1); }

/* Progress rail at very bottom of stage */
.rs-progress-rail {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: rgba(248,243,230,.1);
  z-index: 5;
}
.rs-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--vv-gold-leaf);
}

/* Right panel */
.rs-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 36px 28px 28px;
  border-left: 1px solid var(--vv-line, #E8DCC8);
  position: relative;
  z-index: 2;
  background: var(--vv-paper-ivory, #F5EFE0);
}

/* Large number */
.rs-big-num {
  font-family: var(--fd);
  font-style: italic;
  font-size: clamp(64px, 8vw, 100px);
  line-height: 1;
  color: rgba(46,40,24,.06);
  position: absolute;
  top: 24px; right: 24px;
  pointer-events: none;
  letter-spacing: -0.04em;
}

/* Caption */
.rs-panel-top { position: relative; z-index: 1; padding-top: 8px; }
.rs-cap-main {
  display: block;
  font-family: var(--fd);
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 32px);
  color: var(--vv-ink);
  line-height: 1.1;
  margin-bottom: 10px;
  transition: opacity 400ms ease;
}
.rs-cap-sub {
  display: block;
  font-family: var(--fb);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--vv-ink-mute);
  line-height: 1.6;
  transition: opacity 400ms ease;
}

/* Vertical thumbnail strip */
.rs-vthumbs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  margin: 28px 0;
  overflow: hidden;
}
.rs-vthumb {
  flex: 1;
  background-size: cover;
  background-position: center;
  border-radius: 2px;
  border: 1px solid transparent;
  opacity: .35;
  cursor: pointer;
  padding: 0;
  transition: opacity var(--m-base) var(--ease), border-color var(--m-base) var(--ease), flex 400ms var(--ease);
  position: relative;
}
.rs-vthumb.is-active {
  opacity: 1;
  border-color: var(--vv-gold-leaf);
  flex: 2.2;
}
.rs-vthumb:hover:not(.is-active) { opacity: .6; }

/* Nav row */
.rs-panel-nav {
  display: flex;
  align-items: center;
  gap: 16px;
}
.rs-nav-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--vv-line);
  color: var(--vv-ink);
  display: flex; align-items: center; justify-content: center;
  transition: border-color var(--m-fast) var(--ease), color var(--m-fast) var(--ease), background var(--m-fast) var(--ease);
}
.rs-nav-btn:hover {
  border-color: var(--vv-gold-leaf);
  color: var(--vv-gold-leaf);
  background: rgba(200,169,104,.08);
}
.rs-nav-count {
  font-family: var(--fd);
  font-style: italic;
  font-size: 15px;
  color: var(--vv-ink-mute);
  display: flex;
  align-items: center;
  gap: 4px;
}
.rs-nav-sep { font-style: normal; font-size: 12px; opacity: .5; }

/* Responsive */
@media (max-width: 860px) {
  .rs-gallery {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    height: auto;
  }
  .rs-stage { height: clamp(280px, 55vw, 500px); }
  .rs-panel {
    flex-direction: row;
    align-items: center;
    padding: 16px 20px;
    border-left: none;
    border-top: 1px solid var(--vv-line);
    gap: 16px;
  }
  .rs-big-num { display: none; }
  .rs-vthumbs { flex-direction: row; margin: 0; flex: 1; max-height: 52px; gap: 4px; }
  .rs-vthumb { flex: 1; }
  .rs-vthumb.is-active { flex: 2; }
  .rs-panel-top { flex-shrink: 0; max-width: 180px; padding-top: 0; }
  .rs-cap-main { font-size: 18px; margin-bottom: 4px; }
  .rs-panel-nav { flex-shrink: 0; }
}
@media (max-width: 600px) {
  .rs-panel {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
    gap: 12px;
  }
  .rs-panel-top { max-width: 100%; }
  .rs-panel-nav { width: 100%; justify-content: flex-start; }
}


/* ============================================================
   ROOM SUITE — amenity infographic tiles
   ============================================================ */

.sa-infographic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--vv-line);
  border: 1px solid var(--vv-line);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-top: 36px;
}

.sa-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 28px 16px 26px;
  background: var(--vv-paper-ivory);
  text-align: center;
  cursor: default;
  transition: background var(--m-fast) var(--ease), transform var(--m-base) var(--ease);
  position: relative;
}

.sa-tile-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--vv-gold-pale);
  color: var(--vv-gold-deep);
  flex-shrink: 0;
  transition: background var(--m-fast) var(--ease), color var(--m-fast) var(--ease);
}

.sa-tile-name {
  font-family: var(--fb);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vv-ink-soft);
  line-height: 1.4;
  transition: color var(--m-fast) var(--ease);
}

@media (max-width: 760px) { .sa-infographic { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 500px) { .sa-infographic { grid-template-columns: repeat(2, 1fr); } }

/* ── RESPONSIVE ENHANCEMENTS ─────────────────────────────────────────────── */

/* 1024px — tablet landscape */
@media (max-width: 1024px) {
  .card-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .room-detail-body { gap: clamp(28px, 4vw, 64px); }
}

/* 768px — mobile: 24px horizontal gutter + cap section paddings */
@media (max-width: 768px) {
  /* Containers */
  .container,
  .breadcrumb-inner,
  .enq-inner,
  .room-detail-body,
  .page-section     { padding-left: 24px; padding-right: 24px; }

  /* Section vertical padding */
  .page-section     { padding-top: 50px; padding-bottom: 50px; }
  .pull-band        { padding: 40px 24px; }
  .enq-inner        { padding-top: 50px; padding-bottom: 50px; }

  /* Cards inside padded containers: NO extra side padding */
  .pg-card-body     { padding: 20px; }
  .room-detail-info { padding: 24px; }

  /* Section head → cards: 20px total */
  .rm-amenities-head { margin-bottom: 20px; }

  /* Breadcrumb */
  .breadcrumb-inner { padding-top: 12px; padding-bottom: 12px; }

  /* Gallery */
  .gallery-grid     { gap: 8px; }

  /* Enquiry form */
  .enq-form-wrap    { padding: 24px; }

  /* About / content sections */
  .ab-copy          { padding: 0 24px; }
  .ab-stat-bar      { padding: 32px 24px; }
}

/* 480px — mobile fine-tuning */
@media (max-width: 480px) {
  :root { --container-pad: 24px; }
  .about-hero { height: 60vh !important; min-height: unset; }
  .room-detail-hero { height: 50vh; min-height: 300px; }
  .stat-item { flex-basis: 50%; }
  .feature-grid { grid-template-columns: 1fr; }
  .card-grid { grid-template-columns: 1fr; }
  .page-nav { flex-direction: column; gap: 24px; align-items: flex-start; }
  .pull-band { padding: var(--s7) var(--container-pad); }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .pg-card { transition: box-shadow var(--m-base) var(--ease); }
  .pg-card:hover { transform: none; }
  .pg-card-img,
  .gallery-grid .g-cell { transition: none; }
}

/* Safe area insets */
@supports (padding: env(safe-area-inset-right)) {
  .breadcrumb-inner { padding-right: max(var(--container-pad), env(safe-area-inset-right)); padding-left: max(var(--container-pad), env(safe-area-inset-left)); }
}

/* ── Page nav: mobile fixes ── */
@media (max-width: 768px) {
  .page-nav {
    justify-content: flex-end !important;
    padding-top: 24px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* ── Room detail header: reduce top spacing ── */
  .rs-header-inner {
    padding-top: 32px !important;
    padding-bottom: 28px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .rs-header-row { flex-direction: column; gap: 16px; }

  /* ── Room gallery: 24px side padding ── */
  .rs-gallery {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* ==========================================================================
   ABOUT PAGE — mobile (≤768px) — 50px vertical / 24px horizontal
   ========================================================================== */
@media (max-width: 768px) {

  /* ── Breadcrumb ── */
  .breadcrumb-inner { padding-left: 24px !important; padding-right: 24px !important; }

  /* ── Story section ── */
  .story-body { padding: 50px 24px !important; }
  .story-copy h2 { margin-bottom: 16px; }
  .story-imgs { display: none; }

  /* ── Inner sections (VMV, Team, GDH) ── */
  .inner-section { padding: 50px 24px !important; }

  /* ── Section head ── */
  .section-head { padding: 0 !important; margin-bottom: 24px !important; }

  /* ── VMV cards ── */
  .vmv-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .vmv-card { padding: 24px !important; }

  /* ── Opening section ── */
  .ab-opening-inner { padding: 50px 24px !important; }

  /* ── Story rows ── */
  .ab-story-copy { padding: 32px 24px !important; }

  /* ── VMV dark strip ── */
  .ab-vmv-inner { padding: 50px 24px !important; }
  .ab-vmv-item { padding: 24px 0 !important; }

  /* ── Team (ab-team) ── */
  .ab-team-head { padding: 50px 24px 0 !important; }

  /* ── GDH editorial ── */
  .ab-gdh-ws-inner { padding: 50px 24px !important; }
  .ab-gdh-ws-header { grid-template-columns: 1fr !important; gap: 24px !important; }

  /* ── Newsletter ── */
  .newsletter-section .inner-section { padding: 50px 24px !important; }

  /* ── Property cards: pull out of parent padding, re-apply 24px on slider ── */
  .ab-gdh-ws-inner {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .ab-gdh-ws-header,
  .ab-gdh-ws-stats { padding-left: 0 !important; padding-right: 0 !important; }
  .ab-gdh-ws-props {
    margin-left: -24px !important;
    margin-right: -24px !important;
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 24px;
    -webkit-overflow-scrolling: touch;
    gap: 12px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    padding-bottom: 8px;
    scrollbar-width: none;
  }
  .ab-gdh-ws-props::-webkit-scrollbar { display: none; }
  .ab-gdh-ws-prop {
    flex: 0 0 80% !important;
    flex-shrink: 0;
    scroll-snap-align: start;
    min-width: 0;
  }

  /* ── Team cards: pull out of parent padding, re-apply 24px on slider ── */
  .inner-section:has(.team-grid) {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .team-grid {
    margin-left: -24px !important;
    margin-right: -24px !important;
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 24px;
    -webkit-overflow-scrolling: touch;
    gap: 16px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    padding-bottom: 8px;
    scrollbar-width: none;
  }
  .team-grid::-webkit-scrollbar { display: none; }
  .team-card {
    flex: 0 0 80% !important;
    flex-shrink: 0;
    scroll-snap-align: start;
    min-width: 0;
  }
}

/* ==========================================================================
   FIRST SECTION AFTER BREADCRUMB — consistent 40px top spacing on mobile
   ========================================================================== */
@media (max-width: 768px) {
  /* About */
  .ab-opening-inner  { padding-top: 40px !important; }
  /* Rooms */
  .rm-intro-inner    { padding-top: 40px !important; }
  /* Room detail (suite / executive / deluxe) */
  .rs-header-inner   { padding-top: 40px !important; }
}

/* Sitewide breadcrumb left spacing — 100px from page edge */
html body .breadcrumb .breadcrumb-inner { padding-left: 100px !important; }

/* ============================================================
   SITEWIDE: remove all italics except headings (h1–h6) and their <em>
   ============================================================ */
body *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
  font-style: normal !important;
}
html body h1, html body h2, html body h3,
html body h4, html body h5, html body h6,
html body h1 em, html body h2 em, html body h3 em,
html body h4 em, html body h5 em, html body h6 em {
  font-style: italic !important;
}

/* ============================================================
   SITEWIDE MOBILE SAFETY NET
   ============================================================ */
/* 1. Never allow horizontal scroll */
html, body { max-width: 100%; overflow-x: hidden; }

/* 2. Media & embeds always fit their container */
img, svg, video, iframe, table { max-width: 100%; }

@media (max-width: 768px) {
  /* 3. Headings/labels forced onto one line on desktop must wrap on mobile */
  h1, h2, h3, h4, h5, h6,
  .chapter-title, .ct-line,
  .me-section-head h1, .me-section-head h2,
  .fac-page-intro h1, .rm-intro h1,
  .dn-header h1, .spa-cta-band h2,
  .idx-title {
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* 4. Big editorial headlines shouldn't overflow narrow screens */
  h1 { font-size: clamp(30px, 9vw, 48px) !important; line-height: 1.08 !important; }
  h2 { font-size: clamp(24px, 7vw, 40px) !important; line-height: 1.1 !important; }

  /* 5. Long unbroken strings (emails, urls) wrap instead of overflowing */
  a, p, span, li, td { overflow-wrap: anywhere; }
}

@media (max-width: 600px) {
  /* 6. Catch-all: any remaining multi-column card grid stacks to one column.
        Scoped to the known card/section grids so we don't flatten intentional layouts. */
  .rm-cards-row,
  .fac-grid,
  .dn-sum-grid,
  .spa-booking-inner,
  .spa-gallery-grid,
  .me-venues,
  .meetings-grid,
  .plates-grid,
  .pillar-grid {
    grid-template-columns: 1fr !important;
  }
  .spa-booking-divider { display: none !important; }

  /* 7. Side gutters never collapse to zero on phones */
  .container, .page-content { padding-left: 20px; padding-right: 20px; }
  /* breadcrumb: override the 100px desktop indent on phones */
  html body .breadcrumb .breadcrumb-inner { padding-left: 20px !important; padding-right: 20px !important; }
}

/* ============================================================
   MINIMUM FONT-SIZE FLOOR — 12px enforced at high specificity.
   Guarantees small labels/captions/meta never render below 12px,
   overriding inline styles, clamp() minimums, and other rules.
   ============================================================ */
html body .label,
html body .label-bi,
html body [class*="-label"],
html body [class*="-lbl"],
html body [class*="-cat"],
html body [class*="-tag"],
html body [class*="-num"],
html body [class*="-key"],
html body [class*="-eyebrow"],
html body [class*="-meta"],
html body [class*="-cap"],
html body .mega-dest-name,
html body .mega-dest-loc,
html body .breadcrumb-inner,
html body .idx-num,
html body .footer-bottom,
html body .dls-footer-bottom,
html body small {
  font-size: 12px !important;
}

/* ============================================================
   DESTINATIONS MEGA-DROPDOWN — unified to match VIVIDUS exactly.
   (literal colours so it renders identically on every site)
   ============================================================ */
html body .mega-menu--dest { left: 0; width: 760px; min-width: 760px; padding: 0; }
html body .mega-dest-brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--fb, 'Manrope', sans-serif);
  font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: #C06B40; padding: 16px 24px 12px; margin: 0; border-bottom: none;
}
html body .mega-dest-brand::before { content: ""; width: 22px; height: 2px; background: currentColor; flex-shrink: 0; }
html body .mega-dest-brand--vv { color: #9D8345; }
html body .mega-dest-vv-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  padding: 0 16px 16px; margin-bottom: 4px; border-bottom: 1px solid rgba(46,40,24,.1);
}
html body .mega-dest-ms-section { padding: 0 16px 16px; background: #ffffff; }
html body a.mega-dest-brand--ms-link { display: flex !important; align-items: center; gap: 10px; padding: 16px 24px 12px !important; background: #ffffff; text-decoration: none; cursor: pointer; transition: color 160ms; }
html body a.mega-dest-brand--ms-link:hover { color: #C06B40; }
html body .mega-dest-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
html body .nav-links .mega-dest-link,
html body .mega-dest-link {
  display: block !important; padding: 10px 12px; text-decoration: none;
  transition: background 160ms ease, box-shadow 160ms ease; box-sizing: border-box;
  border-radius: 6px; letter-spacing: 0; text-transform: none;
  font-size: inherit; line-height: inherit; color: inherit; border: 1px solid transparent;
}
html body .nav-links .mega-dest-link:hover,
html body .mega-dest-link:hover { background: #FAF7ED; border-color: rgba(46,40,24,.1); color: inherit; }
html body .mega-dest-link--vv:hover { background: rgba(157,131,69,.1); border-color: rgba(157,131,69,.25); }
html body .mega-dest-name {
  display: block; font-family: var(--fb, 'Manrope', sans-serif);
  font-size: 13px; font-weight: 600; color: #2A2823; line-height: 1.3; letter-spacing: 0; text-transform: none;
}
html body .mega-dest-loc {
  display: block; font-family: var(--fb, 'Manrope', sans-serif);
  font-size: 12px; color: rgba(46,40,24,.55); margin-top: 3px; letter-spacing: 0; text-transform: none;
}
html body .mega-dest-link--vv .mega-dest-name { color: #9D8345; }

/* ============================================================
   BOOKING SEARCH WIDGET — luxury redesign
   ============================================================ */
.search-widget-wrap{max-width:980px;margin:20px auto 0;padding:0 24px;position:relative;z-index:20;}
@media(max-width:880px){.search-widget-wrap{margin-top:20px;}}

.brand-booking{
  background:#fff;
  border:1px solid var(--line-soft,#ECE4D0);
  border-radius:4px;
  box-shadow:0 20px 60px -20px rgba(42,40,35,.22);
  padding:14px 22px;
  font-family:var(--fb,'Manrope',sans-serif);
}

/* rows */
.bb-row{display:grid;align-items:end;}
.bb-row-top{grid-template-columns:1fr 1fr auto;gap:0;}
.bb-row-extra{grid-template-columns:1fr 1fr 1fr 1fr;gap:0;margin-top:13px;padding-top:13px;border-top:1px solid var(--line-soft,#ECE4D0);}
.brand-booking.is-collapsed .bb-row-extra{display:none;}
.bb-divider{align-self:stretch;width:1px;background:var(--line-soft,#ECE4D0);margin:2px 0;}
@media(max-width:880px){
  .bb-row-top{grid-template-columns:1fr 1fr;}
  .bb-row-extra{grid-template-columns:1fr 1fr;}
  .bb-divider{display:none;}
  .bb-row-top .bb-action{grid-column:1 / -1;margin-top:18px;}
}
@media(max-width:560px){.bb-row-top,.bb-row-extra{grid-template-columns:1fr;}}

/* field */
.bb-field{display:flex;flex-direction:column;gap:5px;min-width:0;padding:0 18px;border-left:1px solid var(--line-soft,#ECE4D0);}
.bb-row-top > .bb-field:first-child,.bb-row-extra > .bb-field:first-child{border-left:0;padding-left:0;}
.bb-field label{font-size:9px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-deep,#9D8345);}
.bb-control{position:relative;display:flex;align-items:center;gap:9px;background:transparent;border:0;padding:0;height:26px;}
.bb-icon{color:var(--gold,#9D8345);flex-shrink:0;width:15px;height:15px;}
.bb-control select,.bb-control .bb-text{
  flex:1;min-width:0;border:0;background:transparent;outline:none;cursor:pointer;height:100%;
  font-family:var(--fd,'Playfair Display',serif);font-size:14px;font-weight:400;color:var(--ink,#2A2823);
  appearance:none;-webkit-appearance:none;
}
.bb-control select{padding-right:18px;background-color:#fff;color:var(--ink,#2A2823);}
.bb-control select option{background-color:#fff;color:var(--ink,#2A2823);padding-left:12px;}
.bb-control .bb-text::placeholder{color:var(--ink,#2A2823);opacity:.85;}
.bb-guests-trigger{text-align:left;}
.bb-chevron{color:var(--ink-mute,#8F887C);flex-shrink:0;pointer-events:none;width:13px;height:13px;}

/* action / book */
.bb-action{display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;gap:5px;padding-left:20px;min-width:164px;}

.bb-price{font-family:var(--fd,'Playfair Display',serif);font-style:italic;font-size:11px;color:var(--gold-deep,#9D8345);letter-spacing:.02em;}
.bb-book-btn{
  width:100%;background:var(--ink,#2A2823);color:#fff;border:0;border-radius:3px;
  height:40px;padding:0 26px;font-family:var(--fb);font-size:10px;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;cursor:pointer;
  transition:background .3s ease,letter-spacing .3s ease;
}
.bb-book-btn:hover{background:var(--gold-deep,#9D8345);letter-spacing:.3em;}

/* footer */
.bb-footer{display:flex;align-items:center;gap:280px;margin-top:11px;padding-top:11px;border-top:1px solid var(--line-soft,#ECE4D0);flex-wrap:wrap;}
.bb-toggle{display:inline-flex;align-items:center;gap:7px;background:none;border:0;cursor:pointer;font-family:var(--fb);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft,#5A554C);transition:color .2s;}
.bb-toggle:hover{color:var(--gold-deep,#9D8345);}

html body .brand-booking .bb-toggle .bb-toggle-sign{display:inline-flex !important;align-items:center !important;justify-content:center !important;width:10px !important;height:10px !important;border:1px solid currentColor;border-radius:50%;font-size:8px !important;line-height:0 !important;font-weight:400;padding:0 !important;padding-left:2px !important;text-align:center !important;}
html body .brand-booking .bb-toggle .bb-toggle-text{font-size:8px !important;}

.bb-sublink{font-size:11px;letter-spacing:.02em;color:var(--ink-soft,#5A554C);text-decoration:none;border-bottom:1px solid transparent;transition:color .2s,border-color .2s;}
.bb-sublink:hover{color:var(--gold-deep,#9D8345);border-color:var(--gold,#C8A968);}
.bb-manage{margin-left:auto;}

/* guests popup */
.bb-guests-field{position:relative;}
.guests-popup{position:absolute;top:calc(100% + 14px);left:0;width:320px;max-width:92vw;background:#fff;border:1px solid var(--line,#E3D9C3);border-radius:6px;box-shadow:0 24px 60px -16px rgba(42,40,35,.28);padding:22px 24px;z-index:60;}
.guests-popup[hidden]{display:none;}
.gp-title{font-family:var(--fd,'Playfair Display',serif);font-size:19px;color:var(--ink,#2A2823);margin-bottom:18px;}
.gp-total-row{display:flex;align-items:center;justify-content:space-between;padding-bottom:18px;border-bottom:1px solid var(--line-soft,#ECE4D0);}
.gp-total-label,.gp-guest-label{font-size:14px;color:var(--ink-soft,#5A554C);}
.gp-room{padding:18px 0;border-bottom:1px solid var(--line-soft,#ECE4D0);}
.gp-room:last-of-type{border-bottom:0;}
.gp-room-title{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep,#9D8345);margin-bottom:14px;}
.gp-guest-row{display:flex;flex-direction:column;gap:14px;}
.gp-guest{display:flex;align-items:center;justify-content:space-between;}
.gp-stepper{display:inline-flex;align-items:center;gap:16px;}
.gp-step{width:30px;height:30px;border:1px solid var(--line,#E3D9C3);background:#fff;border-radius:50%;font-size:17px;line-height:1;color:var(--ink,#2A2823);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:border-color .18s,color .18s,background .18s;}
.gp-step:hover:not(:disabled){border-color:var(--gold,#9D8345);color:var(--gold-deep,#9D8345);background:var(--paper,#FAF6EE);}
.gp-step:disabled{opacity:.3;cursor:not-allowed;}
.gp-num{min-width:20px;text-align:center;font-size:15px;font-weight:600;color:var(--ink,#2A2823);}
.gp-actions{display:flex;align-items:center;justify-content:space-between;margin-top:18px;}
.gp-add{background:none;border:0;color:var(--gold-deep,#9D8345);font-family:var(--fb);font-size:12.5px;font-weight:600;letter-spacing:.02em;cursor:pointer;}
.gp-add:hover{text-decoration:underline;}
.gp-add:disabled{opacity:.4;cursor:not-allowed;text-decoration:none;}
.gp-done{background:var(--ink,#2A2823);color:#fff;border:0;border-radius:3px;padding:11px 26px;font-family:var(--fb);font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:background .25s;}
.gp-done:hover{background:var(--gold-deep,#9D8345);}

/* date picker popup */
.date-picker-popup{position:absolute;top:calc(100% + 14px);left:0;width:300px;background:#fff;border:1px solid var(--line,#E3D9C3);border-radius:6px;box-shadow:0 24px 60px -16px rgba(42,40,35,.28);padding:18px;z-index:60;}
.date-picker-popup[hidden]{display:none;}
.dp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.dp-nav{width:30px;height:30px;border:1px solid var(--line,#E3D9C3);background:#fff;border-radius:50%;cursor:pointer;color:var(--ink,#2A2823);font-size:15px;transition:border-color .18s,color .18s;}
.dp-nav:hover{border-color:var(--gold,#9D8345);color:var(--gold-deep,#9D8345);}
.dp-month{font-family:var(--fd,'Playfair Display',serif);font-size:15px;color:var(--ink,#2A2823);}
.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;}
.dp-dow{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute,#8F887C);text-align:center;padding:5px 0;}
.dp-day{aspect-ratio:1;border:0;background:none;font-family:var(--fb);font-size:13px;color:var(--ink,#2A2823);border-radius:50%;cursor:pointer;transition:background .15s,color .15s;}
.dp-day:hover:not(:disabled){background:var(--paper,#FAF6EE);}
.dp-day.is-sel{background:var(--gold-deep,#9D8345);color:#fff;}
.dp-day:disabled{color:var(--line,#E3D9C3);cursor:not-allowed;}
.dp-day.is-empty{visibility:hidden;}

/* child widget margin-bottom */
.search-widget-wrap{margin-bottom:50px;}

/* ---- Custom dropdown (Place / Hotel) ---- */
.bb-control.cs{position:relative;}
.cs-trigger{flex:1;min-width:0;display:flex;align-items:center;border:0;background:transparent;outline:none;cursor:pointer;height:100%;padding:0;text-align:left;font-family:var(--fb,'Manrope',sans-serif);font-size:14.5px;font-weight:500;color:var(--ink,#2A2823);}
.cs-trigger:disabled{cursor:not-allowed;}
.cs-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cs-value.cs-ph{color:var(--ink-mute,#8F887C);}
.cs-list{position:absolute;top:calc(100% + 8px);left:0;right:0;min-width:100%;list-style:none;margin:0;padding:6px;background:#fff;border:1px solid var(--line,#E3D9C3);border-radius:8px;box-shadow:0 18px 44px -14px rgba(42,40,35,.28);z-index:70;max-height:260px;overflow:auto;}
.cs-list[hidden]{display:none;}
.cs-opt{padding:11px 16px;border-radius:6px;font-family:var(--fb,'Manrope',sans-serif);font-size:14px;color:var(--ink,#2A2823);cursor:pointer;line-height:1.3;transition:background .15s,color .15s;white-space:nowrap;}
.cs-opt:hover{background:var(--paper,#FAF6EE);color:var(--gold-deep,#9D8345);}
.cs-opt.is-sel{background:rgba(157,131,69,.12);color:var(--gold-deep,#9D8345);}
.bb-control.cs.cs-open .bb-chevron{transform:rotate(180deg);}
.bb-chevron{transition:transform .2s;}

/* cs-list padding override */
html body .brand-booking .bb-control.cs .cs-list{padding:6px !important;}


/* ============================================================
   BOOKING WIDGET — RESPONSIVE (tablet -> mobile)
   ============================================================ */

/* -- Tablet / small laptop (<=880px) -- */
@media(max-width:880px){
  .search-widget-wrap{padding:0 18px;}
  .brand-booking{padding:14px 18px;}
  .bb-row-top{grid-template-columns:1fr 1fr;gap:0 4px;}
  .bb-row-extra{grid-template-columns:1fr 1fr;gap:14px 4px;}
  .bb-divider{display:none;}
  /* action drops to its own full-width row */
  .bb-row-top .bb-action{grid-column:1 / -1;flex-direction:row;align-items:center;justify-content:space-between;padding-left:0;margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft,#ECE4D0);min-width:0;}
  .bb-action .bb-book-btn{width:auto;min-width:170px;}
  .bb-footer{gap:18px 24px;}
}

/* -- Phone (<=560px) -- */
@media(max-width:560px){
  .search-widget-wrap{padding:0 14px;margin-top:16px;}
  .brand-booking{padding:14px 16px;border-radius:6px;}
  .bb-row-top,.bb-row-extra{grid-template-columns:1fr;gap:0;}
  .bb-row-extra{gap:0;margin-top:10px;padding-top:6px;}
  .bb-divider{display:none;}
  /* every stacked field gets a divider line + even spacing, no left indent */
  .bb-field{padding:11px 0 0;border-left:0 !important;border-top:1px solid var(--line-soft,#ECE4D0);min-width:0;}
  .bb-row-top > .bb-field:first-child{border-top:0;padding-top:2px;}
  .bb-row-extra > .bb-field:first-child{border-top:0;}
  .bb-control{height:30px;}
  /* action row full width, button spans line */
  .bb-row-top .bb-action{grid-column:auto;flex-direction:column;align-items:stretch;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line-soft,#ECE4D0);}
  .bb-action .bb-price{align-self:flex-start;}
  .bb-action .bb-book-btn{width:100%;min-width:0;height:46px;font-size:11px;}
  /* footer stacks neatly */
  .bb-footer{flex-direction:column;align-items:flex-start;gap:14px;}
  .bb-manage{margin-left:0;}
  /* popups: never overflow viewport */
  .guests-popup,.date-picker-popup{position:fixed;left:50%;top:auto;bottom:0;transform:translateX(-50%);width:100%;max-width:100%;border-radius:14px 14px 0 0;max-height:80vh;overflow:auto;}
  .cs-list{max-height:50vh;}
}

/* -- Small phone (<=380px) -- */
@media(max-width:380px){
  .brand-booking{padding:12px 13px;}
  .bb-control select,.bb-control .bb-text,.cs-trigger{font-size:13.5px;}
}