/* ============================================================
   Семья «quay» («Набережная») — лейаут для H2O Плаза.
   Использует токены скина. Канон не редактируется.
   ============================================================ */

.qy-wrap{max-width:1200px;margin:0 auto;padding-left:20px;padding-right:20px}
.qy-sec{padding:48px 0}
.qy-sec--tight{padding:40px 0}

.qy-h2{font-family:var(--skin-font-display);font-weight:700;font-size:26px;line-height:1.2;
  color:var(--skin-text);margin:0 0 24px;text-align:left;border:0;padding:0}
.qy-h2:before,.qy-h2:after{display:none;content:none}
.qy-eyebrow{font-family:var(--skin-font-body);font-weight:500;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--skin-muted);margin:0 0 10px}

/* ---------- Первый экран ---------- */
/* Канонная шапка лежит ПОВЕРХ первого экрана (рассчитана на белое меню на
   тёмном фото). Наш экран светлый и шапка непрозрачная, поэтому контент
   начинается ниже неё, а не под ней. Высота вынесена в переменную: если
   у канона она другая, правится одно число.
   Померить точно: в консоли браузера document.querySelector('header').offsetHeight */
:root{--qy-header-h:96px}
.qy-top{background:var(--skin-paper);padding-top:var(--qy-header-h)}
.qy-top__grid{display:flex;flex-wrap:wrap;align-items:stretch}
.qy-top__panel{flex:1 1 440px;min-width:300px;background:var(--skin-surface);
  padding:40px 40px 36px;display:flex;flex-direction:column;justify-content:center}
.qy-top__media{flex:1 1 480px;min-width:300px;position:relative;overflow:hidden;
  background:var(--skin-slate);min-height:340px}
.qy-top__media img{position:absolute;top:0;left:0;width:100%;height:100%;max-width:none;
  object-fit:cover;display:block}

.qy-top__h1{font-family:var(--skin-font-display);font-weight:700;
  font-size:clamp(30px,5vw,52px);line-height:1.04;color:var(--skin-text);margin:0 0 10px;
  letter-spacing:-.01em}
.qy-top__h1 .qy-top__h1-type{display:block;font-family:var(--skin-font-body);font-weight:500;
  font-size:clamp(13px,1.4vw,16px);letter-spacing:.12em;text-transform:uppercase;
  color:var(--skin-muted);margin:0 0 8px;line-height:1.2}
.qy-top__sub{font-size:16px;font-weight:500;color:var(--skin-slate);margin:0 0 20px}
.qy-top__addr{display:flex;align-items:flex-start;gap:10px;font-size:15px;
  color:var(--skin-text);margin:0 0 22px;line-height:1.45}
.qy-top__addr img{width:20px;height:20px;flex:0 0 20px;margin-top:1px}

/* факт-строка дисплейным кеглем — не 11px капсом */
.qy-facts{display:flex;flex-wrap:wrap;gap:10px 28px;margin:0 0 24px;padding:0;list-style:none}
.qy-facts li{margin:0}
.qy-facts b{display:block;font-family:var(--skin-font-display);font-weight:700;
  font-size:clamp(19px,2.2vw,23px);line-height:1.15;color:var(--skin-text)}
.qy-facts span{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--skin-muted);margin-top:3px}

.qy-top__lead{font-size:15px;line-height:1.6;color:var(--skin-text);margin:0 0 24px;
  padding-top:20px;border-top:1px solid var(--skin-line)}
.qy-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.qy-tel{font-family:var(--skin-font-display);font-weight:700;font-size:clamp(20px,2.4vw,26px);
  color:var(--skin-text);text-decoration:none;white-space:nowrap}
.qy-tel:hover{color:var(--skin-orange-deep)}
.qy-btn{display:inline-block;background:var(--skin-orange-deep);color:#fff;text-decoration:none;
  font-weight:500;font-size:15px;padding:13px 22px;border-radius:4px}
.qy-btn:hover{background:#A34F17;color:#fff}

/* Ноль видимых кадров — не «первый экран минус кадр», а другая раскладка тех же
   данных: панель на всю ширину, адрес и факт-строка крупнее (design-standards,
   деградация композиционная, а не поблочная). */
.qy-top__grid--nophoto .qy-top__panel{flex:1 1 100%;padding:56px 40px 52px}
.qy-top__grid--nophoto .qy-top__addr{font-size:19px;margin-bottom:26px}
.qy-top__grid--nophoto .qy-top__addr img{width:24px;height:24px;flex:0 0 24px}
.qy-top__grid--nophoto .qy-facts{gap:14px 44px}
.qy-top__grid--nophoto .qy-facts b{font-size:clamp(22px,3vw,30px)}
.qy-top__grid--nophoto .qy-top__lead{max-width:760px}

/* Один-два кадра в полосе: доля меняется, иначе кадр висит третью ширины */
.qy-ph-grid--few .qy-ph-cell{flex:0 1 calc(50% - 5px)}

/* ---------- Плитки характеристик ---------- */
.qy-grid{display:flex;flex-wrap:wrap;gap:12px}
.qy-grid>*{flex:1 1 210px}
.qy-tile{background:var(--skin-surface);border:1px solid var(--skin-line);border-radius:4px;
  padding:18px 18px 16px;display:flex;align-items:flex-start;gap:14px}
.qy-tile img{width:34px;height:34px;flex:0 0 34px}
.qy-tile b{display:block;font-family:var(--skin-font-display);font-weight:700;font-size:20px;
  line-height:1.2;color:var(--skin-text)}
.qy-tile span{display:block;font-size:13px;color:var(--skin-muted);margin-top:4px}

/* ---------- Типографический список систем ---------- */
.qy-defs{display:flex;flex-wrap:wrap;gap:0 40px;margin:0;padding:0}
.qy-defs>*{flex:1 1 300px}
.qy-def{display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  padding:13px 0;border-bottom:1px solid var(--skin-line)}
.qy-def dt{font-size:14px;color:var(--skin-muted);margin:0}
.qy-def dd{margin:0;font-size:15px;font-weight:500;color:var(--skin-text);text-align:right}

/* ---------- Тёмные полосы-стейтменты ---------- */
.qy-band{background:var(--skin-ink);color:#fff;padding:52px 0}
.qy-band .qy-eyebrow{color:var(--skin-orange-light)}
.qy-band__text{font-family:var(--skin-font-display);font-weight:600;
  font-size:clamp(19px,2.6vw,27px);line-height:1.38;color:#fff;margin:0;max-width:940px}
.qy-band__rule{width:56px;height:3px;background:var(--skin-orange);margin:0 0 22px}

/* ---------- Триптих тейков ---------- */
.qy-tri{display:flex;flex-wrap:wrap;gap:14px}
.qy-tri>*{flex:1 1 260px}
.qy-tri__col{background:var(--skin-surface);border-top:3px solid var(--skin-slate);
  border-radius:0;padding:22px 22px 24px}
.qy-tri__col p{margin:0;font-size:15px;line-height:1.6;color:var(--skin-text)}

/* ---------- Инфраструктура и безопасность ---------- */
.qy-two{display:flex;flex-wrap:wrap;gap:14px}
.qy-two>*{flex:1 1 300px}
.qy-card{background:var(--skin-surface);border:1px solid var(--skin-line);border-radius:4px;
  padding:22px 22px 18px}
.qy-card__head{display:flex;align-items:center;gap:12px;margin:0 0 16px}
.qy-card__head img{width:30px;height:30px;flex:0 0 30px}
.qy-card__head b{font-family:var(--skin-font-display);font-weight:700;font-size:18px;
  color:var(--skin-text)}
.qy-list{margin:0;padding:0;list-style:none}
.qy-list li{padding:9px 0;border-top:1px solid var(--skin-line);font-size:15px;
  color:var(--skin-text)}
.qy-list li:first-child{border-top:0}

/* ---------- Фото-полоса ---------- */
.qy-ph-grid{display:flex;flex-wrap:wrap;gap:10px}
/* Жёсткая доля вместо flex-grow: при растяжении последнего ряда рамка
   padding-top даёт разную высоту рядов и полоса выглядит рваной. */
.qy-ph-cell{flex:0 1 calc(33.333% - 7px);min-width:0}
/* Рамка-пропорция НЕ должна быть самим flex-элементом: процентный padding
   у flex-item считается от ширины КОНТЕЙНЕРА, а не своей ячейки, и кадр
   вырастает во всю ширину полосы. Отсюда обёртка .qy-ph-cell. */
.qy-ph{position:relative;width:100%;padding-top:66.66%;overflow:hidden;border-radius:4px;
  background:var(--skin-slate)}
.qy-ph img{position:absolute;top:0;left:0;width:100%!important;height:100%!important;
  max-width:none!important;object-fit:cover;display:block}

/* ---------- Канонные перекрытия, зависящие от лейаута семьи ---------- */
.office-slider img{-o-object-fit:cover;object-fit:cover}

@media (max-width:991px){
  :root{--qy-header-h:72px}
}
@media (max-width:900px){
  .qy-ph-cell{flex:0 1 calc(50% - 5px)}
}
@media (max-width:767px){
  .qy-sec{padding:36px 0}
  .qy-band{padding:40px 0}
  .qy-top__panel{padding:28px 20px 26px}
  .qy-top__media{min-height:240px;order:-1}
  .qy-def dd{text-align:left}
  .qy-def{flex-direction:column;gap:2px}
  .qy-ph-cell{flex:0 1 100%}
}

/* ---------- Пустая витрина продажи (/sale) ---------- */
.qy-note{background:var(--skin-surface);border:1px solid var(--skin-line);border-radius:4px;
  border-left:3px solid var(--skin-orange);padding:32px 32px 30px;max-width:820px}
.qy-note .qy-h2{margin-bottom:14px}
.qy-note__text{margin:0 0 22px;font-size:16px;line-height:1.6;color:var(--skin-text)}
.qy-note__link{align-self:center;font-size:15px;color:var(--skin-orange-deep);text-decoration:underline}
.qy-note__link:hover{color:#A34F17}
@media (max-width:767px){
  .qy-note{padding:24px 20px 22px}
}