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

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

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

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

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

: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;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1000;
  padding: 10px 16px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  transform: translateY(-160%);
  transition: transform 160ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

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("hero-port.webp"));
  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 {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 21px 30px;
  border-radius: var(--radius-pill);
  background: linear-gradient(105deg, #ff684d 0%, #f08f55 52%, #e5b15e 100%);
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  box-shadow: 0 14px 28px rgba(226, 116, 71, 0.28);
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.pill-link::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.22), transparent 42%);
  pointer-events: none;
}

.pill-link:hover {
  transform: translateY(-2px);
  filter: saturate(1.08);
  box-shadow: 0 18px 34px rgba(226, 116, 71, 0.36);
}

.pill-link:focus-visible {
  outline: 3px solid #111;
  outline-offset: 4px;
}

.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("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;
  /* Bottom gap matches the 20px image-to-label gap inside a category card, so
     the labels sit as close to the first venue card as they do to their photos. */
  margin: 56px 30px 20px;
}

.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: 36px 0;
}

.lead-form__card {
  border-radius: var(--radius-xl);
  background: #f4f4f4;
  padding: 32px 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 48px;
  align-items: center;
}

.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: 12px;
}

/* 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: 12px;
}

.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;
  /* Bitrix's agreement wrapper reserves ~35px of empty space under the 21px
     checkbox line (a hidden validation slot). Pulling the bottom up drops that
     tail so the form's bottom sits right under the consent line, keeping the
     card's top and bottom whitespace symmetric. */
  margin-bottom: -34px;
}

.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: 22px 24px 10px;
  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: 18px 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__venue-pages {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.45);
  font-size: 12px;
  line-height: 1.5;
}

.footer__venue-pages a {
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
}

.footer__venue-pages a:hover,
.footer__venue-pages a:focus-visible {
  color: #fff;
  text-decoration: underline;
}

.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__venue-pages {
    justify-content: center;
    gap: 7px 12px;
    padding-top: 16px;
    text-align: center;
  }

  .footer__venue-pages span {
    flex-basis: 100%;
  }

  .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("venues/photo-loftport-mob.webp");
  }

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

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

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

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

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

  .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 20px;
    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("venues/photo-lifestyle-mob.webp");
  }
}

/* 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;
  }
}

/* Header contacts: phone + messenger icons, top-right of the hero */
.hero__top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.hero__top .hero__nav {
  justify-content: flex-start;
}

.hero__contacts {
  display: flex;
  align-items: center;
  gap: 22px;
}

.hero__phone {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

.hero__socials {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero__socials .social-link {
  width: 42px;
  height: 42px;
  background: rgba(0, 0, 0, 0.28);
  border-color: rgba(255, 255, 255, 0.35);
  transition: background 0.2s ease, transform 0.2s ease;
}

.hero__socials .social-link:hover {
  background: rgba(0, 0, 0, 0.55);
  transform: translateY(-2px);
}

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

.hero__socials--menu {
  margin-top: 14px;
}

.mobile-topbar__phone {
  display: none;
}

@media (max-width: 1180px) {
  .hero__top {
    flex-wrap: wrap;
  }
  .hero__top .hero__nav {
    gap: 14px 28px;
  }
  .hero__phone {
    font-size: 17px;
  }
}

@media (max-width: 860px) {
  .hero__top {
    display: none;
  }
  .mobile-topbar__phone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-left: auto;
    margin-right: 12px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(0, 0, 0, 0.28);
    color: #fff;
  }
  .mobile-topbar__phone svg {
    width: 20px;
    height: 20px;
  }
}