/* ============================================================
   MOTION HOUSE — kinetic urban co-living
   templateStyle2 / template5 · contains NO business data
   The only grotesk-led template in the set. Charcoal block behind
   an oversized type stack that OVERLAPS an image bleeding off the
   right edge, then a marquee. Rooms overlay info ON the plate.
   ============================================================ */
:root {
  --ink: #16161a;
  --ink-2: #43434b;
  --ink-3: #6a6a72;
  --paper: #f7f5f1;
  --paper-2: #fffdf9;
  --cobalt: #1f3ae0;
  --cobalt-ink: #1730b8;
  --coral: #f2542d;
  --coral-ink: #c93d1c;
  --lime: #9fbf2e;
  --rule: rgba(22, 22, 26, 0.12);
  --rule-2: rgba(22, 22, 26, 0.24);
  /* Form field boundaries are non-text UI: WCAG 1.4.11 wants 3:1. --rule-2 at
     0.24 measures 1.69:1 on the white field, so fields get their own token.
     0.50 -> 3.40:1, chosen over the 0.46 minimum (3.03) for headroom. */
  --field: rgba(22, 22, 26, 0.5);
  --rule-l: rgba(247, 245, 241, 0.22);
  --gut: clamp(1.1rem, 4.5vw, 4rem);
  --maxw: 90rem;
  --e: cubic-bezier(0.16, 1, 0.3, 1);
  --disp: 'Archivo', system-ui, -apple-system, sans-serif;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --bg: var(--ink);
  --heading: var(--paper);
  --border: var(--rule-l);
  --font-heading: var(--disp);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.mh-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: 3px solid var(--cobalt);
  outline-offset: 2px;
}
.skip {
  position: absolute;
  left: -9999px;
  z-index: 600;
  background: var(--ink);
  color: var(--paper);
  padding: 0.7rem 1.1rem;
}
.skip:focus {
  left: 0;
}
.mh-wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
  min-width: 0;
}
section[id] {
  scroll-margin-top: 4.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(--paper);
  color: var(--ink-3);
  font: 600 0.66rem/1 var(--sans);
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.boot-line {
  width: 60px;
  height: 2px;
  background: var(--rule-2);
  position: relative;
  overflow: hidden;
}
.boot-line::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 40%;
  background: var(--cobalt);
  animation: bs 1s 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: 2px solid var(--ink);
  background: none;
  cursor: pointer;
}

/* ---------- type ---------- */
.mh-huge {
  font-family: var(--disp);
  font-variation-settings: 'wdth' 88;
  font-weight: 800;
  font-size: clamp(2.9rem, 11vw, 9rem);
  line-height: 0.88;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.mh-huge--light {
  color: var(--paper);
}
.mh-huge--crop {
  font-size: clamp(3rem, 13vw, 11rem);
}
.mh-h2 {
  min-width: 0;
  font-family: var(--disp);
  font-variation-settings: 'wdth' 92;
  font-weight: 700;
  font-size: clamp(1.9rem, 5.4vw, 4rem);
  line-height: 0.96;
  letter-spacing: -0.028em;
  text-transform: uppercase;
}
.mh-h2--light {
  color: var(--paper);
}
.mh-ln {
  display: block;
  overflow: hidden;
}
.mh-ln > i {
  display: block;
  font-style: normal;
}
.mh-tag {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.mh-tag b {
  font-family: var(--disp);
  font-size: 0.8rem;
  letter-spacing: 0;
  color: var(--cobalt-ink);
}
.mh-tag::after {
  content: '';
  flex: 1 1 auto;
  height: 2px;
  background: var(--rule);
}
.mh-tag--light {
  color: rgba(247, 245, 241, 0.72);
}
.mh-tag--light b {
  color: var(--paper);
}
.mh-tag--light::after {
  background: var(--rule-l);
}
.mh-tag--on {
  color: rgba(22, 22, 26, 0.88);
}
.mh-tag--on b {
  color: var(--ink);
}
.mh-tag--on::after {
  background: rgba(22, 22, 26, 0.28);
}
.mh-prose {
  font-size: clamp(0.98rem, 1.2vw, 1.1rem);
  color: var(--ink-2);
  max-width: 50ch;
  line-height: 1.75;
}
.mh-prose--on {
  color: rgba(22, 22, 26, 0.92);
  margin-inline: auto;
  text-align: center;
}
.mh-fine {
  margin-top: 1.2rem;
  padding-left: 0.9rem;
  border-left: 3px solid var(--lime);
  font-size: 0.86rem;
  color: var(--ink-3);
  max-width: 42ch;
}

/* ---------- actions ---------- */
.mh-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.75rem;
  padding: 1rem 1.6rem;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background 0.4s var(--e),
    gap 0.4s var(--e),
    transform 0.4s var(--e);
}
.mh-btn i {
  width: 20px;
  height: 2px;
  background: currentColor;
  flex: 0 0 20px;
  position: relative;
}
.mh-btn i::after {
  content: '';
  position: absolute;
  right: 0;
  top: -3px;
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}
.mh-btn--sm {
  padding: 0.7rem 1.15rem;
  font-size: 0.64rem;
}
.mh-btn--full {
  width: 100%;
  justify-content: center;
}
.mh-btn--on {
  background: var(--ink);
  color: var(--paper-2);
}
.mh-btn.is-busy {
  opacity: 0.6;
  pointer-events: none;
}
.mh-flat {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid var(--rule-2);
  transition: border-color 0.4s var(--e);
}
.mh-flat--on {
  color: var(--ink);
  border-bottom-color: rgba(22, 22, 26, 0.45);
}
.mh-round {
  width: 2.75rem;
  height: 2.75rem;
  border: 2px solid var(--rule-2);
  border-radius: 999px;
  background: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.35s var(--e),
    color 0.35s var(--e);
}
.mh-round svg {
  width: 16px;
  height: 16px;
}
@media (hover: hover) {
  .mh-btn:hover {
    background: var(--cobalt);
    gap: 1.05rem;
    transform: translateY(-2px);
  }
  .mh-btn--on:hover {
    background: var(--paper-2);
    color: var(--ink);
  }
  .mh-flat:hover {
    border-color: var(--coral);
  }
  .mh-round:hover {
    background: var(--ink);
    color: var(--paper);
  }
}

/* ---------- nav ---------- */
.mh-nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 300;
  border-bottom: 2px solid transparent;
  transition:
    background 0.5s var(--e),
    border-color 0.5s var(--e);
}
.mh-nav.is-stuck {
  background: rgba(247, 245, 241, 0.94);
  border-bottom-color: var(--rule);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.mh-nav__row {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(0.9rem, 2vw, 1.4rem) var(--gut);
  display: flex;
  align-items: center;
  gap: 1.2rem;
  min-width: 0;
  transition: padding 0.5s var(--e);
}
.mh-nav.is-stuck .mh-nav__row {
  padding-block: 0.65rem;
}
.mh-id {
  font-family: var(--disp);
  font-variation-settings: 'wdth' 90;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-decoration: none;
  margin-right: auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mh-id--foot {
  font-size: 1.5rem;
  margin-right: 0;
}
.mh-nav__set {
  display: flex;
  align-items: center;
  gap: clamp(0.7rem, 1.7vw, 1.7rem);
}
.mh-nav__set a {
  position: relative;
  text-decoration: none;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 0.4rem 0;
}
.mh-nav__set a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--cobalt);
  transition: right 0.4s var(--e);
}
.mh-nav__set a.is-active {
  color: var(--ink);
}
.mh-nav__set a.is-active::after {
  right: 0;
}
@media (hover: hover) {
  .mh-nav__set a:hover::after {
    right: 0;
  }
}
.mh-nav__act {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cobalt-ink);
  min-height: 2.4rem;
  white-space: nowrap;
}
.mh-nav__act i {
  width: 18px;
  height: 2px;
  background: currentColor;
  transition: width 0.4s var(--e);
}
@media (hover: hover) {
  .mh-nav__act:hover i {
    width: 28px;
  }
}
.mh-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;
}
.mh-burger span {
  display: block;
  height: 2px;
  background: var(--ink);
  width: 22px;
}
.mh-burger span:nth-child(2) {
  width: 14px;
}
.mh-rail {
  height: 2px;
}
.mh-rail i {
  display: block;
  height: 2px;
  background: var(--coral);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* ---------- HERO ---------- */
.mh-hero {
  position: relative;
  overflow: hidden;
  padding-top: clamp(5.5rem, 13vh, 8.5rem);
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}
.mh-hero__block,
.mh-grid,
.mh-hero__no {
  pointer-events: none;
}
/* mobile-only dark backdrop; the desktop hero keeps .mh-hero__block */
.mh-hero__panel {
  display: none;
}
/* the charcoal block behind the type stack */
.mh-hero__block {
  position: absolute;
  left: 0;
  top: clamp(9rem, 22vh, 15rem);
  bottom: 0;
  width: min(58%, 46rem);
  background: var(--ink);
}
.mh-grid {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image:
    linear-gradient(var(--rule) 2px, transparent 2px),
    linear-gradient(90deg, var(--rule) 2px, transparent 2px);
  background-size: 5.5rem 5.5rem;
  mask-image: linear-gradient(180deg, #000, transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%);
}
.mh-hero__no {
  position: absolute;
  right: var(--gut);
  top: clamp(5.5rem, 13vh, 8.5rem);
  font-family: var(--disp);
  font-variation-settings: 'wdth' 75;
  font-weight: 800;
  font-size: clamp(3rem, 9vw, 8rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px var(--rule-2);
}
@supports not (-webkit-text-stroke: 2px currentColor) {
  .mh-hero__no {
    color: var(--rule);
  }
}
.mh-hero__in {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  min-width: 0;
}
.mh-hero__type {
  min-width: 0;
  padding-top: clamp(1.5rem, 4vh, 3rem);
}
.mh-hero__type .mh-tag {
  color: rgba(247, 245, 241, 0.72);
}
.mh-hero__type .mh-tag b {
  color: var(--paper);
}
.mh-hero__type .mh-tag::after {
  background: var(--rule-l);
}
.mh-hero__type .mh-huge {
  margin-top: 1.1rem;
  color: var(--paper);
}
.mh-hero__sub {
  margin-top: 1.3rem;
  max-width: 38ch;
  font-size: clamp(0.96rem, 1.2vw, 1.08rem);
  color: rgba(247, 245, 241, 0.82);
  line-height: 1.72;
}
.mh-hero__acts {
  margin-top: clamp(1.5rem, 3.5vw, 2.2rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.5rem;
}
.mh-hero__acts .mh-btn {
  background: var(--coral);
}
.mh-hero__acts .mh-flat {
  color: var(--paper);
  border-bottom-color: var(--rule-l);
}
@media (hover: hover) {
  .mh-hero__acts .mh-btn:hover {
    background: var(--paper);
    color: var(--ink);
  }
}
.mh-hero__shot {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: var(--ink-2);
  aspect-ratio: 4 / 3;
  transform: translateY(var(--par, 0));
}
.mh-hero__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  animation: mhIn 1.6s var(--e) both;
}
@keyframes mhIn {
  from {
    transform: scale(1.12);
  }
  to {
    transform: scale(1.04);
  }
}
.mh-card {
  position: relative;
  z-index: 3;
  margin-top: -2rem;
  margin-left: auto;
  width: min(19rem, 100%);
  padding: 1.15rem 1.3rem;
  background: var(--paper-2);
  border: 2px solid var(--ink);
}
.mh-card__city {
  font-family: var(--disp);
  font-variation-settings: 'wdth' 90;
  font-weight: 700;
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.mh-card__from {
  margin-top: 0.35rem;
  font-size: 0.86rem;
  color: var(--ink-2);
}
.mh-card__from b {
  font-family: var(--disp);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--ink);
}
.mh-card__from i {
  font-style: normal;
  font-size: 0.78em;
  color: var(--ink-3);
}
.mh-card__rate {
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.74rem;
  color: var(--ink-2);
}
.mh-card__rate .rating {
  display: inline-flex;
  gap: 1px;
  color: var(--coral-ink);
}
.mh-card__go {
  margin-top: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.75rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cobalt-ink);
}
.mh-card__go i {
  width: 18px;
  height: 2px;
  background: currentColor;
  transition: width 0.4s var(--e);
}
@media (hover: hover) {
  .mh-card__go:hover i {
    width: 30px;
  }
}

/* ---------- marquee ---------- */
.mh-marq {
  overflow: hidden;
  background: var(--cobalt);
  color: var(--paper-2);
  border-block: 2px solid var(--ink);
  padding-block: 0.7rem;
}
.mh-marq__t {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  white-space: nowrap;
  width: max-content;
  font-family: var(--disp);
  font-variation-settings: 'wdth' 85;
  font-weight: 800;
  font-size: clamp(1.4rem, 3.6vw, 2.6rem);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  animation: marq 34s linear infinite;
}
.mh-marq__t .alt {
  font-weight: 500;
  font-variation-settings: 'wdth' 110;
}
.mh-marq__t i {
  font-style: normal;
  opacity: 0.55;
}
@keyframes marq {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-33.333%);
  }
}

/* ---------- rhythm ---------- */
.mh-intro,
.mh-figs,
.mh-break,
.mh-rooms,
.mh-amen,
.mh-social,
.mh-gal,
.mh-dark,
.mh-loc,
.mh-says,
.mh-final {
  padding-block: clamp(3rem, 6.5vw, 6rem);
}

/* ---------- intro ---------- */
.mh-intro__grid {
  margin-top: clamp(1.4rem, 3vw, 2.4rem);
  display: grid;
  gap: clamp(1.6rem, 4vw, 3rem);
}
.mh-intro__copy {
  min-width: 0;
}
.mh-intro__copy .mh-prose {
  margin-top: 1.3rem;
}
.mh-intro__art {
  position: relative;
  min-width: 0;
}
.mh-intro__blk {
  position: absolute;
  inset: auto -0.8rem -0.8rem 30%;
  height: 62%;
  background: var(--lime);
  pointer-events: none;
}
.mh-intro__big,
.mh-intro__sm {
  position: relative;
  overflow: hidden;
  background: var(--ink-2);
}
.mh-intro__big {
  aspect-ratio: 4 / 5;
}
.mh-intro__sm {
  width: 52%;
  aspect-ratio: 4 / 3;
  margin: -18% 0 0 auto;
  border: 3px solid var(--paper);
}
.mh-intro__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--e);
}
@media (hover: hover) {
  .mh-intro__art figure:hover img {
    transform: scale(1.04);
  }
}

/* ---------- figures ---------- */
.mh-figs {
  background: var(--ink);
  color: var(--paper);
}
.mh-figs__row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 4vw, 2.5rem) 1rem;
}
.mh-fig {
  min-width: 0;
}
.mh-fig strong {
  display: block;
  font-family: var(--disp);
  font-variation-settings: 'wdth' 80;
  font-weight: 800;
  font-size: clamp(2.6rem, 7vw, 5.4rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
}
.mh-fig span {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(247, 245, 241, 0.76);
}

/* ---------- typographic break ---------- */
.mh-break {
  position: relative;
  overflow: hidden;
}
.mh-break .mh-wrap {
  position: relative;
}
.mh-break__shot {
  width: min(16rem, 42%);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ink-2);
  margin: -2rem 0 0 auto;
  position: relative;
  z-index: 2;
}
.mh-break__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- rooms ---------- */
.mh-rooms__grid {
  margin-top: clamp(1.4rem, 3vw, 2.4rem);
  display: grid;
  gap: 1.4rem;
  align-items: start;
}
.mh-rooms__idx {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-width: 0;
}
.mh-rooms__idx button {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.6rem 0.9rem;
  border: 2px solid var(--rule);
  background: none;
  cursor: pointer;
  font-family: var(--disp);
  font-weight: 700;
  font-size: clamp(0.95rem, 1.8vw, 1.2rem);
  text-transform: uppercase;
  color: var(--ink-3);
  transition:
    background 0.35s var(--e),
    color 0.35s var(--e),
    border-color 0.35s var(--e);
}
.mh-rooms__idx button b {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
}
.mh-rooms__idx button[aria-selected='true'] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.mh-rooms__stage {
  position: relative;
  display: grid;
  min-width: 0;
}
.mh-room {
  grid-area: 1 / 1;
  position: relative;
  min-width: 0;
}
.mh-room[hidden] {
  display: none;
}
.mh-room__back {
  position: absolute;
  inset: 1.5rem -1rem -1.5rem 1rem;
  overflow: hidden;
  background: var(--ink-2);
  opacity: 0.35;
  filter: grayscale(0.5);
}
.mh-room__back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mh-room__shot {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: var(--ink-2);
  aspect-ratio: 16 / 10;
}
.mh-room__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: mhSlide 0.7s var(--e) both;
  transition: transform 1s var(--e);
}
@keyframes mhSlide {
  from {
    opacity: 0;
    transform: translateX(3%) scale(1.03);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.mh-room__peek {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  padding: 0.35rem 0.8rem;
  background: var(--paper-2);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.35s var(--e);
}
/* info overlays the plate — the differentiator from t2/t4 */
.mh-room__over {
  position: relative;
  z-index: 2;
  margin: -3.5rem 0 0 0;
  width: min(26rem, 92%);
  padding: 1.2rem 1.4rem;
  background: var(--paper-2);
  border: 2px solid var(--ink);
}
.mh-room__over h3 {
  font-family: var(--disp);
  font-variation-settings: 'wdth' 90;
  font-weight: 800;
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
.mh-room__over dl {
  margin-top: 0.9rem;
  display: grid;
  gap: 0.5rem;
}
.mh-room__over dl > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.45rem;
  border-bottom: 2px solid var(--rule);
}
.mh-room__over dt {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.mh-room__over dd {
  margin: 0;
  font-family: var(--disp);
  font-weight: 700;
  font-size: 1.1rem;
}
.mh-room__over dd i {
  font-style: normal;
  font-size: 0.68em;
  color: var(--ink-3);
}
.mh-room__over .mh-btn {
  margin-top: 1rem;
}
@media (hover: hover) {
  .mh-room__shot:hover img {
    transform: scale(1.04);
  }
  .mh-room__shot:hover .mh-room__peek {
    opacity: 1;
  }
}

/* ---------- amenities ---------- */
.mh-amen {
  position: relative;
}
.mh-amen__list {
  margin-top: clamp(1.4rem, 3vw, 2.4rem);
  border-top: 2px solid var(--ink);
}
.mh-amen__list li {
  border-bottom: 2px solid var(--rule);
}
.mh-amen__list button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 2.75rem;
  padding: clamp(1rem, 2.6vw, 1.8rem) 0.2rem;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  transition:
    padding-left 0.45s var(--e),
    color 0.45s var(--e);
}
.mh-amen__list b {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--cobalt-ink);
  flex: 0 0 auto;
  letter-spacing: 0.06em;
}
.mh-amen__t {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--disp);
  font-variation-settings: 'wdth' 92;
  font-weight: 700;
  font-size: clamp(1.2rem, 3vw, 2.3rem);
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
.mh-amen__list svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  color: var(--ink-3);
}
.mh-amen__p[hidden] {
  display: none;
}
.mh-amen__p figure {
  overflow: hidden;
  background: var(--ink-2);
  aspect-ratio: 16 / 9;
  margin-bottom: 1rem;
  animation: mhFade 0.5s var(--e) both;
}
@keyframes mhFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.mh-amen__p img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (hover: hover) {
  .mh-amen__list button:hover {
    padding-left: 0.8rem;
    color: var(--cobalt-ink);
  }
}
.mh-follow {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 260;
  width: 15rem;
  aspect-ratio: 4 / 3;
  margin: -8rem 0 0 2rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s var(--e);
  overflow: hidden;
  border: 3px solid var(--paper-2);
}
.mh-follow.is-live {
  opacity: 1;
}
.mh-follow figure {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.4s var(--e);
}
.mh-follow figure.is-on {
  opacity: 1;
}
.mh-follow img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- social ---------- */
.mh-social {
  background: var(--cobalt);
  color: var(--paper-2);
}
.mh-social__row {
  margin-top: clamp(1.5rem, 4vw, 2.6rem);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.8rem;
}
.mh-social__f {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: var(--cobalt-ink);
  aspect-ratio: 3 / 4;
}
.mh-social__f img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--e);
}
.mh-social__f figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.8rem 0.8rem 0.7rem;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: linear-gradient(transparent, rgba(11, 20, 90, 0.85));
}
@media (hover: hover) {
  .mh-social__f:hover img {
    transform: scale(1.05);
  }
}

/* ---------- gallery ---------- */
.mh-gal__set {
  margin-top: clamp(1.4rem, 3vw, 2.4rem);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.8rem;
}
.mh-gal__f {
  min-width: 0;
}
.mh-gal__f button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--ink-2);
  cursor: pointer;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.mh-gal__f img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--e);
}
.mh-gal__f figcaption {
  margin-top: 0.5rem;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
}
@media (hover: hover) {
  .mh-gal__f button:hover img {
    transform: scale(1.05);
  }
}

/* ---------- lightbox ---------- */
.mh-lb {
  position: fixed;
  inset: 0;
  z-index: 550;
  background: rgba(16, 16, 20, 0.95);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.35s var(--e);
}
.mh-lb[hidden] {
  display: none;
}
.mh-lb.is-open {
  opacity: 1;
}
.mh-lb__x {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  z-index: 2;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  background: none;
  color: var(--paper);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mh-lb__x svg {
  width: 20px;
  height: 20px;
}
.mh-lb__stage {
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  min-height: 0;
  padding: clamp(2.6rem, 6vw, 4rem) clamp(1rem, 4vw, 3rem) 1rem;
}
.mh-lb__stage figure {
  grid-area: 1 / 1;
  max-width: 100%;
  max-height: 100%;
}
.mh-lb__stage figure[hidden] {
  display: none;
}
.mh-lb__stage img {
  max-width: 100%;
  max-height: 74vh;
  width: auto;
  height: auto;
  object-fit: contain;
  animation: mhFade 0.4s var(--e) both;
}
.mh-lb__bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  padding: 0 1rem 1.4rem;
  color: var(--paper);
}
.mh-lb__bar p {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 1rem;
  min-width: 5rem;
  text-align: center;
}
.mh-lb .mh-round {
  border-color: rgba(247, 245, 241, 0.4);
  color: var(--paper);
}
@media (hover: hover) {
  .mh-lb .mh-round:hover {
    background: var(--paper);
    color: var(--ink);
  }
}

/* ---------- dark campaign ---------- */
.mh-dark {
  background: var(--ink);
  color: var(--paper);
}
.mh-dark__in {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.mh-dark__line {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--coral);
}

/* ---------- location ---------- */
.mh-loc__grid {
  margin-top: clamp(1.4rem, 3vw, 2.4rem);
  display: grid;
  gap: clamp(1.4rem, 3.5vw, 3rem);
}
.mh-loc__side {
  min-width: 0;
}
.mh-loc__addr {
  margin-top: 1.4rem;
  display: grid;
  gap: 0.1rem;
  font-family: var(--disp);
  font-variation-settings: 'wdth' 95;
  font-weight: 700;
  font-size: clamp(1.2rem, 2.4vw, 1.9rem);
  line-height: 1.25;
  text-transform: uppercase;
}
.mh-loc__dl {
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 2px solid var(--rule);
  display: grid;
  gap: 0.9rem;
}
.mh-loc__dl dt {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.mh-loc__dl dd {
  margin: 0.2rem 0 0;
  font-size: 1rem;
}
.mh-loc__dl a {
  text-decoration: none;
  border-bottom: 2px solid var(--rule-2);
}
.mh-loc__map {
  overflow: hidden;
  border: 2px solid var(--ink);
  aspect-ratio: 4 / 3;
  min-width: 0;
}
.mh-loc__map iframe {
  width: 100%;
  height: 100%;
  display: block;
  /* was grayscale(1). MOTION is a cool, high-contrast identity, so the
     map gets its colour back with a touch more saturation and no sepia. */
  filter: saturate(1.18) contrast(1.04);
}

/* ---------- testimonials ---------- */
.mh-says__stage {
  display: grid;
  margin-top: clamp(1.4rem, 3vw, 2.4rem);
}
.mh-say {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.mh-say[hidden] {
  display: none;
}
.mh-say blockquote {
  font-family: var(--disp);
  font-variation-settings: 'wdth' 95;
  font-weight: 600;
  font-size: clamp(1.4rem, 3.6vw, 2.7rem);
  line-height: 1.14;
  letter-spacing: -0.025em;
  max-width: 30ch;
}
.mh-say figcaption {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}
.mh-av {
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 2.5rem;
  border-radius: 999px;
  overflow: hidden;
  background: var(--ink-2);
}
.mh-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mh-who {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.mh-who b {
  font-size: 0.9rem;
  font-weight: 700;
}
.mh-who i {
  font-style: normal;
  font-size: 0.74rem;
  color: var(--ink-3);
}
.mh-r .rating {
  display: inline-flex;
  gap: 1px;
  color: var(--coral-ink);
}
.mh-says__bar {
  margin-top: clamp(1.4rem, 3vw, 2.4rem);
  padding-top: 1.2rem;
  border-top: 2px solid var(--rule);
  display: flex;
  align-items: center;
  gap: 1rem;
}
.mh-says__bar p {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink-2);
}

/* ---------- final ---------- */
.mh-final {
  background: var(--coral);
  color: var(--ink);
}
.mh-final__in {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}
.mh-final__in .mh-tag {
  justify-content: center;
}
.mh-final__in .mh-tag::after {
  display: none;
}
.mh-final__in .mh-huge {
  color: var(--ink);
}
.mh-final__acts {
  margin-top: 1.3rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 1.6rem;
  align-items: center;
  justify-content: center;
}

/* ---------- footer ---------- */
.mh-foot {
  background: var(--ink);
  color: rgba(247, 245, 241, 0.74);
  padding-top: clamp(2.6rem, 6vw, 4.2rem);
  padding-bottom: 1.3rem;
}
.mh-foot .mh-id {
  color: var(--paper);
}
.mh-foot__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
}
.mh-foot__grid p {
  margin-top: 0.9rem;
  font-size: 0.9rem;
  max-width: 34ch;
}
.mh-foot h4 {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--paper);
  margin-bottom: 0.9rem;
}
.mh-foot li + li {
  margin-top: 0.45rem;
}
.mh-foot a,
.mh-foot span {
  text-decoration: none;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  min-height: 1.9rem;
}
.mh-foot nav a:hover {
  color: var(--paper);
}
.social-icons {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.1rem;
}
.social-icon {
  width: 2.4rem;
  height: 2.4rem;
  border: 2px solid var(--rule-l);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.35s var(--e),
    color 0.35s var(--e);
}
.social-icon svg {
  width: 16px;
  height: 16px;
}
.social-icon:hover {
  background: var(--coral);
  color: var(--paper-2);
}
.mh-foot__word {
  margin-top: clamp(2.2rem, 6vw, 4rem);
  font-family: var(--disp);
  font-variation-settings: 'wdth' 85;
  font-weight: 800;
  font-size: clamp(1.8rem, 7vw, 5rem);
  line-height: 0.92;
  text-transform: uppercase;
  letter-spacing: -0.035em;
  color: var(--paper);
}
.mh-foot__base {
  margin-top: clamp(1.6rem, 4vw, 2.6rem);
  padding-top: 1.1rem;
  border-top: 2px solid var(--rule-l);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  justify-content: space-between;
  font-size: 0.74rem;
}

/* ---------- drawer ---------- */
.mh-drawer {
  position: fixed;
  inset: 0;
  z-index: 500;
}
.mh-drawer[hidden] {
  display: none;
}
.mh-drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(16, 16, 20, 0.55);
  opacity: 0;
  transition: opacity 0.4s var(--e);
}
.mh-drawer.is-open .mh-drawer__scrim {
  opacity: 1;
}
.mh-drawer__panel {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(30rem, 100%);
  background: var(--paper-2);
  border-left: 2px solid var(--ink);
  padding: clamp(1.3rem, 4vw, 2.4rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateX(100%);
  transition: transform 0.5s var(--e);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.mh-drawer.is-open .mh-drawer__panel {
  transform: none;
}
.mh-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;
}
.mh-drawer__x svg {
  width: 18px;
  height: 18px;
}
.mh-form {
  margin-top: 1rem;
  display: grid;
  gap: 1rem;
}
.mh-form label {
  display: grid;
  gap: 0.35rem;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.mh-form input,
.mh-form select {
  font-family: var(--sans);
  font-size: 16px;
  min-height: 2.75rem;
  padding: 0.7rem 0.85rem;
  border: 2px solid var(--field);
  border-radius: 0;
  background: #fff;
  color: var(--ink);
  letter-spacing: 0;
  text-transform: none;
  width: 100%;
  transition: border-color 0.35s var(--e);
}
.mh-form input:focus,
.mh-form select:focus {
  border-color: var(--cobalt);
}
.mh-form__msg {
  font-size: 0.84rem;
  letter-spacing: 0;
  text-transform: none;
}
.mh-form__msg.is-err {
  color: var(--coral-ink);
}
.mh-form__msg.is-ok {
  color: var(--cobalt-ink);
}
.mh-form__note {
  font-size: 0.74rem;
  color: var(--ink-3);
  letter-spacing: 0;
  text-transform: none;
}

/* ---------- custom cursor ---------- */
.mh-cur {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 700;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 999px;
  background: var(--ink);
  pointer-events: none;
  display: grid;
  place-items: center;
  transition:
    width 0.28s var(--e),
    height 0.28s var(--e),
    margin 0.28s var(--e),
    background 0.28s var(--e);
}
.mh-cur span {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
  opacity: 0;
  transition: opacity 0.25s var(--e);
}
.mh-cur.is-img,
.mh-cur.is-act {
  width: 54px;
  height: 54px;
  margin: -27px 0 0 -27px;
}
.mh-cur.is-img {
  background: var(--coral);
}
.mh-cur.is-act {
  background: var(--cobalt);
}
.mh-cur.is-img span,
.mh-cur.is-act span {
  opacity: 1;
}

/* ---------- reveal (opt-in: html.mh-anim) ---------- */
.mh-anim .mh-ln > i {
  transform: translateY(var(--mo-line));
  transition: transform var(--mo-dur-line) var(--e);
  transition-delay: calc(var(--l, 0) * var(--mo-stagger-line));
}
.mh-anim .is-in .mh-ln > i,
.mh-anim .mh-ln.is-in > i {
  transform: none;
}
.mh-anim .mh-hero__type,
.mh-anim .mh-card,
.mh-anim .mh-tag,
.mh-anim .mh-intro__copy,
.mh-anim .mh-intro__art,
.mh-anim .mh-fig,
.mh-anim .mh-rooms__grid,
.mh-anim .mh-amen__list li,
.mh-anim .mh-social__f,
.mh-anim .mh-gal__f,
.mh-anim .mh-dark__in,
.mh-anim .mh-loc__side,
.mh-anim .mh-says__panel,
.mh-anim .mh-final__in,
.mh-anim .mh-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));
}
/* Bounded clip: never inset(… 100% …), which would erase the element outright. */
.mh-anim .mh-hero__shot,
.mh-anim .mh-loc__map,
.mh-anim .mh-break {
  clip-path: inset(0 0 var(--mo-clip) 0);
  transition: clip-path var(--mo-dur-clip) var(--e);
}
.mh-anim .mh-hero__shot.is-in,
.mh-anim .mh-loc__map.is-in,
.mh-anim .mh-break.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;
  }
  .mh-marq__t,
  .boot-line::after {
    animation: none;
  }
  .mh-hero__shot img,
  .mh-room__shot img,
  .mh-amen__p figure,
  .mh-lb__stage img {
    animation: none;
  }
  .mh-cur,
  .mh-follow {
    display: none;
  }
  .mh-intro__art img,
  .mh-gal__f img,
  .mh-social__f img {
    transition: none;
  }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width: 620px) {
  .mh-figs__row {
    grid-template-columns: repeat(4, 1fr);
  }
  .mh-social__row {
    grid-template-columns: repeat(4, 1fr);
  }
  .mh-gal__set {
    grid-template-columns: repeat(6, 1fr);
  }
  .mh-gal__f:nth-child(1) {
    grid-column: span 4;
  }
  .mh-gal__f:nth-child(1) button {
    aspect-ratio: 16 / 10;
  }
  .mh-gal__f:nth-child(2) {
    grid-column: span 2;
  }
  .mh-gal__f:nth-child(2) button {
    aspect-ratio: 3 / 4;
  }
  .mh-gal__f:nth-child(3),
  .mh-gal__f:nth-child(4) {
    grid-column: span 2;
  }
  .mh-gal__f:nth-child(5) {
    grid-column: span 2;
  }
  .mh-gal__f:nth-child(6) {
    grid-column: span 4;
  }
  .mh-gal__f:nth-child(6) button {
    aspect-ratio: 16 / 9;
  }
}
@media (min-width: 900px) {
  .mh-hero__in {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: 0;
    align-items: center;
  }
  .mh-hero__type {
    padding: clamp(2rem, 5vh, 4rem) 0;
  }
  /* The charcoal ground has to end exactly where the plate begins.
     `min(58%, 46rem)` measured both terms off the VIEWPORT, but the type
     column lives inside a 90rem band that is centred, so once the band stops
     growing the column keeps travelling right while the block does not: it
     finished 3px short at 1440, 45px short at 1536 and 237px short at 1920.
     Cream type crossing bare cream paper is not low contrast, it is
     invisible - at 1536 the last glyph of "YOUR HIVE" simply vanished.
     This is the same fault the note below records for the mobile panel: a
     length measured off the viewport standing in for one that belongs to the
     content band. Derived from the band instead, so it cannot drift: page
     margin + gutter + column 1, which is 1.02fr of two, hence 0.51. */
  .mh-hero__block {
    /* max() so the original value is kept wherever it was already enough -
       below 1440 it overlaps the plate by up to 85px and that is the look as
       shipped. Only where it fell short does the derived width take over, so
       nothing changes at or below 1440 and nothing is ever short above it. */
    width: max(
      min(58%, 46rem),
      calc(
        max(0px, (100vw - var(--maxw)) / 2) + var(--gut) +
          (min(100vw, var(--maxw)) - 2 * var(--gut)) * 0.51
      )
    );
  }
  /* the type stack overlaps the plate; the plate bleeds off the right edge */
  .mh-hero__type .mh-huge {
    position: relative;
    z-index: 3;
    margin-right: -14%;
  }
  /* That -14% is ~94px at 1536, and it carries cream type onto whatever the
     owner happened to photograph. The sample render put it over a sunlit wall
     at roughly 1.5:1. The plate therefore keeps a dark ground of its own for
     the width of the overhang - 14% of the plate, fading out by 30% so it
     reads as the photograph's own shadow side rather than a panel. Uses the
     stage's own --stage-ground, so the scrim and the contact shadow are the
     same colour by construction. */
  .mh-hero__shot::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
      90deg,
      rgba(var(--stage-ground), 0.9) 0%,
      rgba(var(--stage-ground), 0.74) 8%,
      rgba(var(--stage-ground), 0.4) 18%,
      rgba(var(--stage-ground), 0) 30%
    );
  }
  .mh-hero__shot {
    aspect-ratio: auto;
    height: min(72vh, 40rem);
    margin-right: calc(-1 * max(0px, (100vw - var(--maxw)) / 2));
  }
  .mh-card {
    position: absolute;
    right: var(--gut);
    bottom: -1.5rem;
    margin: 0;
  }
  .mh-intro__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
    column-gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
  }
  .mh-break .mh-wrap {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
  }
  .mh-break__shot {
    margin: 0 0 0.5rem 1.5rem;
    width: 14rem;
  }
  .mh-rooms__grid {
    grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
    column-gap: clamp(1.5rem, 3.5vw, 3rem);
  }
  .mh-rooms__idx {
    flex-direction: column;
    align-items: stretch;
  }
  .mh-room__over {
    position: absolute;
    left: 1.5rem;
    bottom: -2rem;
    margin: 0;
    width: min(24rem, 60%);
  }
  .mh-rooms__stage {
    padding-bottom: 3rem;
  }
  .mh-loc__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: start;
  }
}
@media (max-width: 991px) {
  .mh-nav__set,
  .mh-nav__act {
    display: none;
  }
  .mh-burger {
    display: inline-flex;
    margin-left: auto;
  }
  .mh-nav {
    background: rgba(247, 245, 241, 0.9);
    border-bottom-color: var(--rule);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  .mh-follow,
  .mh-cur {
    display: none;
  }
}
@media (max-width: 899.98px) {
  /* The dark panel used to be an absolutely-positioned box whose top edge
     came from its own clamp (18vh) while the first line of light-on-dark
     text came from two unrelated ones (13vh hero padding + 4vh type
     padding). Nothing tied them together, so they only agreed by
     coincidence: at 440x956 the eyebrow started at 162px and the panel at
     172px, cutting the eyebrow in half — the upper half was near-white
     text sitting on the near-white paper above the edge, which is the
     sliced "01 CO-LIVING PG" you can see. Its bottom edge was equally
     loose: `height: 62%` of a content-dependent hero landed ~12px shy of
     the photograph at this size and would drift elsewhere.

     It is replaced below by .mh-hero__panel, a grid item spanning the
     headline row and the photograph row, so both of its edges are
     resolved by the grid from the rows it actually has to cover. */
  .mh-hero__block {
    display: none;
  }
  .mh-hero {
    /* clears the fixed nav (~80px at its tallest) and no more, so the
       striped strip above the panel stops being a large empty band */
    padding-top: clamp(5.75rem, 12vh, 7.5rem);
  }
  .mh-hero__type {
    padding-top: clamp(1.6rem, 4vh, 2.6rem);
    padding-bottom: clamp(1.5rem, 5vw, 2.2rem);
  }
  /* The panel is a grid item spanning the headline row and the photograph
     row, so the grid engine resolves its height from the very rows it has
     to cover: its top is the type block's top, which is exactly one
     padding-top above the eyebrow, and its bottom is the photograph's
     bottom. Nothing here restates a length that lives elsewhere, so there
     is no second value left to drift out of step.
     It stays out of .mh-hero__type on purpose: that block fades in on load
     and a backdrop inside it would fade in with the text. */
  .mh-hero__panel {
    display: block;
    grid-column: 1;
    grid-row: 1 / 3;
    margin-inline: calc(-1 * var(--gut));
    background: var(--ink);
    pointer-events: none;
  }
  /* explicit rows, because an auto-placed item would otherwise step around
     the cells the panel occupies instead of sharing them */
  .mh-hero__type {
    grid-column: 1;
    grid-row: 1;
  }
  .mh-hero__shot {
    grid-column: 1;
    grid-row: 2;
  }
  .mh-card {
    grid-column: 1;
    grid-row: 3;
  }
  /* The rules are strongest at the very top, which on a phone is the one
     place with nothing to decorate — an empty strip of ruled boxes above
     the panel. Fade them in below the nav instead so they read as texture. */
  .mh-grid {
    opacity: 0.3;
    mask-image: linear-gradient(180deg, transparent, #000 30%, transparent 75%);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, transparent 75%);
  }
  .mh-hero__no {
    display: none;
  }
  .mh-hero__sub {
    max-width: none;
  }
}
@media (max-width: 560px) {
  .mh-say blockquote {
    max-width: none;
  }
  .mh-break__shot {
    width: 60%;
  }
  .mh-social__row {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 360px) {
  :root {
    --gut: 1rem;
  }
  .mh-huge {
    font-size: 2.6rem;
  }
  .mh-btn {
    width: 100%;
    justify-content: center;
  }
  .mh-figs__row {
    grid-template-columns: 1fr;
  }
}

/* The coral CTA carries DARK type: paper-on-coral measured 3.40:1 and its prose
   3.02:1, both under AA. Ink on coral is 5.23:1. */

/* ---------- 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(22, 22, 26, 0.76);
  --rv-surface: var(--paper-2);
  --rv-ink: var(--ink);
  --rv-muted: var(--ink-3);
  --rv-accent: var(--cobalt-ink);
  --rv-line: var(--rule-2);
  --rv-control-line: rgba(22, 22, 26, 0.47);
  --rv-radius: 0px;
  --rv-trigger-ink: var(--ink-2);
  --rv-trigger-line: rgba(22, 22, 26, 0.48);
  --rv-focus: var(--cobalt-ink);
}

/* ============================================================
   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: 30%;
  --mo-dur: 0.8s;
  --mo-dur-clip: 1.1s;
  --mo-dur-line: 0.9s;
  --mo-stagger: 60ms;
  --mo-stagger-line: 90ms;
  /* 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: 20%;
    --mo-dur: 0.6s;
    --mo-dur-clip: 0.8s;
    --mo-dur-line: 0.72s;
    --mo-stagger: 42ms;
    --mo-stagger-line: 64ms;
    --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) {
  .mh-btn.is-tapped {
    background: var(--cobalt);
    gap: 1.05rem;
    transform: translateY(-2px);
  }
  .mh-btn--on.is-tapped {
    background: var(--paper-2);
    color: var(--ink);
  }
  .mh-flat.is-tapped {
    border-color: var(--coral);
  }
  .mh-round.is-tapped {
    background: var(--ink);
    color: var(--paper);
  }
  .mh-nav__set a.is-tapped::after {
    right: 0;
  }
  .mh-nav__act.is-tapped i {
    width: 28px;
  }
  .mh-hero__acts .mh-btn.is-tapped {
    background: var(--paper);
    color: var(--ink);
  }
  .mh-card__go.is-tapped i {
    width: 30px;
  }
  .mh-intro__art figure.is-tapped img {
    transform: scale(1.04);
  }
  .mh-room__shot.is-tapped img {
    transform: scale(1.04);
  }
  .mh-room__shot.is-tapped .mh-room__peek {
    opacity: 1;
  }
  .mh-amen__list button.is-tapped {
    padding-left: 0.8rem;
    color: var(--cobalt-ink);
  }
  .mh-social__f.is-tapped img {
    transform: scale(1.05);
  }
  .mh-gal__f button.is-tapped img {
    transform: scale(1.05);
  }
  .mh-lb .mh-round.is-tapped {
    background: var(--paper);
    color: var(--ink);
  }
  .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) {
  .mh-btn.is-press,
  .mh-btn--on.is-press,
  .mh-card__go.is-press,
  .mh-flat.is-press,
  .mh-nav__act.is-press,
  .mh-round.is-press,
  .rv-modal__nav.is-press,
  .rv-modal__x.is-press,
  .rv-open.is-press {
    transform: scale(var(--mo-press));
  }
}
.mh-btn,
.mh-btn--on,
.mh-card__go,
.mh-flat,
.mh-nav__act,
.mh-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.
   ============================================================ */
.mh-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;
}
.mh-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);
}
.mh-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 */
.mh-r {
  color: var(--rv-accent);
}
.mh-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. */
.mh-say figcaption {
  margin-top: auto;
  padding-top: clamp(0.85rem, 2vw, 1.25rem);
  border-top: 1px solid var(--rv-line);
  flex-wrap: wrap;
}
.mh-who b {
  color: var(--rv-ink);
}
.mh-who i {
  color: var(--rv-muted);
}
.mh-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;
}
.mh-says__bar p {
  color: var(--rv-muted);
}
.mh-says__bar .mh-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) {
  .mh-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.
   ============================================================ */
.mh-foot__grid nav,
.mh-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);
}
.mh-foot__grid nav {
  justify-self: end;
  text-align: right;
}
.mh-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) {
  .mh-foot__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(1.5rem, 7vw, 3rem);
  }
  .mh-foot__grid > div:first-child {
    grid-column: 1 / -1;
  }
  .mh-foot__grid nav {
    grid-column: 2;
    grid-row: 2;
  }
  .mh-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. */
  .mh-foot__grid > div:last-child a,
  .mh-foot__grid > div:last-child span {
    overflow-wrap: anywhere;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   WEEK MENU — Bold numbered blocks — high-contrast, numerals lead.
   ═══════════════════════════════════════════════════════════════════════
   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. */
.mh-menu {
  padding: clamp(3rem, 6vw, 5rem) 0;
  background: var(--paper-2);
}
.mh-menu__head {
  margin-bottom: clamp(1.6rem, 3.5vw, 2.6rem);
}
.mh-menu__eyebrow {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cobalt-ink);
}
.mh-menu__h2 {
  margin: 0.5rem 0 0;
  font-size: clamp(1.7rem, 4.2vw, 2.6rem);
  line-height: 1.1;
  color: var(--ink);
}
.mh-menu__sub {
  margin: 0.7rem 0 0;
  max-width: 46ch;
  color: var(--ink-2);
  line-height: 1.6;
}
.mh-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(--cobalt-ink);
}
.mh-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.mh-blk {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(8rem, 100%), 1fr));
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mh-blk__i > button,
.mh-blk__i > span {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 100%;
  min-height: 8rem;
  padding: 1rem;
  border: 2px solid var(--ink);
  border-radius: 4px;
  background: var(--paper);
  font: inherit;
  color: inherit;
  text-align: start;
  cursor: pointer;
  transition:
    background 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
}
.mh-blk__i--off > span {
  cursor: default;
  border-style: dashed;
  opacity: 0.5;
}
.mh-blk__num {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--cobalt-ink);
}
.mh-blk__day {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
}
.mh-blk__n {
  margin-top: auto;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ink-2);
}
@media (hover: hover) {
  .mh-blk__i:not(.mh-blk__i--off):hover > button {
    background: var(--cobalt-ink);
    transform: translate(-2px, -2px);
  }
}
@media (hover: none) {
  .mh-blk__i:not(.mh-blk__i--off).is-tapped > button {
    background: var(--cobalt-ink);
    transform: translate(-2px, -2px);
  }
}

/* ---- 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. */
.mh-mdlg[hidden] {
  display: none;
}
.mh-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;
}
.mh-mdlg.is-open {
  opacity: 1;
}
.mh-mdlg__scrim {
  position: absolute;
  inset: 0;
  background: var(--rv-scrim);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.mh-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: 4px;
  background: var(--paper);
  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);
}
.mh-mdlg.is-open .mh-mdlg__panel {
  scale: 1;
}
.mh-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(--ink);
  cursor: pointer;
}
.mh-mdlg__x svg,
.mh-mdlg__x i {
  width: 1.05rem;
  height: 1.05rem;
}
.mh-mdlg__abbr {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cobalt-ink);
}
.mh-mdlg__h {
  margin: 0.3rem 0 0;
  font-size: clamp(1.5rem, 4.4vw, 2rem);
  line-height: 1.12;
  color: var(--ink);
}
.mh-mdlg__list {
  margin: 1.3rem 0 0;
}
.mh-mdlg__row {
  display: grid;
  gap: 0.2rem;
  padding-block: 0.8rem;
  border-block-start: 1px solid var(--rule);
}
.mh-mdlg__row:first-child {
  border-block-start: 0;
  padding-block-start: 0;
}
.mh-mdlg__row dt {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cobalt-ink);
}
.mh-mdlg__row dd {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--ink-2);
}
.mh-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);
}
.mh-mdlg__bar p {
  margin: 0;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.mh-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(--ink);
  cursor: pointer;
  transition:
    border-color 0.3s ease,
    color 0.3s ease;
}
.mh-mdlg__nav svg,
.mh-mdlg__nav i {
  width: 1.05rem;
  height: 1.05rem;
}
@media (hover: hover) {
  .mh-mdlg__nav:hover,
  .mh-mdlg__x:hover {
    border-color: var(--cobalt-ink);
    color: var(--cobalt-ink);
  }
}
@media (hover: none) {
  .mh-mdlg__nav.is-tapped,
  .mh-mdlg__x.is-tapped {
    border-color: var(--cobalt-ink);
    color: var(--cobalt-ink);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mh-mdlg,
  .mh-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. lime/cobalt. */
.mh-hero__shot {
  --stage-warm: 226, 196, 86;
  --stage-cool: 120, 150, 220;
  --stage-ground: 18, 18, 20;
}

/* @brx-components:start — generated, do not edit */
:root {
  --brx-surface: rgba(247, 245, 241, 0.06); /* a card or panel background */
  --brx-surface2: rgba(247, 245, 241, 0.1); /* a recessed band behind a section */
  --brx-ink: var(--paper); /* body text */
  --brx-muted: rgba(247, 245, 241, 0.68); /* secondary text */
  --brx-accent: var(--coral); /* icons, rules and fills (needs 3:1) */
  --brx-accent-ink: var(--coral); /* accent used as small text (needs 4.5:1) */
  --brx-accent-lit: var(--lime); /* a decorative second accent, never text */
  --brx-on-accent: var(--paper-2); /* text placed on an accent fill */
  --brx-tint: rgba(242, 84, 45, 0.14); /* a wash of the accent at low alpha */
  --brx-line: var(--rule-l); /* hairline */
  --brx-line2: rgba(247, 245, 241, 0.34); /* a stronger hairline */
  --brx-radius: 8px; /* card radius */
  --brx-radius-sm: 4px; /* control radius */
  --brx-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.6); /* resting elevation */
  --brx-shadow-l: 0 36px 76px -32px rgba(0, 0, 0, 0.72); /* 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 */