/* Презентация ЖК HAYAT — вертикальные страницы 9:16 под телефон, печать в PDF.
   Гамма и шрифты — с сайта: графит #0B0F14 + золото #C9A24A, Manrope + Cormorant Garamond. */
@font-face{font-family:'Manrope';font-weight:400;font-display:block;src:url('/assets/fonts/manrope-400-cyr.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Manrope';font-weight:400;font-display:block;src:url('/assets/fonts/manrope-400-lat.woff2') format('woff2');}
@font-face{font-family:'Manrope';font-weight:500;font-display:block;src:url('/assets/fonts/manrope-500-cyr.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Manrope';font-weight:500;font-display:block;src:url('/assets/fonts/manrope-500-lat.woff2') format('woff2');}
@font-face{font-family:'Manrope';font-weight:700;font-display:block;src:url('/assets/fonts/manrope-700-cyr.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Manrope';font-weight:700;font-display:block;src:url('/assets/fonts/manrope-700-lat.woff2') format('woff2');}
@font-face{font-family:'Manrope';font-weight:800;font-display:block;src:url('/assets/fonts/manrope-800-cyr.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Manrope';font-weight:800;font-display:block;src:url('/assets/fonts/manrope-800-lat.woff2') format('woff2');}
@font-face{font-family:'Cormorant';font-weight:400;font-style:italic;font-display:block;src:url('/assets/fonts/cormorant-garamond-400-i-cyr.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Cormorant';font-weight:400;font-style:italic;font-display:block;src:url('/assets/fonts/cormorant-garamond-400-i-lat.woff2') format('woff2');}
@font-face{font-family:'Cormorant';font-weight:600;font-display:block;src:url('/assets/fonts/cormorant-garamond-600-cyr.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Cormorant';font-weight:600;font-display:block;src:url('/assets/fonts/cormorant-garamond-600-lat.woff2') format('woff2');}

:root{
  /* Светлая гамма — палитра светлой темы сайта, клиент просила «в светлых тонах» */
  --bg:#F4EDE1; --bg2:#EFE5D6; --panel:#FFFCF6; --panel2:#F8F1E5;
  --gold:#A87C2B; --gold-lt:#8A6620; --gold-dk:#6E4F16;
  --tx:#1B1712; --tx2:#574E42; --tx3:#8B8173;
  --hair:rgba(168,124,43,.38); --hair2:rgba(168,124,43,.20);
  --line:rgba(27,23,18,.10); --line2:rgba(27,23,18,.17);
  --ink:#141A22;                      /* тёмная плашка обложки, как акцент */
  --pad:96px;
  --ff:'Manrope',-apple-system,Segoe UI,Roboto,sans-serif;
  --ff-s:'Cormorant',Georgia,serif;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased}
html{background:#C9C2B6}
body{font-family:var(--ff);color:var(--tx);background:#C9C2B6}
img{display:block;max-width:100%}

/* ---------- страница 1080 × 1920 (9:16) ---------- */
.page{
  position:relative; width:1080px; height:1920px; overflow:hidden;
  background:var(--bg); color:var(--tx); margin:0 auto 26px;
  page-break-after:always; break-after:page;
}
.page:last-child{page-break-after:auto;break-after:auto;margin-bottom:0}
.page__in{position:absolute;inset:0;padding:var(--pad);display:flex;flex-direction:column;z-index:3}
/* шапка обложки лежит поверх тёмного рендера — там текст светлый */
.page--cover .head .mark b{color:#fff}
.page--cover .head .mark span{color:rgba(255,255,255,.72)}
.page--cover .badge{color:#F0DCAE;box-shadow:inset 0 0 0 1px rgba(240,220,174,.45);background:rgba(20,26,34,.42)}
.page--cover .badge i{background:#E5C889;box-shadow:0 0 0 5px rgba(229,200,137,.2)}

/* фон-фото на всю страницу */
.bg{position:absolute;inset:0;z-index:0}
.bg img{width:100%;height:100%;object-fit:cover}
.bg--tint::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,15,20,.86) 0%,rgba(11,15,20,.36) 30%,rgba(11,15,20,.62) 66%,rgba(11,15,20,.96) 100%);}
.bg--soft::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,15,20,.55),rgba(11,15,20,.88));}
/* Обложка: светлое небо уводим в фирменный графит, низ притемняем под контакты.
   Кадр HP-9 — вывеска HAYAT на торце, поэтому сдвигаем композицию вправо. */
/* фото занимает только верх страницы — иначе 9:16 обрезает вывеску по бокам */
.bg--cover{inset:0 0 37% 0}
.bg--cover img{object-position:50% 30%}
.bg--cover::after{content:'';position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(20,26,34,.72) 0%,rgba(20,26,34,.30) 16%,rgba(20,26,34,0) 40%,rgba(20,26,34,.10) 78%,rgba(20,26,34,.30) 100%),
  radial-gradient(80% 26% at 16% 4%,rgba(20,26,34,.62),transparent 74%);}

/* Плашка с текстом: диагональный срез сверху — тот же приём, что на сайте */
.cover__slab{position:absolute;left:0;right:0;bottom:0;height:41%;z-index:2;background:var(--panel);
  clip-path:polygon(0 96px,300px 0,100% 0,100% 100%,0 100%)}
.cover__slab::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold) 22%,var(--gold) 62%,transparent);opacity:.55;
  clip-path:polygon(0 96px,300px 0,100% 0,100% 100%,0 100%)}
.cover__edge{position:absolute;left:0;top:59%;width:302px;height:98px;z-index:3;
  background:linear-gradient(to bottom right,transparent calc(50% - 1.2px),var(--gold) 50%,transparent calc(50% + 1.2px));opacity:.9}

/* фирменная рамка со «срезом» угла, как на сайте */
.frame{position:absolute;inset:44px;z-index:2;pointer-events:none;
  border:1px solid rgba(255,255,255,.22);
  -webkit-mask:linear-gradient(#000,#000);
  clip-path:polygon(84px 0,100% 0,100% calc(100% - 84px),calc(100% - 84px) 100%,0 100%,0 84px);}
.frame::before{content:'';position:absolute;left:-1px;top:83px;width:120px;height:1px;background:var(--gold);transform:rotate(-45deg);transform-origin:left center}

/* ---------- шапка / подвал страницы ---------- */
.head{display:flex;align-items:center;justify-content:space-between;gap:24px;position:relative;z-index:3}
.mark{display:flex;align-items:center;gap:16px}
.mark img{width:52px;height:auto}
.mark b{font-size:21px;font-weight:800;letter-spacing:.14em;line-height:1.1;color:var(--tx)}
.mark span{display:block;font-size:12px;font-weight:500;letter-spacing:.1em;color:var(--tx3);margin-top:3px}
.pnum{font-size:13px;font-weight:700;letter-spacing:.22em;color:var(--gold)}
.foot{margin-top:auto;padding-top:40px;display:flex;align-items:center;justify-content:space-between;gap:20px;
  font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--tx3);position:relative;z-index:3}
.foot b{color:var(--gold-lt);font-weight:700}

/* ---------- типографика ---------- */
.kicker{display:flex;align-items:center;gap:16px;font-size:13px;font-weight:700;
  letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.kicker::after{content:'';flex:1;max-width:110px;height:1px;background:var(--hair)}
.h1{font-size:104px;font-weight:800;line-height:.98;letter-spacing:-.015em;text-transform:uppercase}
.h2{font-size:72px;font-weight:800;line-height:1.02;letter-spacing:-.01em;text-transform:uppercase}
.h3{font-size:38px;font-weight:800;line-height:1.12}
.g{color:var(--gold-lt)}
.lead{font-size:26px;line-height:1.55;color:var(--tx2);max-width:26ch;text-wrap:pretty}
.body{font-size:21px;line-height:1.66;color:var(--tx2);text-wrap:pretty}
.small{font-size:16px;line-height:1.5;color:var(--tx3)}
.serif{font-family:var(--ff-s);font-style:italic;font-weight:400}

/* ---------- обложка: дом сверху, весь текст на графитовой плашке снизу ---------- */
.cover__panel{margin-top:auto;position:relative;z-index:3}
.cover__t{font-size:76px;font-weight:800;line-height:1.02;letter-spacing:-.01em;text-transform:uppercase;margin-top:26px}
.cover__slogan{margin-top:26px;font-size:34px;line-height:1.34;color:var(--tx2);max-width:20ch}
.cover__facts{display:flex;gap:52px;flex-wrap:wrap;margin-top:46px;padding-top:40px;border-top:1px solid var(--hair2)}
.cover__facts div b{display:block;font-size:46px;font-weight:800;line-height:1;color:var(--tx)}
.cover__facts div b i{font-style:normal;font-size:20px;color:var(--gold-lt);margin-left:5px}
.cover__facts div span{display:block;margin-top:11px;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx3)}
.cover__facts{border-top-color:var(--line2)}
.cover__contacts{display:flex;gap:72px;margin-top:48px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--tx3)}
.cover__contacts b{display:block;margin-top:9px;font-size:24px;font-weight:700;letter-spacing:.01em;text-transform:none;color:var(--gold)}
.cover__no{position:absolute;right:var(--pad);bottom:calc(var(--pad) - 6px);z-index:4;text-align:right}
.cover__no b{display:block;font-size:44px;font-weight:800;line-height:1;color:var(--gold)}
.cover__no span{display:block;margin-top:6px;font-size:12px;letter-spacing:.24em;color:var(--tx3)}
.badge{display:inline-flex;align-items:center;gap:12px;padding:14px 26px;border-radius:999px;
  box-shadow:inset 0 0 0 1px var(--hair);background:rgba(9,12,17,.5);font-size:14px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-lt)}
.badge i{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 5px rgba(201,162,74,.18)}

@media print{
  @page{size:1080px 1920px;margin:0}
  html,body{background:#fff}
  .page{margin:0;box-shadow:none}
}

/* ---------- фото-блок в контентных страницах ---------- */
.ph{position:relative;border-radius:20px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--hair2)}
.ph--wide{aspect-ratio:16/10}
.ph img{width:100%;height:100%;object-fit:cover}
.ph::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 62%,rgba(20,26,34,.30))}

/* ---------- сетка преимуществ ---------- */
.feats{display:grid;grid-template-columns:1fr 1fr;gap:34px 40px;margin-top:56px}
.feat{display:flex;gap:20px;align-items:flex-start}
.feat i{flex:none;width:60px;height:60px;border-radius:14px;display:grid;place-items:center;
  color:var(--gold-lt);box-shadow:inset 0 0 0 1px var(--hair);background:rgba(168,124,43,.07)}
.feat b{display:block;font-size:23px;font-weight:800;line-height:1.2}
.feat span{display:block;margin-top:9px;font-size:17px;line-height:1.5;color:var(--tx2)}

/* ---------- карта района ---------- */
.gmap{position:relative;aspect-ratio:1/.86;border-radius:20px;overflow:hidden;background:var(--panel);
  box-shadow:inset 0 0 0 1px var(--hair2)}
.gmap svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.gm-green path{fill:rgba(76,122,71,.22);stroke:none}
.gm-build path{fill:rgba(27,23,18,.07);stroke:none}
.gm-rs path{fill:none;stroke:rgba(27,23,18,.10);stroke-width:1.3}
.gm-rm path{fill:none;stroke:rgba(27,23,18,.16);stroke-width:3}
.gm-rb path{fill:none;stroke:var(--gold);stroke-width:4.5;opacity:.5}
.gm-hl path{fill:rgba(168,124,43,.14);stroke:rgba(168,124,43,.32);stroke-width:1.5}
.gdot{position:absolute;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 6px rgba(168,124,43,.18)}
.ghome{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 10px rgba(168,124,43,.24),0 0 0 20px rgba(168,124,43,.10)}
.ghome::after{content:'';position:absolute;inset:8px;border-radius:50%;background:var(--panel)}
.gmap__cap{position:absolute;left:26px;bottom:22px;font-size:14px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tx3)}

/* ---------- список объектов рядом ---------- */
.poi{list-style:none;margin-top:44px;display:grid;grid-template-columns:1fr 1fr;gap:0 48px}
.poi li{display:flex;align-items:center;gap:16px;padding:19px 0;border-bottom:1px solid var(--line)}
.poi li i{flex:none;color:var(--gold-lt)}
.poi li div{flex:1;min-width:0}
.poi li b{display:block;font-size:19px;font-weight:700;line-height:1.25}
.poi li span{display:block;margin-top:3px;font-size:15px;color:var(--tx3)}
.poi li em{font-style:normal;font-size:16px;font-weight:700;color:var(--gold-lt);white-space:nowrap}

/* ---------- страница двора ---------- */
.ph--tall{aspect-ratio:4/3}
.feats--3{grid-template-columns:1fr 1fr;gap:26px 40px;margin-top:44px}
.feat--sm i{width:50px;height:50px;border-radius:12px}
.feat--sm b{font-size:20px}
.feat--sm span{margin-top:7px;font-size:15.5px;line-height:1.45;text-wrap:pretty}

/* ---------- два кадра в ряд и подпись под ними ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.duo .ph--tall{aspect-ratio:3/4}
.capt{margin-top:18px;font-size:16px;line-height:1.5;color:var(--tx3);text-wrap:pretty;max-width:80ch}

/* ---------- цифры, таблица, планировки, шаги, контакты ---------- */
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:46px;padding-bottom:38px;border-bottom:1px solid var(--line2)}
.nums b{display:block;font-size:56px;font-weight:800;line-height:1;color:var(--gold)}
.nums span{display:block;margin-top:10px;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx3)}
.tbl{width:100%;border-collapse:collapse;margin-top:36px;font-size:20px}
.tbl th{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx3);font-weight:600;
  text-align:left;padding:0 0 14px}
.tbl td{padding:18px 0;border-top:1px solid var(--line);color:var(--tx2)}
.tbl td:first-child{color:var(--tx);font-weight:700}
.tbl td:nth-child(3){color:var(--gold-lt);font-weight:600}

.plans{display:grid;gap:22px}
.plans--2{grid-template-columns:1fr 1fr}
.plans--3{grid-template-columns:repeat(3,1fr)}
.plan{background:var(--panel);border-radius:18px;padding:22px;box-shadow:inset 0 0 0 1px var(--hair2);
  display:flex;flex-direction:column}
.plan img{width:100%;height:auto;object-fit:contain;flex:1;mix-blend-mode:multiply}
.plans--2 .plan img{max-height:620px}
.plans--3 .plan img{max-height:520px}
.plan figcaption{margin-top:18px;font-size:17px;font-weight:700;color:var(--tx);text-align:center}

.ways{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:46px}
.way{background:var(--panel);border-radius:18px;padding:30px 32px;box-shadow:inset 0 0 0 1px var(--hair2)}
.way__n{display:block;font-size:15px;font-weight:800;letter-spacing:.2em;color:var(--gold)}
.way h3{margin-top:14px;font-size:28px;font-weight:800;line-height:1.15}
.way p{margin-top:14px;font-size:18px;line-height:1.55;color:var(--tx2)}
.way small{display:block;margin-top:20px;padding-top:16px;border-top:1px solid var(--line);
  font-size:15px;color:var(--tx3)}

.steps{list-style:none;margin-top:46px}
.steps li{display:flex;gap:26px;padding:28px 0;border-bottom:1px solid var(--line)}
.steps li:first-child{border-top:1px solid var(--line)}
.steps span{flex:none;width:64px;font-size:34px;font-weight:800;line-height:1;color:var(--gold)}
.steps b{display:block;font-size:26px;font-weight:800;line-height:1.2}
.steps p{margin-top:10px;font-size:18px;line-height:1.55;color:var(--tx2)}

.cont{display:grid;grid-template-columns:1fr 1fr;gap:26px 40px;margin-top:46px}
.cont__i{display:flex;gap:20px;align-items:center}
.cont__i i{flex:none;width:60px;height:60px;border-radius:14px;display:grid;place-items:center;
  color:var(--gold-lt);box-shadow:inset 0 0 0 1px var(--hair);background:rgba(168,124,43,.07)}
.cont__i span{display:block;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx3)}
.cont__i b{display:block;margin-top:6px;font-size:22px;font-weight:700;line-height:1.25}

/* ---------- фото добирает свободную высоту страницы ----------
   Замер 09.09: провал до подвала гулял от 29 до 450 px, страницы читались неровно.
   Кадр растягивается на остаток, подписи и подвал стоят на своих местах. */
.ph--grow{flex:1 1 auto;aspect-ratio:auto;min-height:520px;max-height:900px}
.duo--grow{flex:1 1 auto;align-items:stretch}
.duo--grow .ph{aspect-ratio:auto;height:100%;min-height:520px;max-height:900px}

/* Планировки и шаги добирают свободную высоту, чтобы страница не пустовала снизу */
.plans{flex:1 1 auto;align-items:stretch}
.plans--2 .plan img,.plans--3 .plan img{max-height:none}
.steps{flex:1 1 auto;display:flex;flex-direction:column;justify-content:space-between}
.nums+.tbl{margin-top:30px}

/* ---------- аэроснимок района с подписями (слайд «Расположение») ----------
   Клиент 10.09: схема с точками не понравилась — просили живое фото,
   подписанные улицы и явно отмеченный дом. */
.aero{position:relative;width:1080px;margin-left:calc(var(--pad) * -1);margin-right:calc(var(--pad) * -1);
      overflow:hidden;background:var(--ink)}
.aero img{display:block;width:100%;height:100%;object-fit:cover}
.aero::after{content:'';position:absolute;inset:0;pointer-events:none;
      background:linear-gradient(180deg,rgba(11,15,20,.28) 0%,transparent 26%,transparent 62%,rgba(11,15,20,.42) 100%)}

.apin{position:absolute;z-index:3;transform:translate(-50%,-100%);text-align:center;white-space:nowrap}
.apin::after{content:'';position:absolute;left:50%;top:100%;width:1.5px;height:var(--len,26px);
      background:linear-gradient(180deg,var(--gold-lt),rgba(201,162,74,0));transform:translateX(-50%)}
.apin b{display:block;font-size:17px;font-weight:700;letter-spacing:.02em;color:#fff;
      padding:9px 16px;border-radius:9px;background:rgba(11,15,20,.62);backdrop-filter:blur(6px);
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.apin b em{font-style:normal;color:#E7CB8E;font-weight:700;margin-left:8px}

/* метка дома стоит над крышей и коротким штрихом указывает на сам дом:
   поверх дома она его закрывала, а выше кадра — обрезалась */
.apin--home{z-index:5}
.apin--home::after{--len:30px;width:2px;background:linear-gradient(180deg,#E7CB8E 60%,rgba(231,203,142,0))}
.apin--home b{font-size:25px;font-weight:800;letter-spacing:.18em;text-indent:.18em;padding:13px 24px 12px;
      background:linear-gradient(135deg,rgba(20,26,34,.9),rgba(20,26,34,.76));border-radius:12px;
      box-shadow:inset 0 0 0 1.5px rgba(231,203,142,.85), 0 18px 40px -20px rgba(0,0,0,.8)}
.apin--home span{display:inline-block;margin-top:9px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
      color:rgba(255,255,255,.92);padding:7px 14px;border-radius:7px;background:rgba(11,15,20,.55);
      backdrop-filter:blur(6px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}

/* мягкий «прожектор» на доме: вокруг чуть темнее, дом читается сразу */
.aero__spot{position:absolute;inset:0;z-index:2;pointer-events:none;
      background:radial-gradient(34% 26% at var(--x,47%) var(--y,22%),
                 rgba(11,15,20,0) 0%, rgba(11,15,20,0) 38%, rgba(11,15,20,.44) 100%)}

.astreet{position:absolute;z-index:3;transform:translate(-50%,-50%) rotate(var(--rot,0deg));
      font-family:var(--ff-s);font-style:italic;font-size:23px;color:#fff;letter-spacing:.06em;
      text-shadow:0 2px 12px rgba(0,0,0,.85), 0 0 26px rgba(0,0,0,.5);white-space:nowrap;pointer-events:none}
.astreet::before,.astreet::after{content:'';position:absolute;top:50%;width:28px;height:1px;
      background:rgba(255,255,255,.55)}
.astreet::before{right:calc(100% + 12px)}
.astreet::after{left:calc(100% + 12px)}

.aero__cap{position:absolute;left:var(--pad);bottom:22px;z-index:4;font-size:13px;letter-spacing:.14em;
      text-transform:uppercase;color:rgba(255,255,255,.72)}