/* ОБЪЕКТ — первый экран главной (Hero, objh-*). Файл переписан целиком по ТЗ Hero v2.
   Поля по бокам — как у шапки сайта (--objn-pad): левый край текста совпадает с логотипом.
   Высота — экран минус шапка сайта над ним (не меньше 560px и не больше 1400px); текст прижат к низу, под ним — полоса тезисов
   и круглый индикатор прокрутки. Все размеры, растущие с экраном, — через clamp() с потолком.
   Переломы: до 767px — телефон, 768–1199 — планшет, от 1200 — компьютер.
   main.css гасит рамку фокуса у всего (* { outline: none !important }) — поэтому у :focus-visible здесь !important. */

/* шапка сайта (objn, objekt-nav.css) — тёмная и фиксированная, стоит над первым экраном; фото начинается под ней */

.objh-hero,
.objh-hero *,
.objh-hero *::before,
.objh-hero *::after{box-sizing:border-box;}

.objh-hero{
  --objh-bg:#1C1A1A;
  --objh-cream:#F5F2ED;
  --objh-accent:#A9967D;
  --objh-accent-hover:#B8A68E;
  --objh-ease:cubic-bezier(.2,.7,.2,1);
  position:relative;
  display:flex;
  flex-direction:column;
  width:100%;
  /* экран минус шапка сайта над ним */
  min-height:clamp(560px, calc(100vh - var(--objn-h0, 88px)), 1400px);
  min-height:clamp(560px, calc(100svh - var(--objn-h0, 88px)), 1400px);
  overflow:hidden;
  overflow:clip;
  background:var(--objh-bg);
  color:var(--objh-cream);
  font-family:var(--objekt-font-body, 'Manrope', sans-serif);
}
/* сброс с весом одного класса (:where) — чтобы стили самих элементов ниже его перебивали */
.objh-hero :where(p, ul, li){margin:0;padding:0;list-style:none;}
.objh-hero li::before{content:none;}
.objh-hero :where(a){text-decoration:none;}

/* ---------- фото ---------- */
.objh-hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden;}
.objh-hero__par{position:absolute;inset:0;will-change:transform;}
.objh-hero__par picture{display:block;width:100%;height:100%;}
.objh-hero__img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:60% 50%;}
/* компьютер: широкое фото (дом в правой половине кадра) — кадрируем так, чтобы дом начинался примерно с середины экрана */
@media (min-width:1024px){
  .objh-hero__img{object-position:55% 50%;}
}
/* левая часть кадра — тёмная «подложка» под текст: заголовок и бежевая строка не ложатся на освещённый дом */
.objh-hero__overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg, rgba(10,9,8,0.9) 0%, rgba(10,9,8,0.78) 28%, rgba(10,9,8,0.42) 46%, rgba(10,9,8,0.08) 62%, rgba(10,9,8,0) 72%),
    linear-gradient(0deg, rgba(10,9,8,0.75) 0%, rgba(10,9,8,0) 38%);
}
/* «живое фото»: медленный наезд при загрузке */
.objh-anim .objh-hero__img{animation:objhZoom 2.4s var(--objh-ease) both;}
@keyframes objhZoom{from{transform:scale(1.08);}to{transform:scale(1);}}

/* ---------- контейнер ---------- */
.objh-hero__inner{
  position:relative;z-index:2;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  /* поля — как у шапки сайта (--objn-pad из objekt-nav.css): левый край текста = левый край логотипа на любом экране */
  width:auto;
  margin:0;
  padding-left:var(--objn-pad, 9.1vw);
  padding-right:var(--objn-pad, 9.1vw);
  padding-top:clamp(24px, 4vh, 64px);
  padding-bottom:clamp(20px, 3.4vh, 44px);
}
.objh-hero__content{max-width:100%;margin-bottom:clamp(32px, 6vh, 96px);}

/* ---------- eyebrow: одна строка на всех ширинах, линия справа ---------- */
.objh-eyebrow{
  display:flex;align-items:center;gap:clamp(14px, 1vw, 22px);
  margin:0 0 clamp(16px, 1.4vw, 32px);
  font-size:clamp(11px, 0.62vw, 16px);
  letter-spacing:0.24em;
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--objh-accent);
}
.objh-eyebrow span{flex-shrink:0;}
.objh-eyebrow i{display:block;flex:1 1 auto;min-width:24px;max-width:96px;height:1px;background:rgba(169,150,125,0.55);}

/* ---------- заголовок ---------- */
.objh-hero .objh-title{
  margin:0 0 clamp(18px, 1.6vw, 36px);
  padding:0;
  font-family:var(--objekt-font-heading, 'Playfair Display', serif);
  font-weight:500;
  /* заголовок держится в левой тёмной половине кадра (до ~52% ширины экрана), чтобы не заходить на дом:
     первая строка — одной строкой, бежевая переносится на две («и реконструкция / частных объектов») */
  max-width:52vw;
  font-size:clamp(36px, min(3.85vw, 8.2vh), 110px);
  line-height:1.04;
  letter-spacing:-0.02em;
  text-transform:none;
  color:var(--objh-cream);
  text-wrap:balance;
}
.objh-title__l1,
.objh-title__l2{display:block;text-wrap:balance;}
.objh-title__l2{color:var(--objh-accent);}

/* ---------- подзаголовок ---------- */
.objh-subtitle{
  max-width:34em;
  font-size:clamp(16px, 1.1vw, 27px);
  line-height:1.5;
  color:rgba(245,242,237,0.78);
}

/* ---------- кнопки ---------- */
.objh-cta{display:flex;flex-wrap:wrap;gap:clamp(12px, 0.9vw, 20px);margin-top:clamp(28px, 2.4vw, 52px);}
.objh-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:clamp(52px, 3.2vw, 78px);
  padding:0 clamp(24px, 2vw, 44px);
  border:1px solid transparent;
  border-radius:4px;
  font-size:clamp(15px, 0.9vw, 20px);
  font-weight:500;
  line-height:1.2;
  white-space:nowrap;
  transition:background-color .2s ease, border-color .2s ease, color .2s ease;
}
.objh-btn svg{flex-shrink:0;width:1.15em;height:1.15em;transition:transform .2s ease;}
.objh-btn--primary{background:var(--objh-accent);color:var(--objh-bg);}
.objh-btn--primary:hover,
.objh-btn--primary:focus,
.objh-btn--primary:visited{color:var(--objh-bg);}
.objh-btn--primary:hover{background:var(--objh-accent-hover);}
.objh-btn--primary:hover svg{transform:translateX(4px);}
.objh-btn--outline{border-color:rgba(245,242,237,0.3);color:var(--objh-cream);}
.objh-btn--outline:hover,
.objh-btn--outline:focus,
.objh-btn--outline:visited{color:var(--objh-cream);}
.objh-btn--outline:hover{border-color:var(--objh-cream);}
.objh-btn:focus-visible{outline:2px solid var(--objh-cream) !important;outline-offset:3px;}

/* ---------- соцсети и подпись ---------- */
.objh-social-wrap{margin-top:clamp(28px, 2.4vw, 52px);}
.objh-social{display:flex;flex-wrap:wrap;align-items:center;gap:10px clamp(16px, 1.2vw, 28px);}
.objh-social__item{
  display:inline-flex;align-items:center;gap:clamp(8px, 0.6vw, 14px);
  font-size:clamp(14px, 0.85vw, 20px);
  font-weight:500;
  color:rgba(245,242,237,0.85);
  transition:color .2s ease;
}
.objh-social__item:hover,
.objh-social__item:focus{color:var(--objh-cream);}
.objh-social__item:visited{color:rgba(245,242,237,0.85);}
.objh-social__item svg{flex-shrink:0;width:clamp(22px, 1.25vw, 32px);height:clamp(22px, 1.25vw, 32px);color:var(--objh-accent);transition:color .2s ease;}
.objh-social__item:hover svg{color:var(--objh-cream);}
.objh-social__item:focus-visible{outline:2px solid var(--objh-accent) !important;outline-offset:4px;}
.objh-social__sep{width:1px;height:clamp(18px, 1.2vw, 28px);background:rgba(245,242,237,0.3);}
.objh-tagline{margin-top:8px;font-size:clamp(14px, 0.85vw, 20px);color:rgba(245,242,237,0.6);}

/* ---------- нижняя полоса: тезисы + индикатор ---------- */
.objh-bottom{
  display:flex;align-items:center;gap:clamp(20px, 2vw, 48px);
  padding-top:clamp(16px, 1.6vh, 24px);
  border-top:1px solid rgba(245,242,237,0.18);
}
.objh-theses{display:flex;flex:1 1 auto;min-width:0;}
.objh-thesis{
  display:flex;align-items:baseline;gap:10px;
  padding:0 clamp(14px, 1.4vw, 32px);
  font-size:clamp(13px, 0.8vw, 18px);
  line-height:1.35;
  color:rgba(245,242,237,0.85);
}
.objh-thesis:first-child{padding-left:0;}
.objh-thesis + .objh-thesis{border-left:1px solid rgba(245,242,237,0.18);}
.objh-thesis__num{flex-shrink:0;font-size:0.85em;font-variant-numeric:tabular-nums;color:var(--objh-accent);}

/* ---------- индикатор прокрутки: текст по кругу, стрелка, кольцо прогресса ---------- */
.objh-scroll{
  position:relative;
  flex-shrink:0;
  display:block;
  width:clamp(88px, 6vw, 132px);
  height:clamp(88px, 6vw, 132px);
  margin-left:auto;
  border-radius:50%;
  color:rgba(245,242,237,0.7);
  transition:box-shadow .3s ease, opacity .3s ease, visibility .3s;
}
.objh-scroll.is-away{opacity:0;visibility:hidden;}
.objh-scroll__svg{display:block;width:100%;height:100%;overflow:visible;}
.objh-scroll__spin{transform-origin:60px 60px;animation:objhSpin 18s linear infinite;}
.objh-scroll:hover .objh-scroll__spin{animation-duration:8s;}
.objh-scroll__text{
  font-family:var(--objekt-font-body, 'Manrope', sans-serif);
  font-size:9.2px;
  letter-spacing:0.2em;
  fill:currentColor;
}
.objh-scroll__track{fill:none;stroke:rgba(245,242,237,0.12);stroke-width:1;}
.objh-scroll__progress{
  fill:none;stroke:var(--objh-accent);stroke-width:1.5;
  stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--objh-progress, 0) * 100);
  transform:rotate(-90deg);transform-origin:60px 60px;
  transition:stroke-dashoffset .1s linear;
}
.objh-scroll__core{fill:none;stroke:var(--objh-accent);stroke-width:1;}
.objh-scroll__arrow{
  position:absolute;left:50%;top:50%;
  width:28%;height:28%;
  margin:-14% 0 0 -14%;
  color:var(--objh-cream);
  transition:color .2s ease;
}
.objh-scroll__arrow svg{display:block;width:100%;height:100%;animation:objhBounce 1.8s ease-in-out infinite;}
.objh-scroll:hover{box-shadow:0 0 0 8px rgba(169,150,125,0.08);}
.objh-scroll:hover .objh-scroll__arrow{color:var(--objh-accent);}
.objh-scroll:focus-visible{outline:2px solid var(--objh-accent) !important;outline-offset:4px;}
@keyframes objhSpin{to{transform:rotate(360deg);}}
@keyframes objhBounce{0%,100%{transform:translateY(-8%);}50%{transform:translateY(12%);}}
.objh-next{display:block;height:0;}

/* ---------- появление при загрузке (класс objh-anim ставит скрипт; без JS всё видно сразу) ---------- */
.objh-anim .objh-rv{opacity:0;transform:translateY(20px);transition:opacity .7s var(--objh-ease), transform .7s var(--objh-ease);}
.objh-anim.is-in .objh-rv{opacity:1;transform:none;}
.objh-anim .objh-rv--1{transition-delay:.15s;}
.objh-anim .objh-rv--2{transition-delay:.25s;}
.objh-anim .objh-rv--3{transition-delay:.38s;}
.objh-anim .objh-rv--4{transition-delay:.52s;}
.objh-anim .objh-rv--5{transition-delay:.65s;}
.objh-anim .objh-rv--6{transition-delay:.78s;}
.objh-anim .objh-rv--7{transition-delay:.95s;}

/* ================= планшет ================= */
@media (max-width:1199px){
  .objh-thesis{padding:0 14px;}
}
@media (max-width:1023px){
  .objh-hero .objh-title{max-width:none;}
}
/* 1024–1199: 4 тезиса в ряд тесно — без номеров текст укладывается ровнее (в 2 строки, а не в 3) */
@media (min-width:1024px) and (max-width:1199px){
  .objh-thesis__num{display:none;}
}
/* невысокий ноутбук (1366×768 и подобные): заголовок в 3 строки — поджимаем отступы и значок, чтобы полоса тезисов была в экране */
@media (min-width:1024px) and (max-height:820px){
  .objh-hero__inner{padding-top:16px;padding-bottom:18px;}
  .objh-hero__content{margin-bottom:24px;}
  .objh-bottom{padding-top:12px;}
  .objh-scroll{width:74px;height:74px;}
}
/* узкий планшет: 4 тезиса в ряд не помещаются — сетка 2×2, индикатор справа */
@media (min-width:768px) and (max-width:1023px){
  .objh-theses{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));}
  .objh-thesis{padding:12px 16px 12px 0;border-bottom:1px solid rgba(245,242,237,0.12);}
  .objh-thesis + .objh-thesis{border-left:0;}
  .objh-thesis:nth-child(2n){padding-left:16px;border-left:1px solid rgba(245,242,237,0.18);}
  .objh-thesis:nth-last-child(-n+2){border-bottom:0;}
}

/* ================= телефон ================= */
@media (max-width:767px){
  .objh-hero__inner{width:auto;max-width:none;margin:0;padding-left:20px;padding-right:20px;}
  .objh-hero__img{object-position:68% 40%;}
  .objh-hero__overlay{background:linear-gradient(180deg, rgba(10,9,8,0.35) 0%, rgba(10,9,8,0.55) 45%, rgba(10,9,8,0.9) 100%);}
  .objh-eyebrow{letter-spacing:0.1em;gap:12px;}
  .objh-hero .objh-title{font-size:clamp(34px, 9.4vw, 44px);}
  .objh-subtitle br{display:none;}
  .objh-cta{flex-direction:column;gap:12px;}
  .objh-btn{width:100%;min-height:54px;}
  .objh-social__item span{white-space:nowrap;}
  /* соцсети на узком экране встают друг под другом — разделитель повис бы в конце строки */
  .objh-social{gap:10px 20px;justify-content:center;}
  .objh-social__sep{display:none;}
  .objh-tagline{text-align:center;}
  .objh-hero__content{margin-bottom:28px;}
  .objh-bottom{padding-top:0;border-top:1px solid rgba(245,242,237,0.18);}
  .objh-theses{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));width:100%;}
  .objh-thesis{padding:12px 12px 12px 0;font-size:13px;border-bottom:1px solid rgba(245,242,237,0.12);}
  .objh-thesis + .objh-thesis{border-left:0;}
  .objh-thesis:nth-child(2n){padding-left:12px;border-left:1px solid rgba(245,242,237,0.18);}
  .objh-thesis:nth-last-child(-n+2){border-bottom:0;}
  .objh-scroll{display:none;}
}
@media (max-width:374px){
  .objh-eyebrow{font-size:10px;}
}
/* невысокий телефон (360×740 и подобные): поджимаем вертикальные отступы, чтобы полоса тезисов была ближе к низу экрана */
@media (max-width:767px) and (max-height:760px){
  .objh-hero__inner{padding-top:14px;padding-bottom:16px;}
  .objh-eyebrow{margin-bottom:12px;}
  .objh-hero .objh-title{margin-bottom:14px;}
  .objh-subtitle{font-size:15px;line-height:1.45;}
  .objh-cta{margin-top:20px;gap:10px;}
  .objh-social-wrap{margin-top:20px;}
  .objh-hero__content{margin-bottom:18px;}
  .objh-thesis{padding-top:10px;padding-bottom:10px;}
}

@media (prefers-reduced-motion: reduce){
  .objh-anim .objh-hero__img{animation:none;}
  .objh-anim .objh-rv{opacity:1;transform:none;transition:none;}
  .objh-scroll__spin,
  .objh-scroll__arrow svg{animation:none;}
}