/* ===========================================================
   Аренда Плюс — выездные аренда мебели
   Базовый слой: токены брендбука + каркас
   Источник токенов: Downloads/redesign/brandbook/brandbook.html
   =========================================================== */

.bnk-root{
  /* бренд */
  --bnk-accent:#FE5D26;
  --bnk-accent-hover:#D95427;
  --bnk-accent-soft:#FFAE93;
  --bnk-accent-tint:#FFEFEA;
  --bnk-accent-light:#FF8B5F;

  /* нейтраль */
  --bnk-ink:#312D2B;
  --bnk-text:#272F3D;
  --bnk-text-secondary:rgba(49,45,43,.5);
  --bnk-text-muted:rgba(49,45,43,.4);

  /* поверхности */
  --bnk-surface-page:#F6F6F6;
  --bnk-surface-card:#FFFFFF;
  --bnk-surface-sunken:rgba(49,45,43,.05);
  --bnk-surface-hover:rgba(49,45,43,.06);
  --bnk-surface-placeholder:#EBEAEA;

  /* границы */
  --bnk-border-color:rgba(49,45,43,.1);
  --bnk-border-soft:rgba(49,45,43,.05);
  --bnk-border:1px solid var(--bnk-border-color);

  /* состояния */
  --bnk-success:#16A34A;
  --bnk-error:#E53E3E;
  --bnk-info:#4454EB;

  /* тени */
  --bnk-shadow-rest:0 1px 4px 0 rgba(49,45,43,.08);
  --bnk-shadow-hover:0 8px 24px rgba(49,45,43,.1);
  --bnk-shadow-focus:0 0 0 2px rgba(254,93,38,.16);
  --bnk-shadow-modal:0 24px 60px rgba(0,0,0,.45);

  /* скругления */
  --bnk-radius-xs:4px;
  --bnk-radius-sm:10px;
  --bnk-radius-md:12px;
  --bnk-radius-img:16px;
  --bnk-radius-lg:24px;
  --bnk-radius-thumb:8px;
  --bnk-radius-pill:999px;
  --bnk-radius-full:50%;

  /* сетка */
  --bnk-container:1327px;
  --bnk-container-inner:1297px;
  --bnk-container-pad:15px;

  /* отступы */
  --bnk-space-1:4px;  --bnk-space-2:8px;  --bnk-space-3:12px; --bnk-space-4:16px;
  --bnk-space-5:20px; --bnk-space-6:24px; --bnk-space-8:32px; --bnk-space-10:40px;
  --bnk-space-12:48px;--bnk-space-16:64px;
  --bnk-section-y:48px;
  --bnk-chapter-y:96px;
  --bnk-section-y-mob:24px;
  --bnk-grid-gap:16px;

  /* контролы */
  --bnk-control-h-lg:48px;
  --bnk-control-h-md:40px;
  --bnk-control-h-sm:32px;
  --bnk-field-pad:12px 14px;
  --bnk-icon-size:20px;
  --bnk-icon-box:40px;
  --bnk-transition:.2s ease;

  /* типографика */
  --bnk-font:"Inter",sans-serif;
  --bnk-font-head:"Comfortaa","Inter",sans-serif;
  --bnk-fw-regular:400;
  --bnk-fw-medium:500;
  --bnk-fw-semibold:600;

  /* скрим на фото — тёплый, на #312D2B, не на чёрном */
  --bnk-scrim:linear-gradient(to top,
    rgba(49,45,43,.78) 0%,
    rgba(49,45,43,.45) 28%,
    rgba(49,45,43,0) 62%);
}

/* ── СКОУП. Всё живёт внутри .bnk-root, html/body не трогаем:
      лендинг встраивается в сайтовый хедер/футер А+.               ── */
.bnk-root,
.bnk-root *,
.bnk-root *::before,
.bnk-root *::after{margin:0;padding:0;box-sizing:border-box}

.bnk-root{
  font-family:var(--bnk-font);
  font-size:16px;
  line-height:24px;
  font-weight:var(--bnk-fw-regular);
  color:var(--bnk-text);
  background:var(--bnk-surface-card);
  -webkit-font-smoothing:antialiased;
}

.bnk-root img,
.bnk-root video{max-width:100%;height:auto;display:block}
.bnk-root a{color:inherit;text-decoration:none;transition:color var(--bnk-transition)}
.bnk-root a:hover{color:var(--bnk-accent)}
.bnk-root button,
.bnk-root input,
.bnk-root select,
.bnk-root textarea{font:inherit;color:inherit}
.bnk-root button{background:none;border:0;cursor:pointer}
.bnk-root ul,
.bnk-root ol{list-style:none}

/* Скрытие через [hidden] должно побеждать наши display у блоков и форм:
   правило браузера по типу элемента слабее одиночного класса.        */
.bnk-root [hidden]{display:none}

/* Рубль ₽ (U+20BD) живёт в latin-ext. Базовые сабсеты Inter его не содержат —
   без этого блока в ценах вместо ₽ будет .notdef-квадрат.
   Образец — css/atrium.css в репозитории сайта.                     */
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url(/fonts/inter/inter-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,
    U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}


/* Заголовки — Comfortaa, как на боевом сайте. Файлы у сайта свои,
   пути абсолютные: на проде они уже лежат по этим адресам. */
@font-face{
  font-family:"Comfortaa";font-style:normal;font-weight:500 700;font-display:swap;
  src:url(/fonts/comfortaa/comfortaa-cyrillic.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:"Comfortaa";font-style:normal;font-weight:500 700;font-display:swap;
  src:url(/fonts/comfortaa/comfortaa-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
    U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
    U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ——— контейнер ——— */
.bnk-container{
  width:100%;
  max-width:var(--bnk-container);
  margin-inline:auto;
  padding-inline:var(--bnk-container-pad);
}
.bnk-container--narrow{max-width:750px}

/* ——— секции ——— */
.bnk-section{padding:var(--bnk-section-y) 0}
.bnk-section--dark{background:var(--bnk-ink);color:#fff}
.bnk-section--page{background:var(--bnk-surface-page)}
.bnk-section--accent{background:var(--bnk-accent);color:#fff}
.bnk-section--flush{padding:0}

.bnk-section--dark .bnk-section__title,
.bnk-section--accent .bnk-section__title{color:#fff}
.bnk-section--dark .bnk-section__lead{color:rgba(255,255,255,.6)}
.bnk-section--accent .bnk-section__lead{color:rgba(255,255,255,.85)}

/* ——— типографика по шкале брендбука ——— */
.bnk-h1-hero{font-family:var(--bnk-font-head);font-size:64px;line-height:72px;font-weight:var(--bnk-fw-medium);letter-spacing:-.02em}
.bnk-h1{font-family:var(--bnk-font-head);font-size:32px;line-height:40px;font-weight:var(--bnk-fw-medium)}
.bnk-section__title{
  font-family:var(--bnk-font-head);
  font-size:32px;line-height:40px;font-weight:var(--bnk-fw-medium);
  letter-spacing:-.02em;margin-bottom:0;
}
.bnk-section__title--page{font-size:24px;line-height:32px;font-weight:var(--bnk-fw-semibold)}
.bnk-h3{font-family:var(--bnk-font-head);font-size:20px;line-height:28px;font-weight:var(--bnk-fw-semibold)}
.bnk-h4{font-size:16px;line-height:24px;font-weight:var(--bnk-fw-medium)}
.bnk-lead{font-size:18px;line-height:28px;color:var(--bnk-text-secondary)}
.bnk-text-ui{font-size:14px;line-height:20px}
.bnk-text-small{font-size:13px;line-height:18px;color:var(--bnk-text-secondary)}
.bnk-text-caption{font-size:12px;line-height:16px;font-weight:var(--bnk-fw-medium)}
.bnk-price{font-size:28px;line-height:36px;font-weight:var(--bnk-fw-medium);font-variant-numeric:tabular-nums}
.bnk-price--card{font-size:16px;line-height:24px;font-weight:var(--bnk-fw-medium)}

.bnk-section__head{margin-bottom:var(--bnk-space-6)}
.bnk-section__head--row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--bnk-space-4);flex-wrap:wrap}

/* ——— кнопки: ровно два стиля + иконочная ——— */
.bnk-root .bnk-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--bnk-space-2);
  font-weight:var(--bnk-fw-medium);border:1px solid transparent;cursor:pointer;
  text-align:center;transition:background-color var(--bnk-transition),
    border-color var(--bnk-transition),color var(--bnk-transition);
}
/* Через .bnk-root: сброс .bnk-root button{background:none;border:0} специфичнее
   одиночного класса и иначе гасит заливку и рамку у кнопок-<button>. */
.bnk-root .bnk-btn--primary{background:var(--bnk-accent);color:#fff}
.bnk-root .bnk-btn--primary:hover{background:var(--bnk-accent-hover);color:#fff}
.bnk-root .bnk-btn--ghost{background:var(--bnk-surface-card);color:var(--bnk-ink);border-color:var(--bnk-border-color)}
.bnk-root .bnk-btn--ghost:hover{border-color:var(--bnk-accent);color:var(--bnk-accent)}
.bnk-btn--lg{height:var(--bnk-control-h-lg);padding:0 28px;font-size:16px;border-radius:var(--bnk-radius-md)}
.bnk-btn--md{height:var(--bnk-control-h-md);padding:0 20px;font-size:14px;border-radius:var(--bnk-radius-md)}
.bnk-btn--block{width:100%}
.bnk-btn:disabled{opacity:.4;cursor:not-allowed}

.bnk-btn-icon{
  width:var(--bnk-icon-box);height:var(--bnk-icon-box);border-radius:var(--bnk-radius-full);
  background:var(--bnk-surface-card);border:1px solid var(--bnk-border-color);
  display:inline-flex;align-items:center;justify-content:center;
  transition:background-color var(--bnk-transition);
}
.bnk-btn-icon:hover{background:var(--bnk-surface-hover)}

/* ——— чипы ——— */
.bnk-chip{
  height:var(--bnk-control-h-sm);padding:0 18px;border-radius:var(--bnk-radius-pill);
  font-size:14px;font-weight:var(--bnk-fw-medium);
  background:var(--bnk-surface-card);border:1px solid var(--bnk-border-color);
  display:inline-flex;align-items:center;white-space:nowrap;
  transition:background-color var(--bnk-transition),color var(--bnk-transition),border-color var(--bnk-transition);
}
.bnk-chip:hover{border-color:var(--bnk-accent);color:var(--bnk-accent)}
.bnk-chip[aria-selected="true"]{background:var(--bnk-accent);border-color:var(--bnk-accent);color:#fff}

/* ——— бейдж ——— */
.bnk-badge{
  display:inline-flex;align-items:center;padding:4px 12px;border-radius:var(--bnk-radius-pill);
  font-size:12px;line-height:16px;font-weight:var(--bnk-fw-semibold);
  text-transform:uppercase;letter-spacing:.06em;
  background:var(--bnk-accent);color:#fff;
}
.bnk-badge--soft{background:var(--bnk-accent-tint);color:var(--bnk-accent)}

/* ——— карточка: один каркас ——— */
.bnk-card{
  background:var(--bnk-surface-card);
  border:1px solid var(--bnk-border-color);
  border-radius:var(--bnk-radius-lg);
  padding:var(--bnk-space-6);
  transition:transform var(--bnk-transition),box-shadow var(--bnk-transition);
}
.bnk-card--media{padding:0;overflow:hidden}
.bnk-card__media{
  position:relative;overflow:hidden;border-radius:var(--bnk-radius-img);
  background:var(--bnk-surface-placeholder);
}
.bnk-card--media .bnk-card__media{border-radius:0}
.bnk-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.bnk-card__body{padding:var(--bnk-space-6)}
.bnk-card__title{font-size:16px;line-height:24px;font-weight:var(--bnk-fw-medium)}
.bnk-card__meta{font-size:13px;line-height:18px;color:var(--bnk-text-secondary);margin-top:var(--bnk-space-2)}
.bnk-card:hover{transform:translateY(-4px);box-shadow:var(--bnk-shadow-hover)}
.bnk-card:hover .bnk-card__media img{transform:scale(1.04)}

/* пропорции медиа */
.bnk-ratio-16-9{aspect-ratio:16/9}
.bnk-ratio-4-5{aspect-ratio:4/5}
.bnk-ratio-4-3{aspect-ratio:4/3}
.bnk-ratio-3-2{aspect-ratio:3/2}
.bnk-ratio-1-1{aspect-ratio:1/1}

/* ——— сетки ——— */
.bnk-grid{display:grid;gap:var(--bnk-grid-gap)}
.bnk-grid--2{grid-template-columns:repeat(2,1fr)}
.bnk-grid--3{grid-template-columns:repeat(3,1fr)}
.bnk-grid--4{grid-template-columns:repeat(4,1fr)}

/* ——— формы ——— */
.bnk-field{display:flex;flex-direction:column;gap:var(--bnk-space-2)}
.bnk-field__label{font-size:13px;line-height:18px;font-weight:var(--bnk-fw-medium);color:var(--bnk-text-secondary)}
.bnk-field__control{
  height:var(--bnk-control-h-lg);
  padding:var(--bnk-field-pad);
  font-size:16px;line-height:24px;   /* 16px обязателен: меньше — iOS зумит */
  background:var(--bnk-surface-card);
  border:1px solid var(--bnk-border-color);
  border-radius:var(--bnk-radius-sm);
  width:100%;
  transition:border-color var(--bnk-transition),box-shadow var(--bnk-transition);
}
.bnk-field__control::placeholder{color:var(--bnk-text-secondary)}
.bnk-field__control:focus{outline:none;border-color:var(--bnk-accent);box-shadow:var(--bnk-shadow-focus)}
.bnk-field__control[aria-invalid="true"],
.bnk-field__control.bnk-bad{border-color:var(--bnk-error)}
.bnk-field__error{font-size:12px;line-height:16px;color:var(--bnk-error)}
textarea.bnk-field__control{height:auto;min-height:80px;resize:vertical}

.bnk-consent{display:flex;align-items:flex-start;gap:var(--bnk-space-2);font-size:13px;line-height:18px;color:var(--bnk-text-secondary)}
.bnk-consent input{width:16px;height:16px;border-radius:var(--bnk-radius-xs);accent-color:var(--bnk-accent);flex:0 0 auto;margin-top:1px}

/* ——— скрим и текст поверх фото ——— */
.bnk-media-overlay{position:relative;overflow:hidden;border-radius:var(--bnk-radius-lg)}
.bnk-media-overlay::after{content:"";position:absolute;inset:0;background:var(--bnk-scrim);pointer-events:none}
.bnk-media-overlay__text{
  position:absolute;left:0;bottom:0;z-index:1;
  padding:var(--bnk-space-8);color:#fff;max-width:640px;
}

/* ——— утилиты ——— */
.bnk-visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.bnk-stack{display:flex;flex-direction:column}
.bnk-stack--2{gap:var(--bnk-space-2)} .bnk-stack--3{gap:var(--bnk-space-3)}
.bnk-stack--4{gap:var(--bnk-space-4)} .bnk-stack--6{gap:var(--bnk-space-6)}
.bnk-row{display:flex;align-items:center}
.bnk-row--gap-3{gap:var(--bnk-space-3)} .bnk-row--gap-4{gap:var(--bnk-space-4)}
.bnk-row--wrap{flex-wrap:wrap}
.bnk-nowrap{white-space:nowrap}
.bnk-tabular{font-variant-numeric:tabular-nums}

/* ——— появление при скролле ——— */
.bnk-reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.bnk-reveal.bnk-is-visible{opacity:1;transform:none}

/* ===========================================================
   Адаптив. Брейкпоинты: 1260 / 991 / 768 / 480
   Мобильные правила живут только здесь.
   =========================================================== */

@media (max-width:991px){
  .bnk-grid--4{grid-template-columns:repeat(2,1fr)}
  .bnk-grid--3{grid-template-columns:repeat(2,1fr)}
  .bnk-h1-hero{font-size:48px;line-height:56px}
}

@media (max-width:768px){
  .bnk-section{padding:var(--bnk-section-y-mob) 0}
  .bnk-h1-hero{font-size:32px;line-height:38px}
  .bnk-h1,.bnk-section__title{font-size:24px;line-height:32px}
  .bnk-section__title--page{font-size:20px;line-height:28px}
  .bnk-h3{font-size:18px;line-height:26px}
  .bnk-lead{font-size:16px;line-height:24px}
  .bnk-price{font-size:24px;line-height:30px}
  .bnk-grid--2,.bnk-grid--3,.bnk-grid--4{grid-template-columns:1fr}
  .bnk-card:not(.bnk-card--media){padding:var(--bnk-space-4)}
  .bnk-card__body{padding:var(--bnk-space-4)}
  .bnk-btn--block-mob{width:100%}
  .bnk-media-overlay__text{padding:var(--bnk-space-4)}
}

@media (prefers-reduced-motion:reduce){
  .bnk-root *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}