/* ============ TOKENS ============ */
:root{
  --bg: #F3F1EC;
  --paper: #FFFFFF;
  --ink: #16222E;
  --ink-soft: #44535F;
  --river: #2B4A5E;
  --river-deep: #1c2b36;
  --amber: #E8742C;
  --amber-deep: #B95C23;
  --green: #4C7A5A;
  --line: #D8D2C4;
  --line-soft: #E4DFD2;

  --font-display: "Archivo", "Public Sans", sans-serif;
  --font-body: "Public Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", monospace;

  --radius: 14px;
  --radius-sm: 8px;
  --shadow-soft: 0 10px 30px -12px rgba(22,34,46,0.25);
  --shadow-lift: 0 20px 50px -18px rgba(22,34,46,0.35);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; overflow-x: clip; width: 100%; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; }
h1, h2, h3, h4{
  font-family: var(--font-display);
  margin: 0;
  letter-spacing: -0.01em;
}
p{ margin: 0; }
ul{ margin: 0; padding: 0; list-style: none; }
button{ font-family: inherit; cursor: pointer; }

:focus-visible{
  outline: 3px solid var(--amber);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

.section-num{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber-deep);
  background: rgba(201,122,61,0.12);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 14px;
}

/* ============ BUTTONS ============ */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
@media (hover: hover){
  .btn:hover{ transform: translateY(-1px); }
}
.btn-amber{
  background: var(--amber);
  color: #fff;
  box-shadow: var(--shadow-soft);
}
@media (hover: hover){
  .btn-amber:hover{ background: var(--amber-deep); }
}
.btn-ghost{
  background: transparent;
  color: var(--paper);
  border-color: rgba(255,255,255,0.55);
}
@media (hover: hover){
  .btn-ghost:hover{ background: rgba(255,255,255,0.12); }
}
.btn-wide{ width: 100%; }

/* hero CTA with second line "Арктическая ипотека" styled to read as "icy" —
   overall button footprint kept close to a regular single-line .btn by tightening
   padding/line-height, so the box doesn't grow much. */
.btn-snowcap-wrap{
  position: relative;
  flex-direction: column;
  gap: 2px;
  padding: 10px 24px 9px;
  line-height: 1.2;
}
.btn-snowcap-wrap .btn-line1{ display: block; }
.btn-snowcap-wrap .btn-line2{
  display: block;
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #cfe9fb;
  background: linear-gradient(180deg, #ffffff 0%, #d7edfb 45%, #8fc7ea 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 6px rgba(207,233,251,0.6);
}

/* ============ HEADER ============ */
.site-header{
  position: relative;
  z-index: 50;
  background: rgba(243,241,236,0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 861px){
  .site-header{
    position: sticky;
    top: 0;
    background: rgba(243,241,236,0.12);
  }
}
.header-inner{
  max-width: 1240px;
  margin: 0 auto;
  padding: 14px 24px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
}
.brand{
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  min-width: 0;
}
.brand-mark{
  width: 56px; height: 56px;
  flex: 0 0 auto;
  border-radius: 12px;
  background: var(--river);
  color: #fff;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand-text{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.main-nav{
  display: flex;
  justify-content: center;
  gap: 28px;
  font-weight: 500;
  font-size: 0.95rem;
}
.main-nav a{ text-decoration: none; color: var(--ink-soft); transition: color 0.15s; }
.main-nav a:hover{ color: var(--ink); }
.header-cta{ padding: 10px 20px; font-size: 0.9rem; white-space: nowrap; flex: 0 0 auto; }
.header-actions{
  display: flex;
  align-items: center;
  gap: 12px;
  justify-self: end;
}

@media (max-width: 860px){
  .main-nav{ display: none; }
}

@media (max-width: 560px){
  .header-cta{ display: none; }
  .brand-text{ max-width: 76vw; font-size: clamp(1.3rem, 5.5vw, 2.1rem); }
  .header-inner{ padding: 10px 14px; gap: 8px; }
  .brand-mark{ width: 44px; height: 44px; font-size: 1.05rem; border-radius: 10px; }
}

.burger-btn{
  display: none;
  flex: 0 0 auto;
  width: 49px;
  height: 49px;
  border: 1.5px solid var(--line);
  border-radius: 13px;
  background: var(--paper);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6.5px;
  padding: 0;
}
.burger-btn span{
  display: block;
  width: 23px;
  height: 2.5px;
  background: var(--ink);
  border-radius: 1px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.burger-btn[aria-expanded="true"] span:nth-child(1){ transform: translateY(9px) rotate(45deg); }
.burger-btn[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.burger-btn[aria-expanded="true"] span:nth-child(3){ transform: translateY(-9px) rotate(-45deg); }

.mobile-nav{
  position: fixed;
  top: var(--header-height, 64px);
  right: 0;
  width: 67vw;
  max-width: 420px;
  max-height: calc(100vh - var(--header-height, 64px));
  display: flex;
  flex-direction: column;
  padding: 16px 28px 28px;
  background: var(--bg);
  box-shadow: -12px 0 40px -10px rgba(22,34,46,0.35);
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(.22,.61,.36,1);
  z-index: 45;
  overflow-y: auto;
}
.mobile-nav a{
  padding: 13px 0;
  text-decoration: none;
  color: var(--ink);
  font-weight: 500;
  font-size: 1.02rem;
  border-bottom: 1px solid var(--line-soft);
}
.mobile-nav a:last-of-type{ border-bottom: none; }
.mobile-nav-cta{
  margin-top: 14px;
  text-align: center;
}
.mobile-nav.is-open{ transform: translateX(0); }

.mobile-nav-backdrop{
  position: fixed;
  top: var(--header-height, 64px);
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(22,34,46,0.4);
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
.mobile-nav-backdrop.is-open{
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 860px){
  .burger-btn{ display: flex; }
}
@media (min-width: 861px){
  .mobile-nav{ display: none !important; }
  .mobile-nav-backdrop{ display: none !important; }
}

/* ============ HERO ============ */
.hero{
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero-media{
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-media img{
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero-scrim{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(22,34,46,0.15) 0%, rgba(22,34,46,0.35) 55%, rgba(22,34,46,0.88) 100%);
}
@media (max-width: 700px){
  .hero-scrim{
    background: linear-gradient(180deg, rgba(10,16,22,0.35) 0%, rgba(10,16,22,0.5) 45%, rgba(10,16,22,0.92) 100%);
  }
  .hero-media img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: center bottom;
    animation: heroZoomReset 25s cubic-bezier(0.1, 0.5, 0.4, 1) infinite;
  }
}
@keyframes heroZoomReset{
  0%{ transform: scale(1); }
  60%{ transform: scale(1.25); }
  80%{ transform: scale(1.27); }
  100%{ transform: scale(1); }
}
@media (min-width: 861px){
  .hero-media img{
    transform-origin: center bottom;
    animation: heroZoom 60s cubic-bezier(0.1, 0.5, 0.4, 1) infinite alternate;
  }
}
@keyframes heroZoom{
  0%{ transform: scale(1); }
  100%{ transform: scale(1.1); }
}
@media (prefers-reduced-motion: reduce){
  .hero-media img{ animation: none !important; }
}
.hero-content{
  position: relative;
  z-index: 1;
  color: #fff;
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
  padding: 0 24px 64px;
}
.eyebrow{
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #E8C9A8;
  margin-bottom: 18px;
}
@media (max-width: 700px){
  .eyebrow{
    font-size: clamp(10px, 3.2vw, 0.85rem);
    white-space: nowrap;
  }
}
.hero h1{
  font-size: clamp(2.6rem, 6vw, 5rem);
  font-weight: 900;
  line-height: 0.98;
  max-width: 16ch;
  margin-bottom: 22px;
}
@media (max-width: 700px){
  .hero h1{
    font-size: 8.2vw;
    max-width: 100%;
    white-space: nowrap;
  }
}
.hero-lede{
  max-width: 46ch;
  font-size: 1.15rem;
  color: rgba(255,255,255,0.92);
  margin-bottom: 34px;
}
.hero-actions{
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.energy-seal{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.seal-ring{
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 2.5px solid var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(76,122,90,0.18);
  position: relative;
}
.seal-ring::before{
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1px dashed rgba(255,255,255,0.4);
}
.seal-letter{
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1.05rem;
  color: #fff;
}
.seal-text{
  font-size: 0.88rem;
  color: rgba(255,255,255,0.85);
  max-width: 12ch;
  line-height: 1.25;
}

@media (max-width: 600px){
  .hero{ min-height: 92vh; }
  .hero-actions{ flex-direction: column; align-items: stretch; }
  .hero-actions .btn{ width: 100%; }
}

/* ============ LOCATION RULER ============ */
.location{
  max-width: 1240px;
  margin: 0 auto;
  padding: 90px 24px 70px;
}
@media (max-width: 700px){
  .location{ padding-top: 63px; }
}
.location-head{
  margin-bottom: 48px;
  max-width: 56ch;
}
.location-head h2{
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 800;
  margin-bottom: 10px;
}
.location-head p{ color: var(--ink-soft); font-size: 1.02rem; }

@media (min-width: 700px){
  .location-head{ max-width: none; }
  .location-head p{ white-space: nowrap; }
}

.location-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
  min-width: 0;
}

.ruler{
  position: relative;
  padding-left: 28px;
}
.ruler-line{
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 2px;
  background: repeating-linear-gradient(to bottom, var(--river) 0, var(--river) 6px, transparent 6px, transparent 12px);
}
.ruler-list{
  display: flex;
  flex-direction: column;
}
.ruler-list li{
  position: relative;
  display: grid;
  grid-template-columns: 84px 1fr;
  align-items: baseline;
  gap: 18px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
}
.ruler-list li:last-child{ border-bottom: none; }
.ruler-tick{
  position: absolute;
  left: -28px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px; height: 2px;
  background: var(--amber);
}
.ruler-dist{
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--river);
  font-size: 0.95rem;
}
.ruler-name{
  font-size: 1.02rem;
  color: var(--ink);
}
.ruler-far{ margin-top: 6px; }
.ruler-far .ruler-dist{ color: var(--amber-deep); }

.location-map{
  position: sticky;
  top: 96px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  background: var(--paper);
}
.location-map img{
  width: 100%;
  height: auto;
  display: block;
}

.location-foot{
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.98rem;
}

@media (max-width: 900px){
  .location-grid{ grid-template-columns: 1fr; gap: 40px; }
  .location-map{ position: static; order: -1; }
}

@media (max-width: 700px){
  .location{ padding-left: 10px; padding-right: 10px; }
}

@media (max-width: 600px){
  .ruler-list li{ grid-template-columns: 64px 1fr; gap: 12px; }
}

/* ============ SECTION HEAD (generic) ============ */
.section-head{
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
  margin-bottom: 36px;
}
.section-head h2{
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 800;
}
@media (max-width: 700px){
  .gallery-section .section-head{
    padding: 0 8px;
  }
  .gallery-section .section-head h2{
    font-size: 7vw;
    white-space: nowrap;
  }
}
.shop-sub{
  margin-top: 10px;
  color: var(--ink-soft);
  font-size: 1.05rem;
}
@media (min-width: 861px){
  .shop-sub-line2{ display: block; margin-top: 6px; }
}

/* ============ GALLERY (эскизы) ============ */
.gallery-section{
  padding: 40px 0 90px;
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.gallery-section .section-head{ padding-top: 60px; }
@media (max-width: 700px){
  .gallery-section{ padding-top: 28px; padding-bottom: 45px; }
  .gallery-section .section-head{ padding-top: 42px; }
}

/* ============ CAROUSEL (generic engine) ============ */
.carousel{
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 60px;
}
.car-viewport{
  overflow: hidden;
  border-radius: var(--radius);
}
.car-track{
  display: flex;
  will-change: transform;
  transition: transform 0.45s cubic-bezier(.22,.61,.36,1);
}
.car-slide{
  flex: 0 0 100%;
  min-width: 0;
}
.car-slide img{
  display: block;
  width: 100%;
  max-width: 100%;
  height: 480px;
  object-fit: cover;
}

/* Зум активного фото в карусели "Как будет выглядеть дом" — 10% за 20 секунд,
   перезапускается при каждой смене слайда (тот же механизм, что и в карусели
   "Строим по плану", через класс is-active-photo, который ставит JS). */
.carousel-cover .car-slide img{ transform: scale(1); transform-origin: center bottom; }
.carousel-cover .car-slide.is-active-photo img{
  animation: coverPhotoZoom 20s linear forwards;
}
@keyframes coverPhotoZoom{
  from{ transform: scale(1); }
  to{ transform: scale(1.1); }
}
@media (max-width: 700px){
  /* На смартфоне фото обрезано и по бокам, и сверху сильнее, чем на ПК.
     Здесь работают ДВА независимых эффекта одновременно на одном фото:
     1) zoom (transform: scale, тот же coverPhotoZoom, что и на ПК) —
        привязан к нижнему правому углу, поэтому низ остаётся на месте;
     2) сдвиг кадрирования (object-position) — отдельно открывает то, что
        обрезано справа, без изменения масштаба самого зума. Это сделано
        раздельно от scale специально, чтобы можно было независимо менять
        скорость/дальность горизонтального сдвига без влияния на сам зум.
     !important — на случай конфликта специфичности с другими правилами
     для img в карусели. */
  .carousel-cover .car-slide img{
    object-position: 50% 50%;
  }
  .carousel-cover .car-slide.is-active-photo img{
    transform-origin: right bottom !important;
    animation: coverPhotoZoom 20s linear forwards, coverPhotoShiftRight 20s linear forwards !important;
  }
}
@keyframes coverPhotoShiftRight{
  from{ object-position: 50% 50%; }
  to{ object-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce){
  .carousel-cover .car-slide.is-active-photo img{ animation: none !important; }
}

.car-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-size: 1.4rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-soft);
  z-index: 2;
  transition: background 0.15s, transform 0.15s;
}
@media (hover: hover){
  .car-btn:hover{ background: var(--amber); color: #fff; }
}
.car-btn:active{ transform: translateY(-50%) scale(0.94); }
.car-prev{ left: 0; }
.car-next{ right: 0; }
.car-btn[disabled]{ opacity: 0.35; cursor: default; }
@media (hover: hover){
  .car-btn[disabled]:hover{ background: var(--paper); color: var(--ink); }
}

.car-dots{
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}
.car-dot{
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--line);
  border: none;
  padding: 0;
  cursor: pointer;
}
.car-dot.is-active{ background: var(--amber); width: 22px; border-radius: 5px; transition: width 0.2s; }

@media (max-width: 700px){
  .carousel{ padding: 0 8px; }
  .car-btn{ width: 38px; height: 38px; font-size: 1.15rem; }
  .car-slide img{ height: 320px; }
}

/* multi-card carousel variants (shop) show partial peeking cards via flex-basis on JS-built cards */
.carousel-shop .car-slide{
  flex: 0 0 auto;
  width: min(340px, 82vw);
}
.carousel-shop .car-track{ gap: 22px; padding-bottom: 16px; }
.carousel-shop .car-viewport{ overflow: hidden; border-radius: 0; }

@media (min-width: 861px){
  .carousel-shop .car-track{ gap: 33px; } /* +50% к мобильным 22px, только на ПК */
}

/* vertical-photo progress carousel: keep tall aspect but contained width.
   Mobile overrides are placed AFTER this base rule (and after each other,
   widest breakpoint first) so cascade order matches breakpoint order —
   no specificity tie-breaks needed, last matching rule always wins correctly. */
.carousel-vertical{
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
  padding: 0 52px;
  box-sizing: border-box;
  overflow: hidden;
}
.car-viewport-tall{ width: 100%; overflow: hidden; }
.car-viewport-tall .car-slide{ width: 100%; }
.car-viewport-tall .car-slide img{
  display: block;
  height: 546px;
  width: 100%;
  max-width: 100%;
  object-fit: cover;
}

/* Плавное увеличение текущего видимого фото в карусели "Строим по плану" —
   10% за 30 секунд. Класс is-active-photo навешивается JS-ом на слайд,
   который сейчас виден; при переключении на другое фото класс снимается
   и сразу ставится на новый слайд — благодаря "no-animation" сбросу перед
   повторным применением анимация на каждом фото стартует с нуля, а не
   продолжает с того места, где остановилась на предыдущем фото. */
.car-viewport-tall .car-slide img{
  transform: scale(1);
}
.car-viewport-tall .car-slide.is-active-photo img{
  animation: progressPhotoZoom 20s linear forwards;
}
@keyframes progressPhotoZoom{
  from{ transform: scale(1); }
  to{ transform: scale(1.1); }
}
@media (prefers-reduced-motion: reduce){
  .car-viewport-tall .car-slide.is-active-photo img{ animation: none !important; }
}

@media (max-width: 900px){
  .carousel-vertical{ max-width: 480px; }
}
@media (max-width: 700px){
  .carousel-vertical{ max-width: 100% !important; width: 100% !important; padding: 0 8px !important; }
  .car-viewport-tall{ max-width: 100% !important; }
  .car-viewport-tall .car-slide img{ height: auto !important; aspect-ratio: 3 / 5.2 !important; width: 100% !important; max-width: 100% !important; }
}

/* ============ PROGRESS SECTION ============ */
.progress-section{
  background: var(--river-deep);
  color: #EDEAE2;
  padding: 90px 24px;
  overflow-x: hidden;
}
@media (max-width: 700px){
  .progress-section{ padding-top: 63px; padding-bottom: 63px; }
}
.progress-inner{
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 64px;
  align-items: start;
}
.progress-text{ min-width: 0; }
.progress-text h2{
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 800;
  color: #fff;
  margin-bottom: 18px;
}
.progress-text p{
  color: rgba(237,234,226,0.82);
  font-size: 1.04rem;
  margin-bottom: 20px;
  max-width: 50ch;
}
.progress-text .section-num{
  background: rgba(201,122,61,0.22);
  color: #E8C9A8;
}

.energy-card{
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "badge title"
    "badge text";
  column-gap: 18px;
  row-gap: 4px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius);
  padding: 22px;
  margin: 28px 0;
}
.energy-card-head{
  display: contents;
}
.energy-card-badge{
  grid-area: badge;
  align-self: start;
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 2px solid var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 600;
  color: #fff;
  background: rgba(76,122,90,0.25);
}
.energy-card-head h3{
  grid-area: title;
  font-size: 1.08rem;
  color: #fff;
  margin: 0 0 8px;
  align-self: end;
}
.energy-card > p{
  grid-area: text;
  font-size: 0.96rem;
  color: rgba(237,234,226,0.78);
  margin: 0;
}

/* Mobile (<=700px): значок и заголовок в одной строке сверху,
   текст занимает всю ширину карточки под ними (без отступа под значок). */
@media (max-width: 700px){
  .energy-card{
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "badge title"
      "text  text";
    padding: 18px;
    column-gap: 14px;
    row-gap: 12px;
    align-items: center;
  }
  .energy-card-badge{ align-self: center; }
  .energy-card-head h3{ align-self: center; margin: 0; }
  .energy-card > p{ width: 100%; }
}

.progress-gallery{ position: relative; min-width: 0; }
.progress-hint{
  text-align: center;
  font-size: 0.88rem;
  color: rgba(237,234,226,0.6);
  margin-top: 16px;
}
.progress-gallery .car-btn{
  background: rgba(22,34,46,0.35);
  border: 1px solid rgba(255,255,255,0.85);
  color: #fff;
  font-size: 2.8rem;
}
@media (hover: hover){
  .progress-gallery .car-btn:hover{ background: var(--amber); border-color: var(--amber); }
}
.progress-gallery .car-dot{ background: rgba(255,255,255,0.25); }
.progress-gallery .car-dot.is-active{ background: var(--amber); }

@media (max-width: 700px){
  .progress-gallery .car-btn{ font-size: 2.3rem; }
}

@media (max-width: 900px){
  .progress-inner{ grid-template-columns: minmax(0, 1fr) !important; gap: 48px; width: 100%; max-width: 100%; }
  .progress-gallery{ display: flex; flex-direction: column; align-items: stretch !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
}

/* ============ SHOP SECTION ============ */
.shop-section{
  padding: 90px 0 100px;
}
@media (max-width: 700px){
  .shop-section{ padding-top: 63px; padding-bottom: 70px; }
}

.apt-card{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
@media (hover: hover){
  .apt-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-lift); }
}
.apt-card-img{
  position: relative;
  background: #EDE8DB;
  cursor: pointer;
}
.apt-card-img img{ aspect-ratio: 3 / 4; width: 100%; height: auto; object-fit: cover; }
.apt-card-tag{
  position: absolute;
  top: 14px; left: 14px;
  background: var(--river);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  padding: 5px 11px;
  border-radius: 999px;
}
.apt-card-body{
  padding: 20px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.apt-card-body h3{ font-size: 1.18rem; font-weight: 700; }
.apt-card-meta{
  display: flex;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.apt-card-prices{
  margin-top: auto;
  border-top: 1px solid var(--line-soft);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.apt-price-main{
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--ink);
}
.apt-price-sub{
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap !important;
  text-align: left;
  font-size: 0.86rem;
  color: var(--ink-soft);
  overflow: visible;
}
.apt-price-sub span{
  white-space: nowrap;
  flex: 0 0 auto;
}
.apt-price-sub span:first-child::after{
  content: ":";
}
.apt-price-sub span:last-child{
  color: var(--ink);
  font-weight: 600;
}
.apt-card .btn{
  margin-top: 14px;
  width: 100%;
  padding: 12px 18px;
  font-size: 0.92rem;
}

/* ============ MORTGAGE SECTION ============ */
.mortgage-section{
  background: var(--paper);
  border-top: 1px solid var(--line);
  padding: 90px 24px;
}
@media (max-width: 700px){
  .mortgage-section{ padding-top: 63px; padding-bottom: 63px; }
}
.mortgage-inner{
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  grid-template-areas:
    "media heading"
    "media text";
  gap: 12px 56px;
  align-items: start;
  min-width: 0;
}
.mortgage-heading{ grid-area: heading; }
.mortgage-heading h2{
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 800;
  margin: 0 0 16px;
}
.mortgage-media{
  grid-area: media;
  align-self: center;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.mortgage-media img{
  width: 100%;
  height: auto;
  display: block;
  transform: scale(1);
}
.mortgage-media.is-in-view img{
  animation: mortgagePhotoZoom 20s linear forwards;
}
@keyframes mortgagePhotoZoom{
  from{ transform: scale(1); }
  to{ transform: scale(1.1); }
}
@media (prefers-reduced-motion: reduce){
  .mortgage-media.is-in-view img{ animation: none !important; }
}
.mortgage-text{ grid-area: text; }
.mortgage-lede{
  font-size: 1.05rem;
  color: var(--ink-soft);
  margin-bottom: 20px;
  max-width: 52ch;
}
.mortgage-points{
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 22px;
}
.mortgage-points li{
  position: relative;
  padding-left: 26px;
  font-size: 1rem;
  color: var(--ink);
  line-height: 1.45;
}
.mortgage-points li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--amber);
}

/* "Волна" квадратик → галка → квадратик по очереди для каждого пункта.
   ::after — это сама галка, которая на 1 секунду перекрывает квадратик
   (::before) и затем пропадает, открывая его обратно. Запускается один раз
   через класс is-checked-wave (см. JS), который ставится через
   IntersectionObserver, когда минимум 5 первых пунктов видны на экране.
   animation-delay у каждого :nth-child даёт эффект последовательной волны:
   пункт 2 стартует ровно когда у пункта 1 заканчивается показ галки (1с),
   пункт 3 — когда у пункта 2, и так далее. */
.mortgage-points li::after{
  content: "✓";
  position: absolute;
  left: 0;
  top: 8px;
  width: 12px;
  height: 12px;
  line-height: 12px;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  color: var(--amber);
  opacity: 0;
}
.mortgage-points.is-checked-wave li::after{
  animation: mortgageCheckWave 1s steps(1) forwards;
}
.mortgage-points.is-checked-wave li:nth-child(1)::after{ animation-delay: 0s; }
.mortgage-points.is-checked-wave li:nth-child(2)::after{ animation-delay: 1s; }
.mortgage-points.is-checked-wave li:nth-child(3)::after{ animation-delay: 2s; }
.mortgage-points.is-checked-wave li:nth-child(4)::after{ animation-delay: 3s; }
.mortgage-points.is-checked-wave li:nth-child(5)::after{ animation-delay: 4s; }
.mortgage-points.is-checked-wave li:nth-child(6)::after{ animation-delay: 5s; }
.mortgage-points.is-checked-wave li:nth-child(7)::after{ animation-delay: 6s; }
.mortgage-points.is-checked-wave li:nth-child(8)::after{ animation-delay: 7s; }
@keyframes mortgageCheckWave{
  0%{ opacity: 0; }
  1%{ opacity: 1; }   /* появляется почти сразу — резкая смена, не плавный fade */
  99%{ opacity: 1; }
  100%{ opacity: 0; } /* и резко пропадает, открывая обратно квадратик под собой */
}
@media (prefers-reduced-motion: reduce){
  .mortgage-points.is-checked-wave li::after{ animation: none !important; opacity: 0 !important; }
}
.mortgage-note{
  font-size: 0.92rem;
  color: var(--ink-soft);
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}

/* Mobile (<=900px): заголовок → подзаголовок → фото → текст —
   именно такой порядок задаём через grid-template-areas в одну колонку. */
@media (max-width: 900px){
  .mortgage-inner{
    grid-template-columns: 1fr;
    grid-template-areas:
      "heading"
      "media"
      "text";
    gap: 24px;
  }
  .mortgage-media{ max-width: 420px; margin: 0 auto; align-self: auto; }
}

/* ============ MODALS ============ */
.modal{
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
}
.modal[aria-hidden="false"]{ display: flex; align-items: center; justify-content: center; padding: 16px; overflow: hidden; }
.modal[aria-hidden="false"] .modal-backdrop{ position: fixed; }
.modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(22,34,46,0.55);
  backdrop-filter: blur(2px);
}
.modal-panel{
  position: relative;
  z-index: 1;
  max-width: 920px;
  margin: 0 auto;
  max-height: calc(var(--real-vh, 92vh) - 32px);
  overflow-y: auto;
  background: var(--paper);
  border-radius: 18px;
  padding: 28px;
  box-shadow: var(--shadow-lift);
}
.modal-panel-narrow{ max-width: 480px; }
.modal-close{
  position: absolute;
  top: 18px; right: 18px;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  font-size: 1.4rem;
  color: var(--ink-soft);
  z-index: 2;
}
@media (hover: hover){
  .modal-close:hover{ background: var(--bg); }
}

.modal-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 36px;
}
.modal-media .carousel{ padding: 0 44px; }
.modal-media .car-slide img{ aspect-ratio: 3 / 4; width: 100%; height: auto; object-fit: contain; background: var(--bg); border-radius: var(--radius-sm); }

/* Слайд-анимация при переключении карточки квартиры свайпом управляется
   напрямую из JS (инлайн transform/opacity) — это даёт точный контроль
   над порядком операций: контент обновляется мгновенно, без задержки,
   а плавный "заезд" происходит уже с новыми данными на экране. */
@media (prefers-reduced-motion: reduce){
  #apt-modal-grid{ transition: none !important; }
}

/* Точки-индикатор "какая по счёту квартира открыта" — отдельно от точек
   карусели фото планировки внутри. Показывают позицию среди всех квартир
   и дают понятный сигнал, что свайпом сменилась именно карточка. */
.apt-position-dots{
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-bottom: 18px;
}
.apt-position-dots .pos-dot{
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--line);
  transition: background 0.2s ease, width 0.2s ease;
}
.apt-position-dots .pos-dot.is-active{
  background: var(--amber);
  width: 18px;
  border-radius: 4px;
}

@media (min-width: 761px){
  #apt-modal .modal-panel{ max-width: 1104px; }
  #apt-modal .modal-grid{ grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 44px; }
}

.modal-info h3{ font-size: 1.5rem; margin-bottom: 10px; }
.modal-specs{
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.92rem;
  color: var(--ink-soft);
  margin-bottom: 16px;
}
.modal-specs b{ color: var(--ink); }

.price-block{
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 14px;
  margin-bottom: 14px;
}
.price-row{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
  padding: 7px 0;
  font-size: 0.96rem;
  overflow-x: auto;
}
.price-row span::after{
  content: ":";
}
.price-row + .price-row{ border-top: 1px solid var(--line-soft); }
.price-row-main strong{ font-size: 1.3rem; color: var(--ink); font-family: var(--font-mono); }
.price-row strong{ font-family: var(--font-mono); }

@media (max-width: 400px){
  .price-row{ font-size: 0.86rem; }
  .price-row-main strong{ font-size: 1.1rem; }
}
.price-note{
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin-top: 8px;
}

.arctic-info{
  margin-bottom: 12px;
  font-size: 0.92rem;
}
.arctic-info summary{
  cursor: pointer;
  font-weight: 600;
  color: var(--river);
  padding: 5px 0;
}
.arctic-info p{ color: var(--ink-soft); margin-top: 6px; line-height: 1.5; }
.arctic-list{
  color: var(--ink-soft);
  line-height: 1.5;
  margin-top: 6px;
  padding-left: 18px;
}
.arctic-list li{ margin-bottom: 3px; }
.arctic-list li:last-child{ margin-bottom: 0; }
.arctic-list a{ color: var(--river); text-decoration: underline; text-underline-offset: 2px; }
@media (hover: hover){
  .arctic-list a:hover{ color: var(--amber); }
}
@media (max-width: 700px){
  .arctic-summary-line2{ display: block; }
}

@media (max-width: 760px){
  .modal[aria-hidden="false"]{ align-items: flex-start; padding-top: 24px; }
  .modal-grid{ grid-template-columns: 1fr; gap: 24px; }
  .modal-panel{ padding: 22px; margin: 0 auto; max-height: calc(var(--real-vh, 92vh) - 32px); }
  .modal-media .carousel{ padding: 0 36px; }
}

/* ============ BOOKING FORM ============ */
.book-apt-name{
  font-family: var(--font-mono);
  color: var(--river);
  margin: 4px 0 22px;
  font-size: 0.95rem;
}
.booking-form{
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.booking-form label{
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.booking-form input,
.booking-form textarea{
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 13px 14px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--line);
  background: var(--bg);
  color: var(--ink);
}
.booking-form textarea{
  resize: vertical;
  min-height: 90px;
  line-height: 1.45;
}
.booking-form input:focus,
.booking-form textarea:focus{ border-color: var(--amber); background: var(--paper); outline: none; }
.form-disclaimer{
  font-size: 0.78rem;
  color: var(--ink-soft);
  text-align: center;
}
.form-error{
  font-size: 0.88rem;
  color: #C0392B;
  background: rgba(192,57,43,0.08);
  border: 1px solid rgba(192,57,43,0.25);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin: 0;
}
.field-error{
  display: block;
  font-size: 0.82rem;
  color: #C0392B;
  font-weight: 500;
  margin-top: 4px;
}
.booking-form input.has-error{
  border-color: #C0392B;
}

.booking-success{ text-align: center; padding: 20px 0; }
.success-mark{
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}
.booking-success h4{ margin-bottom: 10px; }
.booking-success p{ color: var(--ink-soft); font-size: 0.95rem; }

.booking-failure{ text-align: center; padding: 20px 0; }
.failure-mark{
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #C0392B;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}
.booking-failure h4{ margin-bottom: 10px; color: #C0392B; }
.booking-failure p{ color: var(--ink-soft); font-size: 0.95rem; margin-bottom: 18px; }

/* ============ INLINE TEXT LINK (видеосъёмку → клипы ВК) ============ */
.inline-link-btn{
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
  color: inherit;
  cursor: pointer;
}
@media (hover: hover){
  .inline-link-btn:hover{ color: var(--amber); }
}

/* ============ SHARE LINK MODAL ============ */
.share-link-row{
  display: flex;
  gap: 8px;
  margin: 18px 0 20px;
}
#share-link-input{
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  padding: 11px 12px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--line);
  background: var(--bg);
  color: var(--ink);
}
.share-link-row .btn{ flex: 0 0 auto; padding: 11px 18px; font-size: 0.9rem; }
.share-or{
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-align: center;
  margin-bottom: 12px;
}
.share-options{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ============ CLIPS CONFIRM MODAL ============ */
.modal-panel-confirm{ text-align: center; }
.modal-panel-confirm h3{
  font-size: 1.2rem;
  margin: 8px 0 24px;
  line-height: 1.4;
}
.confirm-actions{
  display: flex;
  gap: 12px;
  justify-content: center;
}
.confirm-actions .btn{ min-width: 100px; }
.btn-ghost-light{
  background: transparent;
  color: var(--ink-soft);
  border: 1.5px solid var(--line);
}
.btn-share{ margin-top: 10px; scroll-margin: 80px; }
@media (hover: hover){
  .btn-ghost-light:hover{ background: var(--bg); color: var(--ink); }
}

/* ============ FOOTER ============ */
.site-footer{
  background: var(--ink);
  color: rgba(243,241,236,0.86);
  padding: 64px 24px 28px;
}
.footer-inner{
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.site-footer .brand{ color: #fff; margin-bottom: 14px; }
.site-footer .brand-mark{ background: var(--amber); }
.footer-col p{ font-size: 0.92rem; color: rgba(243,241,236,0.68); margin-bottom: 6px; }
.footer-col h4{ font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(243,241,236,0.5); margin-bottom: 14px; }
.footer-col h4.footer-col-subhead{ margin-top: 22px; }
.footer-col a{ display: block; text-decoration: none; font-size: 0.95rem; margin-bottom: 10px; color: rgba(243,241,236,0.86); }
@media (hover: hover){
  .footer-col a:hover{ color: var(--amber); }
}
.footer-contact-btn{
  padding: 12px 22px;
  font-size: 0.92rem;
}
.footer-bottom{
  max-width: 1240px;
  margin: 0 auto;
  padding-top: 22px;
  font-size: 0.8rem;
  color: rgba(243,241,236,0.45);
}
.footer-bottom a{
  color: inherit;
  text-decoration: none;
  cursor: text;
}

@media (max-width: 760px){
  .footer-inner{ grid-template-columns: 1fr; gap: 28px; }
}