:root {
  --green: #4d8c3f;
  --text: #404038;
  --black: #000;
  --pale: #f5f5f5;
  --blue: #c3e1f4;
  --lime: #acbf58;
  --sand: #e3ba8a;
  --radius: 20px;
  --container: 1320px;
  --outer: 30px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background: #fff;
  font-family: "Manrope", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, object, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }

.container {
  width: min(var(--container), calc(100% - 40px));
  margin-inline: auto;
}
.outer-frame {
  margin-inline: clamp(15px, 1.5625vw, var(--outer));
}
.section { padding-top: clamp(80px, 5.55vw, 107px); }
.section-tight { padding-top: 52px; }

/* brand */
.brand {
  display: inline-flex;
  align-items: center;
  width: 256px;
  height: 59px;
}
.brand img {
  display: block;
  width: 256px;
  height: auto;
}
.brand-small {
  width: 255px;
  height: 60px;
}
.brand-small img { width: 255px; }

/* header */
.site-header {
  position: relative;
  z-index: 50;
  background: #fff;
}

/* Landor-style secondary sticky header: the original header scrolls away,
   then a duplicate slides down from above after the first part of the page. */
.site-header--sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  transform: translateY(calc(-100% - 12px));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 10px 30px rgba(0,0,0,.07);
  transition:
    transform .52s cubic-bezier(.22,.75,.24,1),
    opacity .22s ease,
    visibility 0s linear .52s;
  will-change: transform;
}
.site-header--sticky.is-visible {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    transform .52s cubic-bezier(.22,.75,.24,1),
    opacity .22s ease,
    visibility 0s;
}

html { scroll-padding-top: 124px; }
section[id] { scroll-margin-top: 124px; }
.header-inner {
  min-height: 112px;
  display: grid;
  grid-template-columns: 256px 1fr 217px;
  align-items: center;
  gap: 0;
}
.desktop-nav {
  justify-self: center;
  width: 668px;
  height: 52px;
  border-radius: 60px;
  background: var(--pale);
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  padding: 0 28px;
  font-size: 17px;
  font-weight: 600;
}
.desktop-nav a { position: relative; }
.desktop-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: -5px;
  height: 1.5px;
  background: #000;
  transition: right .25s ease;
}
.desktop-nav a:hover::after { right: 0; }
.header-phone {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 24px;
  font-weight: 600;
  white-space: nowrap;
}
.phone-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #000;
  color: #fff;
  display: grid;
  place-items: center;
}
.phone-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.menu-toggle { display: none; border: 0; background: transparent; width: 48px; height: 48px; padding: 10px; }
.menu-toggle span { display: block; height: 2px; background: #000; margin: 7px 0; transition: transform .25s, opacity .25s; }
.mobile-nav { display: none; }

/* hero */
.hero {
  height: min(930px, calc((100vw - 60px) / 2));
  min-height: 600px;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
}
.hero > img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.hero-cta {
  position: absolute;
  width: clamp(170px, 12.5vw, 240px);
  aspect-ratio: 1;
  left: 14.5%;
  top: 65.4%;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  text-align: center;
  font-size: clamp(20px, 1.56vw, 30px);
  line-height: 1.27;
  font-weight: 600;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: linear-gradient(239deg, rgba(0,0,0,.083) 18%, rgba(0,0,0,.053) 82%);
  border: 1px solid rgba(255,255,255,.12);
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.hero-cta:hover { background: rgba(255,255,255,.92); color: #000; transform: scale(1.025); }

/* type */
.display-title {
  margin: 0;
  color: var(--green);
  font-size: clamp(64px, 5vw, 96px);
  line-height: .91;
  letter-spacing: -4px;
  font-weight: 600;
}
.display-title em,
.feature-card h2 em {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  font-style: italic;
}
.body-copy {
  font-size: 20px;
  line-height: 1.4;
  color: var(--text);
}
.body-copy p { margin: 0 0 20px; }
.body-copy p:last-child { margin-bottom: 0; }

/* intro */
.intro-grid {
  margin-top: 55px;
  display: grid;
  grid-template-columns: 645px 562px;
  justify-content: space-between;
  align-items: start;
}
.image-card {
  height: 440px;
  border-radius: 20px;
  overflow: hidden;
}
.image-card img { width: 100%; height: 100%; object-fit: cover; }
.zoom-wrap { overflow: hidden; }
.stats {
  margin-top: 70px;
  min-height: 180px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: end;
  gap: 40px;
}
.stat {
  position: relative;
  min-height: 180px;
  display: flex;
  align-items: end;
}
.stat-big {
  color: var(--green);
  font-size: clamp(180px, 13vw, 250px);
  font-weight: 300;
  line-height: .72;
  letter-spacing: -10px;
}
.stat-label,
.stat-small-top {
  color: #000;
  font-size: 26px;
  line-height: 1.23;
  font-weight: 600;
  letter-spacing: -.52px;
}
.stat-label {
  margin-left: 10px;
  padding-bottom: 15px;
}
.stat-small-top {
    margin-right: -20px;
    padding-bottom: 3em;
}
@media (min-width: 821px) and (max-width: 1024px) {
  .stat-small-top {
      padding-bottom: 4em;
  }
}


/* features */
.features {
  position: relative;
  height: 985px;
  margin-top: 42px;
  overflow: hidden;
  display: flex;
  align-items: center;
  background-color: #fff;
}
.features::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100vw;
  height: 834.94px;
  transform: translate(-50%, -50%);
  background-image: url("assets/svg/kk_bg_v2.svg");
  background-repeat: repeat-x;
  background-position: top center;
  background-size: auto 834.94px;
  opacity: .07;
  pointer-events: none;
}
.features-track {
  position: relative;
  z-index: 1;
  width: max-content;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 307px;
  gap: 30px;
  margin-inline: auto;
}
.feature-card {
  height: 639px;
  border-radius: 20px;
  padding: 35px 33px 30px;
  color: #000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.feature-card.green { background: var(--lime); }
.feature-card.pale { background: var(--pale); }
.feature-card.blue { background: var(--blue); }
.feature-card.sand { background: var(--sand); }
.feature-card h2 {
  margin: 0;
  min-height: 106px;
  font-size: 30px;
  line-height: 35px;
  letter-spacing: -.4px;
  font-weight: 600;
}
.feature-card p {
  margin: 26px 0 0;
  font-size: 16px;
  line-height: 26px;
}
.feature-art {
  margin-top: auto;
  height: 180px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.feature-art object { width: 100%; pointer-events: none; }

/* Keep the four main Peamised omadused cards centered on wide screens.
   The full track is wider than some desktop viewports because of the two
   decorative edge cards. Prevent flex shrinking and center the oversized
   track symmetrically so it clips equally on the left and right. */
@media (min-width: 1181px) {
  .features {
    justify-content: center;
  }
  .features-track {
    flex: 0 0 max-content;
    margin-inline: 0;
  }
}
.art-sunny object { max-width: 237px; height: 174px; }
.art-location object { max-width: 266px; height: 124px; }
.art-parking object { max-width: 270px; height: 124px; }
.art-energy object { max-width: 190px; height: 136px; }

/* plans */
.plans { padding-top: 129px; }
.spec-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 42px;
}
.spec-grid-top {
  margin-top: 47px;
  min-height: 148px;
}
@media (min-width: 821px) {
  .spec-grid-top .spec-wide {
    grid-column: span 2;
  }
}
.spec-grid-bottom {
  padding-top: 37px;
  min-height: 193px;
}
.spec h3 {
  margin: 0 0 2px;
  color: var(--green);
  font-size: 18px;
  line-height: 30px;
  font-weight: 500;
}
.spec p {
  margin: 0;
  font-size: 20px;
  line-height: 30px;
}
.spec-divider { height: 1px; margin-top: 16px; background: rgba(0,0,0,.1); }

/* box picker */
.box-picker-grid {
  display: grid;
  grid-template-columns: 309px 1fr;
  height: 718px;
  gap: 11px;
}
.box-list {
  position: relative;
  height: 718px;
  min-width: 0;
}
.box-option {
  appearance: none;
  border: 0;
  font: inherit;
  text-align: left;
  position: absolute;
  left: 0;
  width: 100%;
  height: 171.236px;
  --status-color: var(--green);
  --status-text: #fff;
  --status-secondary: rgba(255,255,255,.75);
  background: var(--pale);
  border-radius: 15px;
  padding: 0 34px;
  color: #000;
  cursor: pointer;
  overflow: hidden;
  transition:
    top .55s cubic-bezier(.22,.75,.25,1),
    height .55s cubic-bezier(.22,.75,.25,1),
    background-color .25s ease,
    color .25s ease,
    opacity .28s ease,
    transform .25s ease,
    box-shadow .25s ease;
}
.box-option[data-status="vaba"] { --status-color: #4d8c3f; --status-text: #fff; --status-secondary: rgba(255,255,255,.75); }
.box-option[data-status="broneeritud"] { --status-color: #f9dc00; --status-text: #000; --status-secondary: #404038; }
.box-option[data-status="müüdud"] { --status-color: #ad1515; --status-text: #fff; --status-secondary: rgba(255,255,255,.75); }
.box-option:nth-child(1) { top: 0; }
.box-option:nth-child(2) { top: 182.254px; }
.box-option:nth-child(3) { top: 364.509px; }
.box-option:nth-child(4) { top: 546.764px; }

/* All cards are neutral until hover/focus. The status color appears only
   while the unit is being inspected or after an available/reserved unit
   has been opened. */
.box-option:hover,
.box-option.is-hovered,
.box-option.is-touch-selected,
.box-option:focus-visible,
.box-option.is-expanded {
  background: var(--status-color);
  color: var(--status-text);
  box-shadow: 0 10px 25px rgba(0,0,0,.08);
}
.box-option.is-sold { cursor: not-allowed; }

/* Figma status treatment: a fixed vertical strip at the right side.
   Using writing-mode rather than a rotated variable-width label keeps VABA,
   BRONEERITUD and MÜÜDUD on exactly the same right-side axis. */
.box-option-status {
  position: absolute;
  top: 0;
  right: 11px;
  width: 20px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: #686862;
  font-size: 20px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  transform-origin: center;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity .14s ease, color .25s ease;
}
.box-option:hover .box-option-status,
.box-option.is-hovered .box-option-status,
.box-option.is-touch-selected .box-option-status,
.box-option:focus-visible .box-option-status {
  opacity: 1;
  color: var(--status-secondary);
}
.box-option.is-expanded .box-option-status {
  opacity: 0;
}

/* Expanded status is a separate horizontal label. Crossfading between the two
   avoids the visual jump caused by changing writing-mode during the card grow. */
.box-option-status-expanded {
  position: absolute;
  top: 54px;
  right: 28px;
  z-index: 4;
  color: var(--status-secondary);
  font-size: 20px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .18s ease .12s, transform .24s ease .12s;
}
.box-option.is-expanded .box-option-status-expanded {
  opacity: 1;
  transform: translateY(0);
}

.box-option-summary {
  position: absolute;
  left: 34px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  transition: top .45s ease, transform .45s ease;
}
.box-option strong {
  font-size: 30px;
  line-height: 30px;
  letter-spacing: -.6px;
  font-weight: 600;
}
.box-option-summary > span {
  margin-top: 12px;
  font-size: 20px;
  line-height: 20px;
  color: #404038;
  transition: color .25s ease;
}
.box-option:hover .box-option-summary > span,
.box-option.is-hovered .box-option-summary > span,
.box-option.is-touch-selected .box-option-summary > span,
.box-option:focus-visible .box-option-summary > span,
.box-option.is-expanded .box-option-summary > span {
  color: var(--status-secondary);
}

/* Expanded state is positioned from the Figma source:
   title 54px, area 96px, price 130px, room list 229px. */
.box-option-details {
  position: absolute;
  left: 28px;
  right: 28px;
  top: 130px;
  bottom: auto;
  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;
  transition: opacity .28s ease .18s, transform .38s ease .15s;
}
.box-price {
  display: block;
  margin: 0 0 0 6px;
  color: var(--status-text);
  font-size: 48px;
  line-height: 48px;
  letter-spacing: -.96px;
  font-weight: 400;
  white-space: nowrap;
}
.box-specs {
  display: block;
  margin-top: 38px;
}
.box-spec-row {
  position: relative;
  height: 51px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 15px;
  align-items: start;
  padding: 0 6px;
  color: var(--status-secondary);
  font-size: 16px;
  line-height: 16px;
  font-weight: 500;
}
.box-spec-row::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 26px;
  height: 1px;
  background: color-mix(in srgb, var(--status-text) 12%, transparent);
}
.box-picker-grid.is-expanded .box-option:not(.is-expanded) {
  opacity: 0;
  pointer-events: none;
  transform: scale(.97);
}
.box-option.is-expanded {
  top: 0 !important;
  height: 718px;
  z-index: 3;
  background: var(--status-color);
  color: var(--status-text);
}
.box-option.is-expanded .box-option-summary {
  top: 54px;
  transform: none;
}
.box-option.is-expanded .box-option-details {
  opacity: 1;
  transform: none;
}

/* Clear way back from the expanded box state. The whole colored card remains
   clickable; this icon is a visual cue, matching the user's Figma example. */
.box-back-arrow {
  position: absolute;
  left: 31px;
  bottom: 18px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  color: var(--status-text);
  opacity: 0;
  transform: translateX(5px);
  pointer-events: none;
  transition: opacity .22s ease .2s, transform .28s ease .18s;
}
.box-back-arrow svg {
  width: 24px;
  height: 24px;
  display: block;
  overflow: visible;
}
.box-back-arrow path {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.box-option.is-expanded .box-back-arrow {
  opacity: .92;
  transform: translateX(0);
}

/* Mobile-only cue shown after the first tap. It deliberately stays hidden on
   desktop, where hover already communicates that the box is interactive. */
.box-open-arrow {
  display: none;
}

.box-visual {
  position: relative;
  min-width: 0;
  height: 718px;
  border-radius: 15px;
  overflow: hidden;
  background: var(--pale);
}
.box-image,
.box-plan {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity .38s ease, transform .55s cubic-bezier(.22,.75,.25,1);
}
.box-image { z-index: 1; }
.box-image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.box-hotspots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.box-polygon {
  --status-color: var(--green);
  --status-fill: rgba(245,245,245,.48);
  fill: rgba(245,245,245,0);
  stroke: rgba(77,140,63,0);
  stroke-width: 9;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
  transition: fill .22s ease, stroke .22s ease;
  outline: none;
}
.box-polygon[data-status="vaba"] { --status-color: #4d8c3f; }
.box-polygon[data-status="broneeritud"] { --status-color: #f9dc00; }
.box-polygon[data-status="müüdud"] { --status-color: #ad1515; }
.box-polygon.is-sold { cursor: not-allowed; }
.box-polygon.is-hovered,
.box-polygon.is-touch-selected,
.box-polygon:hover,
.box-polygon:focus-visible {
  fill: var(--status-fill);
  stroke: var(--status-color);
}
.box-picker-grid.is-expanded .box-image {
  opacity: 0;
  transform: scale(.985);
  pointer-events: none;
}
.box-plan {
  z-index: 2;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  background: var(--pale);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 28px 36px 25px;
}
.box-picker-grid.is-expanded .box-plan {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.box-plan > img {
  width: min(854px, 100%);
  height: 585px;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.box-plan-actions {
  margin-top: auto;
  padding-bottom: 3px;
  display: flex;
  justify-content: center;
  gap: 60px;
}
.box-plan-btn {
  width: 165px;
  height: 52px;
  border-radius: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  transition: transform .2s ease, background-color .2s ease, color .2s ease;
}
.box-plan-btn:hover { transform: translateY(-2px); }
.box-plan-btn--pdf {
  color: #000;
  background: #fff;
  border: 1px solid #000;
}
.box-plan-btn--reserve {
  color: #fff;
  background: var(--green);
  border: 1px solid var(--green);
}

/* gallery */
.gallery { padding-top: 142px; }
.gallery-word {
  margin: 0 auto -18px;
  text-align: center;
  color: rgba(0,0,0,.1);
  font-size: clamp(110px, 9.375vw, 180px);
  line-height: .72;
  letter-spacing: -7.2px;
  font-weight: 800;
  position: relative;
  z-index: 0;
}
.gallery-mobile-frame { position: relative; width: 100%; min-width: 0; }
.gallery-arrow { display: none; }
.gallery-stack { position: relative; width: 100%; }
.gallery-panel {
  margin: 0;
  height: min(930px, 50vw, calc(100vh - 32px));
  min-height: 600px;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  background: #ddd;
}
.gallery-panel img { width: 100%; height: 100%; object-fit: cover; }


@media (min-width: 1181px) {
  /* Figma desktop geometry: 1920px artboard, 30px outer gutters. */
  .outer-frame {
    width: min(1860px, calc(100% - 60px));
    margin-inline: auto;
  }

  .hero {
    height: auto;
    min-height: 0;
    aspect-ratio: 2 / 1;
  }

  /* Exact image layer inside the 1860×930 Figma hero mask:
     x=-58, y=-189, w=1992, h=1123 relative to the mask. */
  .hero > img {
    position: absolute;
    left: -3.11828%;
    top: -20.32258%;
    width: 107.09677%;
    height: 120.75269%;
    max-width: none;
    object-fit: cover;
  }

  /* Gallery panels use the same 1860×930 frame as the hero.
     Viewport units keep the width stable when ScrollTrigger pins a panel. */
  .gallery-panel {
    width: min(1860px, calc(100vw - 60px));
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: 2 / 1;
    margin-inline: auto;
  }

  .gallery-panel img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
  }

  /* Desktop gallery crops adjusted to match the user's preview compositions. */
  .gallery-panel:nth-child(1) img {
    object-position: 50% 47%;
  }
  .gallery-panel:nth-child(2) img {
    object-position: 50% 43%;
  }
  .gallery-panel:nth-child(3) img {
    object-position: 50% 54%;
  }
  .gallery-panel:nth-child(4) img {
    object-position: 50% 51%;
  }
  .gallery-panel:nth-child(5) img {
    object-position: 50% 50%;
  }

}

/* location */
.location { padding-top: 130px; }
.location-grid { margin-top: 55px; }
.map-wrap {
  width: min(1540px, calc(100% - 40px));
  margin: 78px auto 0;
  min-height: 500px;
}
.map-link { display: block; width: 100%; cursor: pointer; touch-action: manipulation; }
.map-link:focus-visible { outline: 2px solid var(--green); outline-offset: 6px; border-radius: 12px; }
.map-wrap object { display: block; width: 100%; height: auto; aspect-ratio: 1224 / 821; pointer-events: none; }

/* contact */
.contact-area { position: relative; z-index: 3; padding-top: 115px; pointer-events: none; }
.contact-area .contact-title,
.contact-area .contact-card { pointer-events: auto; }
.contact-grid {
  height: 592px;
  min-height: 592px;
  display: grid;
  grid-template-columns: 1fr 645px;
  gap: 69px;
  align-items: start;
  overflow: visible;
}
.contact-title { padding-top: 0; }
.contact-card {
  width: 645px;
  min-height: 592px;
  height: auto;
  align-self: end;
  border-radius: 20px;
  border: 1px solid rgba(0,0,0,.1);
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
  box-shadow: 0 7px 10px rgba(0,0,0,.09), 0 40px 80px rgba(0,0,0,.30);
  padding: 56px 60px 22px;
}
.contact-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 39px; }
.contact-card .field-extra {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.contact-card h3 { margin: 0; color: #000; font-size: 30px; line-height: 48px; letter-spacing: -.6px; }
.contact-card label { display: block; margin: 0 0 7px; font-size: 16px; line-height: 20px; font-weight: 500; }
.contact-card input,
.contact-card textarea {
  width: 100%;
  height: 54px;
  border: 0;
  border-radius: 100px;
  background: var(--pale);
  padding: 0 24px;
  margin: 0 0 19px;
  outline: none;
  resize: none;
  color: var(--text);
}
.contact-card textarea {
  min-height: 54px;
  height: 54px;
  padding-top: 16px;
  padding-bottom: 16px;
  line-height: 22px;
  overflow-y: hidden;
  transition: height .18s ease, border-radius .18s ease;
}
.contact-card textarea.is-multiline {
  border-radius: 24px;
}
.contact-card input:focus,
.contact-card textarea:focus { box-shadow: 0 0 0 2px rgba(77,140,63,.25); }
.contact-card button {
  width: 100%;
  height: 54px;
  border: 0;
  border-radius: 100px;
  color: #fff;
  background: var(--green);
  font-weight: 600;
  transition: background .2s, color .2s;
}
.contact-card button:hover { background: #fff; color: #000; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.contact-card label.privacy-consent {
  width: 455px;
  max-width: 100%;
  margin: 16px auto 0;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  column-gap: 10px;
  row-gap: 0;
  align-items: start;
  color: var(--text);
  text-align: left;
  font-size: 12px;
  line-height: 18px;
  cursor: pointer;
}
.privacy-consent input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.privacy-consent-box {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  flex: 0 0 18px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0,0,0,.34);
  border-radius: 3px;
  background: #fff;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.privacy-consent-box svg { width: 13px; height: 13px; }
.privacy-consent-box path {
  fill: none;
  stroke: #fff;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity .15s ease;
}
.privacy-consent input:checked + .privacy-consent-box {
  border-color: var(--green);
  background: var(--green);
}
.privacy-consent input:checked + .privacy-consent-box path { opacity: 1; }
.privacy-consent input:focus-visible + .privacy-consent-box { box-shadow: 0 0 0 3px rgba(77,140,63,.18); }
.privacy-consent input:invalid:not(:focus) + .privacy-consent-box { border-color: rgba(0,0,0,.34); }
.privacy-consent-text { min-width: 0; display: block; }
.privacy-consent a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.privacy-consent a:hover { color: var(--green); }
.form-status { min-height: 18px; margin: 7px 0 0; text-align: center; color: var(--text); font-size: 12px; line-height: 18px; transition: color .2s ease, background-color .2s ease; }
.form-status.is-success,
.form-status.is-error { padding: 7px 12px; border-radius: 12px; }
.form-status.is-success { color: #356b2d; background: rgba(77,140,63,.10); }
.form-status.is-error { color: #9b3434; background: rgba(173,21,21,.08); }

/* footer */
.site-footer {
  position: relative;
  z-index: 1;
  margin: -282px clamp(15px,1.5625vw,30px) 27px;
  min-height: 578px;
  border-radius: 20px;
  background: var(--pale);
  padding-top: 382px;
}
.footer-content { height: 100%; }
.footer-question {
  position: absolute;
  top: 100px;
  width: 780px;
  max-width: calc(100% - 40px);
  color: #000;
  user-select: text;
  -webkit-user-select: text;
}
.footer-question h2 { margin: 0 0 18px; font: 500 40px/1.2 "Poppins", sans-serif; letter-spacing: -.8px; }
.footer-question p { margin: 0; font-size: 24px; line-height: 30px; font-weight: 500; letter-spacing: -.16px; }
.footer-question p a { font-weight: 700; }
@media (min-width: 821px) {
  /* Desktop hyphenation only in narrow text columns. Keep the wider intro
     copy untouched so the desktop typography stays calm and open. */
  .feature-card p,
  .spec p {
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 6 3 3;
    word-break: normal;
    overflow-wrap: normal;
  }

  .footer-question p a { white-space: nowrap; }
}
.socials { display: flex; gap: 7px; margin-top: 35px; }
.socials a {
  width: 40px; height: 40px; border-radius: 8px;
  border: 1px solid rgba(0,0,0,.15);
  display: grid; place-items: center;
  font-weight: 700; font-size: 13px;
}
.socials a svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
}
.footer-bottom {
  display: grid;
  grid-template-columns: 1.6fr .8fr 1fr;
  align-items: end;
  gap: 70px;
  min-height: 128px;
  color: #000;
}
.wingmacht-mark { width: min(414px, 100%); transform: translateY(10px); }
.wingmacht-mark a { display: block; width: 100%; }
.wingmacht-mark img { display: block; width: 100%; height: auto; }
.footer-address,
.footer-copy { font-size: 16px; line-height: 28px; }
.footer-copy a { color: var(--green); font-size: 24px; line-height: 36px; font-weight: 700; }

/* animation initial safety: GSAP handles from-values after JS loads */
.reveal { will-change: transform, opacity; }

@media (max-width: 1500px) {
  :root { --container: 1120px; }
  .header-inner { grid-template-columns: 220px 1fr 190px; }
  .desktop-nav { width: min(620px, 100%); font-size: 15px; }
  .header-phone { font-size: 19px; }
  .phone-icon { width: 46px; height: 46px; }
  .intro-grid { grid-template-columns: 1.08fr .94fr; gap: 70px; }
  .feature-card { padding-inline: 28px; }
  .stats { gap: 20px; }
  .stat-label, .stat-energy .stat-small-top { font-size: 22px; }
  .contact-grid { grid-template-columns: 1fr min(645px, 54vw); gap: 45px; }
  .contact-card { width: 100%; }
}

@media (min-width: 1181px) and (max-width: 1350px) {
  .features-track {scale: 0.85; }
}

@media (max-width: 1180px) {
  .header-inner { min-height: 86px; grid-template-columns: 1fr auto; }
  .brand { width: 220px; height: auto; }
  .brand img { width: 220px; }
  .desktop-nav, .header-phone { display: none; }
  .menu-toggle { display: block; }
  .mobile-nav {
    display: flex;
    position: fixed;
    inset: 86px 0 auto;
    flex-direction: column;
    gap: 0;
    background: #fff;
    padding: 18px 20px 28px;
    border-top: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 20px 45px rgba(0,0,0,.12);
    transform: translateY(-120%);
    opacity: 0;
    pointer-events: none;
    transition: transform .3s ease, opacity .3s ease;
  }
  .mobile-nav.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .mobile-nav a { padding: 14px 8px; font-size: 20px; font-weight: 600; border-bottom: 1px solid rgba(0,0,0,.07); }
  .mobile-nav .mobile-phone { color: var(--green); border-bottom: 0; }
  .hero { min-height: 0; height: auto; aspect-ratio: 2/1; }
  .features { height: auto; padding: 90px 0; }
  .features-track {
    width: min(920px, calc(100% - 40px));
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: row;
    gap: 24px;
  }
  .feature-edge { display: none; }
  .feature-card { width: auto; min-height: 600px; height: auto; }
  .box-picker-grid { grid-template-columns: 240px 1fr; height: 560px; }
  .box-list, .box-visual { height: 560px; }
  .box-option { height: 132.25px; padding-inline: 25px; }
  .box-option:nth-child(1) { top: 0; }
  .box-option:nth-child(2) { top: 142.58px; }
  .box-option:nth-child(3) { top: 285.16px; }
  .box-option:nth-child(4) { top: 427.75px; }
  .box-option strong { font-size: 24px; line-height: 24px; }
  .box-option-status { right: 9px; width: 18px; font-size: 17px; line-height: 17px; }
  .box-option-summary { left: 25px; }
  .box-option-summary > span { margin-top: 9px; font-size: 17px; line-height: 17px; }
  .box-option.is-expanded { height: 560px; }
  .box-option.is-expanded .box-option-summary { top: 42px; }
  .box-option-status-expanded { top: 42px; right: 22px; font-size: 17px; line-height: 17px; }
  .box-option-details { left: 22px; right: 22px; top: 101px; bottom: auto; }
  .box-price { margin-left: 3px; font-size: 38px; line-height: 38px; }
  .box-specs { margin-top: 18px; }
  .box-spec-row { height: 40px; min-height: 0; padding-inline: 3px; font-size: 14px; line-height: 14px; }
  .box-spec-row::after { top: 20px; }
  .box-plan { padding: 20px 24px 18px; }
  .box-plan > img { height: 455px; }
  .box-plan-actions { gap: 24px; }
  .box-plan-btn { width: 145px; height: 46px; font-size: 14px; }
  .gallery { padding-top: 110px; }
  .gallery-word { margin-bottom: 25px; }
  .gallery-stack {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding: 0 20px 18px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .gallery-stack::-webkit-scrollbar { display: none; }
  .gallery-panel {
    flex: 0 0 min(88vw, 900px);
    width: auto;
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 10;
    margin: 0;
    scroll-snap-align: center;
  }
  .gallery-panel img {
    position: static;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
  }
  .contact-grid { grid-template-columns: 1fr 1fr; }
  .contact-card { padding: 45px 38px 22px; }
  .contact-card-head .brand { display: none; }
  .footer-question { width: 38%; }
  .footer-question h2 { font-size: 34px; }
  .footer-question p { font-size: 19px; line-height: 27px; }
  .gallery-arrow {
    position: absolute;
    top: 50%;
    z-index: 6;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(0,0,0,.09);
    border-radius: 50%;
    color: var(--green);
    background: rgba(255,255,255,.86);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 5px 16px rgba(0,0,0,.12);
    transform: translateY(-50%);
    transition: opacity .2s ease, transform .2s ease, background-color .2s ease;
    touch-action: manipulation;
  }
  .gallery-arrow svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .gallery-arrow--prev { left: 22px; }
  .gallery-arrow--next { right: 22px; }
  .gallery-arrow:active { transform: translateY(-50%) scale(.94); }
  .gallery-mobile-frame.has-interacted .gallery-arrow:not(:disabled) { opacity: .58; }
  .gallery-mobile-frame.has-interacted .gallery-arrow:focus-visible,
  .gallery-mobile-frame.has-interacted .gallery-arrow:active { opacity: 1; }
  .gallery-arrow:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
  .gallery-arrow:disabled { opacity: .18; pointer-events: none; }
}
@media (max-width: 1180px) and (max-height: 375px) {
  .mobile-nav a { padding: 10px 8px; font-size: 18px; }
}

@media (max-width: 820px) {
  html { scroll-padding-top: 96px; }
  section[id] { scroll-margin-top: 96px; }
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }
  main,
  section,
  .site-header,
  .site-footer,
  .container,
  .outer-frame,
  .intro-grid,
  .body-copy,
  .stats,
  .stat {
    min-width: 0;
    max-width: 100%;
  }
  /* On phones the cards are stacked vertically. The desktop ::before only
     covers one 984.97px SVG height, so it is replaced by overlapping copies
     generated by JS. The source artwork is vertically seamless only when
     consecutive copies overlap by 84.97px (900px step). */
  .features::before {
    display: none;
  }
  .features-mobile-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: .07;
  }
  .features-mobile-bg-layer {
    position: absolute;
    left: 0;
    width: 100%;
    height: 984.97px;
    background-image: url("assets/svg/lehe_bg_v.svg");
    background-repeat: repeat-x;
    background-position: top center;
    background-size: auto 984.97px;
  }
  .container { width: calc(100% - 32px); }
  .outer-frame { margin-inline: 16px; }
  .hero { aspect-ratio: 1.25 / 1; border-radius: 16px; }
  .hero > img { object-position: 43% center; }
  .hero-cta { width: 150px; left: 8%; top: auto; bottom: 7%; font-size: 18px; }
  .section { padding-top: 72px; }
  .display-title { font-size: clamp(50px, 12.5vw, 74px); line-height: .93; letter-spacing: -2.5px; }
  .intro-grid { margin-top: 38px; grid-template-columns: 1fr; gap: 32px; }
  .image-card { height: auto; aspect-ratio: 1.46 / 1; }
  .body-copy { font-size: 17px; line-height: 1.5; }

  /* Mobile body text: use the browser's Estonian hyphenation dictionary.
     Keep headings, labels, buttons and status text untouched. */
  .body-copy p,
  .feature-card p,
  .spec p,
  .footer-question p {
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 6 3 3;
    word-break: normal;
    overflow-wrap: normal;
  }
  .stats { margin-top: 55px; grid-template-columns: 1fr; gap: 10px; }
  .stat { min-height: 130px; margin: 0 auto; }
  .stat-big { font-size: 150px; letter-spacing: -6px; }
  .stat-label, .stat-energy .stat-small-top { font-size: 20px; }
  .stat-energy { justify-content: flex-start; }
  .features { margin-top: 50px; padding: 60px 0; }
  .features-track { width: calc(100% - 32px); grid-template-columns: 1fr; gap: 16px; }
  .feature-card { min-height: 560px; }
  .plans { padding-top: 80px; }
  .spec-grid-top, .spec-grid-bottom { grid-template-columns: 1fr; gap: 30px; min-height: 0; }
  .spec-grid-top { margin-top: 40px; padding-bottom: 0; }
  .spec-divider { margin-top: 0; }
  .spec-grid-top + .spec-divider { display: none; }
  .spec-grid-bottom { padding: 30px 0; }
  .spec p { font-size: 17px; line-height: 1.5; }
  .box-picker { padding-top: 42px; }
  .box-picker-grid { grid-template-columns: 1fr; gap: 12px; height: auto; }
  .box-list { height: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .box-option,
  .box-option:nth-child(n) { position: relative; top: auto; left: auto; height: 110px; min-height: 110px; border-radius: 12px; padding: 20px; }
  .box-option-summary { position: static; transform: none; }
  .box-option-status { top: 0; right: 10px; width: 18px; height: 100%; font-size: 14px; line-height: 14px; }
  .box-open-arrow {
    position: absolute;
    left: 50%;
    right: auto;
    bottom: 11px;
    width: 23px;
    height: 23px;
    display: grid;
    place-items: center;
    color: var(--status-secondary);
    opacity: 0;
    transform: translate(-50%, -5px);
    pointer-events: none;
    transition: opacity .2s ease, transform .25s ease;
  }
  .box-open-arrow svg { width: 21px; height: 21px; display: block; overflow: visible; transform: rotate(90deg); }
  .box-open-arrow path { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
  .box-option.is-touch-selected:not(.is-sold) .box-open-arrow {
    opacity: .92;
    transform: translate(-50%, 0);
    animation: boxOpenArrowHint .72s cubic-bezier(.22,.75,.25,1) .12s 1 both;
  }
  @keyframes boxOpenArrowHint {
    0% { transform: translate(-50%, -4px); }
    48% { transform: translate(-50%, 4px); }
    100% { transform: translate(-50%, 0); }
  }
  .box-option.is-expanded .box-open-arrow,
  .box-option.is-sold .box-open-arrow { opacity: 0; }

  /* Touch browsers can keep :hover on the button that was just tapped.
     Once a box is closed, force that stale hover back to the same neutral
     appearance as the untouched cards. Selection is represented only by
     .is-touch-selected. */
  .box-option:not(.is-touch-selected):not(.is-expanded):hover {
    background: var(--pale);
    color: #000;
    box-shadow: none;
  }
  .box-option:not(.is-touch-selected):not(.is-expanded):hover .box-option-summary > span {
    color: #404038;
  }
  .box-option:not(.is-touch-selected):not(.is-expanded):hover .box-option-status {
    opacity: 0;
  }
  .box-polygon:not(.is-touch-selected):hover {
    fill: rgba(245,245,245,0);
    stroke: rgba(77,140,63,0);
  }
  .box-option strong { font-size: 21px; }
  .box-option-summary > span { margin-top: 5px; font-size: 15px; }
  .box-visual { height: auto; aspect-ratio: 1000 / 718; }
  .box-picker-grid.is-expanded { display: block; }
  .box-picker-grid.is-expanded .box-list { height: auto; margin-bottom: 12px; display: block; }
  .box-picker-grid.is-expanded .box-option:not(.is-expanded) { display: none; }
  .box-option.is-expanded { position: relative; height: auto; min-height: 575px; padding: 28px 24px 66px; }
  .box-option.is-expanded .box-option-summary { position: static; }
  .box-option-status-expanded { top: 28px; right: 24px; font-size: 14px; line-height: 14px; }
  .box-option-details { position: static; margin-top: 20px; opacity: 0; transform: translateY(10px); }
  .box-option.is-expanded .box-option-details { opacity: 1; transform: none; }
  .box-price { font-size: 38px; margin: 20px 0 24px; }
  .box-specs { margin-top: 18px; }
  .box-back-arrow {
    left: 50%;
    bottom: 20px;
    width: 24px;
    height: 24px;
    transform: translate(-50%, 5px);
  }
  .box-back-arrow svg { transform: rotate(90deg); }
  .box-option.is-expanded .box-back-arrow { transform: translate(-50%, 0); }
  .box-spec-row { min-height: 42px; font-size: 14px; }
  .box-picker-grid.is-expanded .box-visual { aspect-ratio: auto; height: 580px; }
  .box-plan { padding: 18px 16px; }
  .box-plan > img { height: 470px; }
  .box-plan-actions { gap: 14px; }
  .box-plan-btn { width: 145px; height: 46px; font-size: 14px; }
  .gallery { padding-top: 90px; }
  .gallery-mobile-frame { overflow: hidden; }
  .gallery-panel { flex-basis: 90vw; aspect-ratio: 4/3; border-radius: 15px; }
  .location { padding-top: 90px; }
  .map-wrap { width: calc(100% - 16px); margin-top: 50px; min-height: 0; }
  .contact-area { width: 100%; max-width: 100%; padding-top: 80px; overflow-x: clip; }
  .contact-grid { width: calc(100% - 32px); max-width: calc(100% - 32px); min-width: 0; height: auto; grid-template-columns: minmax(0, 1fr); gap: 45px; min-height: 0; align-items: start; }
  .contact-grid > * { min-width: 0; max-width: 100%; }
  .contact-card { width: 100% !important; max-width: 100%; min-width: 0; min-height: 0; align-self: start; margin: 0; padding: 34px 24px 20px; border-radius: 16px; box-shadow: 0 18px 50px rgba(0,0,0,.22); }
  .contact-card input,
  .contact-card textarea,
  .contact-card button { min-width: 0; max-width: 100%; }
  .contact-card input,
  .contact-card textarea { scroll-margin-top: 110px; scroll-margin-bottom: 24px; }
  .contact-card textarea { max-height: min(240px, 34dvh); }
  .socials a { width: 44px; height: 44px; }
  .contact-card label.privacy-consent { width: 100%; max-width: 100%; padding-inline: 2px; overflow-wrap: anywhere; grid-template-columns: 18px minmax(0, 1fr); column-gap: 10px; }
  .contact-card-head { margin-bottom: 25px; }
  .contact-card h3 { font-size: 25px; }
  .site-footer { margin: 70px 16px 16px; min-height: auto; padding: 52px 0 30px; }
  .footer-question { position: static; width: auto; }
  .footer-bottom { margin-top: 70px; grid-template-columns: 1fr; gap: 32px; }
  .wingmacht-mark { width: min(360px, 100%); transform: none; }
}

@media (max-width: 574.98px) {
}

@media (max-width: 480px) {
  html { scroll-padding-top: 86px; }
  section[id] { scroll-margin-top: 86px; }
  .header-inner { min-height: 76px; }
  .mobile-nav { inset: 76px 0 auto; }
  .brand { width: 190px; }
  .brand img { width: 190px; }
  .hero { margin-inline: 10px; border-radius: 14px; aspect-ratio: 1/1; }
  .hero > img { object-position: 40% center; }
  .hero-cta { width: 128px; font-size: 16px; }
  .display-title { font-size: 48px; }
  .feature-card h2 { font-size: 27px; line-height: 32px; }
  .feature-card p { font-size: 15px; line-height: 24px; }
  .feature-card { min-height: 520px; padding: 30px 25px 24px; }
  .box-list { grid-template-columns: 1fr; }
  .box-picker-grid.is-expanded .box-visual { height: 500px; }
  .box-plan > img { height: 390px; }
  .box-plan-actions { gap: 10px; width: 100%; }
  .box-plan-btn { flex: 1; width: auto; max-width: 165px; }
  .gallery-word { font-size: 74px; letter-spacing: -3px; }
  .gallery-stack { padding-inline: 12px; }
  .gallery-panel { flex-basis: 92vw; }
  .gallery-arrow--prev { left: 16px; }
  .gallery-arrow--next { right: 16px; }
  .contact-title { font-size: 50px; }
  .contact-grid { width: calc(100% - 24px); max-width: calc(100% - 24px); }
  .contact-card { padding-inline: 20px; }
  .footer-question h2 { font-size: 30px; }
  .footer-question p { font-size: 17px; line-height: 25px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .box-open-arrow { animation: none !important; }
}

.box-plan-btn.is-disabled {
  color: #777;
  border-color: #b5b5b5;
  background: #efefef;
  pointer-events: none;
}
.box-plan-btn--pdf.is-disabled { opacity: .6; }
.box-plan-btn--reserve.is-muted {
  background: #f9dc00;
  border-color: #f9dc00;
  color: #000;
  cursor: default;
  pointer-events: none;
}
.box-plan-btn--reserve.is-muted:hover { transform: none; }
@media (max-width: 767px) {
}


/* v45 — phone landscape mode.
   The short viewport needs a denser composition than portrait: the project
   metrics return to one horizontal row and Peamised omadused becomes 2 + 2. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 950px) {
  html { scroll-padding-top: 92px; }
  section[id] { scroll-margin-top: 92px; }

  /* Figma Group 1000004250 — keep all three project metrics in one row. */
  .stats {
    margin-top: 42px;
    min-height: 112px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: 18px;
  }
  .stat {
    min-width: 0;
    min-height: 112px;
    align-items: end;
  }
  .stat-big {
    flex: 0 0 auto;
    font-size: clamp(88px, 12.5vw, 116px);
    line-height: .76;
    letter-spacing: -4px;
  }
  .stat-label,
  .stat-energy .stat-small-top {
    font-size: clamp(12px, 1.8vw, 15px);
    line-height: 1.18;
    letter-spacing: -.2px;
  }
  .stat-label {
    margin-left: 7px;
    padding-bottom: 7px;
  }
  .stat-energy {
    justify-content: center;
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    align-items: end;
    column-gap: 8px;
  }
  .stat-energy .stat-big {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: end;
    margin-left: 6px;
    transform: none;
  }
  .stat-energy .stat-small-top {
    grid-column: 1 / span 2;
    grid-row: 1;
    justify-self: start;
    align-self: end;
    margin: 0 0 -4px 0;
  }
  .stat-energy .stat-label {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    margin-left: -2px;
    padding-bottom: 12px;
  }

  /* Use the same overlapping mobile background system in landscape phones;
     a two-row feature grid can be taller than the single desktop SVG layer. */
  .features::before { display: none; }
  .features-mobile-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: .07;
  }
  .features-mobile-bg-layer {
    position: absolute;
    left: 0;
    width: 100%;
    height: 984.97px;
    background-image: url("assets/svg/lehe_bg_v.svg");
    background-repeat: repeat-x;
    background-position: top center;
    background-size: auto 984.97px;
  }

  .features {
    height: auto;
    margin-top: 38px;
    padding: 46px 0;
  }
  .features-track {
    width: calc(100% - 32px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: 14px;
    margin-inline: auto;
  }
  .feature-edge { display: none; }
  .feature-card {
    width: auto;
    height: auto;
    min-height: 342px;
    padding: 20px 20px 17px;
    border-radius: 17px;
  }
  .feature-card h2 {
    min-height: 0;
    font-size: clamp(20px, 3.2vw, 24px);
    line-height: 1.08;
    letter-spacing: -.25px;
  }
  .feature-card p {
    margin-top: 12px;
    font-size: clamp(12px, 1.75vw, 14px);
    line-height: 1.38;
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 6 3 3;
  }
  .feature-art {
    height: 82px;
    margin-top: auto;
  }
  .art-sunny object { max-width: 118px; height: auto; }
  .art-location object { max-width: 150px; height: auto; }
  .art-parking object { max-width: 152px; height: auto; }
  .art-energy object { max-width: 102px; height: auto; }

  /* Landscape phones are still touch devices. Keep the two-tap Vali boks
     cues even when CSS width is wider than the portrait mobile breakpoint. */
  .box-open-arrow {
    position: absolute;
    left: 50%;
    right: auto;
    bottom: 9px;
    width: 23px;
    height: 23px;
    display: grid;
    place-items: center;
    color: var(--status-secondary);
    opacity: 0;
    transform: translate(-50%, -5px);
    pointer-events: none;
    transition: opacity .2s ease, transform .25s ease;
  }
  .box-open-arrow svg {
    width: 21px;
    height: 21px;
    display: block;
    overflow: visible;
    transform: rotate(90deg);
  }
  .box-open-arrow path {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .box-option.is-touch-selected:not(.is-sold) .box-open-arrow {
    opacity: .92;
    transform: translate(-50%, 0);
    animation: boxOpenArrowHint .72s cubic-bezier(.22,.75,.25,1) .12s 1 both;
  }
  @keyframes boxOpenArrowHint {
    0% { transform: translate(-50%, -4px); }
    48% { transform: translate(-50%, 4px); }
    100% { transform: translate(-50%, 0); }
  }
  .box-option.is-expanded .box-open-arrow,
  .box-option.is-sold .box-open-arrow { opacity: 0; }

  .box-option:not(.is-touch-selected):not(.is-expanded):hover {
    background: var(--pale);
    color: #000;
    box-shadow: none;
  }
  .box-option:not(.is-touch-selected):not(.is-expanded):hover .box-option-summary > span { color: #404038; }
  .box-option:not(.is-touch-selected):not(.is-expanded):hover .box-option-status { opacity: 0; }
  .box-polygon:not(.is-touch-selected):hover {
    fill: rgba(245,245,245,0);
    stroke: rgba(77,140,63,0);
  }
  .box-back-arrow {
    left: 50%;
    right: auto;
    bottom: 18px;
    transform: translate(-50%, 5px);
  }
  .box-back-arrow svg { transform: rotate(90deg); }
  .box-option.is-expanded .box-back-arrow { transform: translate(-50%, 0); }
}

/* v46 — phone landscape image scale + desktop-like Group 1000004250.
   In a short landscape viewport, large media should never become taller than
   the visible page area. Keep the metric composition proportional to desktop. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 950px) {
  /* Keep photographs inside the visible landscape viewport. Cropping is
     intentional here: preserving the portrait/tablet width while limiting
     height makes the page feel dramatically oversized on a phone. */
  .hero {
    height: min(50vw, calc(100svh - 16px));
    max-height: calc(100svh - 16px);
    aspect-ratio: auto;
  }
  .hero > img {
    object-position: 50% 60%;
  }
  .image-card {
    height: min(440px, calc(100svh - 24px));
    max-height: calc(100svh - 24px);
    aspect-ratio: auto;
  }

  /* Landscape phones should follow the same touch-first box-picker flow as
     portrait: all four cards stay visible first, then the render spans the
     full viewport width underneath. */
  .box-picker-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    height: auto;
  }
  .box-list {
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .box-option,
  .box-option:nth-child(n) {
    position: relative;
    top: auto;
    left: auto;
    height: 110px;
    min-height: 110px;
    border-radius: 12px;
    padding: 20px;
  }
  .box-option-summary {
    position: static;
    transform: none;
  }
  .box-option-status {
    top: 0;
    right: 10px;
    width: 18px;
    height: 100%;
    font-size: 14px;
    line-height: 14px;
  }
  .box-option strong {
    font-size: 21px;
  }
  .box-option-summary > span {
    margin-top: 5px;
    font-size: 15px;
  }
  .box-visual {
    width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: 1000 / 718;
  }
  .box-image,
  .box-plan {
    width: 100%;
    height: 100%;
  }
  .box-picker-grid.is-expanded {
    display: block;
  }
  .box-picker-grid.is-expanded .box-list {
    height: auto;
    margin-bottom: 12px;
    display: block;
  }
  .box-picker-grid.is-expanded .box-option:not(.is-expanded) {
    display: none;
  }
  .box-option.is-expanded {
    position: relative;
    height: auto;
    min-height: 575px;
    padding: 28px 24px 66px;
  }
  .box-option.is-expanded .box-option-summary {
    position: static;
  }
  .box-option-status-expanded {
    top: 28px;
    right: 24px;
    font-size: 14px;
    line-height: 14px;
  }
  .box-option-details {
    position: static;
    margin-top: 20px;
    opacity: 0;
    transform: translateY(10px);
  }
  .box-option.is-expanded .box-option-details {
    opacity: 1;
    transform: none;
  }
  .box-price {
    font-size: 38px;
    margin: 20px 0 24px;
  }
  .box-specs {
    margin-top: 18px;
  }
  .box-spec-row {
    min-height: 42px;
    font-size: 14px;
  }
  .box-back-arrow {
    left: 50%;
    right: auto;
    bottom: 20px;
    width: 24px;
    height: 24px;
    transform: translate(-50%, 5px);
  }
  .box-back-arrow svg {
    transform: rotate(90deg);
  }
  .box-option.is-expanded .box-back-arrow {
    transform: translate(-50%, 0);
  }
  .box-picker-grid.is-expanded .box-visual {
    width: 100%;
    aspect-ratio: auto;
    height: 580px;
  }
  .box-plan {
    padding: 18px 16px;
  }
  .box-plan > img {
    width: 100%;
    height: calc(100% - 62px);
    max-height: calc(100svh - 82px);
    object-fit: contain;
  }

  /* Gallery: show one card per viewport in landscape too. */
  .gallery-stack {
    gap: 12px;
    padding: 0 16px 18px;
  }
  .gallery-panel {
    flex: 0 0 calc(100vw - 32px);
    max-width: calc(100vw - 32px);
    max-height: calc(100svh - 20px);
    aspect-ratio: 16 / 10;
  }

  /* Group 1000004250: reproduce the desktop composition as three natural-
     width groups instead of three equal grid columns. This keeps the green
     4 / A / 2 to black-label ratio stable and prevents the last label from
     being pushed outside the viewport on landscape phones. */
  .stats {
    display: flex;
    width: 100%;
    min-height: 146px;
    align-items: end;
    justify-content: space-between;
    gap: clamp(12px, 2vw, 22px);
  }
  .stat {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    height: 146px;
    min-height: 146px;
    align-items: end;
  }
  .stat-big {
    flex: 0 0 auto;
    font-size: clamp(148px, 19vw, 164px);
    line-height: .72;
    letter-spacing: -7px;
  }
  .stat-label,
  .stat-energy .stat-small-top {
    font-size: clamp(15px, 1.9vw, 16px);
    line-height: 1.2;
    letter-spacing: -.25px;
  }
  .stat-label {
    flex: 0 0 auto;
    margin-left: 8px;
    padding-bottom: 12px;
    white-space: nowrap;
  }
  .stat-energy {
    position: relative;
    flex: 0 1 auto;
    justify-content: flex-start;
    padding-left: 0;
  }
  .stat-energy .stat-big {
    margin-left: -8px;
  }
  .stat-energy .stat-small-top {
    position: absolute;
    left: -34px;
    top: 47px;
    margin: 0;
    align-self: auto;
    white-space: nowrap;
  }
  .stat-energy .stat-label {
    margin-left: -10px;
  }
}


/* v57 — standalone personal-data processing principles page. */
.privacy-policy-page {
  min-height: 100vh;
  background: #fff;
  color: var(--text);
}
.privacy-policy-header {
  padding: 28px 0 0;
}
.privacy-policy-header-inner {
  width: min(var(--container), calc(100% - 40px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.privacy-policy-logo { display: block; width: 250px; }
.privacy-policy-logo img { display: block; width: 100%; height: auto; }
.privacy-policy-back {
  min-height: 46px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 999px;
  font-weight: 600;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.privacy-policy-back:hover { color: #fff; background: var(--green); border-color: var(--green); }
.privacy-policy-main {
  width: min(960px, calc(100% - 40px));
  margin: 90px auto 120px;
}
.privacy-policy-main h1 {
  margin: 0 0 18px;
  color: var(--green);
  font-size: clamp(48px, 5vw, 78px);
  line-height: .98;
  letter-spacing: -3px;
  font-weight: 600;
}
.privacy-policy-updated { margin: 0 0 58px; color: #72726c; font-size: 14px; }
.privacy-policy-section { padding: 29px 0; border-top: 1px solid rgba(0,0,0,.10); }
.privacy-policy-section:first-of-type { border-top: 0; padding-top: 0; }
.privacy-policy-section h2 { margin: 0 0 14px; color: var(--green); font-size: 22px; line-height: 1.3; font-weight: 600; }
.privacy-policy-section p,
.privacy-policy-section li { font-size: 17px; line-height: 1.6; }
.privacy-policy-section p { margin: 0 0 12px; }
.privacy-policy-section p:last-child { margin-bottom: 0; }
.privacy-policy-section ul { margin: 8px 0 0; padding-left: 22px; }
.privacy-policy-section li { margin: 7px 0; }
.privacy-policy-section a { text-decoration: underline; text-underline-offset: 2px; }
.privacy-policy-section a:hover { color: var(--green); }
.privacy-policy-note {
  margin-top: 34px;
  padding: 20px 22px;
  border-radius: 15px;
  background: var(--pale);
  font-size: 14px;
  line-height: 1.55;
}
@media (max-width: 820px) {
  .privacy-policy-header { padding-top: 18px; }
  .privacy-policy-header-inner { width: calc(100% - 32px); }
  .privacy-policy-logo { width: 190px; }
  .privacy-policy-back { min-height: 42px; padding-inline: 16px; font-size: 14px; }
  .privacy-policy-main { width: calc(100% - 32px); margin: 62px auto 85px; }
  .privacy-policy-main h1 { font-size: clamp(42px, 12vw, 62px); letter-spacing: -2px; }
  .privacy-policy-updated { margin-bottom: 42px; }
  .privacy-policy-section { padding: 24px 0; }
  .privacy-policy-section h2 { font-size: 20px; }
  .privacy-policy-section p,
  .privacy-policy-section li { font-size: 16px; line-height: 1.55; -webkit-hyphens: auto; hyphens: auto; }
}