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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Скрытие через [hidden] должно побеждать наши display у блоков и форм:
   правило браузера по типу элемента слабее одиночного класса.        */
.frs-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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ——— утилиты ——— */
.frs-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;
}
.frs-stack{display:flex;flex-direction:column}
.frs-stack--2{gap:var(--frs-space-2)} .frs-stack--3{gap:var(--frs-space-3)}
.frs-stack--4{gap:var(--frs-space-4)} .frs-stack--6{gap:var(--frs-space-6)}
.frs-row{display:flex;align-items:center}
.frs-row--gap-3{gap:var(--frs-space-3)} .frs-row--gap-4{gap:var(--frs-space-4)}
.frs-row--wrap{flex-wrap:wrap}
.frs-nowrap{white-space:nowrap}
.frs-tabular{font-variant-numeric:tabular-nums}

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

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

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

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

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