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

:root {
  --ink: #14110f;
  --ink-soft: #2f2925;
  --ink-muted: #5d544d;
  --sand: #f2ece2;
  --ivory: #fbf8f3;
  --brass: #a97c3f;
  --brass-deep: #7d5a28;
  --sea: #1d3a3c;
  --sea-deep: #122628;
  --line: rgba(20, 17, 15, 0.14);
  --line-light: rgba(251, 248, 243, 0.22);
  --shadow-soft: 0 18px 40px -26px rgba(20, 17, 15, 0.5);
  --shadow-deep: 0 40px 80px -40px rgba(20, 17, 15, 0.6);
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 26px;
  --display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --text: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --header-height: 88px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--ivory);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1rem;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--display);
  color: var(--ink);
  line-height: 1.14;
  letter-spacing: -0.01em;
  margin-bottom: 0.6em;
}

h1 {
  font-size: clamp(2.4rem, 5.4vw, 4.35rem);
  font-weight: 600;
}

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

h3 {
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  font-weight: 600;
}

h4 {
  font-size: 1.22rem;
  font-weight: 600;
}

p {
  color: var(--ink-soft);
  margin-bottom: 1.1rem;
}

p:last-child {
  margin-bottom: 0;
}

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

a:hover,
a:focus {
  color: var(--ink);
}

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

.container,
.container-fluid {
  position: relative;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--text);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--brass-deep);
  margin-bottom: 1.1rem;
}

.eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background-color: currentColor;
  display: inline-block;
}

.eyebrow--light {
  color: #f0dcb4;
}

.section {
  padding: clamp(3.5rem, 7vw, 6.5rem) 0;
  position: relative;
}

.section--tight {
  padding: clamp(2.5rem, 4.5vw, 4rem) 0;
}

.section--sand {
  background-color: var(--sand);
}

.section--dark {
  background-color: var(--sea-deep);
  color: var(--ivory);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 {
  color: var(--ivory);
}

.section--dark p {
  color: rgba(251, 248, 243, 0.86);
}

.section--photo {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--ivory);
}

.section--photo h1,
.section--photo h2,
.section--photo h3,
.section--photo p {
  color: var(--ivory);
}

.section-lead {
  max-width: 62ch;
  font-size: 1.06rem;
  color: var(--ink-muted);
}

.section--dark .section-lead,
.section--photo .section-lead {
  color: rgba(251, 248, 243, 0.84);
}

.divider-brass {
  width: 72px;
  height: 2px;
  background-color: var(--brass);
  border: 0;
  margin: 1.5rem 0 1.75rem;
  opacity: 1;
}

.btn {
  border-radius: 999px;
  font-family: var(--text);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.85rem 1.9rem;
  border: 1px solid transparent;
  transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.btn:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}

.btn-brass {
  background-color: var(--brass);
  color: #fffaf0;
}

.btn-brass:hover,
.btn-brass:focus {
  background-color: var(--brass-deep);
  color: #fffaf0;
  transform: translateY(-2px);
}

.btn-outline-ink {
  background-color: transparent;
  border-color: rgba(20, 17, 15, 0.4);
  color: var(--ink);
}

.btn-outline-ink:hover,
.btn-outline-ink:focus {
  background-color: var(--ink);
  border-color: var(--ink);
  color: var(--ivory);
}

.btn-outline-light {
  background-color: transparent;
  border-color: rgba(251, 248, 243, 0.6);
  color: var(--ivory);
}

.btn-outline-light:hover,
.btn-outline-light:focus {
  background-color: var(--ivory);
  border-color: var(--ivory);
  color: var(--ink);
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1040;
  background-color: rgba(251, 248, 243, 0.96);
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.site-header.is-scrolled {
  box-shadow: 0 14px 34px -28px rgba(20, 17, 15, 0.7);
  border-bottom-color: var(--line);
  backdrop-filter: blur(10px);
}

.header-topline {
  background-color: var(--sea-deep);
  color: rgba(251, 248, 243, 0.9);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.header-topline .topline-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0;
  color: inherit;
}

.header-topline .topline-item i {
  color: #d7b57d;
  font-size: 0.78rem;
}

.header-topline a {
  color: rgba(251, 248, 243, 0.94);
}

.header-topline a:hover,
.header-topline a:focus {
  color: #f0dcb4;
}

.header-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 0.85rem 0;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.brand-lockup__word {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--ink);
  line-height: 1;
}

.brand-lockup__word small {
  display: block;
  font-family: var(--text);
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--brass-deep);
  margin-top: 0.32rem;
}

.site-nav .nav-link {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 0.55rem 0.85rem;
  position: relative;
}

.site-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 0.28rem;
  height: 1px;
  background-color: var(--brass);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s ease;
}

.site-nav .nav-link:hover,
.site-nav .nav-link:focus,
.site-nav .nav-link.active {
  color: var(--ink);
}

.site-nav .nav-link:hover::after,
.site-nav .nav-link:focus::after,
.site-nav .nav-link.active::after {
  transform: scaleX(1);
}

.nav-toggle {
  border: 1px solid var(--line);
  border-radius: 999px;
  background-color: transparent;
  color: var(--ink);
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
}

.nav-toggle:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.header-phone {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.04em;
}

.page-main {
  padding-top: var(--header-height);
}

.hero {
  position: relative;
  min-height: clamp(520px, 78vh, 780px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: var(--sea-deep);
  color: var(--ivory);
}

.hero-slider {
  position: absolute;
  inset: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1.2s ease, transform 7s linear;
}

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

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(18, 38, 40, 0.86) 0%, rgba(18, 38, 40, 0.55) 48%, rgba(18, 38, 40, 0.32) 100%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 3;
  padding: clamp(4rem, 9vw, 7rem) 0;
  max-width: 46rem;
}

.hero h1 {
  color: var(--ivory);
  margin-bottom: 1.1rem;
}

.hero-sub {
  font-size: 1.1rem;
  color: rgba(251, 248, 243, 0.88);
  max-width: 40ch;
  margin-bottom: 2rem;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  margin-top: 2.4rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line-light);
}

.hero-meta__item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.hero-meta__value {
  font-family: var(--display);
  font-size: 1.65rem;
  color: var(--ivory);
  line-height: 1;
}

.hero-meta__label {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(251, 248, 243, 0.72);
}

.hero-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2rem;
  z-index: 4;
  display: flex;
  justify-content: center;
  gap: 0.6rem;
}

.hero-dot {
  width: 38px;
  height: 3px;
  border: 0;
  padding: 0;
  background-color: rgba(251, 248, 243, 0.4);
  cursor: pointer;
  transition: background-color 0.3s ease;
}

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

.hero-dot:focus-visible {
  outline: 2px solid var(--ivory);
  outline-offset: 3px;
}

.page-hero {
  position: relative;
  padding: clamp(4rem, 8vw, 7rem) 0 clamp(3rem, 6vw, 5rem);
  background-size: cover;
  background-position: center;
  color: var(--ivory);
}

.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(18, 38, 40, 0.88), rgba(18, 38, 40, 0.55));
  pointer-events: none;
}

.page-hero .container {
  position: relative;
  z-index: 2;
}

.page-hero h1 {
  color: var(--ivory);
  margin-bottom: 1rem;
}

.page-hero p {
  color: rgba(251, 248, 243, 0.88);
  max-width: 62ch;
}

.breadcrumb-trail {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0 0 1.4rem;
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(251, 248, 243, 0.72);
}

.breadcrumb-trail a {
  color: rgba(251, 248, 243, 0.86);
}

.breadcrumb-trail a:hover,
.breadcrumb-trail a:focus {
  color: #f0dcb4;
}

.suite-card {
  background-color: #fffdf9;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

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

.suite-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--sand);
}

.suite-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.suite-card__tag {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  background-color: rgba(18, 38, 40, 0.9);
  color: #f3e4c6;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
}

.suite-card__body {
  padding: 1.5rem 1.5rem 1.7rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.suite-card__body h3 {
  margin-bottom: 0.55rem;
}

.suite-card__body p {
  font-size: 0.95rem;
  color: var(--ink-muted);
}

.suite-card__foot {
  margin-top: auto;
  padding-top: 1.15rem;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.suite-card__price {
  font-family: var(--display);
  font-size: 1.3rem;
  color: var(--ink);
}

.suite-card__price span {
  font-family: var(--text);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: block;
}

.experience-card {
  padding: 2rem 1.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background-color: #fffdf9;
  height: 100%;
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.experience-card:hover {
  border-color: rgba(169, 124, 63, 0.55);
  transform: translateY(-4px);
}

.experience-card__icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background-color: rgba(169, 124, 63, 0.14);
  color: var(--brass-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  margin-bottom: 1.15rem;
}

.experience-card h3 {
  font-size: 1.35rem;
  margin-bottom: 0.6rem;
}

.experience-card p {
  font-size: 0.95rem;
  color: var(--ink-muted);
}

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

.feature-split__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background-color: var(--sand);
  box-shadow: var(--shadow-deep);
}

.feature-split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature-split__badge {
  position: absolute;
  right: -0.5rem;
  bottom: 1.5rem;
  background-color: var(--ivory);
  border-radius: var(--radius-md);
  padding: 1.15rem 1.35rem;
  box-shadow: var(--shadow-soft);
  max-width: 220px;
}

.feature-split__badge strong {
  display: block;
  font-family: var(--display);
  font-size: 1.9rem;
  line-height: 1;
  color: var(--ink);
}

.feature-split__badge span {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.check-list {
  list-style: none;
  padding: 0;
  margin: 1.35rem 0 0;
}

.check-list li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: 0.75rem;
  color: var(--ink-soft);
}

.check-list li i {
  position: absolute;
  left: 0;
  top: 0.45rem;
  color: var(--brass);
  font-size: 0.82rem;
}

.section--dark .check-list li {
  color: rgba(251, 248, 243, 0.88);
}

.section--dark .check-list li i {
  color: #d7b57d;
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
}

.stat {
  padding: 1.6rem 1.2rem;
  border-left: 1px solid var(--line);
}

.section--dark .stat {
  border-left-color: var(--line-light);
}

.stat__value {
  font-family: var(--display);
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  line-height: 1;
  color: var(--ink);
  display: block;
  margin-bottom: 0.35rem;
}

.section--dark .stat__value {
  color: var(--ivory);
}

.stat__label {
  font-size: 0.76rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.section--dark .stat__label {
  color: rgba(251, 248, 243, 0.72);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
}

.gallery-item {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--sand);
  min-height: 190px;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.gallery-item:hover img {
  transform: scale(1.05);
}

.gallery-item--wide {
  grid-column: span 4;
  min-height: 320px;
}

.gallery-item--tall {
  grid-column: span 2;
  grid-row: span 2;
  min-height: 320px;
}

.gallery-item--half {
  grid-column: span 3;
}

.gallery-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.4rem 1.2rem 1.1rem;
  background: linear-gradient(to top, rgba(18, 38, 40, 0.9), rgba(18, 38, 40, 0));
  color: var(--ivory);
  font-size: 0.88rem;
  letter-spacing: 0.03em;
}

.process-list {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1.25rem;
}

.process-step {
  position: relative;
  padding: 1.4rem 1.5rem 1.4rem 4.6rem;
  background-color: #fffdf9;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.process-step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 1.4rem;
  top: 1.25rem;
  font-family: var(--display);
  font-size: 1.35rem;
  color: var(--brass);
}

.process-step h4 {
  margin-bottom: 0.35rem;
  font-size: 1.1rem;
}

.process-step p {
  font-size: 0.94rem;
  color: var(--ink-muted);
}

.price-panel {
  background-color: #fffdf9;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 1.9rem 1.7rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.price-panel--featured {
  background-color: var(--sea-deep);
  border-color: var(--sea-deep);
  color: var(--ivory);
}

.price-panel--featured h3,
.price-panel--featured .price-panel__amount {
  color: var(--ivory);
}

.price-panel--featured p,
.price-panel--featured .price-panel__note,
.price-panel--featured .check-list li {
  color: rgba(251, 248, 243, 0.86);
}

.price-panel--featured .check-list li i {
  color: #d7b57d;
}

.price-panel__amount {
  font-family: var(--display);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--ink);
  margin: 0.4rem 0 0.2rem;
}

.price-panel__note {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 1.2rem;
}

.faq-list {
  display: grid;
  gap: 0.85rem;
}

.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background-color: #fffdf9;
  overflow: hidden;
}

.faq-item .accordion-button {
  font-family: var(--display);
  font-size: 1.18rem;
  font-weight: 600;
  color: var(--ink);
  background-color: transparent;
  padding: 1.15rem 1.4rem;
  box-shadow: none;
}

.faq-item .accordion-button:not(.collapsed) {
  color: var(--brass-deep);
  background-color: rgba(169, 124, 63, 0.07);
}

.faq-item .accordion-button:focus {
  box-shadow: none;
  border-color: transparent;
}

.faq-item .accordion-body {
  padding: 0 1.4rem 1.3rem;
  font-size: 0.96rem;
  color: var(--ink-muted);
}

.form-panel {
  background-color: #fffdf9;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.7rem, 3.5vw, 2.8rem);
  box-shadow: var(--shadow-soft);
}

.field {
  margin-bottom: 1.1rem;
}

.field label {
  display: block;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.4rem;
}

.field .form-control,
.field .form-select {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background-color: #fff;
  color: var(--ink);
  padding: 0.75rem 0.9rem;
  font-size: 0.95rem;
  box-shadow: none;
}

.field .form-control:focus,
.field .form-select:focus {
  border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(169, 124, 63, 0.16);
}

.field textarea.form-control {
  min-height: 130px;
  resize: vertical;
}

.field .form-text {
  font-size: 0.8rem;
  color: var(--ink-muted);
}

.form-consent {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  font-size: 0.86rem;
  color: var(--ink-muted);
}

.form-consent .form-check-input {
  margin-top: 0.3rem;
  border-color: var(--line);
}

.form-consent .form-check-input:checked {
  background-color: var(--brass);
  border-color: var(--brass);
}

.was-validated .form-control:invalid,
.was-validated .form-select:invalid {
  border-color: #a13b32;
}

.contact-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.contact-tile {
  background-color: #fffdf9;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 1.5rem 1.4rem;
  height: 100%;
}

.contact-tile i {
  color: var(--brass);
  font-size: 1rem;
  margin-bottom: 0.65rem;
  display: inline-block;
}

.contact-tile h4 {
  font-size: 1.05rem;
  margin-bottom: 0.35rem;
}

.contact-tile p,
.contact-tile a {
  font-size: 0.94rem;
  color: var(--ink-soft);
  margin: 0;
}

.map-frame {
  border: 0;
  width: 100%;
  height: 420px;
  border-radius: var(--radius-md);
  filter: grayscale(0.15);
}

.team-card {
  text-align: center;
  padding: 1.5rem 1rem;
}

.team-card__photo {
  width: 148px;
  height: 148px;
  margin: 0 auto 1.1rem;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--sand);
  border: 1px solid var(--line);
}

.team-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-card h4 {
  margin-bottom: 0.2rem;
}

.team-card span {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-deep);
}

.team-card p {
  font-size: 0.92rem;
  color: var(--ink-muted);
  margin-top: 0.75rem;
}

.quote-card {
  background-color: #fffdf9;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 2rem 1.8rem;
  height: 100%;
}

.quote-card__stars {
  color: var(--brass);
  font-size: 0.82rem;
  letter-spacing: 0.2em;
  margin-bottom: 0.9rem;
}

.quote-card blockquote {
  font-family: var(--display);
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 1.2rem;
}

.quote-card figcaption {
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  border-left: 1px solid var(--line);
}

.timeline li {
  position: relative;
  padding: 0 0 1.9rem 1.9rem;
}

.timeline li::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 0.45rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: var(--brass);
}

.timeline__year {
  font-family: var(--display);
  font-size: 1.2rem;
  color: var(--brass-deep);
  display: block;
  margin-bottom: 0.25rem;
}

.section--dark .timeline {
  border-left-color: var(--line-light);
}

.section--dark .timeline__year {
  color: #f0dcb4;
}

.cta-band {
  position: relative;
  padding: clamp(3.5rem, 7vw, 6rem) 0;
  background-size: cover;
  background-position: center;
  color: var(--ivory);
  text-align: center;
}

.cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(18, 38, 40, 0.82), rgba(18, 38, 40, 0.82));
}

.cta-band .container {
  position: relative;
  z-index: 2;
}

.cta-band h2 {
  color: var(--ivory);
}

.cta-band p {
  color: rgba(251, 248, 243, 0.88);
  max-width: 58ch;
  margin-left: auto;
  margin-right: auto;
}

.site-footer {
  background-color: var(--sea-deep);
  color: rgba(251, 248, 243, 0.84);
  padding: clamp(3rem, 5vw, 4.5rem) 0 1.5rem;
  font-size: 0.92rem;
}

.site-footer h4 {
  color: var(--ivory);
  font-size: 1.02rem;
  letter-spacing: 0.06em;
  margin-bottom: 1rem;
}

.site-footer p {
  color: rgba(251, 248, 243, 0.78);
}

.site-footer a {
  color: rgba(251, 248, 243, 0.82);
}

.site-footer a:hover,
.site-footer a:focus {
  color: #f0dcb4;
}

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

.footer-nav li {
  margin-bottom: 0.5rem;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1rem;
}

.footer-brand span {
  font-family: var(--display);
  font-size: 1.35rem;
  color: var(--ivory);
  letter-spacing: 0.03em;
}

.footer-hours {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.88rem;
}

.footer-hours li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.28rem 0;
  border-bottom: 1px dashed rgba(251, 248, 243, 0.14);
}

.footer-hours li:last-child {
  border-bottom: 0;
}

.footer-social {
  display: flex;
  gap: 0.55rem;
  margin-top: 1.1rem;
}

.footer-social a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(251, 248, 243, 0.28);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(251, 248, 243, 0.9);
  font-size: 0.92rem;
}

.footer-social a:hover,
.footer-social a:focus {
  background-color: var(--brass);
  border-color: var(--brass);
  color: #fffaf0;
}

.footer-legal {
  margin-top: 2.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(251, 248, 243, 0.16);
  font-size: 0.8rem;
  color: rgba(251, 248, 243, 0.66);
}

.footer-legal a {
  color: rgba(251, 248, 243, 0.76);
}

.legal-prose {
  max-width: 76ch;
}

.legal-prose h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  margin-top: 2.4rem;
}

.legal-prose h3 {
  font-size: 1.2rem;
  margin-top: 1.8rem;
}

.legal-prose ul,
.legal-prose ol {
  color: var(--ink-soft);
  padding-left: 1.3rem;
}

.legal-prose li {
  margin-bottom: 0.5rem;
}

.legal-note {
  background-color: var(--sand);
  border-left: 3px solid var(--brass);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.3rem;
  font-size: 0.94rem;
  color: var(--ink-soft);
  margin: 1.6rem 0;
}

.top-button {
  position: fixed;
  right: 1.4rem;
  bottom: 1.4rem;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 0;
  background-color: var(--sea-deep);
  color: var(--ivory);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
  z-index: 1035;
}

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

.top-button:hover,
.top-button:focus-visible {
  background-color: var(--brass);
  outline: 2px solid var(--ivory);
  outline-offset: 2px;
}

.consent-harbour {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1060;
  padding: 1rem;
  display: flex;
  justify-content: center;
  transform: translateY(130%);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
  pointer-events: none;
}

.consent-harbour.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.consent-harbour__panel {
  width: min(1020px, 100%);
  background-color: #12302f;
  border: 1px solid rgba(215, 181, 125, 0.4);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.6rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.2rem;
  align-items: center;
  box-shadow: 0 28px 60px -30px rgba(0, 0, 0, 0.7);
}

.consent-harbour__mark {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: rgba(215, 181, 125, 0.16);
  color: #e8cc95;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
}

.consent-harbour__title {
  font-family: var(--display);
  font-size: 1.24rem;
  color: #fdf8ef;
  margin: 0 0 0.3rem;
}

.consent-harbour__text {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #dfd6c7;
  margin: 0;
}

.consent-harbour__link {
  color: #f0dcb4;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.consent-harbour__link:hover,
.consent-harbour__link:focus {
  color: #ffffff;
}

.consent-harbour__actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.consent-harbour__btn {
  border-radius: 999px;
  font-family: var(--text);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.68rem 1.35rem;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.consent-harbour__btn--decline {
  background-color: transparent;
  border: 1px solid rgba(251, 248, 243, 0.45);
  color: #f2ece2;
}

.consent-harbour__btn--decline:hover,
.consent-harbour__btn--decline:focus {
  background-color: rgba(251, 248, 243, 0.12);
  color: #ffffff;
}

.consent-harbour__btn--accept {
  background-color: #d7b57d;
  border: 1px solid #d7b57d;
  color: #12302f;
}

.consent-harbour__btn--accept:hover,
.consent-harbour__btn--accept:focus {
  background-color: #e8cc95;
  border-color: #e8cc95;
  color: #12302f;
}

.consent-harbour__btn:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

.newsletter-form {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.newsletter-form .form-control {
  flex: 1 1 220px;
  border-radius: 999px;
  border: 1px solid var(--line);
  padding: 0.8rem 1.2rem;
}

.newsletter-form .form-control:focus {
  border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(169, 124, 63, 0.16);
}

.section--dark .newsletter-form .form-control {
  background-color: rgba(251, 248, 243, 0.96);
  border-color: transparent;
  color: var(--ink);
}

@media (max-width: 991.98px) {
  :root {
    --header-height: 76px;
  }

  .header-topline {
    display: none;
  }

  .header-main {
    padding: 0.7rem 0;
  }

  .site-nav {
    padding-top: 1rem;
  }

  .site-nav .nav-link {
    padding: 0.6rem 0;
  }

  .site-nav .nav-link::after {
    display: none;
  }

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

  .feature-split__media {
    aspect-ratio: 4 / 3;
  }

  .stat-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .gallery-item--wide,
  .gallery-item--half,
  .gallery-item--tall {
    grid-column: span 2;
    grid-row: auto;
    min-height: 240px;
  }

  .consent-harbour__panel {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .consent-harbour__mark {
    display: none;
  }

  .consent-harbour__actions {
    justify-content: flex-start;
  }
}

@media (max-width: 575.98px) {
  .stat-row {
    grid-template-columns: 1fr;
  }

  .stat {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding: 1.1rem 0;
  }

  .section--dark .stat {
    border-top-color: var(--line-light);
  }

  .gallery-grid {
    grid-template-columns: 1fr;
  }

  .gallery-item--wide,
  .gallery-item--half,
  .gallery-item--tall {
    grid-column: span 1;
    min-height: 220px;
  }

  .hero-meta {
    gap: 1.2rem;
  }

  .consent-harbour {
    padding: 0.6rem;
  }

  .consent-harbour__panel {
    padding: 1.15rem 1.1rem;
    border-radius: var(--radius-md);
  }

  .consent-harbour__btn {
    flex: 1 1 100%;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .hero-slide,
  .suite-card,
  .experience-card,
  .gallery-item img,
  .top-button,
  .consent-harbour {
    transition: none;
  }
}
/* === About page QA overrides === */

/* Fixed header offset: keep the hero clear of the fixed site header */
.page-main {
  padding-top: calc(var(--header-height, 88px) + 2px);
}

/* Dropdown toggle rendered as a real button keeps nav-link styling */
.site-nav .nav-link.dropdown-toggle {
  background-color: transparent;
  border: 0;
  font-family: var(--text);
  cursor: pointer;
}

/* Brass buttons: darker base so ivory text reaches 4.5:1 contrast */
.btn-brass {
  background-color: #7d5a28;
  border-color: #7d5a28;
  color: #fffaf0;
}

.btn-brass:hover,
.btn-brass:focus {
  background-color: #63451f;
  border-color: #63451f;
  color: #fffaf0;
}

/* Badge caption: darker label for readable contrast on ivory */
.feature-split__badge span {
  color: #4a423b;
}

/* Team cards: avoid a squeezed two-up layout on small phones */
@media (max-width: 575.98px) {
  .team-grid > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .team-grid .team-card {
    padding: 1.1rem 0.5rem;
  }
}

/* ============================================================
   QA overrides — contrast, card fit, header spacing
   ============================================================ */

/* Brass buttons: darken fill so ivory label clears 4.5:1 */
.btn-brass {
  background-color: #7d5a28;
  border-color: #7d5a28;
  color: #fffaf0;
}

.btn-brass:hover,
.btn-brass:focus,
.btn-brass:active {
  background-color: #5f4420;
  border-color: #5f4420;
  color: #ffffff;
}

/* Dark sections: use fully opaque ivory for body copy + leads */
.section--dark p,
.section--dark .section-lead {
  color: #fbf8f3;
}

/* Contact tiles: never squeeze into unreadable slivers */
.contact-strip {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.contact-tile {
  min-width: 0;
  height: auto;
}

.contact-tile p,
.contact-tile a,
.contact-tile h4 {
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 767.98px) {
  .contact-strip {
    grid-template-columns: 1fr;
  }
}

/* Fixed header: keep the hero clear of the bar when it is taller than the
   default token (e.g. collapsed nav rendered taller on small screens) */
.page-main {
  padding-top: var(--header-height);
}

.page-hero {
  scroll-margin-top: calc(var(--header-height) + 12px);
}

/* ==========================================================================
   QA contrast / layout overrides (appended)
   ========================================================================== */

/* Slightly darker muted ink so body copy clears 4.5:1 on ivory and sand */
:root {
  --ink-muted: #453f39;
}

/* Header: opaque light surface with dark text at every scroll state */
.site-header {
  background-color: #fbf8f3;
}

.header-topline {
  background-color: #f2ece2;
  color: #2f2925;
  border-bottom: 1px solid rgba(20, 17, 15, 0.14);
}

.header-topline .topline-item,
.header-topline .topline-item i {
  color: #2f2925;
}

.header-topline a {
  color: #14110f;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.header-topline a:hover,
.header-topline a:focus {
  color: #6f4d1c;
}

.brand-lockup__word {
  color: #14110f;
}

.brand-lockup__word small {
  color: #6f4d1c;
}

.site-nav .nav-link {
  color: #2f2925;
}

.site-nav button.nav-link {
  background-color: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
}

/* Brass buttons need a deeper fill to carry white label text */
.btn-brass {
  background-color: #7d5a28;
  border-color: #7d5a28;
  color: #fffaf0;
}

.btn-brass:hover,
.btn-brass:focus {
  background-color: #61441b;
  border-color: #61441b;
  color: #fffaf0;
}

/* Body copy on light panels */
.section-lead,
.experience-card p,
.suite-card__body p,
.process-step p,
.contact-tile p,
.contact-tile a,
.faq-item .accordion-body,
.footer-hours {
  color: #453f39;
}

.section--dark .section-lead,
.section--dark p,
.section--dark .footer-hours {
  color: rgba(251, 248, 243, 0.9);
}

/* AOS reveal animations leave elements semi-transparent while animating,
   which washes out text contrast. Keep reveals but render text at full
   opacity from the first paint. */
[data-aos] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* Mobile: reserve room for the fixed header above the hero */
@media (max-width: 991.98px) {
  .page-main {
    padding-top: calc(var(--header-height) + 10px);
  }
}

/* ==========================================================================
   QA overrides — contacts page: footer hours contrast
   ========================================================================== */

/* The light-panel hours list colour must not leak into the dark footer,
   where dark ink on the deep teal background fails contrast. */
.site-footer .footer-hours,
.site-footer .footer-hours li,
.site-footer .footer-hours li span {
  color: rgba(251, 248, 243, 0.9);
}

/* ==========================================================================
   QA contrast fix — footer opening hours on the dark footer surface.
   The earlier generic muted-ink override darkened .footer-hours, which sits
   on the deep-sea footer background. Restore light text scoped to the footer.
   ========================================================================== */
.site-footer .footer-hours,
.site-footer .footer-hours li,
.site-footer .footer-hours li span {
  color: #eae5dc;
}

.site-footer .footer-hours li {
  border-bottom-color: rgba(251, 248, 243, 0.22);
}

/* ==========================================================================
   QA overrides — footer hours + gallery caption contrast
   ========================================================================== */

/* Footer opening hours sit on the dark sea-deep footer, so they must use
   the light text colour. The generic `.footer-hours` rule above sets a dark
   ink intended for light panels only. */
.site-footer .footer-hours,
.site-footer .footer-hours li,
.site-footer .footer-hours span,
.site-footer .footer-hours li span {
  color: #fbf8f3;
}

.site-footer .footer-hours li {
  border-bottom-color: rgba(251, 248, 243, 0.24);
}

/* Gallery captions: the original gradient faded to transparent over bright
   photography, dropping ivory text to ~3:1. Keep a deep, mostly opaque
   scrim so the label always clears 4.5:1 in both desktop and mobile. */
.gallery-caption {
  background: linear-gradient(to top, rgba(18, 38, 40, 0.97) 0%, rgba(18, 38, 40, 0.92) 60%, rgba(18, 38, 40, 0.55) 100%);
  color: #fdfbf7;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

/* ==========================================================================
   Gallery grid fix — the desktop layout declares a 6-column grid but the
   auto-placement of the wide/tall/half items left a large empty area on the
   right of the second row. Define an explicit 3-row / 6-column template so
   the tiles fill the block without leftover white space.
   ========================================================================== */
@media (min-width: 992px) {
  .gallery-grid {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto auto auto;
    grid-auto-flow: row dense;
  }

  .gallery-item--wide {
    grid-column: 1 / span 4;
    grid-row: 1;
    min-height: 360px;
  }

  .gallery-item--tall {
    grid-column: 5 / span 2;
    grid-row: 1 / span 2;
    min-height: 0;
  }

  .gallery-item--half {
    grid-column: span 2;
    grid-row: 2;
    min-height: 260px;
  }

  /* Second half tile moves into the free third-row slot so both bottom
     tiles sit side by side and the columns finish flush. */
  .gallery-grid > .gallery-item--half:nth-of-type(4) {
    grid-column: 1 / span 2;
    grid-row: 3;
  }

  .gallery-grid > .gallery-item--half:nth-of-type(3) {
    grid-column: 3 / span 2;
    grid-row: 3;
  }

  .gallery-item--tall img {
    height: 100%;
  }
}

/* ==========================================================================
   Gallery grid fix (second pass) — fill the right column and bottom row
   with an explicit template:
     row 1: wide (cols 1-4) + tall (cols 5-6)
     row 2: half (cols 1-2) + half (cols 3-4) + tall continues (cols 5-6)
     row 3: two halves spanning cols 1-3 and 4-6
   ========================================================================== */
@media (min-width: 992px) {
  .gallery-grid {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto auto auto;
    grid-auto-flow: row;
    align-items: stretch;
  }

  .gallery-grid > .gallery-item--wide {
    grid-column: 1 / span 4;
    grid-row: 1;
    min-height: 360px;
  }

  .gallery-grid > .gallery-item--tall {
    grid-column: 5 / span 2;
    grid-row: 1 / span 2;
    min-height: 0;
  }

  .gallery-grid > .gallery-item--half:nth-of-type(3) {
    grid-column: 1 / span 2;
    grid-row: 2;
    min-height: 260px;
  }

  .gallery-grid > .gallery-item--half:nth-of-type(4) {
    grid-column: 3 / span 2;
    grid-row: 2;
    min-height: 260px;
  }

  .gallery-grid > .gallery-item--tall img,
  .gallery-grid > .gallery-item--half img,
  .gallery-grid > .gallery-item--wide img {
    height: 100%;
    object-fit: cover;
  }
}

/* ==========================================================================
   Experience cards (homepage "The parts that don't fit on a rate card"):
   the fixed 2rem/1.75rem padding made each single-paragraph card far taller
   than its content on narrow screens. Tighten padding and interior rhythm
   on small viewports only; desktop spacing is unchanged.
   ========================================================================== */
@media (max-width: 991.98px) {
  .experience-card {
    padding: 1.25rem 1.15rem 1.35rem;
  }

  .experience-card__icon {
    width: 44px;
    height: 44px;
    font-size: 1rem;
    margin-bottom: 0.75rem;
  }

  .experience-card h3 {
    margin-bottom: 0.45rem;
  }

  .experience-card p {
    line-height: 1.6;
  }

  .experience-card p:last-child {
    margin-bottom: 0;
  }
}

/* ==========================================================================
   Cookie consent banner positioning fix.
   `.container` sets `position: relative`, which gave this banner a containing
   block of its own, so `position: fixed` resolved against that box and the
   panel sat in the middle of the viewport instead of the bottom edge.
   Keep the banner out of the flow of any positioned ancestor so it always
   anchors to the viewport and floats over the page bottom.
   ========================================================================== */
.consent-harbour {
  position: fixed;
  inset: auto 0 0 0;
  top: auto;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  max-height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 2000;
  align-items: flex-end;
}

.consent-harbour__panel {
  max-height: calc(100vh - 1.2rem);
  overflow-y: auto;
}

@media (max-width: 575.98px) {
  .consent-harbour {
    padding: 0.6rem 0.6rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
  }

  .consent-harbour__panel {
    width: 100%;
  }
}

/* ==========================================================================
   Cookie consent panel — compact bottom dock.
   The previous fixed/bottom rules resolved against the wrong containing
   block and the copy block made the panel taller than the viewport bottom
   area, so it rode up over the hero. Pin the banner to the viewport bottom
   and keep the panel short on phones (smaller type, tighter padding, no
   forced full-height stacking) so it stays a slim bar along the bottom edge.
   ========================================================================== */
.consent-harbour {
  position: fixed !important;
  top: auto !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  inset: auto 0 0 0;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0.5rem;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: visible;
  transform: none;
  z-index: 2000;
}

.consent-harbour:not(.is-visible) {
  transform: translateY(120%);
}

.consent-harbour.is-visible {
  transform: translateY(0);
}

.consent-harbour .consent-harbour__panel {
  width: 100%;
  max-width: 1020px;
  max-height: none;
  overflow: visible;
  align-items: center;
}

@media (max-width: 575.98px) {
  .consent-harbour .consent-harbour__panel {
    padding: 0.75rem 0.85rem;
    border-radius: var(--radius-md);
    gap: 0.55rem;
  }

  .consent-harbour .consent-harbour__title {
    font-size: 1.02rem;
    margin-bottom: 0.15rem;
  }

  .consent-harbour .consent-harbour__text {
    font-size: 0.74rem;
    line-height: 1.45;
    /* keep the dock slim: trim the long copy to a few readable lines */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
  }

  .consent-harbour .consent-harbour__actions {
    gap: 0.45rem;
    flex-wrap: nowrap;
  }

  .consent-harbour .consent-harbour__btn {
    flex: 1 1 0;
    padding: 0.55rem 0.6rem;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-align: center;
  }
}