/* Salos Pušynas — "Premium 2": quiet luxury. One typeface in light weights, cream ground, deep pine,
   one lake-blue field, and the outline of the site's own pond used as a mask over the project's photographs. */

:root {
  --cream: #f4efe4;
  --surface: #ebe4d4;
  --pine: #1f3a2e;
  --pine-2: #18301f;
  --muted: rgba(31, 58, 46, .76);
  --soft: rgba(31, 58, 46, .78);
  --line: rgba(31, 58, 46, .16);
  --lake: #24435a;
  --on-dark: #f4efe4;
  --on-dark-muted: rgba(244, 239, 228, .72);
  --on-dark-line: rgba(244, 239, 228, .22);
  --free: #5d8a62;
  --reserved: #b4975a;
  --sold: rgba(31, 58, 46, .32);
  --m: clamp(40px, 5vw, 96px);
  --nav: 84px;
  --sec: clamp(104px, 9.5vw, 160px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --pond: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 1020 1040' preserveAspectRatio='none'%3E%3Cpath d='M1000 480C1000 760 860 930 640 955C470 975 360 1000 230 990C80 975 0 800 0 540C0 280 120 70 330 30C520 -5 640 0 760 25C920 60 1000 250 1000 480Z'/%3E%3C/svg%3E");
  --pond-flip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 1020 1040' preserveAspectRatio='none'%3E%3Cpath transform='translate(1000 1000) scale(-1 -1)' d='M1000 480C1000 760 860 930 640 955C470 975 360 1000 230 990C80 975 0 800 0 540C0 280 120 70 330 30C520 -5 640 0 760 25C920 60 1000 250 1000 480Z'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: var(--nav); -webkit-text-size-adjust: 100%; }
body.p2 {
  margin: 0; background: var(--cream); color: var(--pine);
  font-family: 'Hanken Grotesk', system-ui, sans-serif; font-weight: 300; font-size: 18px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
p, h1, h2, h3, figure, ul, dl, dd { margin: 0; padding: 0; }
ul { list-style: none; }
[data-lucide], .lucide { stroke-width: 1.25; }
::selection { background: var(--pine); color: var(--cream); }
:focus-visible { outline: 1.5px solid currentColor; outline-offset: 4px; }

/* ---------- Type ---------- */
.p2-display, .p2-title, .p2-h2, .p2-h3 { text-wrap: balance; }
.p2-body, .p2-lead, .p2-phead-lead { text-wrap: pretty; }
.p2-display {
  font-weight: 200; font-size: clamp(56px, 10.6vw, 172px); line-height: .94; letter-spacing: -.045em; margin: 0;
}
.p2-title { font-weight: 200; font-size: clamp(56px, 6.8vw, 112px); line-height: .96; letter-spacing: -.035em; margin: 0; }
.p2-h2 { font-weight: 300; font-size: clamp(38px, 3.65vw, 58px); line-height: 1.06; letter-spacing: -.025em; margin: 0; }
.p2-h3 { font-weight: 300; font-size: clamp(26px, 2.15vw, 32px); line-height: 1.18; letter-spacing: -.015em; margin: 0; }
.p2-lead { font-weight: 300; font-size: clamp(22px, 1.95vw, 29px); line-height: 1.34; letter-spacing: -.012em; }
.p2-lead-sm { font-size: clamp(20px, 1.6vw, 24px); }
.p2-body { font-size: 18px; line-height: 1.62; color: var(--soft); }
.p2-dark .p2-body, .p2-lake .p2-body { color: var(--on-dark-muted); }

.p2-dark { background: var(--pine); color: var(--on-dark); }
.p2-lake { background: var(--lake); color: var(--on-dark); }

/* ---------- Pills, arrows ----------
   Hover: a fill rises from the bottom edge (transform only). Press: the button gives a little. */
.p2-pill, .p2-arrow { position: relative; overflow: hidden; isolation: isolate; -webkit-tap-highlight-color: transparent; }
.p2-pill::before, .p2-arrow::before {
  content: ''; position: absolute; inset: -1px; z-index: -1; border-radius: inherit;
  background: var(--wipe, var(--pine)); transform: translateY(101%); transition: transform .6s var(--ease);
}
.p2-pill:active, .p2-arrow:active { transform: scale(.97); }
.p2-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 30px;
  border-radius: 999px; border: 1px solid var(--pine); font-size: 16px; font-weight: 400; letter-spacing: .005em;
  cursor: pointer; white-space: nowrap; background: transparent;
  transition: color .45s var(--ease), border-color .45s var(--ease), transform .25s var(--ease);
}
.p2-pill svg { width: 18px; height: 18px; stroke-width: 1.5; transition: transform .45s var(--ease); }
.p2-pill-fill { background: var(--pine); color: var(--cream); --wipe: #2c4f3f; }
.p2-pill-line { color: var(--pine); }
.p2-pill-cream { background: var(--cream); border-color: var(--cream); color: var(--pine); --wipe: var(--surface); }
.p2-pill-line-light { border-color: var(--on-dark-line); color: var(--cream); height: 44px; padding: 0 22px; font-size: 15px; --wipe: var(--cream); }
.p2-pill-block { width: 100%; }

.p2-arrow {
  display: inline-grid; place-items: center; width: 68px; height: 46px; border-radius: 999px;
  border: 1px solid var(--pine); background: transparent; color: var(--pine); cursor: pointer;
  transition: color .45s var(--ease), border-color .45s var(--ease), transform .25s var(--ease);
}
.p2-arrow svg { width: 18px; height: 18px; stroke-width: 1.5; transition: transform .45s var(--ease); }
.p2-arrow-light { border-color: var(--on-dark-line); color: var(--cream); --wipe: var(--cream); }
@media (hover: hover) {
  .p2-pill:hover::before, .p2-arrow:hover::before { transform: none; }
  .p2-pill:hover svg { transform: translateX(4px); }
  .p2-pill-line:hover, .p2-arrow:hover { color: var(--cream); }
  .p2-pill-line-light:hover, .p2-arrow-light:hover { color: var(--pine); border-color: var(--cream); }
  .p2-arrow:hover svg { transform: translateX(2px); }
  .p2-arrow[aria-label*="Ankstesn"]:hover svg, .p2-arrow[aria-label="Atgal"]:hover svg { transform: translateX(-2px); }
}

/* ---------- Pond mask (outline traced from the pond in a1.jpg) ---------- */
.p2-pond {
  position: relative; overflow: hidden;
  -webkit-mask-image: var(--pond); mask-image: var(--pond);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.p2-pond-flip { -webkit-mask-image: var(--pond-flip); mask-image: var(--pond-flip); }
.p2-pond img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Nav ---------- */
.p2-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--nav);
  display: flex; align-items: center; gap: 32px; padding: 0 var(--m);
  background: var(--cream); border-bottom: 1px solid var(--line);
}
.p2-logo {
  display: block; width: 91px; height: 44px; background: var(--pine);
  -webkit-mask: url('/logo-salos-pusynas.png') center / contain no-repeat; mask: url('/logo-salos-pusynas.png') center / contain no-repeat;
}
.p2-logo-light { background: var(--cream); }
.p2-nav-logo { flex-shrink: 0; }
.p2-nav-links { display: flex; align-items: center; gap: 4px; margin-left: 12px; }
.p2-nav-links a {
  font-size: 15.5px; font-weight: 400; padding: 9px 16px; border-radius: 999px; border: 1px solid transparent;
  color: var(--soft); transition: color .3s, border-color .3s; white-space: nowrap;
}
.p2-nav-links a:hover { color: var(--pine); }
.p2-nav-links a.active { color: var(--pine); border-color: rgba(31, 58, 46, .35); }
.p2-nav-end { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.p2-nav-fav {
  position: relative; width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(31, 58, 46, .35);
  background: transparent; display: grid; place-items: center; cursor: pointer; transition: background .3s;
}
.p2-nav-fav svg { width: 17px; height: 17px; fill: none; stroke: var(--pine); stroke-width: 1.5; }
.p2-nav-fav:hover { background: var(--surface); }
.p2-nav-fav b {
  position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  background: var(--pine); color: var(--cream); font-size: 11px; font-weight: 400; line-height: 20px; text-align: center;
}
.p2-nav-fav b[data-count="0"] { display: none; }
.p2-nav-fav b.pulse { animation: p2-pulse .4s var(--ease); }
@keyframes p2-pulse { 50% { transform: scale(1.3); } }
.fav-pop { animation: p2-pulse .35s var(--ease); }

.p2-main { padding-top: var(--nav); }
.page { display: none; }
.page.active { display: block; }
.page.fade-in { animation: p2-page .7s var(--ease); }
@keyframes p2-page { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Section head ---------- */
.p2-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; margin-bottom: 56px; }
.p2-ctrl { display: flex; align-items: center; gap: 12px; }
.p2-count { font-size: 15px; color: var(--muted); margin-right: 16px; font-variant-numeric: tabular-nums; }
.p2-head-note { max-width: 500px; }

/* ---------- Hero ---------- */
.p2-hero { position: relative; height: calc(100vh - var(--nav)); min-height: 640px; max-height: 1100px; overflow: hidden; }
.p2-hero-top {
  position: relative; z-index: 2; display: grid; grid-template-columns: 1fr minmax(0, 400px); align-items: end; gap: 64px;
  padding: clamp(40px, 4.4vw, 72px) var(--m) 0;
}
.p2-line { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.p2-line > span { display: block; }
.p2-hero-side { padding-bottom: 10px; }
.p2-hero-side p { font-size: 19px; line-height: 1.5; color: var(--pine); margin-bottom: 28px; }
.p2-hero-media { position: absolute; inset: 0; background: var(--surface); }
.p2-hero-media::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(244, 239, 228, .96) 0%, rgba(244, 239, 228, .84) 26%, rgba(244, 239, 228, .55) 44%, rgba(244, 239, 228, 0) 62%);
}
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.8s var(--ease-io); }
.hero-slide.active { opacity: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; }
.p2-hero-dots { position: absolute; left: var(--m); bottom: 36px; z-index: 2; display: flex; gap: 10px; }
.hero-dot {
  width: 10px; height: 10px; padding: 0; border-radius: 999px; border: 1px solid var(--cream); background: transparent;
  cursor: pointer; transition: width .6s var(--ease), background .4s;
}
.hero-dot.active { width: 36px; background: var(--cream); }

/* ---------- Intro (pine) ---------- */
.p2-intro { padding: var(--sec) var(--m); }
.p2-intro-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(56px, 6.5vw, 120px); align-items: center; }
.p2-intro-text .p2-lead { margin-bottom: .85em; max-width: 560px; }
.p2-intro-text .p2-small { font-size: 17px; line-height: 1.65; color: var(--on-dark-muted); max-width: 500px; margin-top: 48px; }
.p2-intro-pond { aspect-ratio: 1.42; }
.p2-intro-pond img { transform: scale(1.12); transform-origin: 50% 60%; }

.p2-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: clamp(80px, 8vw, 128px); }
.p2-stats li {
  display: flex; align-items: center; justify-content: center; gap: 16px; height: 100px; padding: 0 28px;
  border: 1px solid var(--on-dark-line); border-radius: 999px; white-space: nowrap;
}
.p2-stats b { font-weight: 200; font-size: clamp(34px, 3vw, 46px); letter-spacing: -.03em; line-height: 1; }
.p2-stats span { font-size: 16px; color: var(--on-dark-muted); line-height: 1.25; }

/* ---------- House types slider ---------- */
.p2-types { padding: var(--sec) var(--m) calc(var(--sec) * .85); }
.p2-track {
  position: relative; height: clamp(440px, 41vw, 680px); overflow: hidden;
  margin-right: calc(-1 * var(--m));
}
.showcase-slide {
  position: absolute; top: 0; bottom: 0; overflow: hidden; cursor: pointer;
  transition: left 1.1s var(--ease-io), width 1.1s var(--ease-io), opacity 1.1s var(--ease-io);
}
.showcase-slide img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 68%; transition: transform 1.4s var(--ease); }
.showcase-slide.sc-center { left: 0; width: 68%; z-index: 2; opacity: 1; cursor: default; }
.showcase-slide.sc-right { left: calc(68% + 24px); width: calc(32% - 24px); z-index: 1; opacity: 1; }
.showcase-slide.sc-right:hover img { transform: scale(1.04); }
.showcase-slide.sc-left, .showcase-slide.sc-hidden { left: -40%; width: 40%; z-index: 0; opacity: 0; }
.p2-sc { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(48px, 6vw, 112px); margin-top: 48px; }
.p2-sc-main .p2-h3 { margin-bottom: 18px; }
.p2-sc-main .p2-body { max-width: 560px; }
.p2-sc-dots { display: flex; gap: 10px; margin-top: 28px; }
.sc-dot { width: 8px; height: 8px; border-radius: 999px; border: 1px solid var(--pine); background: transparent; padding: 0; cursor: pointer; transition: width .5s var(--ease), background .3s; }
.sc-dot.active { width: 28px; background: var(--pine); }
.p2-sc-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.p2-sc-specs { column-gap: 40px; row-gap: 0; border-bottom: 1px solid var(--line); }
.sc-spec { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 17px 0; border-top: 1px solid var(--line); }
.sc-spec-text { font-size: 15px; color: var(--muted); }
.sc-spec-val { font-size: 17px; font-weight: 400; }
.p2-sc-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 32px; }
.p2-sc-price { font-size: 15px; color: var(--muted); display: flex; align-items: baseline; gap: 14px; }
.p2-sc-price strong { font-weight: 300; font-size: 34px; letter-spacing: -.02em; color: var(--pine); }

/* ---------- Houses: plan, filters, rows ---------- */
.p2-houses { background: var(--surface); padding: var(--sec) var(--m); }
.p2-head-top { align-items: flex-end; }
.p2-head-r { max-width: 500px; }
.p2-tally { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.p2-tally li { display: inline-flex; align-items: center; gap: 9px; height: 38px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; font-size: 15px; }
.p2-dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; }
.p2-dot[data-status="free"] { background: var(--free); }
.p2-dot[data-status="reserved"] { background: var(--reserved); }
.p2-dot[data-status="sold"] { background: var(--sold); }

.p2-plan { margin-bottom: 24px; }
.sitemap-wrap { position: relative; }
.sitemap-wrap > img { width: 100%; height: auto; }
.sitemap-overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.sitemap-zone { fill: transparent; stroke: transparent; stroke-width: 1.5; vector-effect: non-scaling-stroke; transition: fill .35s, stroke .35s; cursor: default; }
.sitemap-zone.zone-free { fill: rgba(244, 239, 228, .16); stroke: rgba(244, 239, 228, .95); cursor: pointer; }
.sitemap-zone.zone-reserved { fill: rgba(180, 151, 90, .38); stroke: rgba(244, 239, 228, .6); cursor: pointer; }
.sitemap-zone.zone-sold { fill: rgba(31, 58, 46, .55); stroke: rgba(244, 239, 228, .25); cursor: pointer; }
.sitemap-zone.zone-free:hover, .sitemap-zone.zone-free.p2-hot { fill: rgba(244, 239, 228, .5); }
.sitemap-zone.zone-reserved:hover, .sitemap-zone.zone-reserved.p2-hot { fill: rgba(180, 151, 90, .65); }
.sitemap-zone.zone-sold:hover, .sitemap-zone.zone-sold.p2-hot { fill: rgba(31, 58, 46, .75); }
.sitemap-tooltip {
  position: absolute; z-index: 3; transform: translate(-50%, -110%); pointer-events: none; opacity: 0;
  background: var(--cream); color: var(--pine); border-radius: 999px; padding: 10px 18px; font-size: 15px; white-space: nowrap;
  box-shadow: 0 8px 30px rgba(20, 34, 27, .18); transition: opacity .25s;
}
.sitemap-tooltip.show { opacity: 1; }
.sitemap-tooltip strong { font-weight: 400; margin-right: 6px; }
.sitemap-tooltip em { font-style: normal; color: var(--muted); margin-left: 8px; }
.sitemap-tooltip em::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 9px; margin-right: 7px; vertical-align: 1px; background: var(--free); }
.sitemap-tooltip em[data-status="reserved"]::before { background: var(--reserved); }
.sitemap-tooltip em[data-status="sold"]::before { background: var(--sold); }

.p2-filters {
  display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: clamp(32px, 3.5vw, 56px); align-items: center;
  padding: 26px 40px; background: var(--cream); border-radius: 999px; margin-bottom: 40px;
}
.p2-filter-k { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; color: var(--muted); margin-bottom: 8px; }
.p2-filter-k > span { color: var(--pine); font-weight: 400; }
.p2-range { position: relative; height: 22px; }
.p2-track-line { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(31, 58, 46, .25); }
.p2-fill { position: absolute; top: -1px; height: 3px; background: var(--pine); border-radius: 3px; }
.p2-range input {
  position: absolute; inset: 0; width: 100%; margin: 0; background: none; pointer-events: none;
  -webkit-appearance: none; appearance: none; height: 22px;
}
.p2-range input::-webkit-slider-runnable-track { background: none; height: 22px; }
.p2-range input::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: auto; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%;
  background: var(--cream); border: 1.5px solid var(--pine); cursor: grab; transition: transform .2s;
}
.p2-range input::-webkit-slider-thumb:hover { transform: scale(1.15); }
.p2-range input::-moz-range-thumb { pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: var(--cream); border: 1.5px solid var(--pine); cursor: grab; }
.p2-range input::-moz-range-track { background: none; }
.p2-toggle { display: flex; align-items: center; gap: 14px; cursor: pointer; }
.p2-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.p2-toggle-sw { position: relative; width: 48px; height: 28px; border-radius: 999px; border: 1px solid var(--pine); transition: background .35s; flex-shrink: 0; }
.p2-toggle-sw::after { content: ''; position: absolute; top: 4px; left: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--pine); transition: transform .35s var(--ease), background .35s; }
.p2-toggle input:checked + .p2-toggle-sw { background: var(--pine); }
.p2-toggle input:checked + .p2-toggle-sw::after { transform: translateX(20px); background: var(--cream); }
.p2-toggle input:focus-visible + .p2-toggle-sw { outline: 1.5px solid var(--pine); outline-offset: 3px; }
.p2-toggle-t { font-size: 16px; font-weight: 400; line-height: 1.25; white-space: nowrap; }
.p2-toggle-t small { display: block; font-size: 14px; font-weight: 300; color: var(--muted); }

.p2-rows { border-bottom: 1px solid var(--line); }
.p2-row {
  display: grid; grid-template-columns: 150px 92px minmax(180px, 1.5fr) .7fr .7fr .8fr 1fr 136px 46px;
  gap: 24px; align-items: center; padding: 16px 20px; margin: 0 -20px; border-top: 1px solid var(--line);
  cursor: pointer; border-radius: 4px; transition: background .4s var(--ease);
}
.p2-rows .p2-row:first-child { border-top-color: transparent; }
.p2-row:hover, .p2-row:focus-visible { background: var(--cream); outline: none; }
.p2-row:hover + .p2-row { border-top-color: transparent; }
.p2-row-img { width: 150px; height: 94px; overflow: hidden; }
.p2-row-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; transition: transform 1s var(--ease); }
.p2-row:hover .p2-row-img img { transform: scale(1.06); }
.p2-row-id { font-size: 32px; font-weight: 200; letter-spacing: -.03em; }
.p2-row-type { font-size: 18px; font-weight: 400; line-height: 1.3; }
.p2-row-type small, .p2-row-n small { display: block; font-size: 14px; font-weight: 300; color: var(--muted); }
.p2-row-n { font-size: 18px; line-height: 1.3; }
.p2-row-n small { margin-bottom: 2px; }
.p2-row-price { font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 300; letter-spacing: -.01em; white-space: nowrap; }
.p2-row[data-status="sold"] .p2-row-price { color: var(--muted); }
.p2-row[data-status="sold"] .p2-row-img img { filter: saturate(.4); }
.p2-status {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--line); font-size: 14px; font-weight: 400; white-space: nowrap; justify-self: start;
}
.p2-status::before { content: ''; width: 7px; height: 7px; border-radius: 9px; background: var(--free); }
.p2-status[data-status="reserved"]::before { background: var(--reserved); }
.p2-status[data-status="sold"]::before { background: var(--sold); }
.p2-row-fav {
  width: 46px; height: 46px; border-radius: 999px; border: 1px solid var(--line); background: transparent; cursor: pointer;
  display: grid; place-items: center; transition: border-color .3s, background .3s;
}
.p2-row-fav svg { width: 17px; height: 17px; fill: none; stroke: var(--pine); stroke-width: 1.5; }
.p2-row-fav:hover { border-color: var(--pine); }
.p2-row-fav.fav-active svg { fill: var(--pine); }
.p2-none { display: none; padding: 56px 0; text-align: center; color: var(--muted); font-size: 19px; }

/* ---------- Included (lake field, used once) ---------- */
.p2-incl { padding: var(--sec) var(--m); }
.p2-incl-grid { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(56px, 6vw, 112px); align-items: center; }
.p2-incl-text > .p2-body { max-width: 520px; margin-top: 20px; }
.p2-incl-list { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 48px; margin-top: 64px; }
.p2-incl-list { counter-reset: n; }
.p2-incl-list li { counter-increment: n; padding-top: 20px; border-top: 1px solid var(--on-dark-line); }
.p2-incl-list li::before, .p2-adv-grid li:not(.p2-adv-lead)::before, .p2-hfeat li::before {
  content: counter(n, decimal-leading-zero); display: block; font-size: 14px; font-weight: 400; letter-spacing: .04em;
  font-variant-numeric: tabular-nums; color: var(--on-dark-muted);
}
.p2-incl-list b { display: block; font-size: 20px; font-weight: 400; margin: 22px 0 6px; line-height: 1.25; }
.p2-incl-list span { display: block; font-size: 16px; line-height: 1.5; color: var(--on-dark-muted); }
.p2-incl-pond { aspect-ratio: .95; }
.p2-incl-pond img { object-position: 50% 72%; }

/* ---------- Gallery slider ---------- */
.p2-gslide { padding: var(--sec) var(--m); overflow: hidden; }
.p2-gs-track {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin-right: calc(-1 * var(--m)); padding-right: var(--m); scroll-behavior: smooth;
}
.p2-gs-track::-webkit-scrollbar { display: none; }
.p2-gs-item {
  flex: 0 0 auto; height: clamp(400px, 37vw, 600px); aspect-ratio: 1.5; padding: 0; border: 0; background: var(--surface);
  overflow: hidden; cursor: zoom-in; scroll-snap-align: start;
}
.p2-gs-item:nth-child(3n+2) { aspect-ratio: .8; }
.p2-gs-item img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 66%; transition: transform 1.4s var(--ease); }
.p2-gs-item:hover img { transform: scale(1.04); }

/* ---------- Footer ---------- */
.p2-contact { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(56px, 7vw, 128px); padding: var(--sec) var(--m) calc(var(--sec) * .8); }
.p2-contact-l .p2-h2 { max-width: 560px; }
.p2-contact-l > .p2-body { max-width: 460px; margin-top: 24px; }
.p2-contact-dl { margin-top: 56px; }
.p2-contact-dl > div { display: grid; grid-template-columns: 120px 1fr; gap: 24px; align-items: baseline; padding: 18px 0; border-top: 1px solid var(--on-dark-line); }
.p2-contact-dl > div:last-child { border-bottom: 1px solid var(--on-dark-line); }
.p2-contact-dl dt { font-size: 15px; color: var(--on-dark-muted); }
.p2-contact-dl dd { font-size: 21px; font-weight: 300; }
.p2-contact-dl a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--ease); }
.p2-contact-dl a:hover { background-size: 100% 1px; }
.p2-form-h { font-size: 22px; margin-bottom: 24px; }
.p2-form-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.p2-field { position: relative; display: block; margin-bottom: 14px; }
.p2-field input, .p2-field textarea {
  width: 100%; height: 62px; padding: 26px 22px 8px; border-radius: 16px; border: 1px solid var(--on-dark-line);
  background: transparent; color: var(--cream); font: inherit; font-size: 17px; outline: none; transition: border-color .3s;
}
.p2-field textarea { height: 150px; padding-top: 32px; resize: vertical; }
.p2-field input:focus, .p2-field textarea:focus { border-color: var(--cream); }
.p2-field span {
  position: absolute; left: 23px; top: 20px; font-size: 16px; color: var(--on-dark-muted); pointer-events: none;
  transition: top .3s var(--ease), font-size .3s var(--ease);
}
.p2-field :is(input, textarea):is(:focus, :not(:placeholder-shown)) ~ span { top: 9px; font-size: 12.5px; }
.p2-form-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 10px; }
.p2-form-foot small { font-size: 14px; color: var(--on-dark-muted); max-width: 300px; line-height: 1.45; }
.p2-foot-bottom {
  display: flex; align-items: center; gap: 48px; padding: 28px var(--m) 32px; border-top: 1px solid var(--on-dark-line);
}
.p2-foot-bottom .p2-logo { width: 74px; height: 36px; flex-shrink: 0; }
.p2-foot-links { display: flex; gap: 28px; }
.p2-foot-links a, .p2-foot-up { font-size: 15px; color: var(--on-dark-muted); transition: color .3s; }
.p2-foot-links a:hover, .p2-foot-up:hover { color: var(--cream); }
.p2-foot-legal { margin-left: auto; font-size: 14px; color: var(--on-dark-muted); }
.p2-foot-up { display: inline-flex; align-items: center; gap: 8px; }
.p2-foot-up svg { width: 15px; height: 15px; }

/* ---------- Sub-page head ---------- */
.p2-phead {
  display: grid; grid-template-columns: 1fr minmax(0, 470px); align-items: end; gap: 64px;
  padding: clamp(88px, 8vw, 136px) var(--m) clamp(56px, 5vw, 80px);
}
.p2-phead-lead { font-size: 20px; line-height: 1.5; color: var(--soft); }
.p2-wide { height: clamp(480px, 76vh, 820px); overflow: hidden; }
.p2-wide img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 64%; }

/* Apie */
.p2-statement { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(56px, 6.5vw, 120px); align-items: center; padding: var(--sec) var(--m); }
.p2-statement-pond { aspect-ratio: 1.02; }
.p2-statement-pond img { object-position: 48% 62%; }
.p2-statement-t > .p2-lead { max-width: 720px; }
.p2-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 64px; }
.p2-cols .p2-h3 { margin-bottom: 14px; font-size: 26px; }
.p2-facts { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(56px, 6vw, 112px); align-items: stretch; padding: var(--sec) var(--m); }
.p2-facts-t { display: flex; flex-direction: column; justify-content: center; }
.p2-facts-t > .p2-body { max-width: 560px; margin: 24px 0 56px; }
.p2-stats-4 { margin-top: 0; grid-template-columns: 1fr 1fr; gap: 16px; }
.p2-stats-4 li { height: 88px; justify-content: flex-start; padding: 0 32px; }
.p2-facts-img { min-height: 560px; overflow: hidden; }
.p2-facts-img img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 60%; }
.p2-plans { padding: var(--sec) var(--m); }
.p2-plans-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.p2-plans-pair figure { background: transparent; }
.p2-plans-pair img { width: 100%; height: auto; display: block; background: #fff; border: 1px solid var(--line); }
.p2-cutaway { margin: 0 auto 48px; max-width: 1180px; }
.p2-cutaway img { width: 100%; height: auto; display: block; }
.p2-plans-pair figcaption { background: var(--cream); padding-top: 14px; font-size: 15px; color: var(--muted); }
.p2-endcta { display: flex; align-items: center; justify-content: space-between; gap: 40px; margin-top: calc(var(--sec) * .8); padding-top: 48px; border-top: 1px solid var(--line); }
.p2-endcta-wide { margin: 0; padding: 64px var(--m) var(--sec); border-top: 0; }

/* Privalumai */
.p2-adv { padding: 0 var(--m) var(--sec); }
.p2-adv-grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: clamp(40px, 4vw, 72px); }
.p2-adv-grid li { padding: 40px 0 48px; border-top: 1px solid var(--line); }
.p2-adv-grid li.p2-adv-lead { grid-column: span 2; padding: 0 0 40px; border-top: 0; }
.p2-adv-lead figure { height: 100%; min-height: 300px; overflow: hidden; }
.p2-adv-lead img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.p2-adv-grid { counter-reset: n; }
.p2-adv-grid li:not(.p2-adv-lead) { counter-increment: n; }
.p2-adv-grid li:not(.p2-adv-lead)::before, .p2-hfeat li::before { color: var(--muted); }
.p2-adv-t { font-size: 24px; font-weight: 300; letter-spacing: -.01em; line-height: 1.25; margin: 28px 0 10px; }
.p2-adv-grid p { font-size: 17px; line-height: 1.6; color: var(--soft); max-width: 400px; }
.p2-band { height: clamp(480px, 78vh, 840px); overflow: hidden; }
.p2-band img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 66%; }

/* Vieta */
.p2-where { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(56px, 6.5vw, 120px); align-items: center; padding: 0 var(--m) var(--sec); }
.p2-km li { display: flex; align-items: baseline; gap: 28px; padding: 24px 0; border-top: 1px solid var(--line); }
.p2-km li:last-child { border-bottom: 1px solid var(--line); }
.p2-km b { font-weight: 200; font-size: clamp(40px, 3.6vw, 56px); letter-spacing: -.03em; line-height: 1; min-width: 7ch; }
.p2-km span { font-size: 18px; color: var(--soft); }
.p2-where-l > .p2-body { margin-top: 36px; max-width: 520px; }
.p2-where-pond { aspect-ratio: 1.45; }
.p2-where-pond img { object-position: 40% 50%; transform: scale(1.3); transform-origin: 38% 48%; }
.p2-map { height: clamp(460px, 60vh, 640px); margin: 0 var(--m); }
.p2-map iframe { width: 100%; height: 100%; border: 0; display: block; filter: saturate(.75) sepia(.12); }
.p2-dist { padding: var(--sec) var(--m); }
.p2-dist .p2-h2 { margin-bottom: 56px; }
.p2-dist-grid { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 40px; }
.p2-dist-grid li { padding: 32px 0 40px; border-top: 1px solid var(--line); }
.p2-dist-grid b { display: block; font-size: 20px; font-weight: 400; margin: 0 0 4px; }
.p2-dist-grid span { font-size: 16px; color: var(--soft); }

/* Galerija */
.p2-gal {
  display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: clamp(260px, 23vw, 400px); grid-auto-flow: dense;
  gap: 16px; padding: 0 var(--m) var(--sec);
}
.p2-gal .gi { overflow: hidden; cursor: zoom-in; position: relative; background: var(--surface); }
.p2-gal .gi.wide, .p2-gal .gi.p2-gi-fill { grid-column: span 2; }
.p2-gal .gi.tall { grid-row: span 2; }
.p2-gal .gi button { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.p2-gal .gi img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 66%; transition: transform 1.4s var(--ease); }
.p2-gal .gi:hover img { transform: scale(1.04); }

/* ---------- House detail ---------- */
.p2-hhead { padding: 36px var(--m) 36px; }
.p2-hhead-top { display: flex; align-items: center; gap: 14px; }
.p2-back { height: 46px; padding: 0 22px; font-size: 15px; }
.p2-back:hover svg { transform: translateX(-4px); }
.p2-badge { height: 46px; padding: 0 20px; font-size: 15px; }
.p2-hhead-t { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; margin-top: 28px; }
.p2-hhead-type { font-size: 21px; line-height: 1.45; color: var(--soft); max-width: 460px; text-align: right; }
.p2-hmedia { padding: 0 var(--m); }
.p2-hmedia-img { height: clamp(480px, 74vh, 820px); overflow: hidden; background: var(--surface); }
.p2-hmedia-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 80%; }
.p2-thumbs { display: flex; gap: 12px; margin-top: 12px; }
.p2-thumbs.hd-thumbs-hidden { display: none; }
.hd-thumb { flex: 0 1 132px; min-width: 0; height: 84px; overflow: hidden; cursor: pointer; opacity: .55; transition: opacity .3s; }
.hd-thumb.active, .hd-thumb:hover { opacity: 1; }
.hd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.p2-hbody { display: grid; grid-template-columns: 1fr minmax(0, 440px); gap: clamp(56px, 7vw, 128px); padding: var(--sec) var(--m) calc(var(--sec) * .6); align-items: start; }
.p2-hblock + .p2-hblock { margin-top: 88px; }
.p2-hblock > .p2-h3 { margin-bottom: 28px; }
.p2-spec { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; }
.p2-spec > div { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.p2-spec dt { color: var(--muted); font-size: 16px; }
.p2-spec dd { font-size: 17px; font-weight: 400; text-align: right; }
.p2-hfeat { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 48px; }
.p2-hfeat { counter-reset: n; }
.p2-hfeat li { counter-increment: n; padding-top: 18px; border-top: 1px solid var(--line); }
.p2-hfeat b { display: block; font-size: 19px; font-weight: 400; margin: 18px 0 4px; }
.p2-hfeat span { display: block; font-size: 16px; color: var(--soft); }
.p2-hside { position: sticky; top: calc(var(--nav) + 32px); }
.p2-price { background: var(--surface); border-radius: 32px; padding: 40px; }
.p2-price-k { font-size: 15px; color: var(--muted); }
.p2-price-v { font-size: 52px; font-weight: 200; letter-spacing: -.035em; line-height: 1.1; margin-top: 4px; }
.p2-price-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 32px; }
.p2-price-tags li { height: 36px; padding: 0 16px; display: inline-flex; align-items: center; border: 1px solid rgba(31, 58, 46, .28); border-radius: 999px; font-size: 15px; }
.p2-price .p2-pill + .p2-pill { margin-top: 10px; }
.p2-hfav { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 18px; background: none; border: 0; cursor: pointer; font-size: 15px; padding: 8px; }
.p2-hfav svg { width: 17px; height: 17px; fill: none; stroke: var(--pine); stroke-width: 1.5; }
.p2-hfav.fav-active svg { fill: var(--pine); }
.p2-price-note { text-align: center; font-size: 14px; color: var(--muted); margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.p2-plans-house { padding-top: calc(var(--sec) * .6); padding-bottom: calc(var(--sec) * .7); }

/* ---------- Lightbox ---------- */
.p2-lb {
  position: fixed; inset: 0; z-index: 300; display: none; flex-direction: column; background: #14241c;
  color: var(--cream); opacity: 0; transition: opacity .4s var(--ease);
}
.p2-lb.open { opacity: 1; }
.p2-lb-top { display: flex; align-items: center; justify-content: space-between; padding: 20px var(--m); font-size: 15px; color: var(--on-dark-muted); }
.p2-lb-fig { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 var(--m); }
.p2-lb-fig img { max-width: 100%; max-height: 100%; object-fit: contain; }
.p2-lb-bot { display: flex; justify-content: center; gap: 12px; padding: 24px; }

/* ---------- Motion ---------- */
@keyframes p2-rise { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
@keyframes p2-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes p2-settle { from { transform: scale(1.1); } to { transform: scale(1); } }
@keyframes p2-pond-in { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes p2-unveil { from { opacity: 0; clip-path: inset(10% 4% 10% 4%); } 30% { opacity: 1; } to { opacity: 1; clip-path: inset(0); } }
@keyframes p2-unveil-top { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
@keyframes p2-up { from { transform: translateY(105%); } to { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .js .anim { opacity: 0; }
  .js .anim.visible { animation: p2-rise 1.3s var(--ease) both; }
  /* Photographs open from a narrow band to full frame while the picture settles; 'backwards' hands transform back to hover. */
  .js .anim.anim-img.visible { animation: p2-unveil 1.6s var(--ease) both; }
  .js .anim.anim-img.visible img { animation: p2-settle 2.4s var(--ease) backwards; animation-delay: inherit; }
  .js .p2-hero-media { animation: p2-unveil-top 1.7s var(--ease) both; }
  .js .anim.anim-pond.visible { animation: p2-pond-in 1.8s var(--ease) both; }
  .js .p2-row.anim.visible { animation-duration: .8s; }
  .js .p2-line > span { transform: translateY(105%); animation: p2-up 1.5s var(--ease) .15s forwards; }
  .js .p2-line + .p2-line > span { animation-delay: .32s; }
  .js [data-rise] { opacity: 0; animation: p2-rise 1.3s var(--ease) .8s both; }
  .hero-slide.active img { animation: p2-settle 9s linear both; }
}

/* ---------- Narrow screens: just no overflow ---------- */
@media (max-width: 1400px) {
  .p2-nav { gap: 20px; }
  .p2-nav-links { margin-left: 0; gap: 2px; }
  .p2-nav-links a { padding: 8px 12px; font-size: 15px; }
  .p2-nav-end { gap: 12px; }
}

/* ---------- Menu panel, menu button, phone-only pieces (hidden on desktop) ---------- */
.p2-menu-btn {
  display: none; align-items: center; gap: 10px; height: 44px; padding: 0 18px; border-radius: 999px;
  border: 1px solid rgba(31, 58, 46, .35); background: transparent; color: var(--pine); font-size: 15px; font-weight: 400; cursor: pointer;
}
.p2-burger { position: relative; display: block; width: 18px; height: 8px; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; }
.p2-menu-btn:hover { background: var(--surface); }
.p2-plan-hint, .p2-hbar { display: none; }
html.p2-locked, html.p2-locked body { overflow: hidden; }
.p2-menu {
  position: fixed; inset: 0; z-index: 250; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  background: var(--pine); color: var(--cream); opacity: 0; transform: translateY(-14px);
  transition: opacity .35s var(--ease), transform .5s var(--ease);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
}
.p2-menu[hidden] { display: none; }
.p2-menu.open { opacity: 1; transform: none; }
.p2-menu-top { flex-shrink: 0; height: var(--nav); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--m); border-bottom: 1px solid var(--on-dark-line); }
.p2-menu-top .p2-logo { width: 84px; height: 40px; }
.p2-menu-close {
  display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--on-dark-line); background: transparent; color: var(--cream); font-size: 15px;
}
.p2-menu-close svg { width: 18px; height: 18px; stroke-width: 1.5; }
.p2-menu-links { display: flex; flex-direction: column; padding: 24px var(--m) 32px; }
.p2-menu-links a {
  font-size: clamp(34px, 9.5vw, 56px); font-weight: 200; letter-spacing: -.03em; line-height: 1.1; padding: 12px 0;
  border-bottom: 1px solid var(--on-dark-line); color: rgba(244, 239, 228, .72); transition: color .3s;
}
.p2-menu-links a.active, .p2-menu-links a:hover { color: var(--cream); }
.p2-menu-links a.active::after { content: ''; display: inline-block; width: 10px; height: 10px; margin-left: 16px; border-radius: 9px; background: var(--cream); vertical-align: middle; }
.p2-menu-contact { display: flex; flex-direction: column; padding: 0 var(--m) 24px; }
.p2-menu-contact a { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: 18px; color: var(--cream); }
.p2-menu-contact svg { width: 18px; height: 18px; stroke-width: 1.5; }
.p2-menu-sw { margin-top: auto; padding: 24px var(--m) calc(32px + env(safe-area-inset-bottom)); border-top: 1px solid var(--on-dark-line); }
.p2-menu-sw p { font-size: 14px; color: var(--on-dark-muted); margin-bottom: 12px; }

/* ---------- Laptop / tablet landscape 1024–1279 ---------- */
@media (max-width: 1279px) {
  .p2-nav-sw { display: none; }
  .p2-menu-btn { display: inline-flex; }
  .p2-row { grid-template-columns: 130px 76px minmax(150px, 1.4fr) .6fr .6fr 1fr 128px 46px; gap: 18px; }
  .p2-row > :nth-child(6) { display: none; }
  .p2-row-img { width: 130px; height: 84px; }
  .p2-row-id { white-space: nowrap; }
  .p2-filters { padding: 22px 30px; gap: 28px; }
  .p2-hbody { grid-template-columns: 1fr minmax(0, 380px); }
  .p2-stats li { gap: 12px; padding: 0 18px; }
  .p2-stats span { font-size: 15px; }
  .p2-contact-dl dd { font-size: 19px; }
}

/* ---------- Tablet portrait 768–1023 ---------- */
@media (max-width: 1023px) {
  :root { --nav: 72px; --m: 40px; --sec: 96px; }
  .p2-nav { padding-left: max(var(--m), env(safe-area-inset-left)); padding-right: max(var(--m), env(safe-area-inset-right)); }
  .p2-nav-links { display: none; }
  .p2-nav-end { gap: 10px; }

  /* touch targets for the range thumbs */
  .p2-range, .p2-range input, .p2-range input::-webkit-slider-runnable-track { height: 30px; }
  .p2-range input::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: 1px; }
  .p2-range input::-moz-range-thumb { width: 26px; height: 26px; }
  .p2-toggle-sw { width: 56px; height: 32px; }
  .p2-toggle-sw::after { width: 22px; height: 22px; }
  .p2-toggle input:checked + .p2-toggle-sw::after { transform: translateX(24px); }

  /* hero */
  .p2-hero { height: calc(100svh - var(--nav)); min-height: 600px; max-height: 1180px; }
  .p2-hero-top { grid-template-columns: 1fr; gap: 28px; padding-top: 56px; }
  .p2-display { font-size: clamp(64px, 11.5vw, 96px); }
  .p2-hero-side { max-width: 440px; padding-bottom: 0; }
  .hero-slide img { object-position: 44% 0; }

  /* intro */
  .p2-intro-grid { grid-template-columns: 1fr; gap: 56px; }
  .p2-intro-text .p2-lead { max-width: 640px; }
  .p2-intro-pond { aspect-ratio: 1.6; }
  .p2-stats { grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 64px; }

  /* types: swipe carousel */
  .p2-track {
    height: auto; display: flex; gap: 16px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
    margin: 0 calc(-1 * var(--m)); padding: 0 var(--m); scroll-padding: 0 var(--m); scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .p2-track::-webkit-scrollbar { display: none; }
  .p2-track .showcase-slide {
    position: relative; left: auto !important; width: auto !important; opacity: 1 !important; flex: 0 0 82%; aspect-ratio: 1.45;
    scroll-snap-align: start; transition: none; cursor: default;
  }
  .p2-track .showcase-slide:last-child { margin-right: var(--m); }
  .p2-sc { grid-template-columns: 1fr; gap: 36px; margin-top: 36px; }
  .p2-plans .p2-head { flex-direction: column; align-items: flex-start; gap: 16px; }

  /* houses */
  .p2-head-top { flex-direction: column; align-items: flex-start; gap: 20px; }
  .p2-plan { margin-left: calc(-1 * var(--m)); margin-right: calc(-1 * var(--m)); }
  .p2-filters { grid-template-columns: 1fr 1fr; border-radius: 28px; padding: 26px 28px; gap: 28px 36px; }
  .p2-row { grid-template-columns: 120px 84px 1fr auto auto 46px; gap: 16px; }
  .p2-row-id { font-size: 28px; }
  .p2-row .p2-row-n { display: none; }
  .p2-row-img { width: 120px; height: 78px; }

  /* included */
  .p2-incl-grid { grid-template-columns: 1fr; gap: 56px; }
  .p2-incl-pond { aspect-ratio: 1.5; }
  .p2-incl-list { margin-top: 48px; }

  .p2-gs-item { height: 420px; }

  /* footer */
  .p2-contact { grid-template-columns: 1fr; gap: 64px; }
  .p2-foot-bottom { flex-wrap: wrap; gap: 20px 32px; }
  .p2-foot-legal { order: 5; width: 100%; margin-left: 0; }
  .p2-foot-up { margin-left: auto; }

  /* sub-pages */
  .p2-phead { grid-template-columns: 1fr; gap: 24px; padding-top: 72px; padding-bottom: 48px; }
  .p2-title { font-size: clamp(48px, 10vw, 84px); }
  .p2-wide, .p2-band { height: 58svh; min-height: 380px; }
  .p2-statement { grid-template-columns: 1fr; gap: 56px; }
  .p2-statement-pond { aspect-ratio: 1.5; }
  .p2-facts { grid-template-columns: 1fr; gap: 56px; }
  .p2-facts-img { min-height: 420px; }
  .p2-adv-grid { grid-template-columns: 1fr 1fr; }
  .p2-adv-grid li.p2-adv-lead { grid-column: auto; padding-top: 32px; }
  .p2-adv-lead figure { min-height: 220px; }
  .p2-where { grid-template-columns: 1fr; gap: 56px; }
  .p2-where-pond { aspect-ratio: 1.6; }
  .p2-map { margin: 0; height: 460px; }
  .p2-dist-grid { grid-template-columns: 1fr 1fr; }
  .p2-gal { grid-template-columns: 1fr 1fr; grid-auto-rows: 240px; gap: 12px; }

  /* house */
  .p2-hhead-t { flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 24px; }
  .p2-hhead-type { text-align: left; }
  .p2-hmedia { padding: 0; }
  .p2-hmedia-img { height: 60svh; min-height: 360px; }
  .p2-thumbs { padding: 0 var(--m); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .p2-thumbs::-webkit-scrollbar { display: none; }
  .hd-thumb { flex: 0 0 auto; scroll-snap-align: start; }
  .p2-hbody { grid-template-columns: 1fr; gap: 64px; }
  .p2-hside { position: static; }
  .p2-hbar {
    display: flex; align-items: center; gap: 12px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    padding: 12px max(var(--m), env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(var(--m), env(safe-area-inset-left));
    background: var(--cream); border-top: 1px solid var(--line); box-shadow: 0 -10px 30px rgba(20, 34, 27, .08);
  }
  .p2-hbar-p { flex: 1; min-width: 0; }
  .p2-hbar-p small { display: block; font-size: 14px; color: var(--muted); line-height: 1.2; }
  .p2-hbar-p b { display: block; font-size: 24px; font-weight: 300; letter-spacing: -.02em; line-height: 1.2; white-space: nowrap; }
  .p2-hbar .p2-pill { height: 50px; padding: 0 26px; }
  .p2-hbar-call { width: 50px; height: 50px; flex-shrink: 0; border-radius: 999px; border: 1px solid var(--pine); display: grid; place-items: center; }
  .p2-hbar-call svg { width: 19px; height: 19px; stroke-width: 1.5; }
  body[data-page="house"] .p2-foot-bottom { padding-bottom: calc(32px + 76px + env(safe-area-inset-bottom)); }

  .p2-lb-top { padding: calc(12px + env(safe-area-inset-top)) var(--m) 12px; }
  .p2-lb-fig { padding: 0; }
  .p2-lb-bot { padding: 20px 20px calc(20px + env(safe-area-inset-bottom)); }
}

/* ---------- Phone ≤767 (designed at 390) ---------- */
@media (max-width: 767px) {
  :root { --nav: 64px; --m: 20px; --sec: 72px; }
  body.p2 { font-size: 17px; }
  .p2-nav { gap: 10px; }
  .p2-nav .p2-logo { width: 78px; height: 38px; }
  .p2-nav-end { gap: 8px; }
  .p2-menu-btn { padding: 0 16px; }

  .p2-display { font-size: clamp(44px, 13.4vw, 56px); letter-spacing: -.04em; }
  .p2-title { font-size: clamp(42px, 12.5vw, 52px); }
  .p2-h2 { font-size: clamp(29px, 8.4vw, 34px); }
  .p2-h3 { font-size: 25px; }
  .p2-lead { font-size: 21px; }
  .p2-body { font-size: 17px; }

  .p2-hero { min-height: 560px; }
  .p2-hero-top { gap: 20px; padding-top: 32px; }
  .p2-hero-side p { font-size: 17px; margin-bottom: 20px; }
  .hero-slide img { object-position: 40% 0; }
  .p2-hero-dots { bottom: 20px; }

  .p2-head { margin-bottom: 32px; gap: 16px; }
  .p2-types .p2-ctrl { display: none; }
  .p2-gslide .p2-arrow { display: none; }
  .p2-gslide .p2-pill { height: 44px; padding: 0 18px; font-size: 15px; }

  .p2-intro-text .p2-small { font-size: 16px; margin-top: 32px; }
  .p2-intro-pond { aspect-ratio: 1.25; }
  .p2-stats { gap: 10px; margin-top: 48px; }
  .p2-stats li { flex-direction: column; gap: 6px; height: auto; padding: 20px 10px; border-radius: 32px; white-space: normal; text-align: center; }
  .p2-stats b { font-size: 32px; }
  .p2-stats span { font-size: 14px; }

  .p2-track .showcase-slide { flex-basis: 86%; aspect-ratio: 1.2; }
  .p2-track { gap: 10px; }
  .p2-sc-specs { column-gap: 20px; }
  .sc-spec { flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 0; }
  .sc-spec-text { font-size: 14px; }
  .p2-sc-foot { flex-wrap: wrap; gap: 16px; }
  .p2-sc-price strong { font-size: 28px; }

  .p2-tally li { height: 34px; padding: 0 12px; font-size: 14px; }
  .p2-plan-hint { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); margin-bottom: 10px; }
  .p2-plan-hint svg { width: 16px; height: 16px; stroke-width: 1.5; }
  .p2-plan { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain; }
  .p2-plan::-webkit-scrollbar { display: none; }
  .p2-plan .sitemap-wrap { min-width: 760px; }
  .p2-filters { grid-template-columns: 1fr; padding: 22px 20px; gap: 22px; border-radius: 24px; }

  .p2-row {
    grid-template-columns: 84px minmax(0, 1fr) auto 44px; grid-template-areas: "img id price fav" "img type st fav";
    gap: 2px 12px; padding: 14px 12px; margin: 0 -12px; min-height: 84px;
  }
  .p2-row-img { grid-area: img; width: 84px; height: 60px; }
  .p2-row-id { grid-area: id; font-size: 24px; align-self: end; line-height: 1.1; }
  .p2-row-type { grid-area: type; font-size: 15px; align-self: start; }
  .p2-row-type small { display: none; }
  .p2-row-price { grid-area: price; font-size: 17px; justify-self: end; align-self: end; }
  .p2-row .p2-status { grid-area: st; height: 28px; padding: 0 10px; font-size: 14px; justify-self: end; align-self: start; }
  .p2-row-fav { grid-area: fav; width: 44px; height: 44px; }

  .p2-incl-list { grid-template-columns: 1fr; gap: 28px; }
  .p2-incl-pond { aspect-ratio: 1.15; }
  .p2-gs-track { gap: 12px; }
  .p2-gs-item { height: 300px; }
  .p2-gs-item:nth-child(3n+2) { aspect-ratio: .75; }

  .p2-contact { gap: 48px; }
  .p2-contact-dl { margin-top: 40px; }
  .p2-contact-dl > div { grid-template-columns: 1fr; gap: 2px; padding: 14px 0; }
  .p2-contact-dl dd { font-size: 18px; overflow-wrap: anywhere; }
  .p2-form-two { grid-template-columns: 1fr; gap: 0; }
  .p2-field input, .p2-field textarea { font-size: 17px; }
  .p2-form-foot { flex-direction: column-reverse; align-items: stretch; gap: 14px; }
  .p2-form-foot .p2-pill { width: 100%; height: 56px; }
  .p2-form-foot small { max-width: none; }
  .p2-foot-bottom { flex-direction: column; align-items: flex-start; gap: 20px; padding-top: 32px; }
  .p2-foot-links { flex-wrap: wrap; gap: 4px 20px; }
  .p2-foot-links a { min-height: 40px; display: inline-flex; align-items: center; }
  .p2-foot-up { margin-left: 0; }

  .p2-phead { padding-top: 48px; padding-bottom: 32px; gap: 18px; }
  .p2-phead-lead { font-size: 18px; }
  .p2-wide, .p2-band { height: 50svh; min-height: 320px; }
  .p2-statement { gap: 40px; }
  .p2-statement-pond { aspect-ratio: 1.3; }
  .p2-cols { grid-template-columns: 1fr; gap: 32px; margin-top: 40px; }
  .p2-cols .p2-h3 { font-size: 23px; }
  .p2-facts { gap: 40px; }
  .p2-facts-t > .p2-body { margin: 18px 0 32px; }
  .p2-stats-4 { gap: 10px; }
  .p2-stats-4 li { height: auto; justify-content: center; padding: 18px 10px; }
  .p2-facts-img { min-height: 300px; }
  .p2-plans-pair { grid-template-columns: 1fr; gap: 20px; }
  .p2-endcta { flex-direction: column; align-items: flex-start; gap: 24px; }
  .p2-endcta-wide { padding-top: 40px; }
  .p2-adv-grid { grid-template-columns: 1fr; }
  .p2-adv-grid li { padding: 28px 0 32px; }
  .p2-adv-t { font-size: 22px; margin-top: 18px; }
  .p2-adv-grid p { font-size: 16px; }
  .p2-km li { gap: 16px; padding: 18px 0; }
  .p2-km b { font-size: 40px; min-width: 5.2ch; }
  .p2-km span { font-size: 16px; }
  .p2-where { gap: 40px; }
  .p2-where-pond { aspect-ratio: 1.35; }
  .p2-map { height: 380px; }
  .p2-dist .p2-h2 { margin-bottom: 32px; }
  .p2-dist-grid { column-gap: 20px; }
  .p2-dist-grid li { padding: 24px 0 28px; }
  .p2-dist-grid b { font-size: 17px; }
  .p2-dist-grid span { font-size: 15px; }
  .p2-gal { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 10px; }
  .p2-gal .gi, .p2-gal .gi.wide, .p2-gal .gi.p2-gi-fill { grid-column: auto; grid-row: auto; aspect-ratio: 1.5; }
  .p2-gal .gi.tall { grid-row: auto; aspect-ratio: .9; }

  .p2-hhead { padding: 24px var(--m) 28px; }
  .p2-back, .p2-badge { height: 44px; }
  .p2-hhead-type { font-size: 17px; }
  .p2-hmedia-img { height: 46svh; min-height: 280px; }
  .hd-thumb { width: 96px; height: 64px; }
  .p2-hblock + .p2-hblock { margin-top: 56px; }
  .p2-spec, .p2-hfeat { grid-template-columns: 1fr; }
  .p2-hfeat { gap: 24px; }
  .p2-price { padding: 28px 24px; border-radius: 24px; }
  .p2-price-v { font-size: 42px; }
  .p2-hbar .p2-pill { padding: 0 20px; font-size: 15px; }
  .p2-hbar-p b { font-size: 21px; }
}
@media (max-width: 380px) {
  .p2-row { grid-template-columns: 72px minmax(0, 1fr) auto 44px; }
  .p2-row-img { width: 72px; height: 52px; }
  .p2-menu-btn span { display: none; }
}

/* Privacy links in the form note and the footer legal line */
.p2-form-foot small a, .p2-foot-legal a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .3s; }
.p2-form-foot small a:hover, .p2-foot-legal a:hover { color: var(--cream); }

/* Skip link: first Tab stop, visible only when focused */
.p2-skip {
  position: fixed; left: 16px; top: 12px; z-index: 400; padding: 12px 20px; border-radius: 999px;
  background: var(--pine); color: var(--cream); font-size: 16px; font-weight: 400; transform: translateY(-160%); transition: transform .3s var(--ease);
}
.p2-skip:focus { transform: none; }
.p2-main:focus { outline: none; }

/* ---------- Film: still as the play button, player in a <dialog> ---------- */
.p2-film { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(48px, 6vw, 112px); align-items: center; padding: 0 var(--m) var(--sec); background: var(--pine); color: var(--on-dark); }
.p2-film-text .p2-body { color: var(--on-dark-muted); margin: 24px 0 40px; max-width: 440px; }
.p2-film-still { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; padding: 0; border: 0; border-radius: 4px; overflow: hidden; background: #16291f; cursor: pointer; }
.p2-film-still img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.p2-film-play {
  position: absolute; left: 50%; top: 50%; width: 88px; height: 88px; margin: -44px 0 0 -44px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(244, 239, 228, .92); color: var(--pine);
  transition: transform .45s var(--ease), background-color .45s var(--ease);
}
.p2-film-play svg { margin-left: 4px; }
.p2-film-still:active .p2-film-play { transform: scale(.94); }
.p2-film-still:focus-visible { outline: 2px solid var(--cream); outline-offset: 4px; }
@media (hover: hover) {
  .p2-film-still:hover img { transform: scale(1.04); }
  .p2-film-still:hover .p2-film-play { transform: scale(1.08); background: var(--cream); }
}

@media (max-width: 1023px) {
  .p2-film { grid-template-columns: 1fr; gap: 40px; }
  .p2-film-text { order: -1; }
  .p2-film-text .p2-body { margin: 16px 0 28px; }
}
@media (max-width: 600px) {
  .p2-film-still { aspect-ratio: 4 / 3; }
  .p2-film-play { width: 72px; height: 72px; margin: -36px 0 0 -36px; }
}
@media (prefers-reduced-motion: reduce) { .p2-film-still img, .p2-film-play { transition: none; } }