/* ===== Reset-ish base ===== */
* { box-sizing: border-box; }

html, body{
  height: 100%;
  width: 100%;
  max-width: 100%;

  /* anti horizontal scroll */
  overflow-x: clip;   /* modern browsers */
  overflow-x: hidden; /* fallback */
}

body{
  margin: 0;
  font-family: var(--font-family-base, "Montserrat"), system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--color-bg-page, #0b0b0c);
  color: var(--color-text-inverse, #fff);
}

img { max-width: 100%; height: auto; }

/* ===== Layout helpers ===== */
.zf-container{
 width: 100%;
 padding-left: var(--spacing-container-gutter-x, 64px);
 padding-right: var(--spacing-container-gutter-x, 64px);
}


@media (max-width: 900px){
 .zf-container{
   padding-left: var(--spacing-container-gutter-x-mobile, 20px);
   padding-right: var(--spacing-container-gutter-x-mobile, 20px);
 }
}

/* ===== Header ===== */
.zf-header {
  /* position: absolute; — оставляем, если нужно наложение на первый экран */
  /* ИЛИ используйте relative, чтобы хедер просто стоял ПЕРЕД контентом */
  position: absolute !important; 
  
  top: 0 !important; 
  left: 0; 
  right: 0;
  z-index: 50;

  display: flex;
  align-items: center;

  height: var(--header-height, 72px);
  padding-top: var(--spacing-header-inset-top, 0px);

  /* Это предотвратит фиксацию, если она добавляется скриптами */
  bottom: auto !important; 
}

@media (max-width: 900px){
  .zf-header{ height: var(--header-height-mobile, 64px); }
}

.zf-header__inner{
  position: relative;           /* якорь для QR */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--spacing-inline-gap, 22px);
}

.zf-nav{
  display: flex;
  align-items: center;
  gap: var(--spacing-inline-gap, 22px);
  list-style: none;
  padding: 0;
  margin: 0;
}

.zf-nav a{
  text-decoration: none;
  color: var(--color-text-inverse, rgba(255,255,255,0.85));
  font-weight: var(--font-weight-regular, 400);
  font-size: var(--font-size-ui, 14px);
  line-height: var(--font-line-height-single, 1);
}

.zf-nav a:hover{
  color: var(--color-text-inverse, rgba(255,255,255,1));
}

/* ===== Header QR ===== */
/* ✅ QR НЕ участвует во flex-раскладке и не двигает меню */
.zf-header__qr{
  position: absolute;
  top: var(--spacing-header-inset-top, 0px);  /* верх QR на уровне меню */
  right: 70px;                                 /* ✅ 70px от правого края ЭКРАНА */
  width: 120px;
  height: 120px;
  display: block;
  z-index: 60;
}

.zf-header__qr img{
  width: 100%;
  height: 100%;
  display: block;
}

/* MOBILE */
@media (max-width: 900px){
  .zf-header__qr{
    width: 72px;
    height: 72px;
    right: 16px;
    top: 12px;
  }
}

/* ===== Hero ===== */
.zf-hero{
 position: relative;
 min-height: var(--hero-min-height, 740px);
 padding-top: var(--header-height, 72px);


 /* даём снизу место под floating CTA + pills */
 padding-bottom: calc(
   var(--spacing-hero-info-offset-bottom, 60px) + var(--size-button-lg, 75px) + 24px
 );


 overflow: hidden;
}


@media (max-width: 900px){
 .zf-hero{
   min-height: var(--hero-min-height-mobile, 640px);
   padding-top: var(--header-height-mobile, 64px);
   padding-bottom: 160px;
 }
}


.zf-hero__media{
 position: absolute;
 inset: 0;
 z-index: 0;
}


.zf-hero__media img{
 width: 100%;
 height: 100%;
 object-fit: cover;
 display: block;
}


/* overlay: обязательно с fallback */
.zf-hero::before{
 content: "";
 position: absolute;
 inset: 0;
 z-index: 1;
 background: var(
   --color-overlay-hero,
   linear-gradient(90deg, rgba(0,0,0,0.60) 0%, rgba(0,0,0,0.00) 60%)
 );
}


.zf-hero__content{
 position: relative;
 z-index: 2;
 padding-top: var(--spacing-section-top, 100px);
}


.zf-hero__title{
 margin: 0;
 max-width: var(--hero-title-max-width, 820px);


 font-family: var(--font-family-base, "Montserrat");
 font-size: var(--font-size-hero, 90px);
 line-height: var(--font-line-height-hero, 1.02);
 font-weight: var(--font-weight-semibold, 600);
 color: var(--color-text-inverse, #fff);
}


@media (max-width: 900px){
 .zf-hero__content{ padding-top: 72px; }
 .zf-hero__title{ font-size: var(--font-size-hero-mobile, 54px); }
}


/* Floating CTA */
.zf-hero__cta{
 text-decoration: none;
 color: var(--color-text-inverse, #fff);
}


.zf-hero__cta--floating{
 position: absolute;
 z-index: 3;


 left: var(--spacing-container-gutter-x, 64px);
 bottom: var(--spacing-hero-info-offset-bottom, 60px);


 display: inline-flex;
 align-items: center;
 justify-content: center;


 height: var(--size-button-lg, 75px);
 padding: 0 var(--spacing-button-padding-x, 32px);
 border-radius: var(--radius-pill, 999px);


 background: var(--color-bg-cta-primary, rgba(0,0,0,0.85));


 font-weight: var(--font-weight-medium, 500);
 font-size: var(--font-size-body-md, 20px);


 pointer-events: auto;
}


@media (max-width: 900px){
 .zf-hero__cta--floating{
   left: var(--spacing-container-gutter-x-mobile, 20px);
   bottom: 24px;
 }
}

/* Floating hero info pills */
.zf-hero__info{
 position: absolute;
 z-index: 3;


 right: var(--spacing-hero-info-offset-right, 100px);
 bottom: var(--spacing-hero-info-offset-bottom, 60px);


 display: flex;
 flex-direction: row;
 gap: var(--spacing-inline-gap, 15px);
 align-items: flex-end;


 width: auto;
 pointer-events: auto;
}


@media (max-width: 900px){
 .zf-hero__info{
   right: var(--spacing-container-gutter-x-mobile, 20px);
   bottom: 110px;
   flex-wrap: wrap;
   justify-content: flex-start;
 }
}

/* pills — compact like design */
.zf-pill{
 display: grid;
 grid-template-columns: auto auto;
 gap: var(--spacing-inline-gap, 12px);
 align-items: center;


 /* 🔧 КЛЮЧЕВОЕ: уменьшаем вертикальный padding */
 padding: 12px 24px;
 min-height: 70px; /* целевая высота из дизайна */


 border-radius: 18px;


 /* 🎨 цвет КАК В FIGMA: #140E56 @ 60% */
 background: rgba(20, 14, 86, 0.6);


 color: var(--color-text-inverse, #fff);
 backdrop-filter: blur(var(--blur-pill, 10px));


 white-space: nowrap;
 flex: 0 0 auto;
 width: auto;
}


.zf-pill__label{
 font-size: var(--font-size-ui, 14px);          /* ✅ label 14 */
 font-weight: var(--font-weight-regular, 400);
 opacity: 0.85;
}


.zf-pill__value{
 font-size: var(--font-size-body-sm, 16px);     /* ✅ value 16 */
 font-weight: var(--font-weight-medium, 500);
}


/* ===== Project Summary (пока минимально, чтобы не мешал верстке) ===== */
.zf-project-summary{
 padding-top: var(--spacing-section-top, 64px);
 padding-bottom: var(--spacing-section-bottom, 64px);
 background: var(--color-bg-section, #ffffff);
 color: var(--color-text-primary, #000);
}


.zf-project-summary__debug{
 display: inline-flex;
 align-items: center;
 gap: 10px;
 font-weight: 700;
 letter-spacing: 0.02em;
}


/* ===== Project Info (strict token names from Block Token Map) ===== */
/*
project_info_default tokens:
--radius-section: 60px
--spacing-section-top: 130px
--spacing-section-bottom: 130px
--spacing-section-inset-x: 50px
--spacing-project-info-card-padding: 60px
--spacing-project-info-card-bottom: 55px
--font-size-heading: 35px
--font-line-height-section: 42px
--font-size-body-md: 16px
--font-line-height-body: 26px
--radius-button: 30px
--size-button-md: 60px
--spacing-button-padding-x: 40px
*/


/* SECTION */
.zf-project-info{
 padding-top: var(--spacing-section-top, 130px);
 padding-bottom: var(--spacing-section-bottom, 130px);
 background: #fff;
 color: #000;


 /* общий inset секции: 50px от краёв экрана */
 padding-left: var(--spacing-section-inset-x, 50px);
 padding-right: var(--spacing-section-inset-x, 50px);
}


@media (max-width: 900px){
 .zf-project-info{
   padding-top: 64px;
   padding-bottom: 64px;
   padding-left: 24px;
   padding-right: 24px;
 }
}


/* FRAME (фото-полотно) */
.zf-project-info__frame{
 position: relative;
 border-radius: var(--radius-section, 60px);
 overflow: hidden;
 min-height: 720px;


 /*
   ✅ Full-bleed при ЛЮБОМ контейнере:
   тянем ширину до края экрана, но оставляем 50px inset слева/справа.
 */
 width: calc(100vw - (2 * var(--spacing-section-inset-x, 50px)));
 margin-left: calc(50% - 50vw + var(--spacing-section-inset-x, 50px));
 margin-right: 0;
}


@media (max-width: 900px){
 .zf-project-info__frame{
   min-height: 560px;


   /* на мобиле — по ширине родителя (обычно так аккуратнее) */
   width: 100%;
   margin-left: 0;
 }
}


/* MEDIA */
.zf-project-info__media{
 position: absolute;
 inset: 0;
 z-index: 0;
}


.zf-project-info__media img{
 width: 100%;
 height: 100%;
 display: block;
 object-fit: cover;
 object-position: center;
}


/* CARD (справа поверх фото) */
.zf-project-info__card{
 position: absolute;
 z-index: 1;


 /* ✅ карточка 50px от правого края фото */
 right: var(--spacing-section-inset-x, 50px);
 bottom: var(--spacing-project-info-card-bottom, 55px);


 /* ✅ ширина карточки (пока нет токена — локальная переменная) */
 --size-project-info-card-w: 550px;


 width: min(
   var(--size-project-info-card-w),
   calc(100% - (2 * var(--spacing-section-inset-x, 50px)))
 );
 max-width: var(--size-project-info-card-w);


 background: #fff;
 border-radius: var(--radius-section, 60px);
 padding: var(--spacing-project-info-card-padding, 60px);


 box-shadow: 0 20px 60px rgba(0,0,0,0.14);
}


@media (max-width: 900px){
 .zf-project-info__card{
   position: relative;
   right: auto;
   bottom: auto;


   width: 100%;
   max-width: none;


   border-radius: 32px;
   padding: 28px;


   /* чтобы карточка не прилипала к верху фото */
   margin-top: 18px;
 }
}


/* TITLE */
.zf-project-info__title{
 margin: 0 0 18px 0;
 font-family: var(--font-family-base, "Montserrat");
 font-size: var(--font-size-heading, 35px);
 line-height: var(--font-line-height-section, 42px);
 font-weight: var(--font-weight-semibold, 600);
 letter-spacing: -0.01em;
 max-width: 520px;
}


/* TEXT */
.zf-project-info__text{
 font-family: var(--font-family-base, "Montserrat");
 font-size: var(--font-size-body-sm, 16px);
 line-height: var(--font-line-height-body, 26px);
 font-weight: var(--font-weight-regular, 400);
 color: rgba(0,0,0,0.55);
 max-width: 620px;
}


.zf-project-info__text p{
 margin: 0 0 14px 0;
}


.zf-project-info__text p:last-child{
 margin-bottom: 0;
}


/* CTA */
.zf-project-info__cta{
 display: inline-flex;
 align-items: center;
 justify-content: center;


 margin-top: 28px;


 height: var(--size-button-md, 60px);
 padding: 0 var(--spacing-button-padding-x, 40px);


 border-radius: var(--radius-button, 30px);
 background: rgba(149,126,119,1);
 color: #fff;
 text-decoration: none;


 font-size: 20px;
 font-weight: 500;
 min-width: 260px;
}


@media (max-width: 900px){
 .zf-project-info__cta{
   min-width: 0;
   width: 100%;
 }
}


/* ===== Amenities (cards like design) ===== */
.zf-amenities{
 background: var(--color-bg-section, #ffffff);
 color: var(--color-text-primary, #000);


 /* 🔥 убираем верхний воздух */
 padding-top: 0;
 padding-bottom: var(--spacing-section-bottom, 64px);
}


.zf-amenities__title{
 margin: 0 0 var(--spacing-stack-sm, 28px) 0;
 text-align: center;


 font-family: var(--font-family-base, "Montserrat");
 font-size: var(--font-size-heading, 48px);
 line-height: 1.1;
 font-weight: var(--font-weight-semibold, 600);
 letter-spacing: -0.01em;
}


@media (max-width: 900px){
 .zf-amenities__title{ font-size: 32px; }
}


.zf-amenities__grid{
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: var(--spacing-grid-gap, 32px);
 align-items: stretch;
}


@media (max-width: 900px){
 .zf-amenities__grid{
   grid-template-columns: 1fr;
   gap: 18px;
 }
}


.zf-amenity{
 position: relative;
 margin: 0;
 overflow: hidden;
 border-radius: var(--radius-panel, 40px);
 background: #eee;
}


.zf-amenity__img{
 width: 100%;
 height: 100%;
 display: block;
 object-fit: cover;


 /* чтобы карточка выглядела “как в макете”, а не растягивалась как попало */
 aspect-ratio: 3 / 4;
}


.zf-amenity__label{
 position: absolute;
 left: var(--spacing-amenity-label-inset, 24px);
 right: var(--spacing-amenity-label-inset, 24px);
 bottom: var(--spacing-amenity-label-bottom, 20px);


 margin: 0;
 padding: var(--spacing-amenity-label-padding-y, 18px) var(--spacing-amenity-label-padding-x, 26px);


 border-radius: var(--radius-pill, 999px);
 background: var(--color-overlay-dark, rgba(0,0,0,0.35));
 backdrop-filter: blur(var(--blur-pill, 10px));


 color: var(--color-text-inverse, #fff);
 font-size: var(--font-size-body-md, 22px);
 font-weight: var(--font-weight-regular, 400);


 text-align: left;              /* ключевое */
 display: flex;
 align-items: center;
}


.zf-amenity__label span{
 display: block;
 transform: translateY(1px);
}


/* ===== Project Gallery (fullscreen slider) ===== */
.zf-project-gallery{
 background: var(--color-bg-page, #fff);
}


.zf-project-gallery__frame{
 position: relative;
 width: 100%;
 height: 100vh;
 overflow: hidden;
 border-radius: 0 !important;
}


.zf-project-gallery__img{
 width: 100%;
 height: 100%;
 display: block;
 object-fit: cover;
 border-radius: 0 !important;
}


/* NAV buttons (match token names) */
.zf-project-gallery__nav{
 position: absolute;
 z-index: 10;


 width: var(--size-carousel-control, 48px);
 height: var(--size-carousel-control, 48px);


 border-radius: var(--radius-carousel-control, 999px);
 background: var(--color-overlay-dark, rgba(0,0,0,0.5));


 border: 0;
 padding: 0;
 cursor: pointer;


 display: grid;
 place-items: center;


 /* чтобы браузер не рисовал свои фокусы/обводки криво */
 -webkit-tap-highlight-color: transparent;
}


.zf-project-gallery__nav--prev{
 left: var(--spacing-carousel-control-edge, 200px);
 bottom: var(--spacing-carousel-control-bottom, 57px);
}


.zf-project-gallery__nav--next{
 right: var(--spacing-carousel-control-edge, 200px);
 bottom: var(--spacing-carousel-control-bottom, 57px);
}


.zf-project-gallery__nav svg{
 width: var(--size-icon-md, 17px);
 height: var(--size-icon-md, 17px);
 fill: var(--color-icon-inverse, #fff);
}


.zf-project-gallery__nav.is-disabled{
 opacity: 0.35;
 cursor: default;
}


.zf-project-gallery__nav:disabled{
 /* не даём браузеру “прятать” кнопку */
 opacity: 0.35;
}


/* если вдруг где-то глобально отключены клики */
.zf-project-gallery__nav,
.zf-project-gallery__frame{
 pointer-events: auto;
}


/* ===== Project Summary ===== */


.zf-project-summary{
 background: var(--color-bg-page, #fff);
 padding-top: var(--spacing-section-top, 100px);
}


.zf-project-summary__header{
 text-align: var(--layout-align-center, center);
 margin-bottom: var(--spacing-section-title-to-content, 40px);
}


/* Title / subtitle (как в дизайне: semibold 35, regular 20) */
.zf-project-summary__title{
 margin: 0;
 font-family: var(--font-family-base, "Montserrat");
 font-size: var(--font-size-heading, 35px);
 line-height: var(--font-line-height-section, 1.15);
 font-weight: var(--font-weight-semibold, 600);
 color: var(--color-text-primary, #000);
}


.zf-project-summary__subtitle{
 margin: var(--spacing-title-to-subtitle, 10px) 0 0 0;
 font-family: var(--font-family-base, "Montserrat");
 font-size: var(--font-size-body-md, 20px);
 line-height: var(--font-line-height-body, 26px);
 font-weight: var(--font-weight-regular, 400);
 color: var(--color-text-secondary, #4D4D4D);
}


/* grid: 2 small top, wide bottom-left, tall right */
.zf-project-summary__grid{
 display: grid;
 grid-template-columns: 1fr 1fr 1.05fr;
 grid-template-rows: auto auto;
 gap: var(--spacing-inline-gap, 15px);
 align-items: stretch;
}


/* Cards: radius 30 + правильные паддинги */
.zf-summary-card{
 border-radius: var(--radius-button, 30px); /* ВАЖНО: 30 */
 color: var(--color-text-inverse, #fff);
 padding:
   var(--spacing-card-content-padding-y, 28px)
   var(--spacing-card-content-padding-x, 35px);
 display: flex;
 flex-direction: column;
 justify-content: center;
 min-height: var(--layout-card-min-height, 170px);
}


/* Малые карточки: value medium 32, label regular 20 */
.zf-summary-card__value{
 font-family: var(--font-family-base, "Montserrat");
 font-size: var(--font-size-card-title, 32px);
 font-weight: var(--font-weight-medium, 500); /* было semibold — исправили */
 line-height: 1.15;
 margin: 0;
}


.zf-summary-card__label{
 margin-top: var(--spacing-card-value-to-label, 14px);
 font-family: var(--font-family-base, "Montserrat");
 font-size: var(--font-size-body-md, 20px);
 line-height: var(--font-line-height-body, 26px);
 font-weight: var(--font-weight-regular, 400);
 opacity: 0.9;
}


/* positions */
.zf-summary-card--delivery{
 background: var(--color-bg-data-delivery, #880F4A);
 grid-column: 1;
 grid-row: 1;
}
.zf-summary-card--developer{
 background: var(--color-bg-data-developer, #65429E);
 grid-column: 2;
 grid-row: 1;
}
.zf-summary-card--type{
 background: var(--color-bg-data-type, #456D4B);
 grid-column: 1 / 3;
 grid-row: 2;
}


/* big card right */
.zf-summary-card--price{
 background: var(--color-bg-data-price, #21B9A0);
 grid-column: 3;
 grid-row: 1 / 3;
 min-height: 100%;
 align-items: flex-start;
 justify-content: center;
}


/* AED — semibold 55 (как на макете) */
.zf-summary-card__currency{
 font-family: var(--font-family-base, "Montserrat");
 font-size: var(--font-size-price-currency, 55px);
 line-height: 1;
 font-weight: var(--font-weight-semibold, 600);
 margin: 0 0 var(--spacing-price-currency-to-price, 18px) 0;
}


/* Цена — semibold 55 (как ты написал) */
.zf-summary-card__price{
 font-family: var(--font-family-base, "Montserrat");
 font-size: var(--font-size-section-display, 55px);
 line-height: 1.05;
 font-weight: var(--font-weight-semibold, 600);
 margin: 0 0 var(--spacing-price-to-label, 18px) 0;
}


/* Подпись в big card — regular 20 */
.zf-summary-card--price .zf-summary-card__label{
 font-weight: var(--font-weight-regular, 400);
 font-size: var(--font-size-body-md, 20px);
 margin-top: 0; /* в big card label идёт после price, без доп. отступа сверху */
}


/* mobile */
@media (max-width: 900px){
 .zf-project-summary{
   padding-top: var(--spacing-section-top-mobile, 64px);
 }


 .zf-project-summary__grid{
   grid-template-columns: 1fr;
   grid-template-rows: auto;
 }


 .zf-summary-card--type{
   grid-column: auto;
 }


 .zf-summary-card--price{
   grid-column: auto;
   grid-row: auto;
   align-items: flex-start;
 }


 /* не уменьшаем до 40 “от балды”, а берём токен/фолбек */
 .zf-project-summary__title{
   font-size: var(--font-size-heading-mobile, 30px);
 }
}


/* ===== Units Gallery ===== */


.zf-units-gallery{
 background: var(--color-bg-page, #fff);
 padding-top: var(--spacing-section-top, 100px);
}


.zf-units-gallery__header{
 text-align: center;
 margin-bottom: var(--spacing-section-title-to-content, 40px);
}


.zf-units-gallery__title{
 margin: 0;
 font-family: var(--font-family-base, "Montserrat");
 font-size: var(--font-size-section-title, 35px);
 font-weight: var(--font-weight-semibold, 600);
 line-height: 1.15;
 color: var(--color-text-primary, #000);
}


/* Frame */
.zf-units-gallery__frame{
 position: relative;
 width: 100%;
 overflow: hidden;
}


/* Make image “full / cinematic” */
.zf-units-gallery__img{
 width: 100%;


 /* ВАЖНО: нормальная высота как “галерея”, не узкая */
 height: min(86vh, 920px);
 min-height: 640px;


 object-fit: cover;
 display: block;
}


/* Info panel (overlay at bottom) */
.zf-units-gallery__panel{
 position: absolute;
 left: var(--spacing-units-gallery-info-panel-inset-x, 128px);
 right: var(--spacing-units-gallery-info-panel-inset-x, 128px);
 bottom: 0;


 height: var(--size-units-gallery-info-panel-height, 100px);


background: rgba(255, 255, 255, 0.3);


 /* верх скруглён, низ режется по экрану */
 border-top-left-radius: var(--radius-units-gallery-info-panel, 30px);
 border-top-right-radius: var(--radius-units-gallery-info-panel, 30px);
 border-bottom-left-radius: 0;
 border-bottom-right-radius: 0;


 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 28px;
 padding: 0 var(--spacing-card-content-padding-x, 35px);


 z-index: 20; /* ниже стрелок */
}


/* Arrows (BOTTOM left/right, outside panel, above it) */
.zf-units-gallery__nav{
 position: absolute;


 /* снизу до центра стрелки */
 bottom: var(--spacing-units-gallery-carousel-control-bottom, 42px);


 width: var(--size-carousel-control, 48px);
 height: var(--size-carousel-control, 48px);
 border-radius: 999px;


 border: 0;
 background: var(--color-overlay-dark, rgba(0,0,0,.35));
 color: #fff;


 display: inline-flex;
 align-items: center;
 justify-content: center;


 cursor: pointer;


 z-index: 30; /* ВАЖНО: выше панели */
}


.zf-units-gallery__nav--prev{
 left: var(--spacing-units-gallery-carousel-control-side, 74px);
}


.zf-units-gallery__nav--next{
 right: var(--spacing-units-gallery-carousel-control-side, 74px);
}


.zf-units-gallery__nav[disabled]{
 opacity: 0.35;
 cursor: default;
}


/* SVG icon strictly centered and sized by token */
.zf-units-gallery__nav svg{
 width: var(--size-icon-md, 17px);
 height: var(--size-icon-md, 17px);
 display: block;
}


/* Left: bedrooms */
.zf-units-gallery__beds{
 display: flex;
 align-items: baseline;
 gap: 14px;
 white-space: nowrap;
}


.zf-units-gallery__beds-main{
 font-family: var(--font-family-base, "Montserrat");
 font-size: var(--font-size-units-gallery-text, 27px);
 font-weight: var(--font-weight-medium, 500);
 color: var(--color-text-primary, #000);
}


.zf-units-gallery__beds-sep{
 font-size: var(--font-size-units-gallery-text, 27px);
 color: var(--color-text-primary, #000);
 opacity: 0.4;
}


.zf-units-gallery__beds-rest{
 font-family: var(--font-family-base, "Montserrat");
 font-size: var(--font-size-units-gallery-text, 27px);
 font-weight: var(--font-weight-regular, 400);
 color: var(--color-text-primary, #000);
 opacity: 0.4;
}


/* Middle stats */
.zf-units-gallery__stats{
 display: flex;
 align-items: baseline;
 gap: 48px;
 white-space: nowrap;
}


.zf-units-gallery__stat{
 font-family: var(--font-family-base, "Montserrat");
 font-size: var(--font-size-units-gallery-text, 27px);
 font-weight: var(--font-weight-medium, 500);
 color: var(--color-text-primary, #000);
}


/* CTA button (same visual rules as Project Info CTA) */
.zf-units-gallery__cta{
 border: 0;
 border-radius: 999px;
 background: var(--color-bg-cta-secondary, #9B8B86);
 color: #fff;


 font-family: var(--font-family-base, "Montserrat");
 font-size: var(--font-size-cta, 20px);
 font-weight: var(--font-weight-medium, 500);
 line-height: var(--font-line-height-body, 26px);


 padding: var(--spacing-cta-padding-y, 16px) var(--spacing-cta-padding-x, 28px);
 cursor: pointer;
 white-space: nowrap;
}


/* Responsive */
@media (max-width: 1100px){
 .zf-units-gallery__panel{
   left: 24px;
   right: 24px;
 }
 .zf-units-gallery__stats{ display:none; }
 .zf-units-gallery__nav--prev{ left: 24px; }
 .zf-units-gallery__nav--next{ right: 24px; }
}


@media (max-width: 700px){
 .zf-units-gallery__img{
   height: 70vh;
   min-height: 480px;
 }
 .zf-units-gallery__panel{
   padding: 0 18px;
   gap: 16px;
 }
}


/* ===== Map Section (FIXED, matches HTML) ===== */


.zf-map-section{
 background: var(--color-bg-page, #fff);
 padding-top: var(--spacing-section-top, 100px);
 padding-bottom: var(--spacing-section-bottom, 100px);


 /* ВАЖНО: отступ слева */
 padding-left: var(--spacing-section-inset-x, 50px);
 padding-right: 0;
}


.zf-map-section__inner{
 display: grid;
 grid-template-columns: minmax(360px, 520px) 1fr;
 gap: var(--spacing-grid-gap-compact, 15px);
 align-items: stretch;


 /* ВАЖНО: вытаскиваем карту к правому краю экрана */
 margin-right: calc(-1 * var(--spacing-section-inset-x, 50px));
}


/* LEFT CARD */
.zf-map-section__panel{
 background: var(--color-bg-map-panel, #F4EEEA);
 border-radius: var(--radius-panel, 40px);
 padding: var(--spacing-card-content-padding-map-x, 40px);
}


/* TITLE */
.zf-map-section__title{
 margin: 0 0 var(--spacing-section-title-to-content, 40px) 0;
 font-family: var(--font-family-base, "Montserrat");
 font-size: var(--font-size-section-display, 55px);
 font-weight: var(--font-weight-semibold, 600);
 line-height: var(--font-line-height-title, 51px);
 color: var(--color-text-map-title, #7A3B2A);
}


/* TEXT */
.zf-map-section__p{
 margin: 0;
 font-family: var(--font-family-base, "Montserrat");
 font-size: var(--font-size-body-sm, 16px);
 line-height: var(--font-line-height-body, 26px);
 font-weight: var(--font-weight-regular, 400);
 color: var(--color-text-secondary, #4D4D4D);
}


.zf-map-section__p + .zf-map-section__p{
 margin-top: var(--spacing-stack-sm, 26px);
}


/* MAP */
.zf-map-section__map{
 border-radius: var(--radius-panel, 40px);
 overflow: hidden;
 min-height: 520px;
}


.zf-map-section__iframe{
 width: 100%;
 height: 100%;
 border: 0;
 display: block;
}


/* Responsive */
@media (max-width: 980px){
 .zf-map-section{
   padding-left: 24px;
 }


 .zf-map-section__inner{
   grid-template-columns: 1fr;
   margin-right: 0;
 }


 .zf-map-section__map{
   min-height: 420px;
 }
}


/* ===== Contact Form ===== */


.zf-contact-form{
 position: relative;
 width: 100%;
 min-height: 100vh;
 background: var(--color-bg-page, #fff);
 overflow: hidden;
}


.zf-contact-form__bg{
 position: absolute;
 inset: 0;
 background-size: cover;
 background-position: center;
 background-repeat: no-repeat;
 transform: translateZ(0);
}


/* CARD */
.zf-contact-form__card{
 position: absolute;
 top: var(--spacing-cta-card-offset-top, 111px);
 right: var(--spacing-cta-card-offset-right, 120px);


 width: min(560px, calc(100vw - 2 * var(--spacing-section-inset-x, 50px)));
 background: var(--color-bg-card, #fff);
 border-radius: var(--radius-panel, 40px);


 padding-top: var(--spacing-cta-card-padding-top, 70px);
 padding-bottom: var(--spacing-cta-card-padding-bottom, 77px);
 padding-left: var(--spacing-card-content-padding-map-x, 40px);
 padding-right: var(--spacing-card-content-padding-map-x, 40px);
}


/* TITLE */
.zf-contact-form__title{
 margin: 0 0 var(--spacing-section-title-to-content, 40px) 0;
 font-family: var(--font-family-base, "Montserrat");
 font-size: var(--font-size-section-title, 45px);
 font-weight: var(--font-weight-medium, 500);
 line-height: var(--font-line-height-title, 51px);
 color: var(--color-text-primary, #000);
 text-align: center;
}


/* ACTIONS */
.zf-contact-form__actions{
 display: grid;
 gap: var(--spacing-cta-buttons-gap, 30px);
 justify-items: center;
}


/* INPUT (styled like a pill button) */
.zf-contact-form__input{
 width: min(360px, 100%);
 border: 0;
 outline: none;


 background: var(--color-bg-cta-muted, #E8E8E8);
 border-radius: var(--radius-pill, 999px);


 padding: var(--spacing-button-padding-y, 30px) var(--spacing-button-padding-x, 32px);


 font-family: var(--font-family-base, "Montserrat");
 font-size: var(--font-size-body-md, 20px);
 font-weight: var(--font-weight-medium, 500);
 color: var(--color-text-primary, #000);
 text-align: center;
}


/* CTA */
.zf-contact-form__cta{
 width: min(360px, 100%);
 border: 0;
 cursor: pointer;


 background: var(--color-bg-cta-secondary, #957E77);
 color: var(--color-text-inverse, #fff);


 border-radius: var(--radius-pill, 999px);
 padding: var(--spacing-button-padding-y, 30px) var(--spacing-button-padding-x, 32px);


 font-family: var(--font-family-base, "Montserrat");
 font-size: var(--font-size-body-md, 20px);
 font-weight: var(--font-weight-medium, 500);
 text-align: center;
}


/* Responsive */
@media (max-width: 900px){
 .zf-contact-form{
   min-height: 760px;
 }
 .zf-contact-form__card{
   right: var(--spacing-section-inset-x, 24px);
   left: var(--spacing-section-inset-x, 24px);
   width: auto;
 }
}
/* ===== Footer ===== */


.zf-footer{
 background: var(--color-bg-footer, #141414);
 color: var(--color-text-on-dark, #fff);
}


.zf-footer__inner{
 padding-left: var(--spacing-container-gutter-x, 130px);
 padding-right: var(--spacing-container-gutter-x, 130px);
 padding-top: var(--spacing-footer-padding-y, 80px);
 padding-bottom: var(--spacing-footer-padding-y, 80px);
}


.zf-footer__grid{
 display: grid;
 grid-template-columns: 1.2fr 1fr;
 align-items: start;
 gap: var(--spacing-grid-gap, 40px);
}


/* LEFT */
.zf-footer__brand{
 font-family: var(--font-family-base, "Montserrat");
 font-size: 35px; /* semibold 35 */
 font-weight: var(--font-weight-semibold, 600);
 line-height: 1.15;
 color: var(--color-text-on-dark, #fff);
}


.zf-footer__subtitle{
 margin-top: var(--spacing-footer-padding-y, 60px); /* ты просил: “60 до подзаголовка” */
 font-family: var(--font-family-base, "Montserrat");
 font-size: 27px; /* medium 27 */
 font-weight: var(--font-weight-medium, 500);
 line-height: 1.25;
 color: var(--color-text-on-dark, #fff);
 max-width: 52ch; /* чтобы чаще было в 1 строку */
}


.zf-footer__powered{
 margin-top: var(--spacing-stack-lg, 50px);
 font-family: var(--font-family-base, "Montserrat");
 font-size: var(--font-size-ui, 14px);
 font-weight: var(--font-weight-regular, 400);
 color: var(--color-text-on-dark-muted, rgba(255,255,255,.65));
}


/* RIGHT */
.zf-footer__right{
 display: grid;
 justify-items: end;
 gap: var(--spacing-stack-md, 28px);
}


/* ACTIONS — одна линия с заголовком (как на скрине) */
.zf-footer__actions{
 display: flex;
 gap: var(--spacing-grid-gap-compact, 15px);
 align-items: center;
 margin-top: 0;
}


/* pills — обе прозрачные + обводка */
.zf-footer__pill{
 height: 56px; /* чуть меньше, аккуратнее */
 padding: 0 32px;
 border-radius: 999px;


 border: 1px solid rgba(255,255,255,0.35);
 background: transparent;


 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 12px;


 min-width: 320px; /* длинные */
 text-decoration: none;
 white-space: nowrap;
 color: var(--color-text-on-dark, #fff);
}


.zf-footer__pill-icon{
 opacity: 0.9;
 line-height: 1;
}


.zf-footer__pill-text{
 font-family: var(--font-family-base, "Montserrat");
 font-size: var(--font-size-body-sm, 16px);
 font-weight: var(--font-weight-medium, 500);
 line-height: 1;
}


/* nav */
.zf-footer__nav{
 display: flex;
 gap: 28px;
 align-items: center;
 margin-top: var(--spacing-footer-padding-y, 60px); /* ← ВОТ ОНО */
}


.zf-footer__link{
 font-family: var(--font-family-base, "Montserrat");
 font-size: var(--font-size-ui, 14px);
 font-weight: var(--font-weight-regular, 400);
 color: var(--color-text-on-dark-muted, rgba(255,255,255,.75));
 text-decoration: none;
}


.zf-footer__link:hover{
 color: var(--color-text-on-dark, #fff);
}


/* Responsive */
@media (max-width: 1100px){
 .zf-footer__inner{
   padding-left: 24px;
   padding-right: 24px;
 }


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


 .zf-footer__right{
   justify-items: start;
 }


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


 .zf-footer__pill{
   min-width: 0;
   width: 100%;
 }


 .zf-footer__nav{
   flex-wrap: wrap;
   gap: 18px;
 }
}

/* =========================
  Mobile pack v1 (clean)
  Breakpoints:
  - <= 900px : main mobile
  - <= 520px : small phones
  ========================= */

/* =========================
  <= 900px
  ========================= */
@media (max-width: 900px){

  /* ---------- Global safety ---------- */
  html{
    scroll-padding-top: var(--header-height-mobile, 64px);
  }

  html, body{
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  img, video, svg{
    max-width: 100%;
    height: auto;
  }

  h1, h2, h3{
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  .zf-container,
  .zf-hero,
  .zf-project-info,
  .zf-project-summary,
  .zf-project-gallery,
  .zf-amenities,
  .zf-units-gallery,
  .zf-map-section,
  .zf-contact-form,
  .zf-footer{
    width: 100%;
    max-width: 100%;
  }

  /* =========================
     Header / Nav
     ========================= */
  .zf-nav{ display: none; }
  .zf-header__inner{ gap: 12px; }

  /* =========================
     Hero
     ========================= */
  .zf-hero{
    min-height: auto;
    height: 92svh;
    height: 92dvh;
    height: 92vh;
    padding-bottom: 0;

    position: relative;
    z-index: 2;
  }

  .zf-hero::before{
    background: var(
      --color-overlay-hero,
      linear-gradient(
        180deg,
        rgba(0,0,0,0.55) 0%,
        rgba(0,0,0,0.15) 55%,
        rgba(0,0,0,0.0) 100%
      )
    );
  }

  .zf-hero__content{ padding-top: 56px; }

  .zf-hero__title{
    max-width: 18ch;
    overflow-wrap: anywhere;
  }

  .zf-hero__cta--floating{
    left:  var(--spacing-container-gutter-x-mobile, 20px);
    right: var(--spacing-container-gutter-x-mobile, 20px);
    width: auto;

    bottom: 18px;
    height: var(--size-button-lg, 75px);
    max-width: calc(100% - (2 * var(--spacing-container-gutter-x-mobile, 20px)));
  }

  .zf-hero__info{
    left:  var(--spacing-container-gutter-x-mobile, 20px);
    right: auto;
    bottom: calc(18px + var(--size-button-lg, 75px) + 14px);

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;

    width: max-content;
    max-width: calc(100vw - (2 * var(--spacing-container-gutter-x-mobile, 20px)));
    pointer-events: auto;
  }

  .zf-pill{
    padding: 10px 16px;
    min-height: 60px;

    display: grid;
    grid-template-columns: auto auto;
    gap: 12px;
    align-items: center;

    width: 100%;
    white-space: nowrap;
    border-radius: 18px;
  }

  .zf-pill__label,
  .zf-pill__value{
    white-space: nowrap;
  }

  /* =========================
     Separation fix (Hero -> next section)
     ========================= */
  .zf-project-info{
    position: relative;
    z-index: 1;
    margin-top: 12px;
  }

  /* =========================
     Project Info (mobile)
     ========================= */
  .zf-project-info{
    padding-top: 24px;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;

    min-height: 100svh;
    min-height: 100dvh;
    min-height: 100vh;

    display: flex;
    align-items: stretch;
    overflow-x: clip;
  }

  .zf-project-info__frame{
    position: relative;
    border-radius: var(--radius-panel, 40px);
    overflow: hidden;

    height: 92svh;
    height: 92dvh;
    height: 92vh;

    width: calc(100vw - (2 * var(--spacing-container-gutter-x-mobile, 20px)));
    margin-left: calc(50% - 50vw + var(--spacing-container-gutter-x-mobile, 20px));
    margin-right: 0;
  }

  .zf-project-info__card{
    position: absolute;
    left: var(--spacing-container-gutter-x-mobile, 20px);
    right: var(--spacing-container-gutter-x-mobile, 20px);
    bottom: 16px;

    width: auto;
    max-width: none;

    border-radius: 28px;
    padding: 22px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.14);
  }

  .zf-project-info__title{
    max-width: 100%;
    margin: 0 0 12px 0;
    font-size: 28px;
    line-height: 1.12;
  }

  .zf-project-info__text{ max-width: 100%; }

  .zf-project-info__cta{
    width: 100%;
    min-width: 0;
    font-size: 16px;
  }

  /* =========================
     Amenities
     ========================= */
  .zf-amenities{ padding-bottom: 48px; }

  .zf-amenities__title{
    font-size: var(--font-size-heading-mobile, 28px);
    line-height: 1.1;
    margin-bottom: 18px;
  }

  .zf-amenities__grid{ gap: 14px; }
  .zf-amenity{ border-radius: 32px; }
  .zf-amenity__img{ aspect-ratio: 4 / 3; }

  .zf-amenity__label{
    left: 16px;
    right: 16px;
    bottom: 14px;

    padding: 14px 18px;
    font-size: 16px;
  }

  /* =========================
     Project Gallery
     ========================= */
  .zf-project-gallery__frame{
    height: 100svh;
    height: 100dvh;
    height: 100vh;
  }

  .zf-project-gallery__nav{
    width: 52px;
    height: 52px;
  }

  .zf-project-gallery__nav--prev{
    left: 16px;
    bottom: 16px;
  }

  .zf-project-gallery__nav--next{
    right: 16px;
    bottom: 16px;
  }

  /* =========================
     Project Summary (mobile)
     ========================= */
  .zf-project-summary{
    padding-top: var(--spacing-section-top-mobile, 64px);
    padding-bottom: var(--spacing-section-bottom, 64px);
  }

  .zf-project-summary__header{ margin-bottom: 22px; }

  .zf-project-summary__title{
    font-size: var(--font-size-heading-mobile, 28px);
    line-height: 1.12;
  }

  .zf-project-summary__subtitle{
    font-size: 16px;
    line-height: 1.5;
  }

  .zf-project-summary__grid{
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    gap: 14px;
  }

  .zf-summary-card--delivery,
  .zf-summary-card--developer,
  .zf-summary-card--type,
  .zf-summary-card--price{
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .zf-summary-card{
    border-radius: 26px;
    padding: 22px;
    min-height: 150px;
  }

  .zf-summary-card__value{
    font-size: 22px;
    line-height: 1.15;
    font-weight: var(--font-weight-medium, 500);
  }

  .zf-summary-card__label{
    font-size: 15px;
    line-height: 1.4;
    margin-top: 10px;
    font-weight: var(--font-weight-regular, 400);
  }

  .zf-summary-card__currency,
  .zf-summary-card__price{
    font-size: 22px;
    line-height: 1.15;
    font-weight: var(--font-weight-medium, 500);
    margin: 0;
  }

  .zf-summary-card__currency{ margin-bottom: 10px; }
  .zf-summary-card__price{ margin-bottom: 10px; }

  .zf-summary-card--price .zf-summary-card__label{
    font-size: 15px;
  }

  /* =========================
     Units Gallery (mobile)
     ========================= */
  .zf-units-gallery{
    padding-top: var(--spacing-section-top-mobile, 64px);
    padding-bottom: var(--spacing-section-bottom, 64px);
  }

  .zf-units-gallery__header{ margin-bottom: 20px; }

  .zf-units-gallery__title{
    font-size: var(--font-size-heading-mobile, 28px);
    line-height: 1.12;
  }

  .zf-units-gallery__frame{ position: relative; }

  .zf-units-gallery__img{
    height: 90svh;
    height: 90dvh;
    height: 90vh;
    min-height: 560px;

    object-fit: cover;
    display: block;
  }

  .zf-units-gallery__panel{
    left: var(--spacing-container-gutter-x-mobile, 16px);
    right: var(--spacing-container-gutter-x-mobile, 16px);
    bottom: 0;

    height: 92px;
    padding: 0 16px;
    gap: 14px;
  }

  .zf-units-gallery__nav{
    width: 48px;
    height: 48px;

    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    margin-top: -44px;

    z-index: 30;
  }

  .zf-units-gallery__nav--prev{ left: var(--spacing-container-gutter-x-mobile, 16px); }
  .zf-units-gallery__nav--next{ right: var(--spacing-container-gutter-x-mobile, 16px); }

  .zf-units-gallery__beds-main,
  .zf-units-gallery__beds-sep,
  .zf-units-gallery__beds-rest,
  .zf-units-gallery__stat{
    font-size: 16px;
  }

  .zf-units-gallery__cta{
    font-size: 16px;
    padding: 12px 16px;
  }

  /* =========================
     Map (mobile) — strict 50/50
     ========================= */
  .zf-map-section{
    --map-screen-offset: 18px;
    --map-gap: 16px;

    padding-left:  var(--spacing-container-gutter-x-mobile, 20px);
    padding-right: var(--spacing-container-gutter-x-mobile, 20px);

    padding-top: var(--map-screen-offset);
    padding-bottom: var(--map-screen-offset);

    min-height: 100svh;
    min-height: 100dvh;
    min-height: 100vh;

    display: flex;
    flex-direction: column;
    gap: var(--map-gap);
  }

  .zf-map-section__panel,
  .zf-map-section__map{
    height: calc(
      (100vh - (2 * var(--map-screen-offset)) - var(--map-gap)) / 2
    );
  }

  .zf-map-section__panel{
    border-radius: 28px;
    padding: 22px;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .zf-map-section__title{
    font-size: var(--font-size-heading-mobile, 28px);
    line-height: 1.1;
    margin: 0 0 14px 0;
  }

  .zf-map-section__p{
    font-size: 16px;
    line-height: 1.55;
    margin: 0;
  }

  .zf-map-section__p + .zf-map-section__p{ margin-top: 12px; }

  .zf-map-section__map{
    border-radius: 28px;
    overflow: hidden;
  }

  .zf-map-section__map iframe,
  .zf-map-section__map > *{
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
  }

/* =========================
   Contact Form (mobile)
   ========================= */

.zf-contact-form{
  position: relative; /* якорь для absolute карточки */
  width: 100%;
  overflow: hidden;

  /* фото почти весь экран, чтобы футер чуть выглядывал */
  height: 92svh;
  height: 92dvh;
  height: 92vh;
  min-height: 680px;

  padding: 0; /* важно */
}

.zf-contact-form__bg{
  filter: none;

  position: absolute;
  inset: 0;
  z-index: 0;

  width: 100%;
  height: 100%;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* CARD — ~20% from bottom */
.zf-contact-form__card{
  position: absolute;
  z-index: 2;

  /* ✅ ~20% от низа (адаптивно) */
  bottom: clamp(90px, 20vh, 180px);

  /* ✅ надежная центровка без translate */
  left: 0;
  right: 0;
  width: min(520px, calc(100% - (2 * var(--spacing-container-gutter-x-mobile, 20px))));
  margin-left: auto;
  margin-right: auto;

  border-radius: 28px;
  padding: 32px 20px 34px;

  background: var(--color-bg-card, #fff);
  box-shadow: 0 30px 80px rgba(0,0,0,0.18);

  /* 🔨 если где-то в desktop осталось top/transform — убиваем */
  top: auto !important;
  transform: none !important;
}

.zf-contact-form__title{
  font-size: var(--font-size-heading-mobile, 28px);
  line-height: 1.12;
  margin-bottom: 22px;
  text-align: center;
}

.zf-contact-form__actions{
  display: grid;
  gap: 16px;
  justify-items: center;
}

.zf-contact-form__input,
.zf-contact-form__cta{
  width: 100%;
  max-width: 360px;

  padding: 16px 18px;
  font-size: 16px;
  line-height: 1.2;
}


/* =========================
   Footer (mobile)
   ========================= */

.zf-footer__inner{
  padding-left:  var(--spacing-container-gutter-x-mobile, 20px);
  padding-right: var(--spacing-container-gutter-x-mobile, 20px);
  padding-top: 56px;
  padding-bottom: 56px;
}

.zf-footer__brand{ font-size: 28px; }

.zf-footer__subtitle{
  margin-top: 28px;
  font-size: 18px;
  line-height: 1.35;
  max-width: 38ch;
}

.zf-footer__powered{ margin-top: 28px; }

/* 🔧 сброс desktop-выравнивания */
.zf-footer__right{
  justify-items: start !important;
  align-items: start;
  gap: 18px;
}

/* ❌ убираем телефон */
.zf-footer__pill[href^="tel:"]{
  display: none !important;
}

/* actions — одна кнопка, без переносов */
.zf-footer__actions{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  flex-wrap: nowrap;
}

/* ✅ Contact us — ЧУТЬ УЖЕ (~-30%) */
.zf-footer__pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;
  min-width: 230px;          /* ← было 320, стало аккуратнее */
  max-width: 100%;

  height: 52px;
  padding: 0 24px;           /* ← было 32 */

  gap: 10px;
  white-space: nowrap;
}

.zf-footer__pill-text{
  font-size: 15px;
  line-height: 1.1;
  font-weight: 400;          /* тонкий шрифт как на рефе */
}

.zf-footer__nav{
  margin-top: 28px;
  flex-wrap: wrap;
  gap: 12px;
}

/* =========================
  <= 520px (small phones)
  ========================= */
@media (max-width: 520px){

  .zf-footer__inner{
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .zf-footer__brand{ font-size: 26px; }
  .zf-footer__subtitle{ font-size: 17px; }

  .zf-footer__actions{
    flex-wrap: nowrap;
  }

  .zf-footer__pill{
    min-width: 200px;        /* ещё чуть компактнее */
    height: 50px;
    padding: 0 22px;
  }

  .zf-footer__nav{ gap: 10px; }
}

/* debug safety */
pre { white-space: pre-wrap; }