@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Manrope:wght@300;400;500;600;700;800&display=swap');

:root {
  --spv-ink: #101c17;
  --spv-forest: #1b3428;
  --spv-moss: #2f5d4a;
  --spv-brass: #c9a961;
  --spv-brass-soft: #e0c88a;
  --spv-brass-deep: #8c6f31;
  --spv-cream: #f2ebdb;
  --spv-bone: #fbf7ee;
  --spv-ash: #5d5a52;
  --spv-line: rgba(16, 28, 23, 0.14);
  --spv-panel: #ffffff;
  --spv-shadow-sm: 0 12px 28px -18px rgba(16, 28, 23, 0.42);
  --spv-shadow: 0 26px 60px -32px rgba(16, 28, 23, 0.48);
  --spv-shadow-lg: 0 40px 90px -40px rgba(16, 28, 23, 0.55);
  --spv-radius: 14px;
  --spv-radius-lg: 26px;
  --spv-heading: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --spv-body: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--spv-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.68;
  color: var(--spv-ink);
  background-color: var(--spv-bone);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--spv-heading);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: var(--spv-forest);
  margin: 0 0 0.6em;
}

h1 {
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  font-weight: 700;
}

h2 {
  font-size: clamp(2rem, 3.6vw, 3rem);
}

h3 {
  font-size: clamp(1.5rem, 2.4vw, 1.95rem);
}

p {
  margin: 0 0 1.1rem;
}

a {
  color: var(--spv-brass-deep);
  text-decoration: none;
  transition: color 0.25s ease;
}

a:hover,
a:focus-visible {
  color: var(--spv-forest);
}

:focus-visible {
  outline: 2px solid var(--spv-brass-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

.section-pad {
  padding: clamp(4rem, 8vw, 7.5rem) 0;
}

.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--spv-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--spv-brass-deep);
  margin-bottom: 1.1rem;
}

.section-kicker::before {
  content: '';
  width: 34px;
  height: 1px;
  background: var(--spv-brass-deep);
}

.section-title {
  max-width: 22ch;
  margin-bottom: 1.2rem;
}

.section-lead {
  max-width: 62ch;
  font-size: 1.075rem;
  color: var(--spv-ash);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.95rem 1.9rem;
  border-radius: 999px;
  font-family: var(--spv-body);
  font-weight: 600;
  font-size: 0.94rem;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-brass {
  background-color: var(--spv-brass);
  color: var(--spv-ink);
}

.btn-brass:hover,
.btn-brass:focus-visible {
  background-color: var(--spv-brass-soft);
  color: var(--spv-ink);
}

.btn-line {
  background: transparent;
  color: var(--spv-cream);
  border-color: rgba(242, 235, 219, 0.5);
}

.btn-line:hover,
.btn-line:focus-visible {
  background-color: rgba(242, 235, 219, 0.12);
  color: var(--spv-cream);
  border-color: var(--spv-cream);
}

.btn-forest {
  background-color: var(--spv-forest);
  color: var(--spv-cream);
}

.btn-forest:hover,
.btn-forest:focus-visible {
  background-color: var(--spv-moss);
  color: var(--spv-cream);
}

.eyebrow-rule {
  width: 54px;
  height: 2px;
  background: var(--spv-brass);
  margin-bottom: 1.4rem;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  padding: 1rem 0;
  transition: background-color 0.35s ease, box-shadow 0.35s ease, padding 0.35s ease;
  background: linear-gradient(180deg, rgba(16, 28, 23, 0.7), rgba(16, 28, 23, 0));
}

.site-header.is-pinned {
  background-color: rgba(16, 28, 23, 0.96);
  box-shadow: 0 12px 32px -22px rgba(0, 0, 0, 0.8);
  padding: 0.6rem 0;
}

.site-header .navbar {
  padding: 0;
}

.site-header .brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--spv-cream);
  font-family: var(--spv-heading);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.site-header .brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.site-header .brand-text small {
  font-family: var(--spv-body);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--spv-brass-soft);
}

.site-header .nav-link {
  color: rgba(242, 235, 219, 0.88);
  font-size: 0.94rem;
  font-weight: 500;
  padding: 0.5rem 1rem;
  letter-spacing: 0.02em;
}

.site-header .nav-link:hover,
.site-header .nav-link:focus-visible {
  color: var(--spv-brass-soft);
}

.site-header .header-meta {
  display: flex;
  align-items: center;
  gap: 1.35rem;
  color: var(--spv-cream);
  font-size: 0.86rem;
}

.site-header .header-meta span,
.site-header .header-meta a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: inherit;
}

.site-header .header-meta a:hover {
  color: var(--spv-brass-soft);
}

.site-header .header-meta i {
  color: var(--spv-brass-soft);
}

.hero-slider {
  position: relative;
  min-height: 92vh;
  overflow: hidden;
  background-color: var(--spv-ink);
  color: var(--spv-cream);
  display: flex;
  align-items: stretch;
}

.hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 1s ease, transform 1.6s ease;
  pointer-events: none;
}

.hero-slide.is-active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  padding: clamp(6rem, 12vh, 9rem) 0 clamp(4rem, 8vh, 6rem);
}

.hero-content .hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--spv-brass-soft);
  margin-bottom: 1.6rem;
}

.hero-content .hero-tag::before {
  content: '';
  width: 40px;
  height: 1px;
  background: var(--spv-brass-soft);
}

.hero-content h1 {
  color: var(--spv-cream);
  margin-bottom: 1.4rem;
  text-wrap: balance;
}

.hero-content p {
  font-size: 1.1rem;
  max-width: 54ch;
  color: rgba(242, 235, 219, 0.85);
  margin-bottom: 2rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.hero-nav {
  position: absolute;
  right: clamp(1.2rem, 4vw, 3rem);
  bottom: clamp(2rem, 5vh, 3rem);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.hero-arrow {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(242, 235, 219, 0.45);
  background: rgba(16, 28, 23, 0.35);
  color: var(--spv-cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.hero-arrow:hover,
.hero-arrow:focus-visible {
  background: var(--spv-brass);
  color: var(--spv-ink);
  border-color: var(--spv-brass);
}

.hero-dots {
  position: absolute;
  left: clamp(1.2rem, 4vw, 3rem);
  bottom: clamp(2rem, 5vh, 3rem);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.hero-dot {
  width: 42px;
  height: 3px;
  border: 0;
  background: rgba(242, 235, 219, 0.35);
  cursor: pointer;
  transition: background 0.3s ease;
  padding: 0;
}

.hero-dot.is-active {
  background: var(--spv-brass-soft);
}

.intro-panel {
  background: var(--spv-panel);
  border-radius: var(--spv-radius-lg);
  box-shadow: var(--spv-shadow);
  padding: clamp(2rem, 4vw, 3.2rem);
  margin-top: -90px;
  position: relative;
  z-index: 4;
}

.stat-block {
  text-align: center;
  padding: 1.2rem 0.5rem;
  border-right: 1px solid var(--spv-line);
}

.stat-block:last-child {
  border-right: 0;
}

.stat-block strong {
  display: block;
  font-family: var(--spv-heading);
  font-size: clamp(2.2rem, 3.4vw, 2.9rem);
  font-weight: 700;
  color: var(--spv-forest);
  line-height: 1;
  margin-bottom: 0.4rem;
}

.stat-block span {
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: var(--spv-ash);
}

.split-intro {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.split-intro__media {
  border-radius: var(--spv-radius-lg);
  overflow: hidden;
  box-shadow: var(--spv-shadow-lg);
  aspect-ratio: 4 / 5;
}

.split-intro__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}

.feature-strip__item {
  background: var(--spv-panel);
  border-radius: var(--spv-radius);
  padding: 1.6rem 1.4rem;
  box-shadow: var(--spv-shadow-sm);
  border: 1px solid var(--spv-line);
}

.feature-strip__item i {
  font-size: 1.4rem;
  color: var(--spv-brass-deep);
  margin-bottom: 0.9rem;
  display: inline-block;
}

.feature-strip__item h4 {
  font-size: 1.15rem;
  margin-bottom: 0.4rem;
}

.feature-strip__item p {
  font-size: 0.92rem;
  color: var(--spv-ash);
  margin: 0;
}

.amenity-card {
  height: 100%;
  background: var(--spv-panel);
  border-radius: var(--spv-radius-lg);
  padding: 2.2rem 1.9rem;
  box-shadow: var(--spv-shadow-sm);
  border: 1px solid var(--spv-line);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.amenity-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--spv-shadow);
}

.amenity-card__icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: var(--spv-cream);
  color: var(--spv-forest);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  margin-bottom: 1.4rem;
}

.amenity-card h3 {
  font-size: 1.45rem;
  margin-bottom: 0.5rem;
}

.amenity-card p {
  font-size: 0.96rem;
  color: var(--spv-ash);
  margin: 0;
}

.room-card {
  background: var(--spv-panel);
  border-radius: var(--spv-radius-lg);
  overflow: hidden;
  box-shadow: var(--spv-shadow-sm);
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.room-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--spv-shadow);
}

.room-card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--spv-cream);
}

.room-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.room-card:hover .room-card__media img {
  transform: scale(1.06);
}

.room-card__body {
  padding: 1.7rem 1.6rem 1.9rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.room-card__price {
  font-family: var(--spv-heading);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--spv-brass-deep);
}

.room-card__price small {
  font-family: var(--spv-body);
  font-size: 0.8rem;
  color: var(--spv-ash);
  font-weight: 500;
}

.room-card__body h3 {
  font-size: 1.5rem;
  margin: 0.35rem 0 0.7rem;
}

.room-card__body p {
  font-size: 0.94rem;
  color: var(--spv-ash);
  flex-grow: 1;
}

.room-card__link {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--spv-forest);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.room-card__link:hover {
  color: var(--spv-brass-deep);
  gap: 0.8rem;
}

.dining-band {
  position: relative;
  color: var(--spv-cream);
  background-size: cover;
  background-position: center;
}

.dining-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(16, 28, 23, 0.88) 0%, rgba(16, 28, 23, 0.55) 60%, rgba(16, 28, 23, 0.3) 100%);
}

.dining-band .dining-band__inner {
  position: relative;
  z-index: 2;
  max-width: 620px;
  padding: clamp(4.5rem, 10vw, 8rem) 0;
}

.dining-band h2 {
  color: var(--spv-cream);
}

.dining-band p {
  color: rgba(242, 235, 219, 0.85);
}

.menu-note {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  margin-top: 1.8rem;
  font-size: 0.88rem;
  color: var(--spv-brass-soft);
}

.menu-note span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.testimonial-card {
  background: var(--spv-panel);
  border-radius: var(--spv-radius-lg);
  padding: 2.2rem 2rem;
  border: 1px solid var(--spv-line);
  box-shadow: var(--spv-shadow-sm);
  height: 100%;
}

.testimonial-card__stars {
  color: var(--spv-brass-deep);
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  margin-bottom: 1rem;
}

.testimonial-card blockquote {
  font-family: var(--spv-heading);
  font-size: 1.25rem;
  line-height: 1.45;
  color: var(--spv-forest);
  margin: 0 0 1.3rem;
}

.testimonial-card__author {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.testimonial-card__author img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--spv-cream);
}

.testimonial-card__author strong {
  display: block;
  font-size: 0.95rem;
  color: var(--spv-ink);
}

.testimonial-card__author span {
  font-size: 0.82rem;
  color: var(--spv-ash);
}

.location-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.location-block__map {
  border-radius: var(--spv-radius-lg);
  overflow: hidden;
  box-shadow: var(--spv-shadow);
  aspect-ratio: 4 / 3;
}

.location-block__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.contact-list {
  list-style: none;
  padding: 0;
  margin: 1.8rem 0 0;
}

.contact-list li {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--spv-line);
  font-size: 0.96rem;
}

.contact-list li:last-child {
  border-bottom: 0;
}

.contact-list i {
  color: var(--spv-brass-deep);
  margin-top: 0.25rem;
  width: 18px;
  text-align: center;
}

.newsletter-band {
  background: var(--spv-forest);
  color: var(--spv-cream);
  border-radius: var(--spv-radius-lg);
  padding: clamp(2.5rem, 5vw, 4rem);
  position: relative;
  overflow: hidden;
}

.newsletter-band::after {
  content: '';
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 169, 97, 0.35), transparent 70%);
  top: -80px;
  right: -60px;
}

.newsletter-band h2 {
  color: var(--spv-cream);
  margin-bottom: 0.8rem;
}

.newsletter-band p {
  color: rgba(242, 235, 219, 0.82);
  max-width: 52ch;
}

.newsletter-form {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-top: 1.4rem;
  position: relative;
  z-index: 2;
}

.newsletter-form .form-control {
  flex: 1 1 240px;
  border-radius: 999px;
  border: 1px solid rgba(242, 235, 219, 0.35);
  background: rgba(242, 235, 219, 0.08);
  color: var(--spv-cream);
  padding: 0.95rem 1.4rem;
}

.newsletter-form .form-control::placeholder {
  color: rgba(242, 235, 219, 0.6);
}

.newsletter-form .form-control:focus {
  background: rgba(242, 235, 219, 0.14);
  border-color: var(--spv-brass);
  color: var(--spv-cream);
  box-shadow: none;
}

.site-footer {
  background: var(--spv-ink);
  color: rgba(242, 235, 219, 0.78);
  padding: clamp(3.5rem, 7vw, 5.5rem) 0 2rem;
}

.site-footer h4 {
  color: var(--spv-cream);
  font-family: var(--spv-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 1.3rem;
}

.site-footer a {
  color: rgba(242, 235, 219, 0.78);
  font-size: 0.92rem;
}

.site-footer a:hover {
  color: var(--spv-brass-soft);
}

.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer ul li {
  margin-bottom: 0.65rem;
}

.site-footer .footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--spv-heading);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--spv-cream);
  margin-bottom: 1rem;
}

.site-footer .footer-note {
  font-size: 0.88rem;
  color: rgba(242, 235, 219, 0.6);
  max-width: 34ch;
}

.site-footer .footer-legal {
  border-top: 1px solid rgba(242, 235, 219, 0.14);
  margin-top: 2.6rem;
  padding-top: 1.6rem;
  font-size: 0.82rem;
  color: rgba(242, 235, 219, 0.55);
}

.site-footer .social-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(242, 235, 219, 0.25);
  font-size: 0.85rem;
  margin-right: 0.4rem;
}

.site-footer .social-pill:hover {
  border-color: var(--spv-brass-soft);
  color: var(--spv-brass-soft);
}

.back-top {
  position: fixed;
  right: 1.4rem;
  bottom: 1.4rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--spv-forest);
  color: var(--spv-cream);
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--spv-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease, background 0.25s ease;
  z-index: 1040;
}

.back-top.is-shown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-top:hover {
  background: var(--spv-brass);
  color: var(--spv-ink);
}

.form-control,
.form-select {
  border-radius: 12px;
  border: 1px solid var(--spv-line);
  padding: 0.85rem 1rem;
  font-size: 0.96rem;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--spv-brass-deep);
  box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.25);
}

.form-label {
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--spv-forest);
}

.cookie-vault {
  position: fixed;
  left: 50%;
  bottom: 1.4rem;
  transform: translate(-50%, 150%);
  width: min(960px, calc(100% - 1.8rem));
  z-index: 1090;
  opacity: 0;
  visibility: hidden;
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s ease, visibility 0.4s ease;
}

.cookie-vault.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
  visibility: visible;
}

.cookie-vault__panel {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.6rem;
  padding: 1.5rem 1.7rem;
  background: var(--spv-ink);
  color: var(--spv-cream);
  border-radius: var(--spv-radius-lg);
  box-shadow: 0 32px 70px -32px rgba(0, 0, 0, 0.75);
  border: 1px solid rgba(201, 169, 97, 0.35);
}

.cookie-vault__crest {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: radial-gradient(circle at 30% 30%, rgba(224, 200, 138, 0.35), rgba(201, 169, 97, 0.08));
  border: 1px solid rgba(201, 169, 97, 0.4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--spv-brass-soft);
  font-size: 1.4rem;
}

.cookie-vault__title {
  font-family: var(--spv-heading);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--spv-cream);
  margin: 0 0 0.25rem;
  line-height: 1.2;
}

.cookie-vault__text {
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(242, 235, 219, 0.78);
  margin: 0;
}

.cookie-vault__policy {
  display: inline-block;
  margin-top: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--spv-brass-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cookie-vault__policy:hover,
.cookie-vault__policy:focus-visible {
  color: var(--spv-cream);
}

.cookie-vault__actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.cookie-vault__btn {
  padding: 0.75rem 1.4rem;
  border-radius: 999px;
  font-family: var(--spv-body);
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  white-space: nowrap;
}

.cookie-vault__btn--decline {
  background: transparent;
  color: rgba(242, 235, 219, 0.85);
  border: 1px solid rgba(242, 235, 219, 0.25);
}

.cookie-vault__btn--decline:hover,
.cookie-vault__btn--decline:focus-visible {
  border-color: var(--spv-cream);
  color: var(--spv-cream);
}

.cookie-vault__btn--accept {
  background: var(--spv-brass);
  color: var(--spv-ink);
  border: 1px solid var(--spv-brass);
}

.cookie-vault__btn--accept:hover,
.cookie-vault__btn--accept:focus-visible {
  background: var(--spv-brass-soft);
  border-color: var(--spv-brass-soft);
}

@media (max-width: 991.98px) {
  .site-header .header-meta {
    display: none;
  }

  .split-intro,
  .location-block {
    grid-template-columns: 1fr;
  }

  .feature-strip {
    grid-template-columns: 1fr;
  }

  .stat-block {
    border-right: 0;
    border-bottom: 1px solid var(--spv-line);
  }

  .stat-block:last-child {
    border-bottom: 0;
  }

  .cookie-vault__panel {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      'crest copy'
      'actions actions';
  }

  .cookie-vault__crest {
    grid-area: crest;
  }

  .cookie-vault__copy {
    grid-area: copy;
  }

  .cookie-vault__actions {
    grid-area: actions;
    justify-content: flex-start;
  }
}

@media (max-width: 575.98px) {
  .hero-content {
    padding-top: 7rem;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .cookie-vault__panel {
    grid-template-columns: 1fr;
    grid-template-areas:
      'crest'
      'copy'
      'actions';
    text-align: left;
  }

  .cookie-vault__crest {
    display: none;
  }

  .cookie-vault__actions {
    display: grid;
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }

  html {
    scroll-behavior: auto;
  }
}

/* QA_GRID_COLUMN_FIX .split-intro.row */
.split-intro.row{--bs-gutter-x:0;--bs-gutter-y:0;margin-left:0;margin-right:0}
.split-intro.row>:is([class^="col-"],[class*=" col-"]){width:100%;max-width:100%;min-width:0;flex:none;padding-left:0;padding-right:0;margin-top:0}

/* QA_ABOUT_HERO_HEADER_CLEARANCE: fixed header must not overlap the page hero */
.hero-photo {
  padding-top: clamp(8.5rem, 10vw, 11rem);
  background-size: cover;
  background-position: center;
}

@media (max-width: 991.98px) {
  .hero-photo {
    padding-top: 9rem;
  }
}

@media (max-width: 575.98px) {
  .hero-photo {
    padding-top: 9.75rem;
  }
}

/* QA_ABOUT_HERO_CONTRAST: text over dark hero photograph */
.hero-photo h1 {
  color: var(--spv-cream, #f2ebdb);
}

.hero-photo .section-lead,
.hero-photo p {
  color: rgba(242, 235, 219, 0.94);
}

.hero-photo .hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--spv-brass-soft, #e0c88a);
  margin-bottom: 1.6rem;
}

.hero-photo .hero-tag::before {
  content: '';
  width: 40px;
  height: 1px;
  background: var(--spv-brass-soft, #e0c88a);
}

/* QA_STAT_BAND_CONTRAST: statistics copy over dark photo band */
.stat-band {
  background-size: cover;
  background-position: center;
}

.stat-band .stat-block p {
  color: rgba(242, 235, 219, 0.94);
}

/* QA_BTN_LINE_ON_LIGHT: line button used on a light page background */
.btn-line--onlight {
  color: var(--spv-forest, #1b3428);
  border-color: rgba(27, 52, 40, 0.55);
}

.btn-line--onlight:hover,
.btn-line--onlight:focus-visible {
  background-color: rgba(27, 52, 40, 0.08);
  color: var(--spv-forest, #1b3428);
  border-color: var(--spv-forest, #1b3428);
}

/* QA_FOOTER_KICKER_CONTRAST: brass section kickers inside the dark footer */
.site-footer .section-kicker {
  color: var(--spv-brass-soft, #e0c88a);
  display: block;
}

.site-footer .section-kicker::before {
  background: var(--spv-brass-soft, #e0c88a);
}

/* keep footer kickers on one line with their rule, only colour changed */
.site-footer .section-kicker {
  display: inline-flex;
}

/* QA_FIX: footer kicker contrast on dark footer background */
.site-footer .section-kicker {
  color: var(--spv-brass-soft);
}

.site-footer .section-kicker::before {
  background: var(--spv-brass-soft);
}

/* QA_FIX: mobile fixed-header clearance (hero no longer sits under the header) */
@media (max-width: 991.98px) {
  main {
    padding-top: var(--spv-header-h, 116px);
  }

  .site-header {
    background-image: none;
    background-color: rgba(16, 28, 23, 0.97);
  }
}

/* QA_COOKIES_HERO_KICKER_CONTRAST: brass kicker sitting over the dark hero photograph */
.legal-hero .section-kicker {
  color: var(--spv-brass-soft, #e0c88a);
}

.legal-hero .section-kicker::before {
  background: var(--spv-brass-soft, #e0c88a);
}

/* QA_COOKIES_LINK_CONTRAST: darker brass so body links clear 4.5:1 on white/bone panels */
.legal-page a {
  color: #6f5522;
}

.legal-page a:hover,
.legal-page a:focus-visible {
  color: var(--spv-forest, #1b3428);
}

.legal-page a:focus-visible {
  outline-color: #6f5522;
}

/* ============================================================
   QA FIXES (homepage)
   ============================================================ */

/* QA_FIX_COOKIE_VISIBLE: consent banner is visible from first paint,
   the inline script still adds/removes .is-visible for its animation. */
.cookie-vault:not([hidden]) {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* QA_FIX_NEWSLETTER_CONTRAST: form label + policy link on the dark band */
.newsletter-band .form-label,
.newsletter-form .form-label {
  color: #f2ebdb;
}

.newsletter-band .menu-note a,
.newsletter-form .menu-note a {
  color: #e0c88a;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.newsletter-band .menu-note a:hover,
.newsletter-band .menu-note a:focus-visible {
  color: #fdf8ec;
}

/* QA_FIX_NEWSLETTER_EYEBROW: the eyebrow carried text inside a 2px brass bar,
   so the label is rendered as a proper brass rule + label instead. */
.newsletter-band .eyebrow-rule {
  width: auto;
  height: auto;
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #e0c88a;
  line-height: 1.4;
  margin-bottom: 1.4rem;
}

.newsletter-band .eyebrow-rule::before {
  content: '';
  flex: 0 0 auto;
  width: 40px;
  height: 1px;
  background: #e0c88a;
}

/* QA_FIX_NEWSLETTER_STATUS: inline confirmation for the subscribe form */
.newsletter-status {
  flex: 1 1 100%;
  margin: 0.4rem 0 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: #e0c88a;
}

/* QA_FIX_BRASS_BUTTON: keep an opaque brass background so dark label text
   always sits on brass, never on the dark hero photograph. */
.btn-brass,
a.btn-brass,
.hero-actions .btn.btn-brass {
  background-color: #c9a961;
  background-image: none;
  color: #101c17;
  border-color: #c9a961;
}

/* QA_FIX_STAT_BAND: statistics copy on the dark photographic band */
.stat-band .stat-block p,
.stat-band .stat-block {
  color: rgba(242, 235, 219, 0.94);
}

.stat-band .stat-block {
  border-right-color: rgba(242, 235, 219, 0.18);
}

/* QA_FIX_MOBILE_HEADER_CLEARANCE: the fixed header is ~150px tall on small
   screens, so push the page content clear of it and paint the gap dark. */
@media (max-width: 991.98px) {
  :root {
    --spv-header-h: 152px;
  }

  main {
    padding-top: 152px;
  }

  .hero-slider {
    box-shadow: 0 -152px 0 0 #101c17;
  }
}

/* ============================================================
   QA FIXES (terms page)
   ============================================================ */

/* QA_FIX_SERVICES_TOGGLE_AS_BUTTON: the Services dropdown no longer needs a
   placeholder href="#"; it is a real button toggling the submenu. Keep the
   visual styling identical to the neighbouring nav links. */
.site-header .navbar-nav > .nav-item > button.nav-link.dropdown-toggle {
  background: none;
  background-color: transparent;
  border: 0;
  font-family: var(--spv-body);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(242, 235, 219, 0.88);
  cursor: pointer;
  text-align: left;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.site-header .navbar-nav > .nav-item > button.nav-link.dropdown-toggle:hover,
.site-header .navbar-nav > .nav-item > button.nav-link.dropdown-toggle:focus-visible,
.site-header .navbar-nav > .nav-item > button.nav-link.dropdown-toggle.show {
  color: var(--spv-brass-soft);
  background-color: transparent;
}

/* QA_FIX_LEGAL_HERO_KICKER: brass kicker sits on the dark hero photograph,
   so use the light brass tone for a readable contrast ratio. */
.legal-hero .section-kicker {
  color: var(--spv-brass-soft, #e0c88a);
}

.legal-hero .section-kicker::before {
  background: var(--spv-brass-soft, #e0c88a);
}

/* QA_FIX_LEGAL_LINK_CONTRAST: body/contact links inside the legal content
   columns must clear 4.5:1 on the white and bone panels. */
.legal-page .bg-white a,
.legal-page .contact-list a,
.legal-page a[href^="mailto:"] {
  color: #6f5522;
}

.legal-page .bg-white a:hover,
.legal-page .bg-white a:focus-visible,
.legal-page .contact-list a:hover,
.legal-page .contact-list a:focus-visible,
.legal-page a[href^="mailto:"]:hover,
.legal-page a[href^="mailto:"]:focus-visible {
  color: var(--spv-forest, #1b3428);
}

/* QA_FIX_LEGAL_HERO_HEADER_CLEARANCE: fixed header must not cover the hero copy
   on small screens (mobile header ≈ 150px tall). */
@media (max-width: 991.98px) {
  .legal-hero {
    padding-top: clamp(2rem, 5vw, 3rem);
  }
}

/* ============================================================
   QA FIXES (thank-you page)
   ============================================================ */

/* QA_TY_HERO_CONTRAST: the thank-you hero is a photographic band with a dark
   overlay, so all hero copy uses the light cream/brass palette. */
.ty-hero {
  background-size: cover;
  background-position: center;
  background-color: #101c17;
  color: #f2ebdb;
}

.ty-hero h1,
.ty-hero h2 {
  color: #f2ebdb;
}

.ty-hero p,
.ty-hero .section-lead {
  color: rgba(242, 235, 219, 0.94);
}

.ty-hero .hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #e0c88a;
  margin-bottom: 1.4rem;
}

.ty-hero .hero-tag::before {
  content: '';
  flex: 0 0 auto;
  width: 40px;
  height: 1px;
  background: #e0c88a;
}

/* QA_TY_STAT_BAND_CONTRAST: headings and copy inside the dark stat band */
.stat-band .stat-block h1,
.stat-band .stat-block h2,
.stat-band .stat-block h3,
.stat-band .stat-block h4,
.stat-band .stat-block h5,
.stat-band .stat-block strong {
  color: #f2ebdb;
}

.stat-band .stat-block p,
.stat-band .stat-block li,
.stat-band .stat-block span {
  color: rgba(242, 235, 219, 0.94);
}

.stat-band .stat-block a {
  color: #e6d29b;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.stat-band .stat-block a:hover,
.stat-band .stat-block a:focus-visible {
  color: #fdf8ec;
}

/* QA_TY_CONTACT_LINK_CONTRAST: brass links on the bone background were at
   4.43:1, so use the deeper brass tone inside contact lists. */
.contact-list a,
.contact-list a[href^="mailto:"] {
  color: #6f5522;
}

.contact-list a:hover,
.contact-list a:focus-visible {
  color: #1b3428;
}

/* QA_TY_MOBILE_HEADER_CLEARANCE: the fixed header is ~150px tall on small
   screens; shift the hero band clear of it. */
@media (max-width: 991.98px) {
  .ty-hero {
    margin-top: 4.5rem;
  }
}

@media (max-width: 575.98px) {
  .ty-hero {
    margin-top: 4.5rem;
  }
}

/* QA_FIX_LOCATION_MAP_BLANK: .location-block is a 2-column grid; on tablet and
   mobile it must collapse to a single column and the map card must take the
   full width so the Google Maps iframe is actually visible. */
.location-block {
  grid-template-columns: 1fr;
  width: 100%;
}

.location-block__map {
  width: 100%;
  min-width: 0;
}

.location-block__map.ratio {
  --bs-aspect-ratio: 66.6667%;
}

.location-block__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

@media (max-width: 991.98px) {
  .location-block {
    display: block;
  }

  .location-block__map {
    margin: 0 0 1.75rem;
  }

  .location-block__map:last-child {
    margin-bottom: 0;
  }
}

@media (max-width: 575.98px) {
  .location-block__map.ratio {
    --bs-aspect-ratio: 85%;
  }
}

/* QA_FIX_LOCATION_MAP_EMPTY: the map card is the only child of .location-block,
   but .location-block keeps a 2-column grid (1fr 1fr) with a large gap, so the
   card was squeezed into the left half of the column and the Bootstrap .ratio
   wrapper's absolute iframe was clipped/offset — leaving a pale empty panel.
   Collapse to a single full-width track and give the iframe an explicit
   absolutely positioned fill so the Google Maps embed always renders. */
.location-block {
  display: block;
  grid-template-columns: none;
}

.location-block > .location-block__map {
  width: 100%;
  max-width: 100%;
}

.location-block .location-block__map.ratio {
  position: relative;
  --bs-aspect-ratio: 66.6667%;
}

.location-block .location-block__map.ratio > iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* The footer reuses .location-block for its map + "Find us" split: keep two
   balanced tracks there by relying on the Bootstrap column widths instead. */
.site-footer .location-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

/* ============================================================
   QA_FIX_FOOTER_MOBILE_CENTER: on small screens the footer's
   "Find us" column and the bottom legal block hugged the left edge
   because the global `.location-block { display:block }` override made
   the map wrapper shrink-wrap to its aspect-ratio width, so the
   following column/rows only used part of the footer width. Give the
   footer rows full width and keep their normal Bootstrap gutters.
   ============================================================ */
@media (max-width: 991.98px) {
  .site-footer .row {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .site-footer .row > [class^="col-"],
  .site-footer .row > [class*=" col-"] {
    min-width: 0;
    flex: 0 0 100%;
    max-width: 100%;
  }

  .site-footer .location-block,
  .site-footer .location-block__map {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .site-footer .footer-legal {
    width: 100%;
  }

  .site-footer .footer-legal > div {
    width: 100%;
  }
}

/* QA_FIX_GALLERY_CARD_CAPTION_OVERLAP: the gallery cards' media wrapper relied on
   `aspect-ratio` alone, so the photo box and the caption block below it could
   collapse into each other at the bottom edge (captions clipped against the
   image). Give the media box a definite, non-collapsing block size and keep the
   caption body fully outside it on every page that reuses .room-card. */
.room-card__media {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 100%;
  min-height: 0;
  line-height: 0;
  overflow: hidden;
  isolation: isolate;
}

.room-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.room-card__body {
  position: relative;
  z-index: 1;
  flex: 1 0 auto;
  isolation: isolate;
}

.room-card__body > :first-child {
  margin-top: 0;
}

.room-card__body > :last-child {
  margin-bottom: 0;
}

@supports not (aspect-ratio: 1 / 1) {
  .room-card__media {
    height: 0;
    padding-bottom: 75%;
  }

  .room-card__media img {
    position: absolute;
    inset: 0;
  }
}

/* QA_FIX_GALLERY_CARD_CAPTION_OVERLAP_V2: narrow the previous gallery fix to
   layout only. The stacking-context properties (isolation / z-index) and the
   first/last-child margin resets were unnecessary for the caption overlap and
   altered paint order on other pages that reuse .room-card, so they are
   neutralised here. The media wrapper keeps a definite, non-collapsing block
   size so the photo area and the caption body below it never share space. */
.room-card__media {
  position: static;
  display: block;
  flex: 0 0 auto;
  width: 100%;
  min-height: 0;
  line-height: 0;
  overflow: hidden;
  isolation: auto;
}

.room-card__body {
  position: static;
  z-index: auto;
  flex: 1 0 auto;
  isolation: auto;
}

.room-card__body > :first-child {
  margin-top: revert;
}

.room-card__body > :last-child {
  margin-bottom: revert;
}

/* QA_FIX_GALLERY_CARD_CAPTION_OVERLAP_V3: final, minimal-scope correction.
   The caption-overlap defect came from the media wrapper having only an
   aspect-ratio and no definite block box, so the photo area and the caption
   body below it could share the same bottom edge. Restore every property the
   earlier passes touched on .room-card__body (they affected unrelated pages
   that reuse .room-card) and keep only the media-box sizing, which is local
   to the gallery cards on both service pages. */
.room-card__body {
  position: revert;
  z-index: revert;
  isolation: revert;
  flex-grow: 1;
  flex-shrink: revert;
  flex-basis: revert;
}

.room-card__body > :first-child {
  margin-top: revert;
}

.room-card__body > :last-child {
  margin-bottom: revert;
}

.room-card .room-card__media,
main .room-card > .room-card__media {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  min-height: 0;
  line-height: 0;
  overflow: hidden;
}

.room-card .room-card__media > img,
main .room-card > .room-card__media > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* QA_FIX_GALLERY_CARD_CAPTION_OVERLAP_FINAL: strip every earlier attempt's
   declarations from .room-card__body so the caption block keeps its original,
   unmodified box model on both service pages. Returning these properties to
   their authored values removes the paint-order / spacing side effects that
   showed up on unrelated elements (hero actions, overview kicker and lead). */
.room-card__body {
  position: static;
  z-index: auto;
  isolation: auto;
  flex: 1 1 auto;
}

.room-card__body > :first-child {
  margin-top: 0;
}

.room-card__body > :last-child {
  margin-bottom: 0;
}

.room-card__body > h3:first-child {
  margin-top: 0.35rem;
}

.room-card__body > p:last-child {
  margin-bottom: 0;
}

/* The gallery media box is the only thing that needs changing: give it a
   definite height so the photo area ends where the caption block begins and
   the caption text can never be clipped by the image. */
.room-card > .room-card__media {
  display: block;
  height: auto;
  min-height: 0;
  max-height: none;
  line-height: 0;
  overflow: hidden;
}

.room-card > .room-card__media > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  vertical-align: bottom;
}

/* ============================================================
   QA_FIX_FOOTER_CONTACT_LINK_CONTRAST: the messenger links (Viber,
   WhatsApp) in the footer "Reach us" contact list were inheriting the
   dark-brass body link colour (#6f5522) meant for light panels, which
   measured 2.5:1 against the dark footer. Give these footer-only
   contact links the cream/brass-soft palette so they are legible.
   ============================================================ */
.site-footer .contact-list a {
  color: #f2ebdb;
}

.site-footer .contact-list a:hover,
.site-footer .contact-list a:focus-visible {
  color: var(--spv-brass-soft, #e0c88a);
}

.site-footer .contact-list i {
  color: var(--spv-brass-soft, #e0c88a);
}

/* ============================================================
   QA_FIX_FOOTER_MESSENGER_LINK_CONTRAST: messenger links (Viber,
   WhatsApp) in the footer "Reach us" list were measured at 2.5:1
   (dark brass #6f5522 on the dark footer). Scope the correction to
   just these footer messenger links: cream text, brass-soft on hover.
   Uses only persistent data attributes, no temporary build IDs.
   ============================================================ */
.site-footer .contact-list a[data-messenger],
.site-footer .contact-list a[href^="mailto:"] {
  color: #f2ebdb;
  text-decoration: underline;
  text-decoration-color: rgba(224, 200, 138, 0.55);
  text-underline-offset: 3px;
}

.site-footer .contact-list a[data-messenger]:hover,
.site-footer .contact-list a[data-messenger]:focus-visible,
.site-footer .contact-list a[href^="mailto:"]:hover,
.site-footer .contact-list a[href^="mailto:"]:focus-visible {
  color: var(--spv-brass-soft, #e0c88a);
  text-decoration-color: currentColor;
}

.site-footer .contact-list li[data-messenger-item] i {
  color: var(--spv-brass-soft, #e0c88a);
}

/* ============================================================
   QA_HOME_CONTACT_MAILTO_CONTRAST: the body/contact mailto links
   inside the white split-intro panel resolved to rgb(140,111,49)
   (3.48:1 on white). Scope the darker brass to mailto links that
   sit directly in page content sections — not footers, not the
   dark newsletter band — so the palette stays brass but legible.
   ============================================================ */
main > section a[href^="mailto:"]:not(.btn) {
  color: #6f5522;
}

main > section a[href^="mailto:"]:not(.btn):hover,
main > section a[href^="mailto:"]:not(.btn):focus-visible {
  color: var(--spv-forest, #1b3428);
}