/* ARIE X landing. Brand: Burnt Clay #B2532A, Black, White, Chalk #F7F7F7,
   Smoke #7F7F7F. Prata for Latin display, Assistant for Hebrew (the face on
   ariedevelopers.com/he). Two families, one accent: clay means "act" or
   "your choice", nothing else. */

:root {
  --sc-canvas: #ffffff;
  --sc-surface: #f7f7f7;
  --sc-ink: #000000;
  --sc-ink-soft: rgba(0, 0, 0, 0.66);
  --sc-accent: #b2532a;
  --sc-accent-ink: #ffffff;
  --sc-font-display: "Assistant", "Arial Hebrew", system-ui, sans-serif;
  --sc-font-text: "Assistant", "Arial Hebrew", system-ui, sans-serif;

  --clay: #b2532a;
  --chalk: #f7f7f7;
  --smoke: #7f7f7f;
  --latin: "Prata", Georgia, serif;
  --hair: rgba(0, 0, 0, 0.12);
  --hair-strong: rgba(0, 0, 0, 0.24);
  --r: 4px;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --sky: #6589b0;
  --bar-h: 64px;
}

html { scroll-padding-top: calc(var(--bar-h) + 12px); }

/* Lenis smooth scroll (its stylesheet, inlined) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
body { font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem); }
[data-sc-progress] { transform-origin: 100% 50%; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; top: -100px; inset-inline-start: 12px; z-index: 100; background: #000; color: #fff; padding: 0.6rem 1rem; border-radius: var(--r); }
.skip:focus { top: 12px; }
.latin { font-family: var(--latin); font-weight: 400; letter-spacing: 0.02em; }
.latin-inline, .num { unicode-bidi: isolate; }
.num { font-variant-numeric: tabular-nums lining-nums; }
.nowrap { white-space: nowrap; }

/* ------------------------------------------------------------ type ---- */
.h2 {
  font-family: var(--sc-font-display);
  font-weight: 700;
  font-size: clamp(2rem, 1.35rem + 2.3vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -0.012em;
  text-wrap: balance;
  margin: 0;
}
.h2--light { color: #fff; }
.body { color: var(--sc-ink-soft); max-width: 54ch; text-wrap: pretty; margin: 0; font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); }
.body--light { color: rgba(255, 255, 255, 0.86); }
.fine { font-size: 0.9rem; color: var(--sc-ink-soft); margin: 0.75rem 0 0; }

/* --------------------------------------------------------- controls --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 52px; padding: 0 1.5rem;
  border: 1px solid transparent; border-radius: var(--r);
  font: 700 1.0625rem/1 var(--sc-font-text);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform 160ms var(--ease), background-color 160ms ease, color 160ms ease, border-color 160ms ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.97); }
.btn--primary { background: var(--clay); color: #fff; }
.btn--sm { min-height: 40px; padding: 0 1rem; font-size: 0.95rem; }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: progress; }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: #000; }
  .link-quiet:hover { text-decoration-color: currentColor; }
}
.link-quiet {
  color: inherit; font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.32em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: text-decoration-color 160ms ease;
}

/* ------------------------------------------------------------- bar ---- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  padding-top: env(safe-area-inset-top, 0px);
  background: #fff; border-bottom: 1px solid var(--hair);
  transform: translateY(-101%);
  transition: transform 280ms var(--ease);
}
.bar.is-on, .bar:focus-within { transform: none; }
.bar__in {
  height: var(--bar-h); display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.5rem);
  max-width: var(--sc-maxw); margin-inline: auto; padding-inline: var(--sc-gutter);
}
.bar__brand { display: inline-flex; align-items: baseline; gap: 0.75rem; text-decoration: none; color: #000; margin-inline-end: auto; }
.bar__brand .latin { font-size: 1.35rem; letter-spacing: 0.06em; }
.bar__level {
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; color: var(--sc-ink-soft);
  padding-inline-start: 0.75rem; border-inline-start: 1px solid var(--hair-strong);
  min-width: 4.5em;
}
.bar__nav { display: flex; gap: clamp(1rem, 2vw, 2rem); }
.bar__nav a { color: #000; text-decoration: none; font-weight: 600; font-size: 0.98rem; padding-block: 0.5rem; }
.bar__nav a:hover { text-decoration: underline; text-underline-offset: 0.4em; }
.bar__menu { display: none; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; place-items: center; }
.bar__menu-lines, .bar__menu-lines::before { display: block; width: 22px; height: 1.5px; background: #000; position: relative; transition: transform 200ms var(--ease); }
.bar__menu-lines::before { content: ""; position: absolute; top: 7px; }
.bar__menu-lines { transform: translateY(-3.5px); }
.bar__menu[aria-expanded="true"] .bar__menu-lines { transform: rotate(45deg); }
.bar__menu[aria-expanded="true"] .bar__menu-lines::before { transform: translateY(-7px) rotate(-90deg); }
.menu {
  display: grid; gap: 0.25rem; padding: 0.5rem var(--sc-gutter) 1.25rem;
  background: #fff; border-bottom: 1px solid var(--hair);
  transform-origin: top center;
  transition: opacity 200ms var(--ease), transform 200ms var(--ease);
}
.menu[hidden] { display: none; }
.menu.is-entering { opacity: 0; transform: translateY(-6px); }
.menu a:not(.btn) { color: #000; text-decoration: none; font-size: 1.25rem; font-weight: 600; padding: 0.7rem 0; border-bottom: 1px solid var(--hair); }
.menu .btn { margin-top: 1rem; }
@media (max-width: 1099px) {
  .bar__nav { display: none; }
  .bar__menu { display: grid; }
}
@media (max-width: 760px) {
  .bar .btn--sm { display: none; }
}

/* ------------------------------------------------------------ hero ---- */
/* Geometry comes from site.js (--roof, --scene-w, height) so the roofline
   always lands just under the copy. These are the no-JS defaults. */
.hero {
  --scene-w: 100vw; --cx: 0.5; --roof: 60svh;
  position: relative; height: 112svh; min-height: 620px;
  overflow: clip; background: var(--sky); color: #000;
}
.hero__scene {
  position: absolute; width: var(--scene-w); aspect-ratio: 3 / 2;
  left: calc(50% - var(--scene-w) * var(--cx));
  top: calc(var(--roof) - var(--scene-w) * 0.24667);
  pointer-events: none; will-change: transform;
}
.hero__scene img { width: 100%; height: 100%; max-width: none; }
.hero__sky { z-index: 1; transform-origin: 50% 40%; }
.hero__sky img { -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 3%, #000 16%); mask-image: linear-gradient(to bottom, transparent 0, transparent 3%, #000 16%); }
.hero__front { z-index: 3; transform-origin: 50% 80%; }
.hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: clamp(4rem, 14vh, 9rem); z-index: 4; pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.85) 70%, #fff);
}
.hero__top {
  position: absolute; z-index: 4; inset: 0 0 auto 0;
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: clamp(1.25rem, 3vh, 2rem) var(--edge-start, var(--sc-gutter)) 0 var(--sc-gutter);
}
.hero__logo { width: 128px; height: auto; }
.hero__nav { display: flex; gap: 1.75rem; padding-top: 0.5rem; }
.hero__nav a { color: #000; text-decoration: none; font-weight: 600; }
.hero__nav a:hover { text-decoration: underline; text-underline-offset: 0.4em; }
.hero__copy {
  position: absolute; z-index: 2;
  inset-inline-start: var(--edge-start, var(--sc-gutter));
  top: calc(clamp(1.25rem, 3vh, 2rem) + 99px + clamp(1.5rem, 4vh, 3rem));
  width: min(46rem, calc(100% - var(--edge-start, var(--sc-gutter)) - var(--sc-gutter)));
  will-change: transform;
}
.hero__eyebrow { font-size: 0.8rem; letter-spacing: 0.16em; margin: 0 0 1rem; direction: ltr; text-align: right; }
.hero__title {
  font-weight: 700; margin: 0;
  font-size: clamp(2.35rem, 1.1rem + 3.4vw, 4.4rem);
  line-height: 1.02; letter-spacing: -0.015em;
}
.hero__sub { margin: 1.1rem 0 0; font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.25rem); max-width: 40ch; text-wrap: pretty; color: rgba(0, 0, 0, 0.82); }
.hero__price { margin: 0.6rem 0 0; font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.25rem); font-weight: 600; }
.hero__price b { font-weight: 800; }
.hero__vat { font-weight: 500; color: #000; white-space: nowrap; }
.hero__actions { display: flex; align-items: center; gap: 1.5rem; margin-top: 1.6rem; flex-wrap: wrap; }
.hero__actions .link-quiet { color: #000; }
@media (max-width: 760px) {
  .hero__nav { display: none; }
  .hero__logo { width: 128px; }
  .hero__eyebrow { font-size: 0.72rem; letter-spacing: 0.12em; }
  .hero__actions { gap: 1.1rem; }
}

/* ----------------------------------------------------------- glance --- */
.glance { padding-block: clamp(4rem, 8vw, 7.5rem) clamp(3rem, 6vw, 5.5rem); background: #fff; }
.glance__lede {
  font-weight: 500; font-size: clamp(1.4rem, 1.05rem + 1.3vw, 2.3rem); line-height: 1.32;
  letter-spacing: -0.005em; max-width: 34ch; margin: 0; text-wrap: pretty;
}
.ledger { list-style: none; padding: 0; margin: clamp(2.5rem, 5vw, 4rem) 0 0; display: flex; flex-wrap: wrap; border-top: 1px solid var(--hair); }
.ledger li { flex: 1 1 0; min-width: 11rem; padding: 1.1rem 0 0.25rem; padding-inline-end: 1.25rem; font-size: 1.05rem; color: var(--sc-ink-soft); }
.ledger li + li { padding-inline-start: 1.25rem; border-inline-start: 1px solid var(--hair); }
.ledger b { display: block; color: #000; font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.85rem); font-weight: 700; line-height: 1.2; margin-bottom: 0.15rem; }
@media (max-width: 760px) {
  .ledger { display: grid; grid-template-columns: 1fr 1fr; }
  .ledger li { min-width: 0; padding: 1rem 0 1rem; border-bottom: 1px solid var(--hair); }
  .ledger li + li { padding-inline-start: 0; border-inline-start: 0; }
  .ledger li:nth-child(even) { padding-inline-start: 1rem; border-inline-start: 1px solid var(--hair); }
  .ledger li:last-child { grid-column: 1 / -1; border-bottom: 0; }
}

/* ----------------------------------------------------------- inside --- */
.inside { background: var(--chalk); padding-bottom: var(--sc-section); }
.inside__lobby { margin: 0; height: min(82svh, 58vw); overflow: hidden; }
.inside__lobby img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.inside__grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem);
  padding-top: clamp(3.5rem, 7vw, 6.5rem);
}
.inside__head .body { margin-top: 1rem; }
.spec { margin: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(1.5rem, 3vw, 3rem); }
.spec > div { padding: 1rem 0; border-top: 1px solid var(--hair); }
.spec dt { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.02em; color: var(--sc-ink-soft); }
.spec dd { margin: 0.25rem 0 0; font-weight: 500; line-height: 1.45; }
figcaption { font-size: 0.85rem; color: var(--sc-ink-soft); margin-top: 0.6rem; }

/* Interiors row: the front panel takes most of the width, the rest narrow
   to slices beside it. Width moves on flex-grow, eased; the image inside is
   pinned at its own size so it never rescales, only reveals. */
.rooms { margin-top: clamp(3rem, 6vw, 5.5rem); }
.rooms__row { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(0.4rem, 0.7vw, 0.75rem); height: clamp(24rem, 70svh, 44rem); }
.rooms__item { flex: 1 1 0; min-width: 0; transition: flex-grow 650ms cubic-bezier(0.23, 1, 0.32, 1); }
.rooms__item.is-front { flex-grow: 7; }
.rooms__btn {
  position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer;
  border-radius: var(--r); overflow: hidden; background: #e8e6e3;
}
.rooms__btn picture, .rooms__btn img {
  position: absolute; top: 0; bottom: 0; left: 50%; height: 100%;
  width: auto; min-width: 100%; max-width: none; aspect-ratio: 4 / 5; transform: translateX(-50%);
}
.rooms__btn img { object-fit: cover; transition: filter 450ms ease; }
.rooms__item:not(.is-front) .rooms__btn img { filter: saturate(0.9) brightness(0.9); }
.rooms__btn::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 42%; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);
  opacity: 0; transition: opacity 450ms ease;
}
.rooms__cap {
  position: absolute; z-index: 1; inset-inline-start: 1.1rem; bottom: 1rem;
  color: #fff; font-weight: 700; font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.35rem);
  opacity: 0; transform: translateY(6px); transition: opacity 400ms ease, transform 500ms cubic-bezier(0.23, 1, 0.32, 1);
  white-space: nowrap;
}
.rooms__item.is-front .rooms__btn::after { opacity: 1; }
.rooms__item.is-front .rooms__cap { opacity: 1; transform: none; transition-delay: 180ms; }
.rooms__btn:focus-visible { outline: 3px solid var(--clay); outline-offset: 3px; }
.rooms__note { margin: 0.9rem 0 0; font-size: 0.85rem; color: var(--sc-ink-soft); }
.rooms__nav { display: none; }
@media (prefers-reduced-motion: reduce) {
  .rooms__item, .rooms__btn img, .rooms__btn::after, .rooms__cap { transition: none; }
}
/* phones: a swipeable row of equal cards, each with its caption */
@media (max-width: 760px) {
  .rooms__row {
    height: auto; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0.75rem;
    margin-inline: calc(-1 * var(--sc-gutter)); padding-inline: var(--sc-gutter); scrollbar-width: none;
  }
  .rooms__row::-webkit-scrollbar { display: none; }
  .rooms__item, .rooms__item.is-front { flex: 0 0 84%; scroll-snap-align: center; }
  .rooms__btn { height: auto; aspect-ratio: 4 / 5; cursor: default; }
  .rooms__btn picture, .rooms__btn img { height: 100%; }
  .rooms__btn::after, .rooms__item:not(.is-front) .rooms__btn::after { opacity: 1; }
  .rooms__cap, .rooms__item:not(.is-front) .rooms__cap { opacity: 1; transform: none; }
  .rooms__item:not(.is-front) .rooms__btn img { filter: none; }
  /* arrows for a mouse or a trackpad, and to show there is more to the side */
  .rooms__nav { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin-top: 1rem; }
  .rooms__arrow {
    width: 44px; height: 44px; display: grid; place-items: center; padding: 0; cursor: pointer;
    border: 1px solid var(--hair-strong); border-radius: 50%; background: #fff; color: #000;
    transition: transform 160ms var(--ease), opacity 160ms ease, border-color 160ms ease;
  }
  .rooms__arrow svg { width: 20px; height: 20px; }
  .rooms__arrow:active { transform: scale(0.94); }
  .rooms__arrow:disabled { opacity: 0.35; cursor: default; }
  .rooms__arrow:focus-visible { outline: 3px solid var(--clay); outline-offset: 2px; }
  .rooms__count { min-width: 4.5em; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--sc-ink-soft); }
  .rooms__note { text-align: center; }
}

@media (max-width: 860px) {
  .inside__grid { grid-template-columns: 1fr; gap: 2rem; }
  .inside__lobby { height: 62svh; }
}
@media (max-width: 560px) { .spec { grid-template-columns: 1fr; } }

/* ------------------------------------------------------- residences --- */
.res { background: #fff; padding-block: var(--sc-section); }
.res__head { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.res__head .body { margin-top: 0.9rem; }
.res__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: start; }
.res__panel { grid-column: 1; grid-row: 1; }
.res__visual { grid-column: 2; grid-row: 1; display: grid; gap: clamp(1.25rem, 2vw, 2rem); }

.facade { position: relative; margin: 0; border-radius: var(--r); overflow: hidden; background: #0d1520; }
.facade img { width: 100%; height: auto; }
.facade__floors { position: absolute; inset: 0; width: 100%; height: 100%; }
.floor-poly { fill: rgba(255, 255, 255, 0); stroke: rgba(255, 255, 255, 0); stroke-width: 2; vector-effect: non-scaling-stroke; cursor: pointer; transition: fill 180ms ease, stroke 180ms ease; }
.floor-poly.is-hover { fill: rgba(255, 255, 255, 0.12); stroke: rgba(255, 255, 255, 0.6); }
.floor-poly.is-active { fill: rgba(178, 83, 42, 0.32); stroke: #b2532a; stroke-width: 3; }
.floor-poly.is-flash { fill: rgba(255, 255, 255, 0.22); }
.floor-label { fill: #fff; font: 700 34px var(--sc-font-text); pointer-events: none; opacity: 0.78; }
.floor-label.is-active { opacity: 1; }

.plan { margin: 0; }
.plan__frame { position: relative; background: #fff; border: 1px solid var(--hair); border-radius: var(--r); overflow: hidden; }
.plan__frame img { width: 100%; height: auto; transition: opacity 200ms ease; }
.plan__frame.is-swapping img { opacity: 0.25; }
.plan__marks { position: absolute; inset: 0; width: 100%; height: 100%; }
.mark { cursor: pointer; }
.mark circle.mark__dot { fill: #fff; stroke: #000; stroke-width: 3; transition: fill 160ms ease, stroke 160ms ease; }
.mark text { fill: #000; font-weight: 700; font-family: var(--sc-font-text); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.mark circle.mark__ring { fill: none; stroke: #b2532a; stroke-width: 3; opacity: 0; transition: opacity 200ms ease, transform 260ms var(--ease); transform-box: fill-box; transform-origin: center; transform: scale(0.85); }
.mark.is-reserved { cursor: default; }
.mark.is-reserved circle.mark__dot { fill: #f7f7f7; stroke: #7f7f7f; stroke-dasharray: 6 6; }
.mark.is-reserved text { fill: #5e5e5e; }
.mark.is-active circle.mark__dot { fill: #b2532a; stroke: #b2532a; }
.mark.is-active text { fill: #fff; }
.mark.is-active circle.mark__ring { opacity: 0.55; transform: scale(1); }
@media (hover: hover) and (pointer: fine) {
  .mark:not(.is-reserved):not(.is-active):hover circle.mark__dot { stroke: #b2532a; }
}
.plan__cap { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

.floors { display: grid; gap: 0.5rem; }
.floor-btn {
  display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 1rem;
  width: 100%; padding: 1rem 1.15rem; text-align: start;
  background: #fff; color: #000; border: 1px solid var(--hair-strong); border-radius: var(--r);
  cursor: pointer; transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms var(--ease);
}
.floor-btn:active { transform: scale(0.985); }
.floor-btn__n { font-weight: 700; font-size: 1.15rem; }
.floor-btn__meta { color: var(--sc-ink-soft); font-size: 0.95rem; }
.floor-btn__from { font-weight: 600; font-size: 0.95rem; }
.floor-btn[aria-checked="true"] { background: #000; color: #fff; border-color: #000; }
.floor-btn[aria-checked="true"] .floor-btn__meta { color: rgba(255, 255, 255, 0.72); }
@media (hover: hover) and (pointer: fine) {
  .floor-btn[aria-checked="false"]:hover { border-color: #000; }
}

.units { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.units__head, .unit {
  display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) 5.4rem 6.6rem; gap: 0.75rem; align-items: center;
}
.units__head { font-size: 0.8rem; font-weight: 700; color: var(--sc-ink-soft); padding: 0 0.6rem 0.6rem; border-bottom: 1px solid var(--hair-strong); }
.units__head span:nth-child(n+3), .unit > :nth-child(n+3) { text-align: end; }
.unit {
  width: 100%; padding: 0.85rem 0.6rem; background: none; border: 0; border-bottom: 1px solid var(--hair);
  text-align: start; color: #000; cursor: pointer; border-radius: var(--r);
  transition: background-color 160ms ease, box-shadow 160ms ease;
}
.unit__no { font-weight: 800; font-size: 1.1rem; }
.unit__type { font-weight: 500; line-height: 1.3; }
.unit__tag { display: block; font-size: 0.8rem; color: var(--sc-ink-soft); }
.unit__area { font-variant-numeric: tabular-nums; line-height: 1.25; }
.unit__area small { display: block; font-size: 0.78rem; color: var(--sc-ink-soft); }
.unit__price { font-weight: 700; }
.unit[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--clay); background: rgba(178, 83, 42, 0.05); }
.unit[aria-checked="true"] .unit__no { color: var(--clay); }
.unit.is-reserved { cursor: default; color: rgba(0, 0, 0, 0.62); }
.unit.is-reserved .unit__price { font-weight: 500; }
@media (hover: hover) and (pointer: fine) {
  .unit:not(.is-reserved):not([aria-checked="true"]):hover { background: var(--chalk); }
}
.pick { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--hair-strong); display: grid; gap: 1rem; }
.pick__line { margin: 0; font-weight: 600; line-height: 1.45; transition: opacity 160ms ease; }
.pick__line.is-changing { opacity: 0.35; }
.pick__line small { display: block; font-weight: 500; color: var(--sc-ink-soft); font-size: 0.9rem; }
.pick .btn { justify-self: start; }

@media (max-width: 960px) {
  .res__grid, .res__visual, .res__panel { display: contents; }
  .res__grid > *, .res__visual > *, .res__panel > * { grid-column: auto; }
  .res .sc-wrap { display: flex; flex-direction: column; }
  .res__head { order: 0; }
  .facade { order: 1; }
  .floors { order: 2; margin-top: 1rem; grid-template-columns: repeat(3, 1fr); }
  .plan { order: 3; margin-top: 1.25rem; }
  .units { order: 4; }
  .pick { order: 5; }
  .floor-btn { grid-template-columns: 1fr; gap: 0.15rem; padding: 0.8rem 0.75rem; text-align: center; }
  .floor-btn__meta, .floor-btn__from { font-size: 0.82rem; }
  .pick .btn { justify-self: stretch; }
}
@media (max-width: 420px) {
  .units__head, .unit { grid-template-columns: 2.8rem minmax(0, 1fr) 4.6rem 5.9rem; gap: 0.5rem; }
  .units__head, .unit { padding-inline: 0.35rem; }
}

/* ------------------------------------------------------------ roof ---- */
/* No pin. site.js eases the image's drift and push-in toward scroll targets,
   so the motion carries a little inertia instead of tracking the wheel. */
.roof { position: relative; height: 128svh; min-height: 680px; overflow: clip; background: #fff; color: #fff; }
.roof__media { position: absolute; inset: -9% 0; will-change: transform; transform-origin: 50% 60%; }
.roof__media img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; max-width: none; }
.roof__haze {
  position: absolute; inset: 0 0 auto 0; height: 42svh; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, #fff 0%, rgba(255, 255, 255, 0.72) 30%, rgba(255, 255, 255, 0.22) 65%, rgba(255, 255, 255, 0));
}
.roof__scrim {
  position: absolute; inset: auto 0 0 0; height: 62%; z-index: 2; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.38) 38%, transparent 100%);
}
.roof__copy { position: absolute; z-index: 3; inset-inline: 0; bottom: clamp(3rem, 12svh, 8rem); }
.roof__copy > * { max-width: 40rem; }
.roof__copy .body { margin-top: 0.9rem; }
.roof__copy[data-sc-stagger] > * { transition-duration: 1000ms; }
@media (max-width: 760px) {
  .roof { height: 112svh; }
  .roof__media img { object-position: 50% 50%; }
  .roof__haze { height: 30svh; }
}

/* -------------------------------------------------------- location ---- */
.loc { background: #fff; padding-bottom: var(--sc-section); }
.loc__map { position: relative; margin: 0; }
.loc__map img { width: 100%; height: auto; }
.loc__marks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* Thin white marks that keep their weight at any zoom, and small dark labels
   that sit into the photograph. --inv undoes the zoom so labels keep their size. */
.loc__stem, .loc__line, .loc__head { fill: none; stroke: #fff; vector-effect: non-scaling-stroke; }
.loc__stem { stroke-width: 1.25px; }
.loc__dot { fill: #fff; stroke: rgba(12, 20, 32, 0.45); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.loc__line { stroke-width: 1.25px; stroke-opacity: 0.8; stroke-dasharray: 4 6; }
.loc__head { stroke-width: 1.25px; stroke-opacity: 0.8; stroke-linejoin: round; }
.loc__tag {
  position: absolute; transform: translate(-50%, -50%) scale(var(--inv, 1));
  background: rgba(12, 20, 32, 0.62); color: #fff; padding: 0.24em 0.7em; border-radius: var(--r);
  font-weight: 500; font-size: clamp(0.72rem, 0.58rem + 0.45vw, 0.95rem); white-space: nowrap;
  transition: opacity 320ms ease;
}
.loc__tag.is-hidden { opacity: 0; }
.loc__tag--x { left: 51.7%; top: 66.2%; font-weight: 400; letter-spacing: 0.06em; }
.loc__tag--sea { left: 51.7%; top: 40%; }
.loc__tag--city { left: 4%; top: 71.2%; transform: translate(0, -50%) scale(var(--inv, 1)); }
/* The zoom needs a mouse or a trackpad: anywhere else this stays a plain image. */
@media (min-width: 761px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .loc__pin { height: 220vh; height: 220lvh; }
  .loc__stage { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: clip; background: #fff; }
  .loc__map {
    position: absolute; left: 50%; top: 50%; width: max(100vw, 150vh); aspect-ratio: 3 / 2;
    transform: translate(-50%, -50%); transform-origin: 51.7% 77.2%; will-change: transform;
  }
  .loc__tag--city { left: 23%; }
}
.loc__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); padding-top: clamp(3rem, 6vw, 5.5rem); }
.loc__grid .body { margin-top: 1rem; }
.dist { margin: 0; }
.dist > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--hair); }
.dist > div:first-child { border-top: 1px solid var(--hair-strong); }
.dist dt { font-weight: 500; }
.dist dd { margin: 0; color: var(--sc-ink-soft); white-space: nowrap; }
.dist dd b { color: #000; font-size: 1.5rem; font-weight: 700; }
@media (max-width: 860px) { .loc__grid { grid-template-columns: 1fr; gap: 2rem; } }

/* ------------------------------------------------------- developer ---- */
.dev { background: #000; color: #fff; padding-block: clamp(6rem, 14vw, 12rem); }
.dev__in { display: grid; justify-items: start; gap: clamp(1.5rem, 3.5vh, 2.5rem); }
.dev__logo { width: 128px; height: auto; filter: brightness(0) invert(1); }
.dev__line { display: block; }
.dev__tag { margin: 0; font-weight: 700; font-size: clamp(2.2rem, 1.1rem + 3.9vw, 5.25rem); line-height: 1.05; letter-spacing: -0.015em; }
.dev__facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; border-top: 1px solid rgba(255, 255, 255, 0.22); width: 100%; }
.dev__facts li { flex: 1 1 14rem; padding: 1rem 0 0; padding-inline-end: 1.5rem; color: rgba(255, 255, 255, 0.74); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); }
.dev__facts b { color: #fff; font-weight: 800; }
.dev__arch { margin: 0; color: rgba(255, 255, 255, 0.66); font-size: 0.95rem; }
.dev [data-sc-stagger] > * { transition-duration: 800ms; }
@media (max-width: 760px) { .dev__facts li { flex-basis: 100%; padding-top: 0.75rem; } }

/* --------------------------------------------------------- process ---- */
.proc { background: #fff; padding-block: var(--sc-section); }
.proc__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.proc__head { position: sticky; top: calc(var(--bar-h) + 2rem); }
.proc__head .body { margin-top: 1rem; }
.steps { list-style: none; margin: 0; padding: 0; }
.steps li { display: grid; grid-template-columns: 3.75rem minmax(0, 1fr); gap: 1rem; padding: 1.6rem 0; border-top: 1px solid var(--hair); }
.steps li:last-child { border-bottom: 1px solid var(--hair); }
.steps__n { font-size: 2.4rem; line-height: 1; padding-top: 0.15rem; }
.steps h3 { margin: 0; font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); font-weight: 700; }
.steps p { margin: 0.4rem 0 0; color: var(--sc-ink-soft); max-width: 52ch; }
@media (max-width: 860px) {
  .proc__grid { grid-template-columns: 1fr; gap: 2rem; }
  .proc__head { position: static; }
}

/* --------------------------------------------------------- contact ---- */
.contact { background: var(--chalk); padding-block: var(--sc-section); }
.contact__form-col { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; column-gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.contact__form-col > .h2 { grid-column: 1; grid-row: 1; }
.contact__form-col > .body { grid-column: 1; grid-row: 2; margin-top: 1rem; }
.contact__form-col > .form { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; margin-inline-end: max(0px, calc(76px - var(--sc-gutter))); }
.form { margin-top: clamp(1.75rem, 3vw, 2.5rem); display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1rem; max-width: 40rem; }
.field { grid-column: 1 / -1; display: grid; gap: 0.4rem; }
.field--half { grid-column: auto; }
.field label { font-weight: 600; font-size: 0.98rem; }
.field__opt { font-weight: 400; color: var(--sc-ink-soft); }
.field input[type="text"], .field input[type="tel"], .field input[type="email"], .field select {
  width: 100%; min-height: 52px; padding: 0.7rem 0.95rem;
  font-size: 1.0625rem; background: #fff; color: #000;
  border: 1px solid rgba(0, 0, 0, 0.3); border-radius: var(--r);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.field input[dir="ltr"] { text-align: right; }
.field input:focus-visible, .field select:focus-visible { outline: none; border-color: #000; box-shadow: 0 0 0 3px rgba(178, 83, 42, 0.35); }
.field [aria-invalid="true"] { border-color: var(--clay); box-shadow: 0 0 0 1px var(--clay); }
.field__err { margin: 0; color: var(--clay); font-weight: 600; font-size: 0.92rem; }
.field--check { grid-template-columns: auto 1fr; align-items: start; gap: 0.75rem; }
.field--check input { width: 22px; height: 22px; margin: 0.15rem 0 0; accent-color: var(--clay); }
.field--check label { font-weight: 400; line-height: 1.5; }
.field--check .field__err { grid-column: 2; }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.form .btn { grid-column: 1 / -1; margin-top: 0.4rem; }
.form__status { grid-column: 1 / -1; padding: 1rem 1.1rem; border-radius: var(--r); background: #fff; border: 1px solid var(--hair-strong); line-height: 1.55; }
.form__status.is-error { border-color: var(--clay); }
.form__status a { font-weight: 700; }
.form.is-done > :not(.form__status) { display: none; }
.form.is-done .form__status { padding: 1.5rem; }
.form__status h3 { margin: 0 0 0.4rem; font-size: 1.35rem; }
.form__status p { margin: 0; }
@media (max-width: 860px) {
  .contact__form-col { display: block; }
  .contact__form-col > .form { margin-top: 1.75rem; }
}
@media (max-width: 560px) { .field--half { grid-column: 1 / -1; } }
@media (max-width: 760px) {
  /* the floating accessibility button lives in the bottom-left corner; the
     form keeps clear of it while it scrolls past */
  .contact__form-col > .form { margin-inline-end: 52px; }
  .pick .btn { justify-self: start; }
}

/* ---------------------------------------------------------- footer ---- */
.foot { background: #fff; padding-block: clamp(3rem, 6vw, 5rem) calc(clamp(2rem, 4vw, 3rem) + env(safe-area-inset-bottom)); border-top: 1px solid var(--hair); }
.foot__grid { display: grid; grid-template-columns: repeat(3, auto) 1fr; gap: 1.5rem clamp(2.5rem, 6vw, 6rem); align-items: start; text-align: start; }
.foot__logo { width: 128px; height: auto; }
.foot__contact p { margin: 0 0 0.35rem; }
.foot__contact a, .foot__links a { color: #000; }
.foot__sep { color: var(--smoke); }
.foot__links { display: grid; gap: 0.4rem; font-size: 0.95rem; }
.foot__base { grid-column: 1 / -1; margin-top: 1rem; padding-top: 1.25rem; border-top: 1px solid var(--hair); }
.foot__legal { margin: 0; font-size: 0.85rem; color: var(--sc-ink-soft); max-width: 110ch; }
@media (max-width: 760px) { .foot__grid { grid-template-columns: 1fr; } }

/* -------------------------------------------------- notice, consent --- */
.form__notice { grid-column: 1 / -1; margin: 0.25rem 0 0; font-size: 0.9rem; line-height: 1.55; color: var(--sc-ink-soft); }
.form__notice a { color: #000; font-weight: 600; }
.foot__cookie { justify-self: start; padding: 0; border: 0; background: none; font: inherit; color: #000; text-decoration: underline; text-underline-offset: 0.22em; cursor: pointer; }
.btn--ghost { background: #fff; color: #000; border-color: rgba(0, 0, 0, 0.35); }
.consent {
  position: fixed; z-index: 72; inset: auto 16px calc(16px + env(safe-area-inset-bottom)) 80px;
  max-width: 40rem; margin-inline-start: auto;
  background: #fff; color: #000; border: 1px solid var(--hair-strong); border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08), 0 18px 40px rgba(0, 0, 0, 0.14);
  padding: 1rem 1.15rem; display: grid; gap: 0.75rem; font-size: 0.95rem;
}
.consent p { margin: 0; line-height: 1.5; }
.consent__actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }

/* ------------------------------------------------------------ dock ---- */
.dock { display: none; }
@media (max-width: 760px) {
  .dock {
    display: block; position: fixed; inset: auto 0 0 0; z-index: 55;
    padding: 0.65rem var(--sc-gutter) calc(0.65rem + env(safe-area-inset-bottom));
    background: #fff; border-top: 1px solid var(--hair);
    transform: translateY(105%); transition: transform 260ms var(--ease);
  }
  .dock.is-on { transform: none; }
  .foot { padding-bottom: calc(6rem + env(safe-area-inset-bottom)); }
}