/* ============================================================
   NOIR HOUSE — dark urban contemporary
   templateStyle2 / template3 · contains NO business data
   Third silhouette: split-screen hero (dark type field left,
   tall image bleeding off the right edge) + ruled base strip.
   ============================================================ */
:root {
  --ink: #101010;
  --ink-2: #171717;
  --ink-3: #1e1e1e;
  --ivory: #f2efe9;
  --ivory-2: #cfcac1;
  --grey: #9a958c;
  --champagne: #c9a86a;
  --champagne-2: #d9bd88;
  --rule: rgba(242, 239, 233, 0.12);
  --rule-2: rgba(242, 239, 233, 0.24);
  --gut: clamp(1.15rem, 4.5vw, 4.5rem);
  --maxw: 90rem;
  --e: cubic-bezier(0.16, 1, 0.3, 1);
  --serif: 'Bodoni Moda', 'Didot', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --bg: var(--ink-2);
  --heading: var(--ivory);
  --border: var(--rule);
  --font-heading: var(--serif);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--ink);
}
body {
  margin: 0;
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.nh-locked {
  overflow: hidden;
}
img {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
}
h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
figure,
blockquote,
address {
  margin: 0;
}
ul,
ol {
  padding: 0;
  list-style: none;
}
iframe {
  border: 0;
}
address {
  font-style: normal;
}
button {
  font: inherit;
  color: inherit;
}
:where(a, button, input, select, iframe, [tabindex]):focus-visible {
  outline: 2px solid var(--champagne);
  outline-offset: 3px;
}
.skip {
  position: absolute;
  left: -9999px;
  z-index: 600;
  background: var(--ivory);
  color: var(--ink);
  padding: 0.7rem 1.1rem;
}
.skip:focus {
  left: 0;
}
.nh-wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
  min-width: 0;
}
section[id] {
  scroll-margin-top: 5rem;
}

/* ---------- boot ---------- */
.boot-screen {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: var(--grey);
  font: 400 0.68rem/1 var(--sans);
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
.boot-line {
  width: 60px;
  height: 1px;
  background: var(--rule-2);
  position: relative;
  overflow: hidden;
}
.boot-line::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 40%;
  background: var(--champagne);
  animation: bs 1.3s var(--e) infinite;
}
@keyframes bs {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(250%);
  }
}
.boot-error {
  text-transform: none;
  letter-spacing: 0;
  padding: var(--gut);
  text-align: center;
}
.boot-retry {
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--rule-2);
  background: none;
  cursor: pointer;
}

/* ---------- type ---------- */
.nh-display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.6rem, 7.2vw, 6.4rem);
  line-height: 0.98;
  letter-spacing: -0.018em;
}
.nh-display--sm {
  font-size: clamp(2.1rem, 5.6vw, 4.4rem);
}
.nh-h2 {
  min-width: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.nh-h2--tight {
  max-width: 20ch;
  margin-top: 0.8rem;
}
/* Clip-reveal lines. The wrapper hides, the inner slides — one transform each. */
.nh-line {
  display: block;
  overflow: hidden;
}
.nh-line > i {
  display: block;
  font-style: normal;
}
.nh-tag {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--grey);
}
.nh-tag span {
  font-family: var(--serif);
  font-size: 0.9rem;
  letter-spacing: 0;
  color: var(--champagne);
}
.nh-tag::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--rule);
}
.nh-tag--light {
  color: var(--ivory-2);
}
.nh-prose {
  font-size: clamp(0.96rem, 1.2vw, 1.08rem);
  color: var(--ivory-2);
  max-width: 54ch;
  line-height: 1.8;
}
.nh-prose--light {
  color: var(--ivory-2);
  margin-inline: auto;
}
.nh-fine {
  margin-top: 1.2rem;
  padding-left: 1rem;
  border-left: 1px solid var(--champagne);
  font-size: 0.86rem;
  color: var(--grey);
  max-width: 44ch;
}

/* ---------- actions ---------- */
.nh-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 2.75rem;
  padding: 0.95rem 1.6rem;
  border: 1px solid var(--rule-2);
  background: none;
  color: var(--ivory);
  text-decoration: none;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background 0.55s var(--e),
    color 0.55s var(--e),
    border-color 0.55s var(--e),
    gap 0.55s var(--e);
}
.nh-btn i {
  width: 20px;
  height: 1px;
  background: currentColor;
  flex: 0 0 20px;
  position: relative;
}
.nh-btn i::after {
  content: '';
  position: absolute;
  right: 0;
  top: -3px;
  width: 6px;
  height: 6px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
.nh-btn--sm {
  padding: 0.75rem 1.2rem;
  font-size: 0.64rem;
}
.nh-btn--full {
  width: 100%;
  justify-content: center;
}
.nh-btn--light {
  border-color: var(--champagne);
  color: var(--champagne-2);
}
.nh-btn.is-busy {
  opacity: 0.55;
  pointer-events: none;
}
.nh-ghost {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ivory-2);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-2);
  transition: border-color 0.5s var(--e);
}
.nh-round {
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--rule-2);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.45s var(--e),
    color 0.45s var(--e);
}
.nh-round svg {
  width: 16px;
  height: 16px;
}
.nh-count {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--ivory-2);
}
.nh-count i {
  width: 28px;
  height: 1px;
  background: var(--rule-2);
}
@media (hover: hover) {
  .nh-btn:hover {
    background: var(--ivory);
    color: var(--ink);
    border-color: var(--ivory);
    gap: 1.1rem;
  }
  .nh-btn--light:hover {
    background: var(--champagne);
    border-color: var(--champagne);
    color: var(--ink);
  }
  .nh-ghost:hover {
    border-color: var(--champagne);
  }
  .nh-round:hover {
    background: var(--ivory);
    color: var(--ink);
  }
}

/* ---------- nav ---------- */
.nh-nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 300;
  border-bottom: 1px solid transparent;
  transition:
    background 0.6s var(--e),
    border-color 0.6s var(--e);
}
.nh-nav.is-stuck {
  background: rgba(16, 16, 16, 0.86);
  border-bottom-color: var(--rule);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.nh-nav__row {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(1rem, 2vw, 1.4rem) var(--gut);
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-width: 0;
  transition: padding 0.6s var(--e);
}
.nh-nav.is-stuck .nh-nav__row {
  padding-block: 0.7rem;
}
.nh-id {
  font-family: var(--serif);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  margin-right: auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nh-id--foot {
  font-size: 1.3rem;
  margin-right: 0;
}
.nh-nav__set {
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 1.8vw, 1.9rem);
}
.nh-nav__set a {
  position: relative;
  text-decoration: none;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ivory-2);
  padding: 0.4rem 0;
}
.nh-nav__set a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--champagne);
  transition: right 0.5s var(--e);
}
.nh-nav__set a.is-active {
  color: var(--ivory);
}
.nh-nav__set a.is-active::after {
  right: 0;
}
@media (hover: hover) {
  .nh-nav__set a:hover::after {
    right: 0;
  }
}
.nh-nav__act {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--champagne-2);
  min-height: 2.4rem;
  white-space: nowrap;
}
.nh-nav__act i {
  width: 18px;
  height: 1px;
  background: currentColor;
  transition: width 0.5s var(--e);
}
@media (hover: hover) {
  .nh-nav__act:hover i {
    width: 28px;
  }
}
.nh-burger {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  background: none;
  cursor: pointer;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
}
.nh-burger span {
  display: block;
  height: 1px;
  background: var(--ivory);
  width: 22px;
}
.nh-burger span:nth-child(2) {
  width: 14px;
}
.nh-rail {
  height: 1px;
}
.nh-rail i {
  display: block;
  height: 1px;
  background: var(--champagne);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* ---------- HERO: split screen ---------- */
.nh-hero {
  position: relative;
  min-height: min(100vh, 58rem);
  min-height: min(100dvh, 58rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding-top: clamp(5rem, 12vh, 8rem);
}
.nh-hero__grid {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 2rem;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
  min-width: 0;
}
.nh-hero__type {
  min-width: 0;
  padding-block: clamp(1.5rem, 4vh, 3rem);
}
.nh-hero__type .nh-display {
  margin-top: 1.3rem;
  text-transform: uppercase;
}
.nh-hero__place {
  margin-top: 1.4rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grey);
}
.nh-hero__acts {
  margin-top: clamp(1.7rem, 4vw, 2.6rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.6rem;
}
.nh-hero__shot {
  position: relative;
  min-width: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ink-3);
}
.nh-hero__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  animation: nhZoom 14s var(--e) forwards;
}
@keyframes nhZoom {
  from {
    transform: scale(1.14);
  }
  to {
    transform: scale(1.02);
  }
}
.nh-hero__mask {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(16, 16, 16, 0.72), rgba(16, 16, 16, 0.05) 55%);
}
/* Base strip — thin, ruled, real amenity labels */
.nh-strip {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid var(--rule);
  max-width: var(--maxw);
  margin-inline: auto;
  width: 100%;
}
.nh-strip li {
  flex: 1 1 12rem;
  min-width: 0;
  padding: 1.05rem var(--gut);
  border-right: 1px solid var(--rule);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ivory-2);
}
.nh-strip li:last-child {
  border-right: 0;
}
.nh-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.22;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='130' height='130' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ---------- rhythm ---------- */
.nh-intro,
.nh-figs,
.nh-rooms,
.nh-amen,
.nh-space,
.nh-loc,
.nh-says,
.nh-final {
  padding-block: clamp(3.5rem, 9vw, 7.5rem);
}

/* ---------- intro ---------- */
.nh-intro__grid {
  display: grid;
  gap: clamp(1.4rem, 3.5vw, 3rem);
}
.nh-intro__copy .nh-h2 {
  text-transform: uppercase;
}
.nh-intro__shot {
  overflow: hidden;
  background: var(--ink-3);
  aspect-ratio: 4 / 5;
}
.nh-intro__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--e);
}
@media (hover: hover) {
  .nh-intro__shot:hover img {
    transform: scale(1.04);
  }
}

/* ---------- figures ---------- */
.nh-figs {
  border-block: 1px solid var(--rule);
}
.nh-figs__row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.4rem, 4vw, 3rem) 0;
}
.nh-fig {
  min-width: 0;
}
.nh-fig strong {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
}
.nh-fig span {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--grey);
}

/* ---------- rooms: swap in place ---------- */
.nh-rooms__stage {
  display: grid;
  margin-top: clamp(1.6rem, 4vw, 2.6rem);
}
.nh-room {
  grid-area: 1 / 1;
  display: grid;
  gap: clamp(1.2rem, 3vw, 2.5rem);
  min-width: 0;
}
.nh-room[hidden] {
  display: none;
}
.nh-room__shot {
  overflow: hidden;
  background: var(--ink-3);
  aspect-ratio: 16 / 11;
  min-width: 0;
}
.nh-room__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.3s var(--e);
}
.nh-room__side {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}
.nh-room__no {
  font-family: var(--serif);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--champagne);
}
.nh-room__side h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.nh-room__side dl {
  width: 100%;
  display: grid;
  gap: 0.7rem;
}
.nh-room__side dl > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rule);
}
.nh-room__side dt {
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--grey);
}
.nh-room__side dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.1rem;
}
.nh-room__rate i {
  font-style: normal;
  font-size: 0.66em;
  color: var(--grey);
}
.nh-rooms__bar {
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.nh-rooms__btns {
  display: flex;
  gap: 0.6rem;
}
@media (hover: hover) {
  .nh-room__shot:hover img {
    transform: scale(1.05);
  }
}

/* ---------- amenities ---------- */
.nh-amen {
  position: relative;
}
.nh-amen__list {
  margin-top: clamp(1.8rem, 4vw, 3rem);
  border-top: 1px solid var(--rule);
}
.nh-amen__list li {
  border-bottom: 1px solid var(--rule);
}
.nh-amen__list button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  min-height: 2.75rem;
  padding: clamp(0.95rem, 2vw, 1.4rem) 0.2rem;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  transition:
    padding-left 0.5s var(--e),
    color 0.5s var(--e);
}
.nh-amen__n {
  font-family: var(--serif);
  font-size: 0.92rem;
  color: var(--champagne);
  flex: 0 0 auto;
}
.nh-amen__t {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--serif);
  font-size: clamp(1.1rem, 2.4vw, 1.75rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.nh-amen__list svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: var(--grey);
}
/* Tap-to-expand: the row's own image, so touch reaches the same media. */
.nh-amen__drop {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.55s var(--e);
}
.nh-amen__list li.is-open .nh-amen__drop {
  max-height: 22rem;
}
.nh-amen__drop img {
  width: 100%;
  max-height: 20rem;
  object-fit: cover;
  margin-bottom: 1rem;
}
@media (hover: hover) {
  .nh-amen__list button:hover {
    padding-left: 0.7rem;
    color: var(--champagne-2);
  }
}
/* Pointer-following preview. Decorative and never interactive. */
.nh-follow {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 250;
  width: 15rem;
  aspect-ratio: 4 / 3;
  margin: -7rem 0 0 1.6rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s var(--e);
  overflow: hidden;
}
.nh-follow.is-live {
  opacity: 1;
}
.nh-follow figure {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.4s var(--e);
}
.nh-follow figure.is-on {
  opacity: 1;
}
.nh-follow img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- THE SPACE reel ---------- */
.nh-space {
  background: var(--ink-2);
  border-block: 1px solid var(--rule);
  overflow: hidden;
}
.nh-space__head {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.nh-space__word {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.6rem, 11vw, 8rem);
  line-height: 0.9;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1px var(--rule-2);
}
@supports not (-webkit-text-stroke: 1px currentColor) {
  .nh-space__word {
    color: var(--ink-3);
  }
}
.nh-space__reel {
  margin-top: clamp(1.6rem, 4vw, 2.6rem);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 78vw;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-inline: var(--gut);
  padding-bottom: 0.6rem;
  -webkit-overflow-scrolling: touch;
}
.nh-space__f {
  position: relative;
  min-width: 0;
  scroll-snap-align: center;
  overflow: hidden;
  background: var(--ink-3);
  aspect-ratio: 4 / 3;
}
.nh-space__f img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.88);
  transition:
    transform 1.2s var(--e),
    filter 0.6s var(--e);
}
.nh-space__f figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2rem 1rem 0.85rem;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  background: linear-gradient(transparent, rgba(16, 16, 16, 0.82));
}
@media (hover: hover) {
  .nh-space__f:hover img {
    transform: scale(1.05);
    filter: brightness(1);
  }
}

/* ---------- location ---------- */
.nh-loc__grid {
  margin-top: clamp(1.6rem, 4vw, 2.6rem);
  display: grid;
  gap: clamp(1.4rem, 3.5vw, 3rem);
}
.nh-loc__side {
  min-width: 0;
}
.nh-loc__addr {
  display: grid;
  gap: 0.15rem;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2.4vw, 1.9rem);
  line-height: 1.3;
  text-transform: uppercase;
}
.nh-loc__dl {
  margin-top: 1.8rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--rule);
  display: grid;
  gap: 1rem;
}
.nh-loc__dl dt {
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--grey);
}
.nh-loc__dl dd {
  margin: 0.2rem 0 0;
  font-size: 1rem;
}
.nh-loc__dl a {
  text-decoration: none;
  border-bottom: 1px solid var(--rule-2);
}
.nh-loc__map {
  overflow: hidden;
  border: 1px solid var(--rule);
  aspect-ratio: 4 / 3;
  min-width: 0;
}
.nh-loc__map iframe {
  width: 100%;
  height: 100%;
  display: block;
  /* was invert(0.92) grayscale(1): a dark map with no colour at all.
     invert flips lightness AND hue, so hue-rotate(180deg) puts the hues
     back while the map stays dark enough for NOIR. */
  filter: invert(0.92) hue-rotate(180deg) saturate(0.85) contrast(0.92);
}

/* ---------- testimonials ---------- */
.nh-says__stage {
  display: grid;
  margin-top: clamp(1.6rem, 4vw, 2.6rem);
}
.nh-say {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: 1.7rem;
}
.nh-say[hidden] {
  display: none;
}
.nh-say blockquote {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.4rem, 3.6vw, 2.7rem);
  line-height: 1.28;
  letter-spacing: -0.01em;
  max-width: 32ch;
}
.nh-say figcaption {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}
.nh-say__av {
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 2.5rem;
  border-radius: 50%;
  overflow: hidden;
}
.nh-say__av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.nh-say__who {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.nh-say__who b {
  font-size: 0.9rem;
  font-weight: 500;
}
.nh-say__who i {
  font-style: normal;
  font-size: 0.74rem;
  color: var(--grey);
}
.nh-say__r .rating {
  display: inline-flex;
  gap: 1px;
  color: var(--champagne-2);
}
.nh-says__bar {
  margin-top: clamp(1.6rem, 4vw, 2.6rem);
  padding-top: 1.3rem;
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: center;
  gap: 1rem;
}
.nh-says__bar p {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--ivory-2);
}
.nh-says__bar p i {
  width: 26px;
  height: 1px;
  background: var(--rule-2);
}

/* ---------- final ---------- */
.nh-final {
  border-top: 1px solid var(--rule);
  background: var(--ink-2);
}
.nh-final__in {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}
.nh-final__in .nh-tag {
  justify-content: center;
}
.nh-final__in .nh-tag::after {
  display: none;
}
.nh-final__in .nh-display {
  text-transform: uppercase;
}
.nh-final__acts {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.7rem;
  align-items: center;
  justify-content: center;
}

/* ---------- footer ---------- */
.nh-foot {
  border-top: 1px solid var(--rule);
  padding-top: clamp(2.6rem, 6vw, 4.5rem);
  padding-bottom: 1.4rem;
  color: var(--ivory-2);
}
.nh-foot__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: clamp(1.6rem, 4vw, 3rem);
}
.nh-foot__grid p {
  margin-top: 0.9rem;
  font-size: 0.9rem;
  max-width: 34ch;
}
.nh-foot h4 {
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ivory);
  margin-bottom: 0.9rem;
}
.nh-foot li + li {
  margin-top: 0.45rem;
}
.nh-foot a,
.nh-foot span {
  text-decoration: none;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  min-height: 1.9rem;
}
.nh-foot nav a:hover {
  color: var(--ivory);
}
.social-icons {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.1rem;
}
.social-icon {
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid var(--rule);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.4s var(--e),
    color 0.4s var(--e);
}
.social-icon svg {
  width: 16px;
  height: 16px;
}
.social-icon:hover {
  background: var(--champagne);
  color: var(--ink);
}
/* Closing statement, in the business's own words */
.nh-foot__word {
  margin-top: clamp(2.5rem, 7vw, 5rem);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.8rem, 6.5vw, 4.6rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  color: var(--ivory);
}
.nh-foot__base {
  margin-top: clamp(1.8rem, 4vw, 3rem);
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  font-size: 0.74rem;
  color: var(--grey);
}

/* ---------- enquiry drawer ---------- */
.nh-drawer {
  position: fixed;
  inset: 0;
  z-index: 500;
}
.nh-drawer[hidden] {
  display: none;
}
.nh-drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 8, 0.72);
  opacity: 0;
  transition: opacity 0.45s var(--e);
}
.nh-drawer.is-open .nh-drawer__scrim {
  opacity: 1;
}
.nh-drawer__panel {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(30rem, 100%);
  background: var(--ink-2);
  border-left: 1px solid var(--rule);
  padding: clamp(1.4rem, 4vw, 2.6rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateX(100%);
  transition: transform 0.55s var(--e);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.nh-drawer.is-open .nh-drawer__panel {
  transform: none;
}
.nh-drawer__x {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  background: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nh-drawer__x svg {
  width: 18px;
  height: 18px;
}
.nh-form {
  margin-top: 1rem;
  display: grid;
  gap: 0.9rem;
}
.nh-form label {
  display: grid;
  gap: 0.4rem;
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--grey);
}
.nh-form input,
.nh-form select {
  font-family: var(--sans);
  /* 16px so iOS does not zoom on focus */
  font-size: 16px;
  min-height: 2.75rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--rule-2);
  background: var(--ink);
  color: var(--ivory);
  letter-spacing: 0;
  text-transform: none;
  width: 100%;
}
.nh-form__msg {
  font-size: 0.84rem;
  letter-spacing: 0;
  text-transform: none;
}
.nh-form__msg.is-err {
  color: #f0a58c;
}
.nh-form__msg.is-ok {
  color: var(--champagne-2);
}
.nh-form__note {
  font-size: 0.74rem;
  color: var(--grey);
  letter-spacing: 0;
  text-transform: none;
}

/* ---------- custom cursor (fine pointer only) ---------- */
.nh-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 700;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  border: 1px solid var(--ivory);
  pointer-events: none;
  transition:
    width 0.3s var(--e),
    height 0.3s var(--e),
    margin 0.3s var(--e),
    background 0.3s var(--e);
}
.nh-cursor.is-act {
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  background: rgba(242, 239, 233, 0.12);
}
.nh-cursor.is-img {
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-color: var(--champagne);
}

/* ---------- reveal (opt-in: html.nh-anim) ---------- */
.nh-anim .nh-line > i {
  transform: translateY(var(--mo-line));
  transition: transform var(--mo-dur-line) var(--e);
  transition-delay: calc(var(--l, 0) * var(--mo-stagger-line));
}
.nh-anim .is-in .nh-line > i,
.nh-anim .nh-line.is-in > i {
  transform: none;
}
.nh-anim .nh-hero__type,
.nh-anim .nh-strip,
.nh-anim .nh-tag,
.nh-anim .nh-intro__copy,
.nh-anim .nh-fig,
.nh-anim .nh-rooms__stage,
.nh-anim .nh-amen__list li,
.nh-anim .nh-space__f,
.nh-anim .nh-loc__side,
.nh-anim .nh-says__panel,
.nh-anim .nh-final__in,
.nh-anim .nh-foot__word {
  opacity: 0;
  transform: translateY(var(--mo-dist));
  transition:
    opacity var(--mo-dur) var(--e),
    transform var(--mo-dur) var(--e);
  transition-delay: calc(var(--i, 0) * var(--mo-stagger));
}
.nh-anim .nh-hero__shot,
.nh-anim .nh-intro__shot,
.nh-anim .nh-loc__map {
  clip-path: inset(0 0 var(--mo-clip) 0);
  transition: clip-path var(--mo-dur-clip) var(--e);
}
.nh-anim .nh-hero__shot.is-in,
.nh-anim .nh-intro__shot.is-in,
.nh-anim .nh-loc__map.is-in {
  clip-path: inset(0 0 0 0);
}
.is-in {
  opacity: 1 !important;
  transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .nh-hero__shot img {
    animation: none;
    transform: none;
  }
  .boot-line::after {
    animation: none;
  }
  .nh-drawer__panel,
  .nh-drawer__scrim,
  .nh-amen__drop {
    transition: none;
  }
  .nh-intro__shot img,
  .nh-room__shot img,
  .nh-space__f img {
    transition: none;
  }
  .nh-cursor,
  .nh-follow {
    display: none;
  }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width: 560px) {
  .nh-figs__row {
    grid-template-columns: repeat(4, 1fr);
  }
  .nh-space__reel {
    grid-auto-columns: 44vw;
  }
}

@media (min-width: 900px) {
  /* the split: type left, image bleeding off the right edge */
  .nh-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
    gap: clamp(2rem, 4vw, 4rem);
    padding-right: 0;
  }
  .nh-hero__shot {
    aspect-ratio: auto;
    height: min(76vh, 44rem);
    margin-right: calc(-1 * max(0px, (100vw - var(--maxw)) / 2));
  }
  .nh-intro__grid {
    grid-template-columns: 11rem minmax(0, 1fr) minmax(0, 0.9fr);
    column-gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
  }
  .nh-intro__grid .nh-tag {
    grid-column: 1;
  }
  .nh-intro__copy {
    grid-column: 2;
  }
  .nh-intro__shot {
    grid-column: 3;
    grid-row: 1 / span 2;
    /* overlaps the section boundary, per the brief */
    margin-block: clamp(-3rem, -4vw, -1rem) clamp(-4rem, -6vw, -2rem);
  }
  .nh-room {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    align-items: center;
  }
  .nh-loc__grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: center;
  }
  .nh-space__reel {
    grid-auto-columns: 34vw;
  }
}

@media (min-width: 1280px) {
  .nh-space__reel {
    grid-auto-columns: 28vw;
  }
}

/* Below 992px the burger takes over — matching enhance.js's 991.98px rule. */
@media (max-width: 991px) {
  .nh-nav__set,
  .nh-nav__act {
    display: none;
  }
  .nh-burger {
    display: inline-flex;
    margin-left: auto;
  }
  .nh-nav {
    background: rgba(16, 16, 16, 0.62);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  .nh-follow,
  .nh-cursor {
    display: none;
  }
}

@media (max-width: 560px) {
  .nh-strip li {
    flex: 1 1 100%;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
    padding-block: 0.85rem;
  }
  .nh-strip li:last-child {
    border-bottom: 0;
  }
  .nh-say blockquote {
    max-width: none;
  }
  .nh-space__reel {
    grid-auto-columns: 86vw;
  }
}

@media (max-width: 360px) {
  :root {
    --gut: 1rem;
  }
  .nh-display {
    font-size: 2.3rem;
  }
  .nh-btn {
    width: 100%;
    justify-content: center;
  }
  .nh-rooms__bar {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Light variant of the ghost link, used on the closing section. */
.nh-ghost--light {
  color: var(--champagne-2);
  border-bottom-color: var(--champagne);
}

/* ---------- review-modal palette: this template's identity ----------
   Ten tokens. Everything below reads only these, so the modal block
   itself is identical in all six templates. */
:root {
  --rv-scrim: rgba(6, 6, 6, 0.86);
  --rv-surface: var(--ink-3);
  --rv-ink: var(--ivory);
  --rv-muted: var(--ivory-2);
  --rv-accent: var(--champagne-2);
  --rv-line: var(--rule-2);
  --rv-control-line: rgba(242, 239, 233, 0.37);
  --rv-radius: 2px;
  --rv-trigger-ink: var(--ivory-2);
  --rv-trigger-line: rgba(242, 239, 233, 0.37);
  --rv-focus: var(--champagne-2);
}

/* ============================================================
   REVIEW MODAL — shared, byte-identical in all six templates
   The testimonials section shows one quote at a time, so a long
   Google review is cut off by the carousel. Clicking a review now
   opens it in full over the page, with its own prev/next, focus
   trap and Esc. Every colour here comes from the --rv-* mapping
   declared above, which is the only part that differs per
   template — the block itself must stay identical so a fix lands
   once instead of six times.
   ============================================================ */
body.rv-locked {
  overflow: hidden;
}

/* stars() emits a <path> with no fill attribute, so SVG's default
   (black) applied and every `color:` set on .rating was inert. */
.rating svg {
  fill: currentColor;
}

/* ---------- the trigger, sitting on the section background ---------- */
.rv-open {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  margin: 0;
  padding: 0.44rem 0.85rem;
  border: 1px solid var(--rv-trigger-line);
  border-radius: 999px;
  background: none;
  color: var(--rv-trigger-ink);
  font-family: inherit;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  transition:
    color 0.35s ease,
    border-color 0.35s ease;
}
.rv-open i,
.rv-open svg {
  width: 0.85rem;
  height: 0.85rem;
}
@media (hover: hover) {
  .rv-open:hover {
    color: var(--rv-focus);
    border-color: currentColor;
  }
}
.rv-open:focus-visible {
  outline: 2px solid var(--rv-focus);
  outline-offset: 2px;
}

/* ---------- the overlay ---------- */
.rv-modal {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.75rem, 3vw, 2rem);
  opacity: 0;
  transition: opacity 0.32s ease;
}
.rv-modal.is-open {
  opacity: 1;
}
.rv-modal[hidden] {
  display: none;
}
.rv-modal__scrim {
  position: absolute;
  inset: 0;
  background: var(--rv-scrim);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  border: 0;
  cursor: pointer;
}
.rv-modal__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 44rem;
  max-height: min(86dvh, 46rem);
  display: flex;
  flex-direction: column;
  background: var(--rv-surface);
  color: var(--rv-ink);
  border: 1px solid var(--rv-line);
  border-radius: var(--rv-radius);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.45);
  transform: translateY(14px) scale(0.985);
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
.rv-modal.is-open .rv-modal__panel {
  transform: none;
}

/* ---------- panel chrome ----------
   --rv-line is the decorative divider hairline; WCAG 1.4.11 exempts pure
   decoration. Anything that is the boundary of an actual control uses
   --rv-control-line / --rv-trigger-line, which are solved per template to
   clear 3:1 against the surface they sit on. */
.rv-modal__top {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1rem, 2.5vw, 1.5rem) clamp(1.1rem, 3vw, 2.1rem);
  border-bottom: 1px solid var(--rv-line);
}
.rv-modal__h {
  margin: 0;
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rv-muted);
}
.rv-modal__x,
.rv-modal__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 2.75rem = 44px, the minimum touch target. These were 2.4rem (38.4px),
     which is below it on every phone. */
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--rv-control-line);
  border-radius: 999px;
  background: none;
  color: var(--rv-ink);
  cursor: pointer;
  transition:
    color 0.3s ease,
    border-color 0.3s ease;
}
.rv-modal__x i,
.rv-modal__x svg,
.rv-modal__nav i,
.rv-modal__nav svg {
  width: 1.05rem;
  height: 1.05rem;
}
@media (hover: hover) {
  .rv-modal__x:hover,
  .rv-modal__nav:hover {
    color: var(--rv-accent);
    border-color: currentColor;
  }
}
.rv-modal__x:focus-visible,
.rv-modal__nav:focus-visible {
  outline: 2px solid var(--rv-accent);
  outline-offset: 2px;
}

/* ---------- the review itself ---------- */
.rv-modal__body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: clamp(1.3rem, 3.5vw, 2.4rem) clamp(1.1rem, 3vw, 2.1rem);
}
.rv-item {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2.5vw, 1.5rem);
}
.rv-item[hidden] {
  display: none;
}
.rv-item__stars {
  display: inline-flex;
  gap: 2px;
  color: var(--rv-accent);
}
.rv-item__q {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(1.05rem, 2.4vw, 1.45rem);
  line-height: 1.52;
  color: var(--rv-ink);
  /* the whole point of the modal: never clamped */
  overflow-wrap: break-word;
}
.rv-item__who {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding-top: clamp(0.8rem, 2vw, 1.2rem);
  border-top: 1px solid var(--rv-line);
}
.rv-item__av {
  width: 2.6rem;
  height: 2.6rem;
  flex: 0 0 auto;
  border-radius: 999px;
  overflow: hidden;
  background: var(--rv-line);
}
.rv-item__av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rv-item__id {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.rv-item__id b {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--rv-ink);
}
.rv-item__id i {
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--rv-muted);
}

/* ---------- prev / next ---------- */
.rv-modal__bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(0.8rem, 2vw, 1.1rem) clamp(1.1rem, 3vw, 2.1rem);
  border-top: 1px solid var(--rv-line);
}
.rv-modal__count {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--rv-muted);
}

/* lucide hydrates <i data-lucide> into <svg>. If that script never
   arrives the <i> stays empty, so every control keeps a text glyph. */
.rv-modal__x i:empty::after {
  content: '\00d7';
  font-size: 1.15rem;
  line-height: 1;
}
.rv-modal__nav[data-rvdir='-1'] i:empty::after {
  content: '\2039';
  font-size: 1.3rem;
  line-height: 1;
}
.rv-modal__nav[data-rvdir='1'] i:empty::after {
  content: '\203a';
  font-size: 1.3rem;
  line-height: 1;
}

@media (max-width: 560px) {
  .rv-modal {
    padding: 0;
    align-items: flex-end;
  }
  .rv-modal__panel {
    max-width: none;
    max-height: 92dvh;
    border-radius: var(--rv-radius) var(--rv-radius) 0 0;
    border-bottom: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rv-modal,
  .rv-modal__panel,
  .rv-open,
  .rv-modal__x,
  .rv-modal__nav {
    transition: none;
  }
  .rv-modal__panel {
    transform: none;
  }
}

/* ============================================================
   RESPONSIVE MOTION SYSTEM
   These templates are consumed inside a mobile application, so
   mobile is not a version with the motion taken out. Every reveal
   distance, duration, stagger and wipe depth is a token here, and
   the mobile block below re-tunes the same values instead of
   switching anything off: shorter travel, quicker timing, a
   shallower wipe. One animation language, two sets of parameters.
   Desktop values are exactly what this file had before the tokens
   were introduced, so nothing changed above 768px.
   ============================================================ */
:root {
  --mo-dist: 20px;
  --mo-line: 105%;
  --mo-clip: 100%;
  --mo-dur: 0.9s;
  --mo-dur-clip: 1.3s;
  --mo-dur-line: 1.05s;
  --mo-stagger: 70ms;
  --mo-stagger-line: 110ms;
  /* parallax multiplier, read by app.js */
  --mo-par: 1;
  /* touch press feedback */
  --mo-press: 0.97;
}
/* mobile / in-app: same animations, smaller gestures */
@media (max-width: 768px) {
  :root {
    --mo-dist: 12px;
    --mo-line: 60%;
    --mo-clip: 70%;
    --mo-dur: 0.68s;
    --mo-dur-clip: 0.95s;
    --mo-dur-line: 0.84s;
    --mo-stagger: 50ms;
    --mo-stagger-line: 78ms;
    --mo-par: 0.4;
  }
}
/* Reduced motion keeps the transition functional and drops the travel,
   rather than removing the state change and its meaning. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --mo-dist: 0px;
    --mo-line: 0%;
    --mo-clip: 0%;
    --mo-dur: 0.01s;
    --mo-dur-clip: 0.01s;
    --mo-dur-line: 0.01s;
    --mo-stagger: 0ms;
    --mo-stagger-line: 0ms;
    --mo-par: 0;
    --mo-press: 1;
  }
}

/* ==========================================================
   TOUCH MOTION MIRROR  (auto-generated from this file's own
   @media (hover: hover) rules, so coverage is 1:1 by construction)
   These templates run inside a mobile application, where hover never
   fires. Every hover rule above has the twin below: .is-tapped is set
   by touchMotion() in app.js on tap and cleared when something else is
   tapped, which is the closest honest equivalent of the pointer
   arriving and leaving. Declarations are copied verbatim, so the touch
   state and the hover state cannot drift apart.
   ========================================================== */
@media (hover: none) {
  .nh-btn.is-tapped {
    background: var(--ivory);
    color: var(--ink);
    border-color: var(--ivory);
    gap: 1.1rem;
  }
  .nh-btn--light.is-tapped {
    background: var(--champagne);
    border-color: var(--champagne);
    color: var(--ink);
  }
  .nh-ghost.is-tapped {
    border-color: var(--champagne);
  }
  .nh-round.is-tapped {
    background: var(--ivory);
    color: var(--ink);
  }
  .nh-nav__set a.is-tapped::after {
    right: 0;
  }
  .nh-nav__act.is-tapped i {
    width: 28px;
  }
  .nh-intro__shot.is-tapped img {
    transform: scale(1.04);
  }
  .nh-room__shot.is-tapped img {
    transform: scale(1.05);
  }
  .nh-amen__list button.is-tapped {
    padding-left: 0.7rem;
    color: var(--champagne-2);
  }
  .nh-space__f.is-tapped img {
    transform: scale(1.05);
    filter: brightness(1);
  }
  .rv-open.is-tapped {
    color: var(--rv-focus);
    border-color: currentColor;
  }
  .rv-modal__x.is-tapped,
  .rv-modal__nav.is-tapped {
    color: var(--rv-accent);
    border-color: currentColor;
  }
}

/* Press feedback: a control has to acknowledge a finger, and hover
   never will. Momentary, transform-only, and it respects --mo-press
   which reduced motion pins to 1. */
@media (hover: none) {
  .nh-btn.is-press,
  .nh-btn--light.is-press,
  .nh-ghost.is-press,
  .nh-nav__act.is-press,
  .nh-round.is-press,
  .rv-modal__nav.is-press,
  .rv-modal__x.is-press,
  .rv-open.is-press {
    transform: scale(var(--mo-press));
  }
}
.nh-btn,
.nh-btn--light,
.nh-ghost,
.nh-nav__act,
.nh-round,
.rv-modal__nav,
.rv-modal__x,
.rv-open {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ============================================================
   REVIEWS — the inline card mirrors the review modal
   Same eyebrow strip, same star row at the top, same hairline above
   the attribution, same footer bar, and it reads this template's own
   --rv-* palette. The card and the opened panel are one object, and
   the per-template difference falls out of --rv-radius / --rv-surface
   rather than a separate set of rules.
   Full container width on purpose: a narrow card leaves a dead area
   beside it, and the quote keeps its own measure instead.
   ============================================================ */
.nh-says__panel {
  margin-top: clamp(1.4rem, 3vw, 2.4rem);
  background: var(--rv-surface);
  border: 1px solid var(--rv-control-line);
  border-radius: var(--rv-radius);
  overflow: hidden;
}
.nh-says__eyebrow {
  margin: 0;
  padding: clamp(0.95rem, 2.5vw, 1.35rem) clamp(1.1rem, 3vw, 2.1rem);
  border-bottom: 1px solid var(--rv-line);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rv-muted);
}
.nh-says__stage {
  margin-top: 0;
  padding: clamp(1.3rem, 3.5vw, 2.4rem) clamp(1.1rem, 3vw, 2.1rem);
}
/* the rating leads the card now instead of trailing the attribution */
.nh-say__r {
  color: var(--rv-accent);
}
.nh-say blockquote {
  color: var(--rv-ink);
}
/* margin-top:auto is kept from the stacked carousel: the quotes share one
   grid cell, so pinning the attribution to the bottom holds the hairline at
   a single height whichever review is showing. */
.nh-say figcaption {
  margin-top: auto;
  padding-top: clamp(0.85rem, 2vw, 1.25rem);
  border-top: 1px solid var(--rv-line);
  flex-wrap: wrap;
}
.nh-say__who b {
  color: var(--rv-ink);
}
.nh-say__who i {
  color: var(--rv-muted);
}
.nh-says__bar {
  margin-top: 0;
  padding: clamp(0.75rem, 2vw, 1.05rem) clamp(1.1rem, 3vw, 2.1rem);
  padding-top: clamp(0.75rem, 2vw, 1.05rem);
  border-top: 1px solid var(--rv-line);
  justify-content: space-between;
}
.nh-says__bar p {
  color: var(--rv-muted);
}
.nh-says__bar .nh-round {
  border-color: var(--rv-control-line);
  color: var(--rv-ink);
}

/* ============================================================
   FOOTER — one column below the tablet breakpoint
   auto-fit resolved to two columns as soon as the container cleared
   ~30rem, which pushed Explore into the right half and left Contact
   alone beside an empty cell. Below 768px the footer stacks to one
   column so Explore, Contact and the brand all start at the same left
   edge as every other section on the page.
   ============================================================ */
@media (max-width: 767.98px) {
  .nh-foot__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============================================================
   FOOTER — Contact on the left, Explore/Index on the right, side by side
   Explore/Index and Contact are the grid's second and third children;
   Contact is always the last, verified in all six rather than assumed.
   ============================================================ */
.nh-foot__grid nav,
.nh-foot__grid > div:last-child {
  /* breathing room so neither column's text sits hard against the
     container edge, and so the two are not touching each other in the
     middle either */
  padding-inline: clamp(1.25rem, 6vw, 3rem);
}
.nh-foot__grid nav {
  justify-self: end;
  text-align: right;
}
.nh-foot__grid > div:last-child {
  justify-self: start;
  text-align: left;
}

/* Mobile: Contact sits beside Explore rather than under it. The brand
   block keeps the full width above them, then the row is Contact on the
   left and Explore on the right. Placement is explicit because the DOM
   order is brand, nav, contact — the nav has to be sent to column 2 and
   Contact pulled back to column 1. */
@media (max-width: 767.98px) {
  .nh-foot__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(1.5rem, 7vw, 3rem);
  }
  .nh-foot__grid > div:first-child {
    grid-column: 1 / -1;
  }
  .nh-foot__grid nav {
    grid-column: 2;
    grid-row: 2;
  }
  .nh-foot__grid > div:last-child {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
  }
  /* At 320px each half is only ~134px, and an email is wider than that.
     Let it break rather than push the column out of the viewport. */
  .nh-foot__grid > div:last-child a,
  .nh-foot__grid > div:last-child span {
    overflow-wrap: anywhere;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   WEEK MENU — A real dark table — days as rows, sittings as columns, gold hairlines.
   ═══════════════════════════════════════════════════════════════════════
   Driven by sections.food from the pipeline. All seven days always render in
   order; days the owner has not published are muted and are NOT buttons, so
   they cannot be opened by pointer or keyboard. */
.nh-menu {
  padding: clamp(3rem, 6vw, 5rem) 0;
  background: var(--ink);
}
.nh-menu__head {
  margin-bottom: clamp(1.6rem, 3.5vw, 2.6rem);
}
.nh-menu__eyebrow {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--champagne);
}
.nh-menu__h2 {
  margin: 0.5rem 0 0;
  font-size: clamp(1.7rem, 4.2vw, 2.6rem);
  line-height: 1.1;
  color: var(--ivory);
}
.nh-menu__sub {
  margin: 0.7rem 0 0;
  max-width: 46ch;
  color: var(--grey);
  line-height: 1.6;
}
.nh-menu__type {
  display: inline-block;
  margin-top: 0.9rem;
  padding: 0.3rem 0.85rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--champagne);
}
.nh-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.nh-mtbl__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.nh-mtbl {
  width: 100%;
  min-width: 42rem;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.nh-mtbl th,
.nh-mtbl td {
  padding: 0.95rem 1rem;
  text-align: start;
  vertical-align: top;
  border-block-end: 1px solid var(--rule);
}
.nh-mtbl thead th {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--champagne);
  border-block-end: 1px solid var(--champagne);
  white-space: nowrap;
}
.nh-mtbl tbody th {
  width: 9.5rem;
}
.nh-mtbl tbody th button {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--ivory);
  cursor: pointer;
  text-align: start;
  border-block-end: 1px solid transparent;
  transition:
    border-color 0.3s ease,
    color 0.3s ease;
}
.nh-mtbl td {
  color: var(--grey);
  line-height: 1.5;
}
.nh-mtbl__r--off th {
  color: var(--grey);
  font-weight: 500;
}
.nh-mtbl__r--off td {
  font-style: italic;
  opacity: 0.7;
}
@media (hover: hover) {
  .nh-mtbl tbody tr:hover td {
    color: var(--ivory);
  }
  .nh-mtbl tbody th button:hover {
    color: var(--champagne);
    border-block-end-color: var(--champagne);
  }
}
@media (hover: none) {
  .nh-mtbl tbody tr.is-tapped td {
    color: var(--ivory);
  }
  .nh-mtbl tbody th button.is-tapped {
    color: var(--champagne);
    border-block-end-color: var(--champagne);
  }
}

/* ---- day dialog ---- */
/* [hidden] only sets display:none in the UA stylesheet, so this author-level
   display would otherwise win and leave a fixed full-viewport overlay
   swallowing every click on the page. */
.nh-mdlg[hidden] {
  display: none;
}
.nh-mdlg {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 2.5rem);
  opacity: 0;
  transition: opacity 0.28s ease;
}
.nh-mdlg.is-open {
  opacity: 1;
}
.nh-mdlg__scrim {
  position: absolute;
  inset: 0;
  background: var(--rv-scrim);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.nh-mdlg__panel {
  position: relative;
  width: min(34rem, 100%);
  max-height: min(84vh, 44rem);
  overflow-y: auto;
  padding: clamp(1.5rem, 4vw, 2.3rem);
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--ink-2);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.5);
  scale: 0.97;
  transition: scale 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nh-mdlg.is-open .nh-mdlg__panel {
  scale: 1;
}
.nh-mdlg__x {
  position: absolute;
  inset-block-start: 0.8rem;
  inset-inline-end: 0.8rem;
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: transparent;
  color: var(--ivory);
  cursor: pointer;
}
.nh-mdlg__x svg,
.nh-mdlg__x i {
  width: 1.05rem;
  height: 1.05rem;
}
.nh-mdlg__abbr {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--champagne);
}
.nh-mdlg__h {
  margin: 0.3rem 0 0;
  font-size: clamp(1.5rem, 4.4vw, 2rem);
  line-height: 1.12;
  color: var(--ivory);
}
.nh-mdlg__list {
  margin: 1.3rem 0 0;
}
.nh-mdlg__row {
  display: grid;
  gap: 0.2rem;
  padding-block: 0.8rem;
  border-block-start: 1px solid var(--rule);
}
.nh-mdlg__row:first-child {
  border-block-start: 0;
  padding-block-start: 0;
}
.nh-mdlg__row dt {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--champagne);
}
.nh-mdlg__row dd {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--grey);
}
.nh-mdlg__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-block-start: 1px solid var(--rule);
}
.nh-mdlg__bar p {
  margin: 0;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey);
}
.nh-mdlg__nav {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: transparent;
  color: var(--ivory);
  cursor: pointer;
  transition:
    border-color 0.3s ease,
    color 0.3s ease;
}
.nh-mdlg__nav svg,
.nh-mdlg__nav i {
  width: 1.05rem;
  height: 1.05rem;
}
@media (hover: hover) {
  .nh-mdlg__nav:hover,
  .nh-mdlg__x:hover {
    border-color: var(--champagne);
    color: var(--champagne);
  }
}
@media (hover: none) {
  .nh-mdlg__nav.is-tapped,
  .nh-mdlg__x.is-tapped {
    border-color: var(--champagne);
    color: var(--champagne);
  }
}
@media (prefers-reduced-motion: reduce) {
  .nh-mdlg,
  .nh-mdlg__panel {
    transition: none;
    scale: 1;
  }
}

/* ---- cinematic hero stage: this pack's lights ----
   The stage itself lives in the shared enhance.js. Only the colours are set
   here, so every template gets the same physics and none of them get the same
   look. champagne on charcoal. */
.nh-hero__shot {
  --stage-warm: 214, 178, 110;
  --stage-cool: 140, 170, 210;
  --stage-ground: 10, 10, 12;
}

/* @brx-components:start — generated, do not edit */
:root {
  --brx-surface: rgba(242, 239, 233, 0.045); /* a card or panel background */
  --brx-surface2: rgba(242, 239, 233, 0.08); /* a recessed band behind a section */
  --brx-ink: var(--ivory); /* body text */
  --brx-muted: var(--ivory-2); /* secondary text */
  --brx-accent: var(--champagne); /* icons, rules and fills (needs 3:1) */
  --brx-accent-ink: var(--champagne-2); /* accent used as small text (needs 4.5:1) */
  --brx-accent-lit: var(--champagne-2); /* a decorative second accent, never text */
  --brx-on-accent: var(--ink); /* text placed on an accent fill */
  --brx-tint: rgba(201, 168, 106, 0.13); /* a wash of the accent at low alpha */
  --brx-line: var(--rule); /* hairline */
  --brx-line2: var(--rule-2); /* a stronger hairline */
  --brx-radius: 4px; /* card radius */
  --brx-radius-sm: 2px; /* control radius */
  --brx-shadow: 0 20px 50px -24px rgba(0, 0, 0, 0.66); /* resting elevation */
  --brx-shadow-l: 0 40px 88px -36px rgba(0, 0, 0, 0.78); /* raised elevation */
  --brx-font: var(--sans); /* body typeface */
}

/* ============================================================
   brx shared components — CANONICAL SOURCE. Edit this file; never edit a
   pack copy. Regenerate:  node scripts/sync-pack-components.mjs

   Not one colour, font or radius is written here. Every value is a --brx-*
   token, and sync-pack-components.mjs writes a per-pack bridge block above
   this one mapping those tokens onto that pack's OWN palette. So this file is
   byte-identical in all eleven packs and still renders eleven different
   looks: the espresso pack gets bronze on near-black with 2px corners, the
   champagne pack gets gold on ivory with 22px corners, from the same rules.

   The reason to do it this way rather than eleven hand-written copies is not
   brevity. It is that the terms section and the action dock are the two
   components where behaviour must not vary by skin — one is legal text, the
   other is the control that dials the owner. Eleven copies drift, and the
   drift is invisible until someone lands on the pack that broke.
   ============================================================ */

/* ---- shared section chrome ---- */
.brx-s {
  padding-block: clamp(2.4rem, 4.8vw, 4.2rem);
}
.brx-wrap {
  width: 100%;
  max-width: var(--maxw, 90rem);
  margin-inline: auto;
  padding-inline: var(--gut, clamp(1.15rem, 4.5vw, 5rem));
}
.brx-head {
  max-width: 44rem;
  margin-bottom: clamp(1.1rem, 2.2vw, 1.8rem);
}
.brx-eb {
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--brx-font);
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brx-accent-ink);
}
.brx-h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3.2vw, 2.5rem);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--heading);
}
.brx-note {
  margin: 1.1rem 0 0;
  max-width: 44rem;
  font-family: var(--brx-font);
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--brx-muted);
}

/* ---- quick information strip ---- */
.brx-qi {
  padding-block: clamp(1.4rem, 2.8vw, 2.2rem);
  border-bottom: 1px solid var(--brx-line);
}
.brx-qi__l {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.brx-qi__i {
  display: inline-flex;
  align-items: center;
  padding: 0.48rem 0.9rem;
  border: 1px solid var(--brx-line2);
  border-radius: 999px;
  background: var(--brx-surface);
  font-family: var(--brx-font);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--heading);
}
/* The owner's own emphasis, carried as an accent rule rather than a different
   size — a chip strip whose items disagree about height reads as a mistake. */
.brx-qi__i.is-key {
  border-color: var(--brx-accent);
  background: var(--brx-tint);
  color: var(--brx-accent-ink);
  font-weight: 700;
}

/* ---- pricing & the move-in amount ---- */
.brx-pr {
  background: var(--brx-surface2);
}
.brx-pr__g {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: clamp(0.8rem, 1.8vw, 1.3rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.brx-pr__c {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: clamp(1rem, 2vw, 1.5rem);
  border: 1px solid var(--brx-line);
  border-radius: var(--brx-radius);
  background: var(--brx-surface);
  box-shadow: var(--brx-shadow);
  transition:
    translate 0.3s var(--e),
    box-shadow 0.3s var(--e),
    border-color 0.3s var(--e);
}
.brx-pr__c:hover {
  translate: 0 -3px;
  border-color: var(--brx-accent);
  box-shadow: var(--brx-shadow-l);
}
.brx-pr__n {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  font-weight: 500;
  color: var(--heading);
}
.brx-pr__r {
  margin: 0;
  font-family: var(--brx-font);
  font-size: 0.88rem;
  color: var(--brx-muted);
}
.brx-pr__r b {
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--heading);
}
.brx-pr__r i {
  font-style: normal;
  font-size: 0.82rem;
}
/* The only filled element in the card, because the move-in figure is the
   point of the section and should be findable at a glance. */
.brx-pr__mv {
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--brx-accent);
  border-radius: var(--brx-radius-sm);
  background: var(--brx-tint);
}
.brx-pr__mvl {
  display: block;
  font-family: var(--brx-font);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--brx-accent-ink);
}
.brx-pr__mvt {
  display: block;
  margin-block: 0.12rem 0.45rem;
  font-family: var(--font-heading);
  font-size: clamp(1.45rem, 2.2vw, 1.9rem);
  font-weight: 600;
  color: var(--heading);
}
.brx-pr__ln {
  margin: 0;
  padding: 0.45rem 0 0;
  list-style: none;
  border-top: 1px solid var(--brx-line2);
}
.brx-pr__ln li {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  font-family: var(--brx-font);
  font-size: 0.765rem;
  line-height: 1.85;
  color: var(--brx-muted);
}
.brx-pr__ln em {
  font-style: normal;
  color: var(--heading);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.brx-pr__t {
  margin: auto 0 0;
  padding: 0;
  list-style: none;
}
.brx-pr__t li {
  position: relative;
  padding-left: 0.95rem;
  font-family: var(--brx-font);
  font-size: 0.78rem;
  line-height: 1.9;
  color: var(--brx-muted);
}
.brx-pr__t li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.82em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brx-accent);
}

/* ---- nearby places ---- */
.brx-nb__g {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.brx-nb__i {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--brx-line);
  border-radius: var(--brx-radius-sm);
  background: var(--brx-surface);
  transition:
    border-color 0.25s var(--e),
    translate 0.25s var(--e);
}
.brx-nb__i:hover {
  border-color: var(--brx-accent);
  translate: 0 -2px;
}
.brx-nb__i b {
  font-family: var(--brx-font);
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--heading);
}
.brx-nb__d {
  display: flex;
  align-items: center;
  gap: 0.38rem;
  font-family: var(--brx-font);
  font-size: 0.77rem;
  color: var(--brx-accent-ink);
  font-variant-numeric: tabular-nums;
}
.brx-nb__d i {
  font-style: normal;
  opacity: 0.5;
}

/* ---- walkthrough video ---- */
.brx-vd__g {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: clamp(0.65rem, 1.5vw, 1rem);
}
.brx-vd__g.is-one {
  grid-template-columns: minmax(0, 46rem);
  justify-content: center;
}
.brx-vd__f {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--brx-line);
  border-radius: var(--brx-radius);
  box-shadow: var(--brx-shadow);
  background: var(--brx-surface2);
}
.brx-vd__f video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ---- house rules & FAQ ---- */
.brx-rl__l {
  max-width: 52rem;
  border-top: 1px solid var(--brx-line);
}
.brx-rl__q {
  border-bottom: 1px solid var(--brx-line);
}
.brx-rl__q summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--brx-font);
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--heading);
}
.brx-rl__q summary::-webkit-details-marker {
  display: none;
}
.brx-rl__q summary:focus-visible {
  outline: 2px solid var(--brx-accent);
  outline-offset: 3px;
}
.brx-rl__c {
  flex: none;
  display: inline-flex;
  width: 16px;
  height: 16px;
  color: var(--brx-accent);
  transition: rotate 0.28s var(--e);
}
.brx-rl__c svg {
  width: 100%;
  height: 100%;
}
.brx-rl__q[open] .brx-rl__c {
  rotate: 180deg;
}
.brx-rl__a {
  padding-bottom: 1rem;
}
.brx-rl__a p {
  margin: 0;
  max-width: 46rem;
  font-family: var(--brx-font);
  font-size: 0.865rem;
  line-height: 1.78;
  color: var(--brx-muted);
}

/* ---- terms & conditions ---- */
.brx-terms {
  padding-block: clamp(2.6rem, 5vw, 4.5rem);
  background: var(--brx-surface2);
  border-top: 1px solid var(--brx-line);
}
.brx-terms__wrap {
  width: 100%;
  max-width: var(--maxw, 90rem);
  margin-inline: auto;
  padding-inline: var(--gut, clamp(1.15rem, 4.5vw, 5rem));
}
.brx-terms__head {
  max-width: 46rem;
  margin-bottom: clamp(1.2rem, 2.5vw, 2rem);
}
.brx-terms__eb {
  display: block;
  margin-bottom: 0.55rem;
  font-family: var(--brx-font);
  /* 11px uppercase is the size that fails contrast first, which is why the
     bridge points --brx-accent-ink at a deepened accent rather than the
     decorative one. Measured >= 4.5:1 on all eleven grounds. */
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brx-accent-ink);
}
.brx-terms__h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3.4vw, 2.7rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--heading);
}
.brx-terms__intro {
  margin: 0.85rem 0 0;
  font-family: var(--brx-font);
  font-size: 0.94rem;
  line-height: 1.7;
  color: var(--brx-muted);
}
.brx-terms__rev {
  margin: 0.75rem 0 0;
  font-family: var(--brx-font);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--brx-muted);
}
.brx-terms__list {
  max-width: 54rem;
  border-top: 1px solid var(--brx-line);
}
.brx-terms__c {
  border-bottom: 1px solid var(--brx-line);
}
.brx-terms__c summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 0.9rem;
  padding: 1.05rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--brx-font);
}
.brx-terms__c summary::-webkit-details-marker {
  display: none;
}
.brx-terms__c summary:focus-visible {
  outline: 2px solid var(--brx-accent);
  outline-offset: 3px;
}
.brx-terms__n {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  color: var(--brx-accent-ink);
}
.brx-terms__ct {
  font-size: 0.97rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--heading);
}
.brx-terms__chev {
  display: inline-flex;
  width: 16px;
  height: 16px;
  align-self: center;
  color: var(--brx-accent);
  transition: rotate 0.28s var(--e);
}
.brx-terms__chev svg {
  width: 100%;
  height: 100%;
}
.brx-terms__c[open] .brx-terms__chev {
  rotate: 180deg;
}
.brx-terms__b {
  padding: 0 0 1.15rem calc(0.9rem + 1.55em);
}
.brx-terms__b p {
  margin: 0;
  max-width: 44rem;
  font-family: var(--brx-font);
  font-size: 0.885rem;
  line-height: 1.78;
  color: var(--brx-muted);
}

/* ---- the expanding action dock ---- */
.brx-dock {
  position: fixed;
  z-index: 620;
  right: clamp(0.75rem, 1.6vw, 1.5rem);
  bottom: clamp(0.75rem, 1.6vw, 1.5rem);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}
.brx-dock__list {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
  /* Collapsed state is inert, not merely invisible: pointer-events off and
     visibility hidden keep the links out of the tab order and out from under
     the cursor, which a bare opacity:0 would not. */
  opacity: 0;
  visibility: hidden;
  translate: 0 8px;
  pointer-events: none;
  transition:
    opacity 0.24s var(--e),
    translate 0.32s var(--e),
    visibility 0.24s;
}
.brx-dock.is-open .brx-dock__list {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  pointer-events: auto;
}
.brx-dock__i {
  translate: 0 6px;
  opacity: 0;
  transition:
    translate 0.34s var(--e),
    opacity 0.26s var(--e);
  /* Staggered from the bottom up, so the row nearest the trigger arrives
     first and the eye follows the movement outward. */
  transition-delay: calc(var(--i, 1) * 32ms);
}
.brx-dock.is-open .brx-dock__i {
  translate: 0 0;
  opacity: 1;
}
.brx-dock__a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.85rem 0.5rem 0.55rem;
  border: 1px solid var(--brx-line2);
  border-radius: 999px;
  background: var(--brx-surface);
  box-shadow: var(--brx-shadow);
  color: var(--heading);
  font-family: var(--brx-font);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  backdrop-filter: blur(10px);
  transition:
    background 0.2s var(--e),
    color 0.2s var(--e),
    border-color 0.2s var(--e),
    translate 0.2s var(--e);
}
.brx-dock__a:hover,
.brx-dock__a:focus-visible {
  background: var(--brx-accent);
  border-color: var(--brx-accent);
  color: var(--brx-on-accent);
  translate: -2px 0;
}
.brx-dock__a:focus-visible {
  outline: 2px solid var(--brx-accent);
  outline-offset: 2px;
}
.brx-dock__ic {
  display: inline-flex;
  width: 30px;
  height: 30px;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--brx-tint);
  color: var(--brx-accent-ink);
  transition:
    background 0.2s var(--e),
    color 0.2s var(--e);
}
.brx-dock__a:hover .brx-dock__ic,
.brx-dock__a:focus-visible .brx-dock__ic {
  background: var(--brx-on-accent);
  color: var(--brx-accent-ink);
}
.brx-dock__ic svg {
  width: 16px;
  height: 16px;
}

/* The trigger. Collapsed it reads as a labelled pill rather than a bare
   icon — an unlabelled floating circle is the single most common way this
   pattern fails, because nobody presses a button whose purpose they cannot
   guess. */
.brx-dock__t {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.62rem 1.05rem 0.62rem 0.72rem;
  border: 1px solid var(--brx-accent);
  border-radius: 999px;
  background: var(--brx-accent);
  color: var(--brx-on-accent);
  box-shadow: var(--brx-shadow-l);
  font-family: var(--brx-font);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition:
    scale 0.24s var(--e),
    box-shadow 0.24s var(--e);
}
.brx-dock__t:hover {
  scale: 1.03;
}
.brx-dock__t:focus-visible {
  outline: 2px solid var(--brx-accent);
  outline-offset: 3px;
}
.brx-dock__ti,
.brx-dock__tc {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
}
.brx-dock__ti svg,
.brx-dock__tc svg {
  width: 17px;
  height: 17px;
}
/* Open swaps the chat glyph for a close glyph in place, so the trigger keeps
   its width and the dock does not jump as it opens. */
.brx-dock__tc {
  display: none;
}
.brx-dock.is-open .brx-dock__ti {
  display: none;
}
.brx-dock.is-open .brx-dock__tc {
  display: inline-flex;
}
.brx-dock.is-open .brx-dock__t {
  background: var(--brx-surface);
  color: var(--heading);
  border-color: var(--brx-line2);
}

/* A soft pulse the first time only, to draw the eye once without becoming a
   permanently animated element in the corner of every page. */
@keyframes brx-dock-in {
  from {
    opacity: 0;
    translate: 0 14px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
.brx-dock {
  animation: brx-dock-in 0.5s var(--e) 0.6s both;
}

/* Narrow screens: the label would crowd the thumb zone, so the trigger
   becomes a circle and the action labels stay — they are the part that
   carries meaning. */
@media (max-width: 479.98px) {
  .brx-dock__tx {
    display: none;
  }
  .brx-dock__t {
    padding: 0.68rem;
  }
}

/* Keep the pack's own back-to-top button clear of the dock. Scoped to the
   class brxMount() adds, so a pack rendering no dock is untouched. */
.brx-has-dock .back-to-top {
  bottom: clamp(4.3rem, 7vw, 5.4rem);
}

@media (prefers-reduced-motion: reduce) {
  .brx-dock,
  .brx-dock__list,
  .brx-dock__i,
  .brx-dock__a,
  .brx-dock__t,
  .brx-terms__chev {
    animation: none;
    transition: none;
    translate: none;
  }
}
/* @brx-components:end */