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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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