@font-face {
  font-family: "RF Dewi";
  src: url("assets/rebrand/rfdewi-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "RF Dewi";
  src: url("assets/rebrand/rfdewi-semibold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
}

@font-face {
  font-family: "RF Dewi";
  src: url("assets/rebrand/rfdewi-bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
}

@font-face {
  font-family: "Neue Machina";
  src: url("assets/rebrand/neuemachina-light.woff2") format("woff2");
  font-style: normal;
  font-weight: 300;
}

@font-face {
  font-family: "Neue Machina";
  src: url("assets/rebrand/neuemachina-bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
}

:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --text: #111111;
  --text-soft: rgba(17, 17, 17, 0.72);
  --muted: rgba(17, 17, 17, 0.5);
  --line: rgba(17, 17, 17, 0.12);
  --dark: #080808;
  --gold: #c8a96b;
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --container: min(1660px, calc(100vw - 20px));
  --content: min(1480px, 88vw);
  --shadow-soft: 0 20px 60px rgba(0, 0, 0, 0.08);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "RF Dewi", Arial, sans-serif;
}

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

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

button,
input,
textarea {
  font: inherit;
}

.page-shell {
  width: var(--container);
  margin: 10px auto 32px;
}

.hero {
  /* Fit the whole hero — top nav through the venue chips — in one screen, so
     nothing needs scrolling to be seen. Bounded so it neither collapses on
     short windows nor balloons past the design on tall ones. The 20px is the
     page-shell's 10px top margin plus a 10px breathing gap at the bottom. */
  height: calc(100vh - 20px);
  height: calc(100svh - 20px);
  min-height: 620px;
  max-height: 910px;
  padding: 40px 90px 60px;
  border-radius: var(--radius-xl);
  position: relative;
  overflow: hidden;
  color: #fff;
  display: flex;
  flex-direction: column;
}

/* Two stacked photo layers cross-fade between venues: rebrand-home.js drops the
   next photo into the hidden layer and swaps their opacity, so the change eases
   instead of flickering. Each layer carries the darkening gradient so it fades
   together with its photo. --hero-a is the first paint (set inline from PHP). */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: opacity 0.7s ease;
}

.hero::before {
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0) 26%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0.42) 100%),
    var(--hero-a, url("assets/rebrand/hero-port.jpg"));
  opacity: var(--hero-show-a, 1);
}

.hero::after {
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0) 26%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0.42) 100%),
    var(--hero-b);
  opacity: var(--hero-show-b, 0);
}

@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .hero::after {
    transition: none;
  }
}

.hero__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  position: relative;
  z-index: 2;
}

.hero__nav a,
.footer__nav a {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.brand-mark__word {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.brand-mark__dot {
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  transform: rotate(45deg);
}

.footer__socials {
  display: flex;
  align-items: center;
  gap: 14px;
}

.social-link {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
}

.social-link svg,
.social-link img {
  width: 20px;
  height: 20px;
}

.hero__content {
  margin-top: auto;
  position: relative;
  z-index: 2;
}

.hero h1 {
  margin: 0 0 62px;
  font-size: 70px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.015em;
  max-width: 780px;
  text-wrap: balance;
}

.hero__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}

.hero__venues {
  padding: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: var(--radius-pill);
  background: #ffffff;
  color: var(--text);
  box-shadow: var(--shadow-soft);
}

.hero__venues-list {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.hero__venues-list button {
  border: 0;
  background: transparent;
  color: inherit;
  padding: 15px 24px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s ease;
}

.venue-arrow {
  width: 17px;
  height: 17px;
  display: none;
  flex: 0 0 auto;
}

.hero__venues-list button.is-active {
  background: var(--dark);
  color: #fff;
}

.hero__venues-list button.is-active .venue-arrow {
  display: inline-block;
}

/* Slider arrows — desktop hides them, mobile shows them */
.venue-nav {
  display: none;
  border: 0;
  background: transparent;
  color: var(--text);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
}

.venue-nav svg {
  width: 20px;
  height: 20px;
}

.hero__logo {
  display: inline-flex;
  align-items: flex-start;
  color: #fff;
  font-weight: 700;
  font-size: 38px;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.hero__logo-dot {
  width: 7px;
  height: 7px;
  margin: 4px 5px 0;
  border: 1.6px solid currentColor;
  border-radius: 50%;
  align-self: flex-start;
}

.intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
  padding: 60px 40px 0;
}

.intro__text {
  font-size: 18px;
  line-height: 1.35;
  color: #666;
  max-width: 380px;
}

.intro__title h2 {
  margin: 0 0 30px;
  font-size: 42px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.pill-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 21px 30px;
  border-radius: var(--radius-pill);
  background: var(--dark);
  color: #fff;
  font-size: 20px;
  font-weight: 600;
}

.pill-link::after,
.venue-card__cta::after {
  content: "→";
  display: inline-block;
  transform: rotate(-45deg);
  font-size: 22px;
  line-height: 1;
  flex: 0 0 auto;
}

.venues {
  display: grid;
  gap: 12px;
  padding: 0 0 60px;
}

.venue-card {
  min-height: 560px;
  padding: 70px;
  border-radius: var(--radius-xl);
  color: #fff;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: stretch;
}

.venue-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.48) 34%, rgba(0, 0, 0, 0.08) 100%);
}

.venue-card--light::before {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.42) 32%, rgba(0, 0, 0, 0.1) 100%);
}

.venue-card--cassia {
  background: #e8461c;
}

.venue-card--cassia::before {
  display: none;
}

.venue-card--cassia .venue-card__image {
  object-position: right center;
}

.venue-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.venue-card__content {
  position: relative;
  z-index: 1;
  max-width: 610px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.venue-card__title {
  margin: 0 0 26px;
  font-family: "Neue Machina", Arial, sans-serif;
  font-weight: 300;
  font-size: 70px;
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px #fff;
}

.venue-card__text {
  margin: 0 0 16px;
  font-size: 18px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.92);
}

.venue-card--lifestyle .venue-card__text {
  max-width: 535px;
}

.venue-card__meta {
  margin: 0 0 30px;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Лайф Стайл: dark card with a texture wash and an inset photo panel */
.venue-card--lifestyle {
  background: #24262b;
}

.venue-card--lifestyle::before {
  display: none;
}

.venue-card__texture {
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background: url("assets/rebrand/venues/texture-lifestyle.png") center/cover no-repeat;
}

.venue-card__panel {
  position: absolute;
  right: -60px;
  top: 40px;
  bottom: 40px;
  width: 55%;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}

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

/* Истсайд sits on a light photo — dark type instead of white */
.venue-card--ink {
  color: #3b322c;
}

.venue-card--ink::before {
  display: none;
}

.venue-card--ink .venue-card__title {
  -webkit-text-stroke-color: #5b484a;
}

.venue-card--ink .venue-card__text {
  color: #3b322c;
}

.venue-card__cta {
  width: 100%;
  max-width: 270px;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 21px 30px;
  border-radius: var(--radius-pill);
  background: #000;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
}

.clients h2,
.lead-form h2 {
  margin: 0;
  font-size: 48px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.clients__lead,
.lead-form__lead {
  max-width: 460px;
  margin: 0;
  color: var(--text-soft);
  font-size: 16px;
  line-height: 1.35;
}

/* Categories carousel */
.categories {
  position: relative;
  margin: 56px 30px 0;
}

.categories__viewport {
  overflow: hidden;
}

.categories__track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.categories__track::-webkit-scrollbar {
  display: none;
}

.cat-card {
  flex: 0 0 calc((100% - 48px) / 4);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cat-card__img {
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 1 / 0.72;
}

.cat-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.cat-card:hover .cat-card__img img {
  transform: scale(1.04);
}

.cat-card__label {
  font-size: 22px;
  line-height: 1.15;
  font-weight: 400;
}

.cat-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  z-index: 2;
}

.cat-nav svg {
  width: 20px;
  height: 20px;
}

.cat-nav--prev {
  left: -18px;
}

.cat-nav--next {
  right: -18px;
}

.lead-form {
  max-width: var(--content);
  margin-inline: auto;
  padding: 88px 0 100px;
}

.lead-form__card {
  border-radius: var(--radius-xl);
  background: #f4f4f4;
  padding: 70px 100px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: start;
}

.lead-form__intro h2 {
  margin: 0 0 22px;
}

.lead-form__intro .lead-form__lead {
  color: var(--text);
  font-size: 20px;
  line-height: 1.25;
  max-width: 420px;
}

.lead-form__grid {
  display: grid;
  gap: 18px;
}

.lead-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.lead-form__grid input,
.lead-form__grid textarea {
  width: 100%;
  border: 1px solid #d8d8d8;
  background: #fff;
  color: var(--text);
  font-size: 18px;
}

.lead-form__grid input {
  border-radius: var(--radius-pill);
  padding: 21px 24px;
}

.lead-form__grid textarea {
  border-radius: 24px;
  padding: 20px 24px;
  min-height: 112px;
  resize: vertical;
}

.form-note {
  margin: 4px 0 0;
  color: #444;
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
}

/* Bitrix24 form 27 ("Отдел бронирования") inside the lead card.
   The embed renders plain DOM, so this is a look-only layer over Bitrix's own
   markup — field names, validation and the CRM binding stay theirs. Bitrix owns
   the floating-label mechanics; only the box around it is restyled here.
   Selectors are scoped to .lead-form__b24 so the popup form keeps its defaults. */

.lead-form__b24 .b24-form-header,
.lead-form__b24 .b24-form-sign {
  display: none;
}

.lead-form__b24 .b24-form,
.lead-form__b24 .b24-form-wrapper,
.lead-form__b24 .b24-form-inner-box {
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* Bitrix sets its own font on .b24-form, so the `inherit` below would resolve
   to Helvetica rather than the page face — this is what the fields inherit. */
.lead-form .lead-form__b24 .b24-form {
  font-family: "RF Dewi", Arial, sans-serif;
}

.lead-form__b24 .b24-form-content {
  padding: 0;
}

.lead-form__b24 .b24-form-content > form {
  display: grid;
  gap: 18px;
}

/* Bitrix groups the inputs and the consent line into unnamed divs of its own,
   so these pick the wrappers out by what they contain, not by position. */
.lead-form__b24 .b24-form-content > form > div:has(> .b24-form-field-name) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.lead-form__b24 .b24-form-field {
  margin: 0;
  padding: 0;
}

.lead-form__b24 .b24-form-field-date {
  grid-column: 1 / -1;
}

/* Mockup puts the consent line under the button; Bitrix emits it above. */
.lead-form__b24 .b24-form-btn-container {
  order: 1;
  margin: 0;
  padding: 0;
}

.lead-form__b24 .b24-form-content > form > div:has(> .b24-form-field-agreement) {
  order: 2;
}

.lead-form__b24 .b24-form-btn-block {
  margin: 0;
  padding: 0;
}

/* Bitrix injects its stylesheet at runtime, i.e. after this file, so matching
   its specificity would lose the cascade — hence the extra .lead-form here. */
.lead-form .lead-form__b24 .b24-form-control {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  border: 1px solid #d8d8d8;
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--text);
  font-family: inherit;
  font-size: 18px;
  padding: 26px 24px 12px;
  box-shadow: none;
}

.lead-form .lead-form__b24 .b24-form-control:focus {
  border-color: var(--dark);
  outline: none;
}

.lead-form .lead-form__b24 .b24-form-control-label {
  left: 24px;
  font-family: inherit;
  color: #7a7a7a;
}

/* Bitrix reuses .b24-form-btn for the outline/white variants on its own
   success and error panels; those keep their look. */
.lead-form .lead-form__b24 .b24-form-btn:not(.b24-form-btn-border):not(.b24-form-btn-white) {
  width: 100%;
  min-height: 0;
  height: auto;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--dark);
  color: #fff;
  font-family: inherit;
  font-size: 18px;
  font-weight: 600;
  padding: 22px 26px;
  cursor: pointer;
}

.lead-form .lead-form__b24 .b24-form-btn:not(.b24-form-btn-border):not(.b24-form-btn-white):hover {
  background: #000;
}

.lead-form .lead-form__b24 .b24-form-control-desc,
.lead-form .lead-form__b24 .b24-form-field-agreement-link {
  color: #444;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.35;
  text-decoration: none;
}

.lead-form .lead-form__b24 .b24-form-field-agreement input[type="checkbox"] {
  accent-color: var(--dark);
}

.submit-button {
  width: 100%;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--dark);
  color: #fff;
  padding: 22px 26px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.submit-button svg {
  width: 17px;
  height: 17px;
}

.clients {
  max-width: var(--content);
  margin-inline: auto;
  padding: 0 0 100px;
}

.clients__header {
  display: grid;
  gap: 18px;
  margin-bottom: 34px;
  justify-items: center;
  text-align: center;
}

.clients__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 24px 16px;
}

.client-logo {
  height: 117px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.client-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(0.15);
}

.footer {
  position: relative;
  background: #000;
  color: #fff;
  padding: 64px 0 44px;
}

/* Only surfaces on mobile, where the footer nav is hidden. */
.footer__scroll-top {
  display: none;
  position: absolute;
  right: 20px;
  top: -25px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #fff;
  color: #000;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.footer__inner {
  width: var(--content);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.footer__top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 40px;
  align-items: start;
}

.footer__logo {
  display: inline-flex;
  align-items: flex-start;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px #fff;
}

.footer__logo .hero__logo-dot {
  width: 6px;
  height: 6px;
  margin: 5px 5px 0;
  border-color: #fff;
}

.footer__nav {
  display: grid;
  gap: 13px;
  justify-items: start;
}

.footer__nav a {
  font-size: 14px;
}

.footer__contact {
  display: grid;
  gap: 24px;
  justify-items: end;
}

.footer__phone {
  font-family: "Neue Machina", Arial, sans-serif;
  font-size: clamp(30px, 3vw, 50px);
  line-height: 1;
}

.footer__socials {
  display: flex;
  gap: 16px;
}

.footer__socials .social-link {
  width: 34px;
  height: 34px;
  background: rgba(255, 255, 255, 0.04);
}

.footer__socials .social-link svg,
.footer__socials .social-link img {
  width: 17px;
  height: 17px;
}

.footer__socials .social-link img {
  filter: invert(1);
}

.footer__bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: center;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.6);
}

.footer__copy {
  color: rgba(255, 255, 255, 0.6);
}

.footer__policy {
  justify-self: center;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: underline;
}

.footer__made {
  justify-self: end;
}

.footer__made b {
  color: #fff;
  font-weight: 700;
}

/* --- Mobile top bar + burger (hidden on desktop) --- */
.mobile-topbar {
  display: none;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 3;
}

.mobile-topbar__logo,
.mobile-menu__logo {
  display: inline-flex;
  align-items: flex-start;
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  text-transform: lowercase;
  white-space: nowrap;
}

.mobile-topbar__logo {
  color: #fff;
}

.burger {
  border: 0;
  background: transparent;
  padding: 6px 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
}

.burger span {
  display: block;
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
}

/* --- Mobile menu overlay --- */
.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 50;
  flex-direction: column;
  padding: 22px 22px 26px;
  background: var(--bg);
  color: var(--text);
}

.mobile-menu.is-open {
  display: flex;
}

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

.mobile-menu__logo {
  color: var(--text);
}

.mobile-menu__close {
  border: 0;
  background: transparent;
  color: var(--text);
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.mobile-menu__close svg {
  width: 26px;
  height: 26px;
}

.mobile-menu__nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  text-align: center;
}

.mobile-menu__nav a {
  font-size: 23px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.12;
  text-transform: uppercase;
}

.mobile-menu__card {
  border-radius: var(--radius-xl);
  background: #f4f4f4;
  padding: 30px 24px 32px;
  display: grid;
  justify-items: center;
  gap: 20px;
}

.mobile-menu__phone {
  font-family: "Neue Machina", Arial, sans-serif;
  font-size: 30px;
  line-height: 1;
}

.mobile-menu__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 30px;
  border-radius: var(--radius-pill);
  background: var(--dark);
  color: #fff;
  font-size: 18px;
  font-weight: 600;
}

.mobile-menu__cta svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 1180px) {
  .intro {
    grid-template-columns: 1fr;
    display: grid;
  }

  .lead-form__card {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 48px 44px;
  }

  .hero__nav {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 14px 26px;
  }

  .hero__logo {
    font-size: 38px;
  }

  .clients__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .cat-card {
    flex-basis: calc((100% - 32px) / 3);
  }

  .footer__top {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer__nav,
  .footer__contact {
    justify-items: start;
  }
}

@media (max-width: 860px) {
  .page-shell {
    width: min(calc(100vw - 24px), 100%);
    margin: 12px auto 24px;
  }

  .hero,
  .venue-card {
    border-radius: 22px;
  }

  /* Mobile footer collapses to centred socials + fine print, per the mockup. */
  .footer__scroll-top {
    display: inline-flex;
  }

  .footer__logo,
  .footer__nav,
  .footer__phone {
    display: none;
  }

  .footer__contact {
    justify-items: center;
    width: 100%;
  }

  .footer__socials {
    gap: 40px;
  }

  .footer__socials .social-link {
    width: 48px;
    height: 48px;
  }

  .footer__socials .social-link svg,
  .footer__socials .social-link img {
    width: 22px;
    height: 22px;
  }

  .footer__bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
  }

  .footer__policy {
    order: -1;
  }

  .footer__made {
    justify-self: center;
  }

  .clients {
    padding: 60px 20px 40px;
  }

  .hero {
    min-height: 680px;
    padding: 16px 16px 18px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .mobile-topbar {
    display: flex;
  }

  .brand-mark__word {
    font-size: 18px;
  }

  .hero__nav {
    display: none;
  }

  .hero__nav a,
  .footer__nav a {
    font-size: 11px;
    white-space: normal;
  }

  .social-link {
    width: 40px;
    height: 40px;
  }

  .hero__content {
    max-width: 100%;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: 14px;
  }

  .hero h1 {
    max-width: 340px;
    margin-bottom: 0;
    font-size: 36px;
    line-height: 0.98;
    word-break: normal;
  }

  .hero__bar {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
  }

  .hero__venues {
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    max-width: 100%;
  }

  .venue-nav {
    display: inline-flex;
  }

  .hero__venues-list {
    flex: 1 1 auto;
    justify-content: center;
  }

  .hero__venues-list button {
    display: none;
    min-height: 52px;
    font-size: 18px;
  }

  .hero__venues-list button.is-active {
    display: inline-flex;
    width: 100%;
    justify-content: center;
  }

  .hero__venues-list button.is-active .venue-arrow {
    display: none;
  }

  .hero__logo {
    display: none;
  }

  .intro {
    grid-template-columns: 1fr;
    padding: 30px 20px 0;
    gap: 16px;
  }

  .intro__title h2,
  .clients h2,
  .lead-form h2 {
    font-size: 28px;
  }

  .intro__text,
  .clients__lead,
  .lead-form__lead {
    font-size: 16px;
  }

  .pill-link,
  .submit-button {
    font-size: 18px;
    padding: 18px 28px;
  }

  .venue-card__cta {
    font-size: 16px;
    padding: 16px 24px;
  }

  /* Mobile uses portrait art with the photo up top and room for type below. */
  .venue-card {
    min-height: 730px;
    padding: 24px 24px 30px;
    align-items: stretch;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .venue-card__image {
    display: none;
  }

  #port {
    background-image: url("assets/rebrand/venues/photo-loftport-mob.png");
  }

  #cassia {
    background-image: url("assets/rebrand/venues/photo-cassia-mob.png");
  }

  #more {
    background-image: url("assets/rebrand/venues/photo-moreloft-mob.png");
  }

  #island {
    background-image: url("assets/rebrand/venues/photo-island-mob.png");
  }

  #mnn {
    background-image: url("assets/rebrand/venues/photo-mnn-mob.png");
  }

  #eastside {
    background-image: url("assets/rebrand/venues/photo-eastside-mob.png");
  }

  .venue-card__content {
    justify-content: flex-end;
    max-width: none;
  }

  .venue-card__cta {
    margin-top: 0;
  }

  .venue-card__title {
    font-size: 36px;
    line-height: 0.94;
    margin-bottom: 12px;
    -webkit-text-stroke-width: 1.4px;
  }

  .venue-card__text {
    font-size: 14px;
    line-height: 1.3;
  }

  .venue-card__meta {
    font-size: 15px;
    margin-bottom: 20px;
  }

  .categories {
    margin: 30px 0 0;
    padding: 0 20px;
  }

  .categories__viewport {
    overflow: visible;
  }

  .categories__track {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    overflow: visible;
  }

  .cat-card {
    flex: initial;
  }

  .cat-card__label {
    font-size: 16px;
  }

  .cat-nav {
    display: none;
  }

  .lead-form {
    padding: 48px 0 80px;
  }

  .lead-form__card {
    padding: 34px 24px;
  }

  .lead-form__row {
    grid-template-columns: 1fr;
  }

  .lead-form__intro .lead-form__lead {
    font-size: 16px;
  }

  .footer {
    padding: 100px 22px 40px;
  }

  .footer__inner {
    width: 100%;
    gap: 40px;
  }

  .footer__copy,
  .footer__policy,
  .footer__made {
    font-size: 13px;
  }

  .clients__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .client-logo {
    height: 80px;
    padding: 0;
  }

  /* Mobile drops the inset photo panel; the wash carries the photo instead. */
  .venue-card--lifestyle .venue-card__panel {
    display: none;
  }

  .venue-card--lifestyle .venue-card__texture {
    opacity: 1;
    background-image: url("assets/rebrand/venues/photo-lifestyle-mob.png");
  }
}

/* The mockup specifies a single mobile layout, so this breakpoint only trims
   spacing on the narrowest screens — it must not restate sizes set above. */
@media (max-width: 560px) {
  .page-shell {
    width: calc(100vw - 14px);
    margin: 7px auto 20px;
  }

  .hero {
    padding: 16px 14px 14px;
  }

  .cat-card__label {
    font-size: 15px;
  }

  .lead-form__card {
    padding: 24px 18px;
  }

  .footer {
    padding: 100px 16px 32px;
  }

  .footer__phone {
    font-size: 24px;
  }

  .lead-form__grid input,
  .lead-form__grid textarea {
    padding: 16px 18px;
    font-size: 16px;
  }
}