/* ==========================================================================
   TRAVELLERS INN — Design system
   Palette: deep blue (sampled from the property's blue gables) with a brick-red accent
   (the red guest-room doors), on warm cream — straight from the property photography.
   Type: Fraunces (display, optical-size axis) + Hanken Grotesk (UI/body).
   ========================================================================== */

@font-face {
  font-family: "Fraunces";
  src: url(../fonts/fraunces-latin-opsz-normal.woff2) format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: "Fraunces";
  src: url(../fonts/fraunces-latin-opsz-italic.woff2) format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap
}

@font-face {
  font-family: "Hanken Grotesk";
  src: url(../fonts/hanken-grotesk-latin-wght-normal.woff2) format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap
}

:root {
  /* colour */
  --navy: #0e2347;
  /* logo field: deep gable blue */
  --navy-deep: #081631;
  --navy-soft: #1a3563;
  --cream: #f3ede0;
  /* sun-bleached stone */
  --paper: #faf6ee;
  --sand: #e7dcc8;
  --cedar: #a8262b;
  /* brick red accent (door red) */
  --cedar-soft: #f2908b;
  --sky: #9dbad6;
  /* New Brunswick sky */
  --ink: #15202e;
  --muted: #666a72;
  --muted-on-dark: rgba(243, 237, 224, .68);
  --line: rgba(14, 35, 71, .16);
  --line-dark: rgba(243, 237, 224, .18);

  /* type */
  --f-display: "Fraunces", Georgia, "Times New Roman", serif;
  --f-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* layout */
  --wrap: min(1360px, calc(100% - 96px));
  --header-h: 92px;
  --ease: cubic-bezier(.22, .8, .22, 1);
  --ease-io: cubic-bezier(.7, 0, .2, 1);
}

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

html {
  scroll-behavior: auto;
  -webkit-text-size-adjust: 100%
}

body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden
}

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

a {
  color: inherit;
  text-decoration: none
}

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

h1,
h2,
h3,
h4,
p {
  margin: 0
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer
}

:focus-visible {
  outline: 2px solid var(--cedar-soft);
  outline-offset: 4px
}

::selection {
  background: var(--cedar);
  color: #fff
}

.wrap {
  width: var(--wrap);
  margin-inline: auto
}

.skip-link {
  position: fixed;
  left: 16px;
  top: -80px;
  z-index: 999;
  background: var(--cedar);
  color: #fff;
  padding: .7rem 1.1rem;
  transition: top .2s
}

.skip-link:focus {
  top: 16px
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap
}

/* ---------- type primitives ---------- */
.display {
  font-family: var(--f-display);
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  letter-spacing: -.025em;
  line-height: .98
}

.display em,
.h-em {
  font-style: italic;
  font-weight: 300;
  color: var(--cedar)
}

.on-dark .display em,
.on-dark .h-em {
  color: var(--cedar-soft)
}

.h2 {
  font-size: clamp(2.6rem, 4.7vw, 5rem)
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--cedar)
}

.eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: currentColor
}

.on-dark .eyebrow {
  color: var(--cedar-soft)
}

.lede {
  font-size: 1.2rem;
  line-height: 1.65;
  color: var(--ink)
}

.on-dark {
  color: var(--cream)
}

.on-dark .lede {
  color: var(--cream)
}

.muted {
  color: var(--muted)
}

.on-dark .muted {
  color: var(--muted-on-dark)
}

/* split-text mask (JS wraps words) */
.line {
  display: block;
  overflow: hidden;
  padding-bottom: .2em;
  margin-bottom: -.2em
}

.line>span {
  display: inline-block;
  will-change: transform
}

/* ---------- buttons ---------- */
.btn-x {
  --bg: var(--cedar);
  --fg: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  padding: 1.05rem 1.9rem;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--fg);
  background: var(--bg);
  overflow: hidden;
  isolation: isolate;
  transition: color .5s var(--ease), transform .3s var(--ease)
}

.btn-x::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cream);
  transform: translateY(101%);
  transition: transform .55s var(--ease);
  z-index: -1
}

.btn-x:hover::before,
.btn-x:focus-visible::before {
  transform: none
}

.btn-x:hover,
.btn-x:focus-visible {
  color: var(--navy)
}

.btn-x i {
  font-size: .8rem;
  transition: transform .45s var(--ease)
}

.btn-x:hover i {
  transform: translateX(5px)
}

.btn-x--navy {
  --bg: var(--navy)
}

.btn-x--navy::before {
  background: var(--cedar)
}

.btn-x--navy:hover,
.btn-x--navy:focus-visible {
  color: #fff
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 1.05rem 0;
  position: relative
}

.btn-ghost::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .7rem;
  height: 1px;
  background: currentColor;
  transform-origin: right;
  transition: transform .6s var(--ease)
}

.btn-ghost:hover::after {
  transform: scaleX(0);
  transform-origin: right;
  animation: underline-back .7s var(--ease) .25s forwards
}

@keyframes underline-back {
  from {
    transform: scaleX(0);
    transform-origin: left
  }

  to {
    transform: scaleX(1);
    transform-origin: left
  }
}

.btn-ghost i {
  font-size: .8rem;
  transition: transform .4s var(--ease)
}

.btn-ghost:hover i {
  transform: translateX(5px)
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  padding-bottom: .35rem
}

.link-arrow i {
  transition: transform .4s var(--ease);
  font-size: .75rem
}

.link-arrow:hover i {
  transform: translateX(5px)
}

/* ---------- preloader ---------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--navy);
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1.6rem
}

.js .loader {
  display: flex
}

.loader img {
  width: 150px;
  opacity: 0;
  transform: translateY(12px)
}

.loader__bar {
  width: 150px;
  height: 1px;
  background: rgba(255, 255, 255, .18);
  overflow: hidden
}

.loader__bar span {
  display: block;
  height: 100%;
  background: var(--cedar-soft);
  transform: scaleX(0);
  transform-origin: left
}

/* ---------- header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  color: #fff;
  transition: background .6s var(--ease), box-shadow .6s var(--ease), transform .6s var(--ease)
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(8, 22, 49, .55), rgba(8, 22, 49, 0));
  pointer-events: none;
  transition: opacity .5s
}

.site-header.is-stuck {
  background: rgba(14, 35, 71, .94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(243, 237, 224, .1)
}

.site-header.is-stuck::before {
  opacity: 0
}

.site-header.is-hidden {
  transform: translateY(-100%)
}

.hdr {
  position: relative;
  width: min(1560px, calc(100% - 80px));
  margin-inline: auto;
  height: var(--header-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  transition: height .5s var(--ease)
}

.is-stuck .hdr {
  height: 72px
}

.brand {
  display: block;
  width: max-content;
  line-height: 0
}

.brand__logo {
  height: 74px;
  width: auto;
  transition: height .5s var(--ease);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .5)
}

.is-stuck .brand__logo {
  height: 54px;
  box-shadow: none
}

.primary-nav ul {
  display: flex;
  gap: clamp(1.4rem, 2.6vw, 2.8rem)
}

.primary-nav a {
  position: relative;
  display: block;
  padding: .6rem 0;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .86);
  transition: color .3s
}

.primary-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .15rem;
  height: 1px;
  background: var(--cedar-soft);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .55s var(--ease)
}

.primary-nav a:hover,
.primary-nav a.is-active {
  color: #fff
}

.primary-nav a:hover::after,
.primary-nav a.is-active::after {
  transform: scaleX(1);
  transform-origin: left
}

.hdr__cta {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 1.8rem
}

.hdr__phone {
  font-size: .82rem;
  letter-spacing: .06em;
  opacity: .85;
  display: flex;
  align-items: center;
  gap: .6rem
}

.hdr__phone:hover {
  opacity: 1
}

.btn-book {
  padding: .9rem 1.2rem
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  position: relative
}

.nav-toggle span {
  position: absolute;
  left: 10px;
  right: 10px;
  height: 1px;
  background: #fff;
  transition: transform .4s var(--ease)
}

.nav-toggle span:nth-child(1) {
  top: 18px
}

.nav-toggle span:nth-child(2) {
  top: 26px
}

.scroll-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  pointer-events: none
}

.scroll-progress span {
  display: block;
  height: 100%;
  background: var(--cedar-soft);
  transform: scaleX(0);
  transform-origin: left
}

/* mobile offcanvas */
.offcanvas.mnav {
  background: var(--navy);
  color: var(--cream)
}

.mnav a {
  display: block;
  font-family: var(--f-display);
  font-size: 2rem;
  font-weight: 300;
  padding: .4rem 0
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  height: calc(100vh - 56px);
  min-height: 700px;
  max-height: 1060px;
  background: var(--navy-deep);
  color: #fff;
  overflow: hidden
}

.hero__swiper {
  position: absolute;
  inset: 0
}

.hero__swiper .swiper-slide {
  overflow: hidden;
  background: var(--navy-deep)
}

.hero__swiper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 68%;
  transform: scale(1.14);
  will-change: transform
}

.hero__swiper .swiper-slide-active img,
.hero__swiper .swiper-slide-prev img {
  animation: kenburns 9s ease-out forwards
}

@keyframes kenburns {
  from {
    transform: scale(1.14) translate3d(1.2%, .6%, 0)
  }

  to {
    transform: scale(1.02) translate3d(0, 0, 0)
  }
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(8, 22, 49, .92) 0%, rgba(8, 22, 49, .38) 34%, rgba(8, 22, 49, 0) 60%),
    linear-gradient(95deg, rgba(8, 22, 49, .72) 0%, rgba(8, 22, 49, .28) 48%, rgba(8, 22, 49, 0) 75%)
}

.hero__inner {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  padding-top: clamp(130px, 16vh, 170px);
  padding-bottom: clamp(170px, 22vh, 250px)
}

.hero__copy {
  max-width: 860px
}

.hero__loc {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--cedar-soft);
  margin-bottom: 1.4rem
}

.hero__loc i {
  font-size: .8rem
}

.hero h1 {
  font-size: clamp(2.8rem, 5.8vw, 6rem);
  line-height: .95;
  margin-bottom: 1.5rem
}

.hero h1 em {
  color: var(--cedar-soft)
}

.hero__sub {
  max-width: 440px;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .84);
  margin-bottom: 1.9rem
}

.hero__ctas {
  display: flex;
  align-items: center;
  gap: 2.2rem
}

.hero__ui {
  position: absolute;
  z-index: 4;
  right: max(40px, calc((100% - 1560px)/2 + 40px));
  bottom: clamp(170px, 22vh, 250px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1.6rem
}

.hero__chapter {
  text-align: right;
  overflow: hidden
}

.hero__chapter small {
  display: block;
  font-size: .68rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--muted-on-dark)
}

.hero__chapter strong {
  display: block;
  font-family: var(--f-display);
  font-weight: 300;
  font-style: italic;
  font-size: 1.9rem;
  line-height: 1.2
}

.hero__count {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: .95rem;
  letter-spacing: .1em;
  display: flex;
  align-items: center;
  gap: 1rem
}

.hero__count .bar {
  width: 120px;
  height: 1px;
  background: rgba(255, 255, 255, .3);
  position: relative;
  overflow: hidden
}

.hero__count .bar i {
  position: absolute;
  inset: 0;
  background: var(--cedar-soft);
  transform: scaleX(0);
  transform-origin: left
}

.arrows {
  display: flex;
  gap: .6rem
}

.arrow-btn {
  width: 54px;
  height: 54px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: .8rem;
  color: inherit;
  transition: background .4s var(--ease), color .4s, border-color .4s, transform .4s var(--ease)
}

.arrow-btn:hover {
  background: var(--cream);
  color: var(--navy);
  border-color: var(--cream)
}

.arrow-btn.swiper-button-disabled {
  opacity: .35;
  pointer-events: none
}

.hero__scroll {
  position: absolute;
  z-index: 4;
  left: max(40px, calc((100% - 1560px)/2 + 40px));
  bottom: 34px;
  display: none
}

/* ---------- booking bar ---------- */
.booking-wrap {
  position: relative;
  z-index: 20;
  margin-top: -84px
}

.booking {
  width: min(1280px, calc(100% - 96px));
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.1fr 1.1fr 1.1fr 1.1fr auto;
  background: var(--paper);
  box-shadow: 0 40px 80px -30px rgba(8, 22, 49, .55), 0 0 0 1px rgba(14, 35, 71, .05);
  position: relative
}

.booking::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cedar), var(--cedar-soft))
}

.bk-field {
  position: relative;
  padding: 1.55rem 1.7rem 1.35rem;
  border-right: 1px solid var(--line);
  transition: background .4s
}

.bk-field:focus-within,
.bk-field:hover {
  background: #fff
}

.bk-field::after {
  content: "";
  position: absolute;
  left: 1.7rem;
  right: 1.7rem;
  bottom: 0;
  height: 2px;
  background: var(--cedar);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease)
}

.bk-field:focus-within::after {
  transform: scaleX(1)
}

.bk-field label {
  display: block;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--cedar);
  margin-bottom: .35rem
}

.bk-field input {
  width: 100%;
  border: 0;
  background: transparent;
  font-family: var(--f-display);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--navy);
  padding: 0;
  outline: 0;
  min-height: 34px
}

.bk-field input::placeholder {
  color: rgba(14, 35, 71, .35)
}

.bk-field input[type=date] {
  font-family: var(--f-display);
  cursor: pointer
}

.bk-field input[type=date]::-webkit-calendar-picker-indicator {
  opacity: .5;
  cursor: pointer
}

.stepper {
  display: flex;
  align-items: center;
  justify-content: space-between
}

.stepper output {
  font-family: var(--f-display);
  font-size: 1.15rem;
  color: var(--navy);
  white-space: nowrap
}

.stepper button {
  width: 28px;
  height: 28px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: .7rem;
  color: var(--navy);
  transition: all .3s var(--ease)
}

.stepper button:hover {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy)
}

.stepper .btns {
  display: flex;
  gap: .4rem
}

.bk-submit {
  display: flex
}

.bk-submit .btn-x {
  height: 100%;
  padding-inline: 2.4rem;
  justify-content: center;
  white-space: nowrap
}

.bk-note {
  width: min(1280px, calc(100% - 96px));
  margin: 1rem auto 0;
  font-size: .86rem;
  color: var(--muted);
  min-height: 1.4em
}

.bk-note b {
  color: var(--navy)
}

/* ---------- section scaffolding ---------- */
.section {
  position: relative;
  padding: 120px 0
}

.sec-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 3rem;
  margin-bottom: clamp(48px, 6vw, 88px)
}

.sec-head .display {
  margin-top: 1.4rem
}

.crossmark {
  position: absolute;
  pointer-events: none;
  opacity: .9
}

/* ---------- about ---------- */
.about {
  background: var(--cream);
  padding-top: 100px;
  overflow: hidden
}

.about__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 24px;
  align-items: start
}

.about__media {
  grid-column: 1/7;
  position: relative;
  padding-bottom: 140px;
  padding-left: 56px
}

.vlabel {
  position: absolute;
  left: 0;
  top: 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: .7rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 1.2rem
}

.vlabel::after {
  content: "";
  width: 1px;
  height: 90px;
  background: var(--cedar)
}

.about__img-lg {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--sand)
}

.about__img-lg img,
.about__img-sm img,
.about__img-xs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.25)
}

.about__img-sm {
  position: absolute;
  right: -70px;
  bottom: 20px;
  width: 46%;
  aspect-ratio: 1/1.1;
  overflow: hidden;
  border: 10px solid var(--cream);
  background: var(--sand)
}

.about__img-xs {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 26%;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--sand);
  display: none
}

.about__tag {
  position: absolute;
  left: 56px;
  bottom: 50px;
  background: var(--navy);
  color: var(--cream);
  padding: 1.3rem 1.6rem;
  max-width: 230px
}

.about__tag small {
  display: block;
  font-size: .64rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--cedar-soft);
  margin-bottom: .3rem
}

.about__tag span {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.25;
  font-weight: 300
}

.about__copy {
  grid-column: 8/13;
  padding-top: 3.5rem
}

.about__copy .display {
  margin: 1.6rem 0 2.4rem
}

.about__copy p+p {
  margin-top: 1.2rem
}

.about__copy .muted {
  font-size: 1.02rem
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: 3.2rem;
  margin: 3rem 0;
  padding: 2rem 0;
  border-block: 1px solid var(--line)
}

.stats strong {
  display: block;
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 3.1rem;
  line-height: 1;
  color: var(--navy);
  letter-spacing: -.02em
}

.stats strong sup {
  font-size: 1.1rem;
  color: var(--cedar);
  top: -1.2em;
  margin-left: .1em
}

.stats .lbl {
  display: block;
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: .6rem
}

.about__ghost {
  position: absolute;
  right: -60px;
  top: 40px;
  width: 640px;
  height: auto;
  aspect-ratio: 1200/420;
  color: var(--navy);
  opacity: .1
}

/* ---------- amenities (icon cards) ---------- */
.amenities {
  background: var(--navy);
  overflow: hidden
}

.amenities .sec-head {
  margin-bottom: clamp(2.4rem, 4vw, 3.6rem)
}

.amen-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px
}

.amen-card {
  position: relative;
  padding: 1.85rem 1.55rem 2rem;
  background: var(--navy-soft);
  border: 1px solid var(--line-dark);
  transition: transform .55s var(--ease), border-color .4s, box-shadow .55s var(--ease)
}

.amen-card:hover {
  transform: translateY(-6px);
  border-color: rgba(242, 144, 139, .35);
  box-shadow: 0 28px 48px -28px rgba(0, 0, 0, .55)
}

.amen-card__icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin-bottom: 1.2rem;
  border-radius: 50%;
  background: rgba(242, 144, 139, .12);
  border: 1px solid rgba(242, 144, 139, .28);
  color: var(--cedar-soft);
  font-size: 1.1rem;
  transition: background .4s, border-color .4s, transform .45s var(--ease)
}

.amen-card:hover .amen-card__icon {
  background: rgba(242, 144, 139, .2);
  border-color: rgba(242, 144, 139, .5);
  transform: scale(1.06)
}

.amen-card__title {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(1.2rem, 1.5vw, 1.45rem);
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--cream);
  margin-bottom: .65rem
}

.amen-card__text {
  font-size: .92rem;
  line-height: 1.55;
  color: var(--muted-on-dark)
}

/* ---------- rooms ---------- */
.rooms {
  background: var(--paper);
  overflow: hidden
}

.rooms .sec-head {
  align-items: flex-end
}

.rooms__controls {
  display: flex;
  align-items: center;
  gap: 2.4rem
}

.rooms__counter {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 1.1rem;
  letter-spacing: .08em;
  color: var(--navy)
}

.rooms__counter b {
  font-size: 2.4rem;
  font-weight: 300;
  margin-right: .3rem
}

.rooms .arrow-btn {
  border-color: var(--line);
  color: var(--navy)
}

.rooms .arrow-btn:hover {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy)
}

.rooms__swiper {
  overflow: visible
}

.rooms__swiper .swiper-slide {
  opacity: .0;
  transition: opacity .9s var(--ease)
}

.rooms__swiper .swiper-slide-active {
  opacity: 1
}

.room {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 24px;
  align-items: start
}

.room__img {
  grid-column: 1/9;
  grid-row: 1;
  height: clamp(520px, 44vw, 660px);
  position: relative;
  overflow: hidden;
  background: var(--sand)
}

.room__img .parallax {
  position: absolute;
  inset: 0 -12% 0 -12%
}

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

.room__img img {
  transition: transform 1.8s var(--ease)
}

.room__img:hover img {
  transform: scale(1.045)
}

.room__no {
  position: absolute;
  left: 1.6rem;
  top: 1.2rem;
  font-family: var(--f-display);
  font-size: .9rem;
  letter-spacing: .2em;
  color: #fff;
  mix-blend-mode: difference;
  z-index: 2
}

.room__panel {
  grid-column: 8/13;
  grid-row: 1;
  background: var(--navy);
  color: var(--cream);
  padding: clamp(2rem, 3.2vw, 3.4rem);
  position: relative;
  z-index: 2;
  margin-top: 150px;
  box-shadow: 0 50px 80px -40px rgba(8, 22, 49, .6)
}

.room__panel h3 {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(2rem, 3vw, 3.2rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  margin: 1.2rem 0 1.2rem
}

.room__panel h3 em {
  font-style: italic;
  color: var(--cedar-soft)
}

.room__panel p {
  color: var(--muted-on-dark);
  font-size: 1rem;
  line-height: 1.65
}

.room__meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 2rem 0;
  padding: 1.5rem 0;
  border-block: 1px solid var(--line-dark)
}

.room__meta div {
  font-size: .74rem;
  letter-spacing: .06em;
  line-height: 1.35
}

.room__meta i {
  display: block;
  color: var(--cedar-soft);
  font-size: .95rem;
  margin-bottom: .55rem
}

.room__meta b {
  display: block;
  font-weight: 600;
  color: var(--cream);
  font-size: .86rem;
  letter-spacing: .02em
}

.room__meta span {
  color: var(--muted-on-dark);
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase
}

.room__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap
}

.room__price small {
  display: block;
  font-size: .64rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted-on-dark)
}

.room__price strong {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 2.4rem;
  line-height: 1.1
}

.room__price strong span {
  font-size: .9rem;
  color: var(--muted-on-dark);
  font-family: var(--f-body)
}

.room__ctas {
  display: flex;
  align-items: center;
  gap: 1.4rem
}

.room__ctas .link-arrow {
  color: var(--cream)
}

.rooms__bar {
  margin-top: 5rem;
  height: 1px;
  background: var(--line);
  position: relative
}

.rooms__bar span {
  position: absolute;
  left: 0;
  top: -1px;
  height: 3px;
  background: var(--cedar);
  width: 20%;
  transition: transform .9s var(--ease)
}

.rooms__thumbs {
  display: flex;
  gap: 2.6rem;
  margin-top: 1.4rem;
  flex-wrap: wrap
}

.rooms__thumbs button {
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .3s;
  padding: .3rem 0
}

.rooms__thumbs button:hover,
.rooms__thumbs button.is-on {
  color: var(--navy)
}

.rooms__thumbs button.is-on {
  font-weight: 700
}

/* ---------- signature ---------- */
.signature {
  position: relative;
  height: 120vh;
  min-height: 860px;
  background: var(--navy-deep);
  overflow: hidden
}

.signature__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 760px;
  overflow: hidden;
  display: grid;
  place-items: center
}

.signature__media {
  position: absolute;
  inset: 0;
  clip-path: inset(14% 20% 14% 20%);
  will-change: clip-path
}

.signature__media img {
  position: absolute;
  inset: -8% 0;
  width: 100%;
  height: 116%;
  object-fit: cover
}

.signature__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(8, 22, 49, .35), rgba(8, 22, 49, .55))
}

.signature__copy {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
  width: min(1100px, calc(100% - 96px))
}

.signature__copy .eyebrow {
  justify-content: center
}

.signature__copy .eyebrow::after {
  content: "";
  width: 34px;
  height: 1px;
  background: currentColor
}

.signature__copy .display {
  font-size: clamp(3rem, 7vw, 7.6rem);
  line-height: .95;
  margin: 1.8rem 0 2rem
}

.signature__copy .display em {
  color: var(--cedar-soft)
}

.signature__copy p {
  max-width: 540px;
  margin: 0 auto 2.6rem;
  color: rgba(255, 255, 255, .88);
  font-size: 1.12rem
}

/* ---------- gallery ---------- */
.gallery {
  background: var(--cream)
}

.filters {
  display: flex;
  gap: 2.2rem;
  flex-wrap: wrap
}

.filters button {
  position: relative;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  padding: .5rem 0;
  transition: color .3s
}

.filters button sup {
  font-size: .6rem;
  color: var(--cedar);
  margin-left: .3rem;
  letter-spacing: 0
}

.filters button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--navy);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .5s var(--ease)
}

.filters button:hover,
.filters button.is-on {
  color: var(--navy)
}

.filters button.is-on::after {
  transform: scaleX(1);
  transform-origin: left
}

.g-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 76px;
  gap: 18px
}

.g-item {
  position: relative;
  overflow: hidden;
  background: var(--sand);
  display: block;
  cursor: zoom-in
}

.g-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease)
}

.g-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 22, 49, .78), rgba(8, 22, 49, 0) 55%);
  opacity: 0;
  transition: opacity .6s var(--ease)
}

.g-item figcaption {
  position: absolute;
  left: 1.3rem;
  right: 1.3rem;
  bottom: 1.1rem;
  z-index: 2;
  color: #fff;
  transform: translateY(14px);
  opacity: 0;
  transition: all .6s var(--ease);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem
}

.g-item figcaption span {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1.25rem;
  line-height: 1.2
}

.g-item figcaption small {
  font-size: .62rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--cedar-soft);
  white-space: nowrap
}

.g-item:hover img,
.g-item:focus-visible img {
  transform: scale(1.07)
}

.g-item:hover::after,
.g-item:focus-visible::after {
  opacity: 1
}

.g-item:hover figcaption,
.g-item:focus-visible figcaption {
  transform: none;
  opacity: 1
}

.g-item.is-hidden {
  display: none
}

/* editorial composition — grid-area: row-start / col-start / row-end / col-end */
.g-1 {
  grid-area: 1/1/8/8
}

.g-2 {
  grid-area: 1/8/5/13
}

.g-3 {
  grid-area: 5/8/8/11
}

.g-4 {
  grid-area: 5/11/8/13
}

.g-5 {
  grid-area: 8/1/14/5
}

.g-6 {
  grid-area: 8/5/11/10
}

.g-7 {
  grid-area: 8/10/14/13
}

.g-8 {
  grid-area: 11/5/14/10
}

.g-9 {
  grid-area: 14/1/20/5
}

.g-10 {
  grid-area: 14/5/17/13
}

.g-11 {
  grid-area: 17/5/20/9
}

.g-12 {
  grid-area: 17/9/20/13
}

.g-grid.is-filtered {
  grid-auto-rows: 92px
}

.g-grid.is-filtered .g-item {
  grid-area: auto;
  grid-column: span 4;
  grid-row: span 4
}

.g-grid[data-n="2"] .g-item {
  grid-column: span 6;
  grid-row: span 5
}

.g-grid[data-n="3"] .g-item {
  grid-column: span 4;
  grid-row: span 3
}

.g-grid[data-n="3"] .g-item.is-lead {
  grid-column: span 8;
  grid-row: span 6
}

.g-grid[data-n="4"] .g-item {
  grid-column: span 6;
  grid-row: span 4
}

/* ---------- nearby (horizontal) ---------- */
.nearby {
  background: var(--navy-deep);
  overflow: hidden
}

.nearby__side {
  display: flex;
  align-items: flex-end;
  gap: 3rem;
  max-width: 560px
}

.nearby__side p {
  max-width: 340px
}

.nearby__swiper {
  overflow: visible
}

.place {
  width: clamp(300px, 26vw, 400px);
  height: auto;
  color: var(--cream)
}

.place:nth-child(even) {
  margin-top: 64px
}

.place__img {
  aspect-ratio: 3/4;
  overflow: hidden;
  position: relative;
  background: var(--navy-soft)
}

.place__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 1.4s var(--ease)
}

.place:hover .place__img img {
  transform: scale(1.12)
}

.place__dist {
  position: absolute;
  left: 0;
  top: 1.4rem;
  background: var(--cream);
  color: var(--navy);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: .5rem .9rem
}

.place__body {
  padding-top: 1.5rem
}

.place__body h3 {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 1.9rem;
  line-height: 1.1;
  letter-spacing: -.015em;
  margin-bottom: .7rem
}

.place__body p {
  color: var(--muted-on-dark);
  font-size: .98rem;
  margin-bottom: 1.2rem;
  max-width: 34ch
}

.place__body .link-arrow {
  color: var(--cedar-soft)
}

.nearby__bar {
  height: 1px;
  background: var(--line-dark);
  margin-top: 4rem;
  position: relative
}

.nearby__bar span {
  position: absolute;
  left: 0;
  top: -1px;
  height: 3px;
  width: 100%;
  background: var(--cedar-soft);
  transform: scaleX(.15);
  transform-origin: left;
  transition: transform .5s var(--ease)
}

/* ---------- reviews ---------- */
.reviews {
  background: var(--sand);
  overflow: hidden
}

.rev {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 24px;
  align-items: center
}

.rev__media {
  grid-column: 1/6;
  position: relative;
  aspect-ratio: 4/5
}

.rev__media figure {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1.1s var(--ease)
}

.rev__media figure.is-on {
  opacity: 1
}

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

.rev__media::after {
  content: "";
  position: absolute;
  inset: 24px -24px -24px 24px;
  border: 1px solid var(--cedar);
  z-index: -1
}

.rev__body {
  grid-column: 7/13;
  position: relative
}

.rev__swiper {
  overflow: hidden
}

.rev__q {
  font-family: var(--f-display);
  font-size: 7.5rem;
  line-height: .8;
  color: var(--cedar);
  font-weight: 300;
  display: block;
  height: 5.2rem;
  margin-top: 1rem
}

.rev__text {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(1.7rem, 2.5vw, 2.55rem);
  line-height: 1.28;
  letter-spacing: -.015em;
  color: var(--navy);
  margin: 1rem 0 2.4rem
}

.rev__text em {
  font-style: italic;
  color: var(--cedar)
}

.rev__who {
  display: flex;
  align-items: center;
  gap: 1.1rem
}

.rev__av {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--cream);
  display: grid;
  place-items: center;
  font-family: var(--f-display);
  font-size: 1.2rem
}

.rev__who b {
  display: block;
  font-size: .8rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--navy)
}

.rev__who span {
  font-size: .86rem;
  color: var(--muted)
}

.stars {
  color: var(--cedar);
  font-size: .72rem;
  letter-spacing: .14em;
  margin-top: .2rem
}

.rev__sample {
  display: inline-block;
  margin-top: 1.8rem;
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px dashed rgba(14, 35, 71, .3);
  padding: .3rem .6rem
}

.rev__nav {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-top: 3rem
}

.rev__nav .arrow-btn {
  border-color: rgba(14, 35, 71, .25);
  color: var(--navy)
}

.rev__nav .arrow-btn:hover {
  background: var(--navy);
  color: #fff
}

.rev__prog {
  flex: 1;
  height: 1px;
  background: rgba(14, 35, 71, .2);
  position: relative;
  overflow: hidden
}

.rev__prog i {
  position: absolute;
  inset: 0;
  background: var(--navy);
  transform: scaleX(0);
  transform-origin: left
}

.rev__count {
  font-family: var(--f-display);
  font-size: 1rem;
  letter-spacing: .1em;
  color: var(--navy)
}

/* ---------- why stay ---------- */
.why {
  background: var(--navy);
  padding-bottom: 0
}

.why .sec-head {
  margin-bottom: 64px
}

.why__row {
  display: flex;
  height: clamp(520px, 44vw, 640px);
  border-top: 1px solid var(--line-dark)
}

.why__p {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  border-right: 1px solid var(--line-dark);
  cursor: pointer;
  transition: flex .9s var(--ease);
  color: var(--cream)
}

.why__p:last-child {
  border-right: 0
}

.why__p img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .26;
  filter: saturate(.5);
  transform: scale(1.12);
  transition: opacity .9s var(--ease), filter .9s, transform 1.6s var(--ease)
}

.why__p::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(8, 22, 49, .6), rgba(8, 22, 49, 0) 24%), linear-gradient(to top, rgba(8, 22, 49, .92), rgba(8, 22, 49, .1) 70%);
  opacity: 1;
  transition: opacity .8s
}

.why__in {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 2.2rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between
}

.why__n {
  font-size: .74rem;
  letter-spacing: .24em;
  color: var(--cedar-soft);
  font-weight: 600
}

.why__t {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 1.55rem;
  line-height: 1.1;
  letter-spacing: -.015em;
  max-width: 9ch;
  transition: font-size .8s var(--ease), max-width .8s var(--ease)
}

.why__p.is-open .why__t {
  font-size: clamp(2rem, 2.6vw, 2.9rem);
  max-width: 14ch
}

.why__d {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  color: rgba(243, 237, 224, .85);
  font-size: .98rem;
  max-width: 34ch;
  transition: max-height .8s var(--ease), opacity .6s .15s, margin .6s
}

.why__p.is-open {
  flex: 2.7
}

.why__p.is-open img {
  opacity: 1;
  filter: none;
  transform: scale(1)
}

.why__p.is-open::before {
  opacity: 1
}

.why__p.is-open .why__d {
  max-height: 140px;
  opacity: 1;
  margin-top: 1rem
}

/* ---------- final CTA ---------- */
.cta {
  position: relative;
  height: 100vh;
  min-height: 720px;
  max-height: 980px;
  display: grid;
  place-items: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
  background: var(--navy-deep)
}

.cta__bg {
  position: absolute;
  inset: -10% 0;
  z-index: 0
}

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

.cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(8, 22, 49, .55), rgba(8, 22, 49, .78))
}

.cta__in {
  position: relative;
  z-index: 2;
  width: min(1200px, calc(100% - 96px))
}

.cta .display {
  font-size: clamp(3.4rem, 9vw, 10rem);
  line-height: .9;
  margin: 2rem 0 3rem
}

.cta .display em {
  color: var(--cedar-soft)
}

.cta__lines {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: min(1500px, 120%);
  height: auto;
  aspect-ratio: 1200/420;
  transform: translate(-50%, -50%);
  opacity: .2;
  pointer-events: none
}

.cta .eyebrow {
  justify-content: center;
  color: var(--cedar-soft)
}

.cta .eyebrow::after {
  content: "";
  width: 34px;
  height: 1px;
  background: currentColor
}

.cta__sub {
  display: flex;
  gap: 2.4rem;
  justify-content: center;
  align-items: center;
  margin-top: 2.4rem;
  font-size: .9rem;
  color: rgba(255, 255, 255, .8)
}

.cta__sub a:hover {
  color: var(--cedar-soft)
}

/* ---------- footer ---------- */
.footer {
  background: var(--navy-deep);
  color: var(--cream);
  padding: clamp(80px, 8vw, 130px) 0 0;
  position: relative;
  overflow: hidden
}

.foot {
  display: grid;
  grid-template-columns: 1.5fr .7fr 1fr 1.3fr;
  gap: clamp(32px, 4vw, 72px);
  padding-bottom: 5rem
}

.foot__logo img {
  margin-bottom: 1.6rem
}

.foot p {
  color: var(--muted-on-dark);
  font-size: .98rem;
  max-width: 34ch
}

.foot h4 {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--cedar-soft);
  margin-bottom: 1.6rem
}

.foot li+li {
  margin-top: .55rem
}

.foot a {
  color: var(--cream);
  opacity: .82;
  transition: opacity .3s, color .3s
}

.foot a:hover {
  opacity: 1;
  color: var(--cedar-soft)
}

.foot address {
  font-style: normal;
  color: var(--muted-on-dark);
  line-height: 1.8;
  margin-bottom: 1rem
}

.foot__contact a {
  display: block;
  margin-bottom: .4rem
}

.news {
  display: flex;
  border-bottom: 1px solid var(--line-dark);
  margin: 1.2rem 0 2rem
}

.news input {
  flex: 1;
  background: transparent;
  border: 0;
  color: var(--cream);
  padding: .9rem 0;
  font: inherit;
  outline: 0;
  min-width: 0
}

.news input::placeholder {
  color: rgba(243, 237, 224, .4)
}

.news button {
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--cedar-soft)
}

.social {
  display: flex;
  gap: .7rem
}

.social a {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: .9rem;
  opacity: 1;
  transition: all .4s var(--ease)
}

.social a:hover {
  background: var(--cedar);
  border-color: var(--cedar);
  color: #fff
}

.foot__bottom {
  border-top: 1px solid var(--line-dark);
  padding: 1.8rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .82rem;
  color: var(--muted-on-dark);
  gap: 2rem
}

.foot__bottom nav {
  display: flex;
  gap: 1.8rem
}

.foot__bottom a {
  opacity: .8
}

.foot__big {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(4rem, 15.5vw, 16rem);
  line-height: .8;
  letter-spacing: -.04em;
  color: rgba(243, 237, 224, .045);
  white-space: nowrap;
  text-align: center;
  margin-top: 1rem;
  user-select: none;
  pointer-events: none;
  overflow: hidden;
  padding-bottom: .08em
}

/* ---------- cursor ---------- */
.cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 500;
  width: 92px;
  height: 92px;
  margin: -46px 0 0 -46px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--navy);
  display: none;
  place-items: center;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  pointer-events: none;
  transform: scale(0);
  opacity: 0
}

@media (hover:hover) and (pointer:fine) {
  .cursor {
    display: grid
  }
}

/* ---------- responsive structure (desktop-first) ---------- */
@media (max-width:1199.98px) {
  :root {
    --wrap: min(1080px, calc(100% - 64px))
  }

  .primary-nav ul {
    gap: 1.3rem
  }

  .hdr__phone {
    display: none
  }

  .booking {
    grid-template-columns: 1fr 1fr
  }

  .bk-submit {
    grid-column: 1/-1
  }

  .bk-submit .btn-x {
    width: 100%;
    padding-block: 1.3rem
  }

  .bk-field {
    border-bottom: 1px solid var(--line)
  }

  .room__img {
    grid-column: 1/10
  }

  .room__panel {
    grid-column: 7/13
  }
}

@media (max-width:991.98px) {

  .primary-nav,
  .hdr__cta .btn-book {
    display: none
  }

  .hdr {
    grid-template-columns: 1fr auto
  }

  .nav-toggle {
    display: block
  }

  .hero__ui {
    display: none
  }

  .about__grid,
  .room,
  .rev {
    display: block
  }

  .about__media {
    padding-bottom: 110px;
    margin-bottom: 3rem
  }

  .about__img-sm {
    right: 0;
    width: 42%
  }

  .about__copy {
    padding-top: 0
  }

  .amen-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px
  }

  .room__img {
    height: 420px
  }

  .room__panel {
    margin: -80px 24px 0
  }

  .rev__media {
    max-width: 420px;
    margin: 0 0 4rem 24px
  }

  .why__row {
    flex-direction: column;
    height: auto
  }

  .why__p {
    flex: none;
    height: 150px;
    border-right: 0;
    border-bottom: 1px solid var(--line-dark)
  }

  .why__p.is-open {
    height: 360px;
    flex: none
  }

  .why__t {
    max-width: none
  }

  .foot {
    grid-template-columns: 1fr 1fr
  }

  .g-grid {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 70px
  }

  .g-grid .g-item {
    grid-column: span 3 !important;
    grid-row: span 4 !important
  }

  .g-1 {
    grid-column: span 6 !important
  }

  .nearby__side {
    display: none
  }
}

@media (max-width:767.98px) {
  :root {
    --wrap: calc(100% - 40px)
  }

  .hdr {
    width: calc(100% - 32px)
  }

  .hero h1 {
    font-size: 3.4rem
  }

  .hero__ctas {
    flex-wrap: wrap;
    gap: 1rem
  }

  .booking {
    width: calc(100% - 32px);
    grid-template-columns: 1fr 1fr
  }

  .bk-note {
    width: calc(100% - 32px)
  }

  .sec-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.6rem
  }

  .stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem
  }

  .stats strong {
    font-size: 2.2rem
  }

  .room__meta {
    grid-template-columns: 1fr 1fr 1fr
  }

  .signature__media {
    clip-path: inset(8% 6% 8% 6%)
  }

  .foot {
    grid-template-columns: 1fr
  }

  .foot__bottom {
    flex-direction: column;
    align-items: flex-start
  }

  .about__tag {
    display: none
  }
}

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

  .hero__loc {
    letter-spacing: .14em
  }

  .g-grid .g-item {
    grid-column: span 6 !important
  }

  .filters {
    gap: 1.2rem
  }

  .amen-cards {
    grid-template-columns: 1fr
  }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important
  }

  .hero__swiper img {
    transform: none
  }

  .loader {
    display: none !important
  }
}

/* footer: good-to-know list */
.foot__info li {
  display: flex;
  justify-content: space-between;
  gap: 1.2rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--line-dark);
  font-size: .92rem;
  color: var(--cream)
}

.foot__info li span {
  font-size: .64rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cedar-soft);
  padding-top: .25rem;
  white-space: nowrap
}

.foot__info li+li {
  margin-top: 0
}

/* ==========================================================================
   INNER PAGES — Amenities & Services · Gallery · Attraction · Contact Us
   Header + footer are shared with the homepage; everything below is page body.
   ========================================================================== */

/* ---------- page hero ---------- */
.page-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(440px, 60vh, 620px);
  padding: calc(var(--header-h) + 70px) 0 clamp(56px, 6vw, 88px);
  background: var(--navy-deep);
  color: #fff;
  overflow: hidden;
  isolation: isolate
}

.page-hero__bg {
  position: absolute;
  inset: -4% 0;
  z-index: -2
}

.page-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 60%
}

.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(8, 22, 49, .92) 0%, rgba(8, 22, 49, .4) 50%, rgba(8, 22, 49, .55) 100%), linear-gradient(95deg, rgba(8, 22, 49, .7) 0%, rgba(8, 22, 49, 0) 70%)
}

.page-hero__lines {
  position: absolute;
  z-index: -1;
  right: -80px;
  bottom: -40px;
  width: 780px;
  height: auto;
  aspect-ratio: 1200/420;
  opacity: .16;
  color: #fff;
  pointer-events: none
}

.crumbs {
  display: flex;
  align-items: center;
  gap: .9rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--cedar-soft)
}

.crumbs a {
  color: rgba(255, 255, 255, .78);
  transition: color .3s
}

.crumbs a:hover {
  color: #fff
}

.crumbs i {
  font-size: .55rem;
  opacity: .6
}

.page-hero h1 {
  font-size: clamp(3rem, 6.4vw, 6.8rem);
  line-height: .95;
  margin: 1.5rem 0 1.6rem
}

.page-hero h1 em {
  color: var(--cedar-soft)
}

.page-hero__sub {
  max-width: 540px;
  font-size: 1.08rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, .86)
}

/* ---------- shared bits ---------- */
.band-cream {
  background: var(--cream)
}

.band-paper {
  background: var(--paper)
}

.band-navy {
  background: var(--navy)
}

.band-deep {
  background: var(--navy-deep)
}

.sec-head--stack {
  display: block
}

.sec-head--stack .display {
  max-width: 15ch
}

.frame-img {
  position: relative
}

.frame-img::after {
  content: "";
  position: absolute;
  inset: 24px -24px -24px 24px;
  border: 1px solid var(--cedar);
  z-index: -1
}

/* ---------- amenities: intro + facts ---------- */
.intro__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 24px;
  align-items: start
}

.intro__head {
  grid-column: 1/7
}

.intro__head .display {
  margin-top: 1.6rem
}

.intro__body {
  grid-column: 8/13;
  padding-top: 3.2rem
}

.intro__body p+p {
  margin-top: 1.2rem
}

.fact-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(48px, 6vw, 88px);
  border-block: 1px solid var(--line)
}

.fact {
  padding: 2.3rem 2rem 2.1rem 0
}

.fact+.fact {
  padding-left: 2.2rem;
  border-left: 1px solid var(--line)
}

.fact i {
  display: block;
  color: var(--cedar);
  font-size: 1.3rem;
  margin-bottom: 1.1rem
}

.fact strong {
  display: block;
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(1.6rem, 2.2vw, 2.2rem);
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--navy)
}

.fact span {
  display: block;
  margin-top: .55rem;
  font-size: .96rem;
  color: var(--muted);
  max-width: 30ch
}

/* ---------- amenities: services grid ---------- */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px
}

.svc {
  display: flex;
  flex-direction: column;
  background: var(--navy-soft);
  transition: transform .7s var(--ease), box-shadow .7s var(--ease)
}

.svc:hover {
  transform: translateY(-8px);
  box-shadow: 0 40px 60px -34px rgba(0, 0, 0, .65)
}

.svc__img {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--navy-deep)
}

.svc__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.03);
  transition: transform 1.4s var(--ease)
}

.svc:hover .svc__img img {
  transform: scale(1.1)
}

.svc__no {
  position: absolute;
  left: 0;
  top: 1.3rem;
  background: var(--cream);
  color: var(--navy);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .22em;
  padding: .5rem .9rem
}

.svc__body {
  padding: 1.9rem 2rem 2.3rem
}

.svc__body i {
  color: var(--cedar-soft);
  font-size: 1.15rem;
  margin-bottom: 1.1rem;
  display: block
}

.svc__body h3 {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 1.8rem;
  line-height: 1.1;
  letter-spacing: -.015em;
  margin-bottom: .8rem
}

.svc__body p {
  color: var(--muted-on-dark);
  font-size: .99rem;
  line-height: 1.65
}

/* ---------- amenities: in-room checklist ---------- */
.inroom__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 24px;
  align-items: center
}

.inroom__media {
  grid-column: 1/6
}

.inroom__media .frame-img {
  aspect-ratio: 4/5
}

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

.inroom__copy {
  grid-column: 7/13
}

.inroom__copy .display {
  margin: 1.6rem 0 1.6rem
}

.checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 2.6rem;
  margin-top: 2.4rem;
  border-top: 1px solid var(--line)
}

.checks li {
  display: flex;
  gap: .95rem;
  align-items: flex-start;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 1rem;
  line-height: 1.45
}

.checks i {
  flex: none;
  margin-top: .3rem;
  font-size: .78rem;
  color: var(--cedar)
}

/* ---------- amenities: policies ---------- */
.pol-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line-dark)
}

.pol {
  padding: 2.4rem 2.2rem 2.4rem 0;
  border-bottom: 1px solid var(--line-dark)
}

.pol:not(:nth-child(3n+1)) {
  padding-left: 2.2rem;
  border-left: 1px solid var(--line-dark)
}

.pol small {
  display: block;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--cedar-soft);
  margin-bottom: .8rem
}

.pol strong {
  display: block;
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 1.85rem;
  line-height: 1.1;
  letter-spacing: -.015em;
  margin-bottom: .6rem
}

.pol p {
  color: var(--muted-on-dark);
  font-size: .98rem;
  max-width: 34ch
}

/* ---------- amenities: room types ---------- */
.mini-rooms {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px
}

.mini-room {
  display: block;
  color: var(--ink)
}

.mini-room__img {
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--sand);
  margin-bottom: 1.3rem
}

.mini-room__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.03);
  transition: transform 1.4s var(--ease)
}

.mini-room:hover .mini-room__img img {
  transform: scale(1.1)
}

.mini-room small {
  display: block;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--cedar);
  margin-bottom: .4rem
}

.mini-room h3 {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 1.6rem;
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--navy)
}

.mini-room p {
  font-size: .94rem;
  color: var(--muted);
  margin-top: .4rem
}

/* ---------- closing band ---------- */
.page-cta {
  position: relative;
  overflow: hidden;
  padding: clamp(80px, 9vw, 140px) 0;
  text-align: center
}

.page-cta .wrap {
  position: relative;
  z-index: 2
}

.page-cta .eyebrow {
  justify-content: center
}

.page-cta .eyebrow::after {
  content: "";
  width: 34px;
  height: 1px;
  background: currentColor
}

.page-cta .display {
  font-size: clamp(2.8rem, 6vw, 6.4rem);
  margin: 1.6rem 0 2.4rem
}

.page-cta__btns {
  display: flex;
  gap: 2.2rem;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap
}

.page-cta__lines {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(1500px, 130%);
  height: auto;
  aspect-ratio: 1200/420;
  transform: translate(-50%, -50%);
  opacity: .12;
  color: #fff;
  pointer-events: none
}

/* ---------- gallery page ---------- */
.gp-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 3rem;
  margin-bottom: clamp(36px, 4vw, 56px);
  flex-wrap: wrap
}

.gp-head .lede {
  max-width: 520px
}

.gp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 250px;
  grid-auto-flow: dense;
  gap: 18px
}

.gp-grid .g-item.is-wide {
  grid-column: span 2
}

.gp-grid .g-item.is-tall {
  grid-row: span 2
}

.gp-grid.is-filtered {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 300px
}

.gp-grid.is-filtered .g-item {
  grid-column: span 1;
  grid-row: span 1
}

.gp-count {
  margin-top: 2.4rem;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted)
}

/* ---------- attraction page ---------- */
.attr {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 24px;
  align-items: center;
  padding: clamp(44px, 5.5vw, 84px) 0;
  border-top: 1px solid var(--line)
}

.attr:first-child {
  border-top: 0;
  padding-top: 0
}

.attr__img {
  grid-column: 1/7;
  grid-row: 1;
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--sand)
}

.attr__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.03);
  transition: transform 1.6s var(--ease)
}

.attr:hover .attr__img img {
  transform: scale(1.09)
}

.attr__copy {
  grid-column: 8/13;
  grid-row: 1
}

.attr:nth-child(even) .attr__img {
  grid-column: 7/13
}

.attr:nth-child(even) .attr__copy {
  grid-column: 1/6
}

.attr__no {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1.3rem;
  color: var(--cedar);
  letter-spacing: .04em
}

.attr__copy h2 {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(2.2rem, 3.4vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  color: var(--navy);
  margin: .8rem 0 0
}

.attr__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: 1.6rem 0
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  border: 1px solid var(--line);
  padding: .5rem .95rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--navy)
}

.chip i {
  color: var(--cedar);
  font-size: .78rem
}

.attr__copy p {
  color: var(--muted);
  max-width: 42ch;
  margin-bottom: 1.8rem
}

.attr__copy .link-arrow {
  color: var(--navy)
}

.getting {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 24px;
  align-items: start
}

.getting__copy {
  grid-column: 1/6
}

.getting__copy .display {
  margin: 1.6rem 0 1.6rem
}

.getting__copy address {
  font-style: normal;
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 1.35;
  margin: 1.6rem 0 2rem;
  color: var(--cream)
}

.getting__map {
  grid-column: 7/13
}

/* ---------- map ---------- */
.map-frame {
  position: relative;
  height: clamp(360px, 34vw, 500px);
  background: var(--navy-soft);
  overflow: hidden
}

.map-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: saturate(.85) contrast(1.02)
}

/* ---------- contact page ---------- */
.contact__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 24px;
  align-items: start
}

.contact__info {
  grid-column: 1/6
}

.contact__info .display {
  margin: 1.6rem 0 1.4rem
}

.c-card {
  display: flex;
  gap: 1.4rem;
  align-items: flex-start;
  padding: 1.6rem 0;
  border-top: 1px solid var(--line)
}

.c-card:last-of-type {
  border-bottom: 1px solid var(--line)
}

.c-card__ic {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--cedar-soft);
  display: grid;
  place-items: center;
  font-size: .95rem
}

.c-card small {
  display: block;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--cedar);
  margin-bottom: .3rem
}

.c-card a,
.c-card address {
  display: block;
  font-style: normal;
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 1.45rem;
  line-height: 1.3;
  color: var(--navy);
  word-break: break-word
}

.c-card a:hover {
  color: var(--cedar)
}

.c-card .sub {
  display: inline-block;
  margin-top: .5rem;
  font-family: var(--f-body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  padding-bottom: .25rem
}

.contact__form {
  grid-column: 7/13;
  position: relative;
  background: var(--paper);
  padding: clamp(2rem, 3.4vw, 3.6rem);
  box-shadow: 0 40px 80px -40px rgba(8, 22, 49, .4), 0 0 0 1px rgba(14, 35, 71, .05)
}

.contact__form::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cedar), var(--cedar-soft))
}

.contact__form h2 {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 2.4rem;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--navy);
  margin-bottom: .6rem
}

.contact__form>p {
  color: var(--muted);
  font-size: .98rem;
  margin-bottom: 2.2rem
}

.f-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.8rem
}

.f-field {
  position: relative;
  margin-bottom: 1.5rem
}

.f-field label {
  display: block;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--cedar);
  margin-bottom: .2rem
}

.f-field input,
.f-field select,
.f-field textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  font-family: var(--f-display);
  font-size: 1.2rem;
  color: var(--navy);
  padding: .5rem 0;
  outline: 0;
  transition: border-color .3s
}

.f-field textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.5
}

.f-field input:focus,
.f-field select:focus,
.f-field textarea:focus {
  border-bottom-color: var(--cedar)
}

.f-field input::placeholder,
.f-field textarea::placeholder {
  color: rgba(14, 35, 71, .32)
}

.f-field input[type=date] {
  cursor: pointer
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  flex-wrap: wrap;
  margin-top: .8rem
}

.form-note {
  font-size: .84rem;
  color: var(--muted);
  max-width: 34ch;
  line-height: 1.5
}

.form-status {
  margin-top: 1.2rem;
  font-size: .9rem;
  color: var(--navy);
  min-height: 1.4em
}

/* ---------- inner pages: responsive ---------- */
@media (max-width:1199.98px) {
  .svc-grid {
    grid-template-columns: 1fr 1fr
  }

  .mini-rooms {
    grid-template-columns: 1fr 1fr
  }

  .gp-grid {
    grid-template-columns: repeat(3, 1fr)
  }

  .gp-grid.is-filtered {
    grid-template-columns: repeat(2, 1fr)
  }

  .contact__form {
    grid-column: 6/13
  }
}

@media (max-width:991.98px) {
  .page-hero__lines {
    width: 520px
  }

  .intro__grid,
  .inroom__grid,
  .attr,
  .getting,
  .contact__grid {
    display: block
  }

  .intro__body {
    padding-top: 2rem
  }

  .inroom__media {
    max-width: 440px;
    margin: 0 0 4.5rem 24px
  }

  .attr__img {
    margin-bottom: 2rem
  }

  .getting__map {
    margin-top: 3rem
  }

  .contact__info {
    margin-bottom: 3.5rem
  }

  .pol-grid {
    grid-template-columns: 1fr 1fr
  }

  .pol {
    padding: 2rem 1.6rem 2rem 0 !important;
    border-left: 0 !important
  }
}

@media (max-width:767.98px) {
  .page-hero {
    min-height: 420px
  }

  .page-hero h1 {
    font-size: 3.2rem
  }

  .fact-row,
  .svc-grid,
  .pol-grid,
  .checks {
    grid-template-columns: 1fr
  }

  .fact,
  .fact+.fact {
    padding: 1.6rem 0;
    border-left: 0
  }

  .fact+.fact {
    border-top: 1px solid var(--line)
  }

  .mini-rooms {
    grid-template-columns: 1fr 1fr;
    gap: 16px
  }

  .gp-grid {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 200px;
    gap: 12px
  }

  .gp-grid .g-item.is-wide {
    grid-column: span 2
  }

  .f-row {
    grid-template-columns: 1fr
  }

  .gp-head {
    align-items: flex-start
  }
}

@media (max-width:575.98px) {
  .mini-rooms {
    grid-template-columns: 1fr
  }

  .gp-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 240px
  }

  .gp-grid .g-item.is-wide {
    grid-column: span 1
  }

  .gp-grid.is-filtered {
    grid-template-columns: 1fr
  }
}

/* contact page: map beside the details */
.contact__map {
  grid-column: 7/13
}

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

/* ==========================================================================
   ACCESSIBILITY (ADA) TOOLS — footer button opens a settings panel
   ========================================================================== */
.ada-open {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: .82rem;
  color: var(--cream);
  opacity: .9;
  border: 1px solid var(--line-dark);
  padding: .55rem 1rem;
  transition: background .3s, border-color .3s, color .3s
}

.ada-open:hover,
.ada-open:focus-visible {
  background: var(--cedar);
  border-color: var(--cedar);
  color: #fff;
  opacity: 1
}

.ada-open i {
  font-size: 1rem
}

.ada-panel {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1200;
  width: min(360px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  background: var(--navy-deep);
  color: var(--cream);
  border: 1px solid var(--line-dark);
  border-top: 3px solid var(--cedar);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .7);
  padding: 1.4rem 1.5rem 1.5rem;
  font-size: .95rem;
  line-height: 1.45
}

.ada-panel[hidden] {
  display: none
}

.ada-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem
}

.ada-panel h2 {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 1.5rem;
  letter-spacing: -.01em
}

.ada-close {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--cream)
}

.ada-close:hover {
  background: var(--cream);
  color: var(--navy)
}

.ada-size {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding: .8rem 0;
  border-top: 1px solid var(--line-dark)
}

.ada-size span {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cedar-soft)
}

.ada-size div {
  display: flex;
  gap: .5rem
}

.ada-btn {
  min-width: 44px;
  height: 44px;
  padding: 0 .9rem;
  border: 1px solid var(--line-dark);
  color: var(--cream);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  text-align: left;
  transition: background .25s, color .25s, border-color .25s
}

.ada-btn:hover {
  border-color: var(--cream)
}

.ada-btn[aria-pressed=true] {
  background: var(--cream);
  color: var(--navy);
  border-color: var(--cream)
}

.ada-toggles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
  margin: .4rem 0 1rem
}

.ada-toggles .ada-btn {
  justify-content: flex-start;
  height: auto;
  min-height: 52px;
  padding: .6rem .8rem;
  font-size: .85rem;
  line-height: 1.25
}

.ada-toggles .ada-btn i {
  color: var(--cedar-soft);
  width: 1.1em;
  text-align: center
}

.ada-toggles .ada-btn[aria-pressed=true] i {
  color: var(--cedar)
}

.ada-reset {
  width: 100%;
  height: 46px;
  background: var(--cedar);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase
}

.ada-reset:hover {
  background: var(--cream);
  color: var(--navy)
}

.ada-note {
  margin-top: .9rem;
  font-size: .8rem;
  color: var(--muted-on-dark)
}

.ada-note a {
  text-decoration: underline
}

/* the modes (set on <html> by main.js) */
html.ada-t1 {
  font-size: 112.5%
}

html.ada-t2 {
  font-size: 125%
}

html.ada-t3 {
  font-size: 150%
}

html.ada-contrast :is(main, footer, .site-header, .offcanvas) {
  filter: contrast(1.35) saturate(1.1)
}

html.ada-gray :is(main, footer, .site-header, .offcanvas) {
  filter: grayscale(1)
}

html.ada-contrast.ada-gray :is(main, footer, .site-header, .offcanvas) {
  filter: grayscale(1) contrast(1.35)
}

html.ada-links a:not(.btn-x):not(.btn-book) {
  text-decoration: underline !important;
  text-underline-offset: .2em
}

html.ada-font :not(i):not(.fa-solid):not(.fa-brands) {
  font-family: Arial, Helvetica, sans-serif !important;
  letter-spacing: normal
}

html.ada-font .display,
html.ada-font .display em {
  font-style: normal
}

html.ada-focus :focus-visible {
  outline: 3px solid #ffbf47 !important;
  outline-offset: 3px !important
}

html.ada-motion *,
html.ada-motion *::before,
html.ada-motion *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important
}

html.ada-motion .cursor {
  display: none !important
}
/* ---------- ADA feature page ---------- */
.ada-note-card {
  display: flex;
  gap: 1.4rem;
  align-items: flex-start;
  padding: 1.8rem 2rem;
  border: 1px solid var(--cedar-soft);
  border-radius: 12px;
  background: rgba(196, 149, 106, .06);
  max-width: 820px
}
.ada-note-card__icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(196, 149, 106, .18);
  color: var(--cedar);
  font-size: 1.1rem
}
@media (max-width: 720px) {
  .ada-note-card {
    flex-direction: column;
    padding: 1.4rem 1.3rem
  }
}