/* =============================================================================
 * Derech Hevron 116 — main site visual layer (route: /index.html)
 * -----------------------------------------------------------------------------
 * Promoted from the redesign concept on 2026-08-13: this file replaces
 * styles.css/portal.css on the front page. Same behaviour hooks (common.js), new
 * visual language: editorial, premium, image-forward, few containers.
 *
 * Fonts: Frank Ruhl Libre (display serif) · Heebo (numbers/UI) · Assistant (body)
 * ========================================================================== */

:root {
  /* --- Color tokens --------------------------------------------------------- */
  --r-navy:        #12303f;              /* deep petrol-navy (brand-derived)   */
  --r-navy-deep:   #0b2230;              /* darkest band                       */
  --r-petrol:      #1e6180;              /* brand primary — the ONE CTA color  */
  --r-petrol-dark: #174e67;
  --r-orange:      #f1962d;              /* warm highlight, used sparingly     */
  --r-terra:       #b75f2f;              /* eyebrow / rule accent              */
  --r-paper:       #fcfbf8;
  --r-stone:       #f3f0e9;
  --r-ink:         #1d2b33;
  --r-text:        #38424a;
  --r-muted:       #6d757c;

  /* status colors (kept from portal: blue done / orange now / gray future) */
  --r-st-done:     #1e6180;
  --r-st-now:      #d97f21;
  --r-st-future:   #9aa0a6;

  /* --- Lines ---------------------------------------------------------------- */
  --r-hair:        rgba(29, 43, 51, .14);
  --r-hair-soft:   rgba(29, 43, 51, .08);
  --r-hair-dark:   rgba(255, 255, 255, .18);
  --r-hair-dark-soft: rgba(255, 255, 255, .10);

  /* --- Type scale ----------------------------------------------------------- */
  --r-f-display:   clamp(2.9rem, 7vw, 5rem);        /* ~80px hero            */
  --r-f-h2:        clamp(1.9rem, 3.4vw, 2.5rem);    /* ~40px section         */
  --r-f-h3:        1.3rem;
  --r-f-body:      1.15rem;                          /* ~20.7px at 18px root  */
  --r-f-small:     1rem;

  /* --- Space / layout ------------------------------------------------------- */
  --r-maxw:        1220px;
  --r-narrow:      780px;
  --r-sect:        clamp(5rem, 11vw, 9.5rem);
  --r-sect-sm:     clamp(3.4rem, 7vw, 6rem);
  --r-radius:      3px;                              /* near-sharp, editorial */
  --r-radius-img:  4px;

  /* --- Motion --------------------------------------------------------------- */
  --r-fast:        .2s;
  --r-slow:        .7s;
  --r-ease:        cubic-bezier(.22, .61, .36, 1);

  --r-nav-h:       72px;
}

/* ---- Reset / base ---------------------------------------------------------- */
* { box-sizing: border-box; }
/* larger base type — the audience is mostly older residents */
html { scroll-behavior: smooth; font-size: 112.5%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
[id] { scroll-margin-top: 96px; }

body {
  margin: 0;
  font-family: 'Assistant', system-ui, sans-serif;
  font-size: var(--r-f-body);
  line-height: 1.75;
  color: var(--r-text);
  background: var(--r-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--r-petrol); color: #fff; }

h1, h2, h3, h4 { font-family: 'Heebo', sans-serif; color: var(--r-ink); margin: 0; }
h1 { font-size: calc(var(--r-f-display) * var(--r-type-scale, 1)); font-weight: 800; line-height: 1.06; letter-spacing: -.02em; }
h2 { font-size: calc(var(--r-f-h2) * var(--r-type-scale, 1)); font-weight: 700; line-height: 1.12; margin-bottom: .5em; letter-spacing: -.01em; }
h3 { font-size: var(--r-f-h3); font-weight: 700; line-height: 1.3; margin-bottom: .35em; }
p  { margin: 0 0 1em; max-width: 62ch; }
a  { color: var(--r-petrol); text-decoration: none; }
img { max-width: 100%; display: block; }

/* Thin, airy icon system: CSS stroke-width beats the SVG attribute (2 → 1.3) */
svg { width: 1.1em; height: 1.1em; vertical-align: -.125em; stroke-width: 1.3; }

:focus-visible { outline: 2px solid var(--r-terra); outline-offset: 3px; border-radius: 2px; }

.container { max-width: var(--r-maxw); margin-inline: auto; padding-inline: clamp(20px, 4vw, 40px); }
.container--narrow { max-width: var(--r-narrow); }
.sect { padding-block: calc(var(--r-sect) * var(--r-space-scale, 1)); position: relative; }
.sect--sm { padding-block: calc(var(--r-sect-sm) * var(--r-space-scale, 1)); position: relative; }
.bg-stone { background: var(--r-stone); }
.bg-tint { background: #e9f1f5; }
.bg-navy { background: var(--r-navy-deep); color: rgba(255,255,255,.82); }
.bg-navy h2, .bg-navy h3 { color: #fff; }
.bg-navy p { color: rgba(255,255,255,.78); }

/* subtle architectural grid texture, fading out toward the side edges */
.bg-grid { position: relative; background-color: var(--r-stone); }
.bg-grid::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, var(--r-hair-soft) 0 1px, transparent 1px 84px),
    repeating-linear-gradient(0deg,  var(--r-hair-soft) 0 1px, transparent 1px 84px);
  -webkit-mask-image: linear-gradient(to left, transparent 0%, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(to left, transparent 0%, #000 22%, #000 78%, transparent 100%);
}

/* ---- Editorial accents ----------------------------------------------------- */
.eyebrow {
  display: block; font-family: 'Heebo', sans-serif; font-weight: 600;
  font-size: .82rem; letter-spacing: .22em; color: var(--r-terra);
  margin-bottom: 1.1rem;
}
.bg-navy .eyebrow { color: var(--r-orange); }

/* thin animated rule under eyebrows — grows in when the block reveals */
.rule {
  display: block; width: 56px; height: 1px; background: var(--r-terra);
  margin-bottom: 1.4rem; transform: scaleX(0); transform-origin: right;
  transition: transform var(--r-slow) var(--r-ease) .15s;
}
.reveal.in .rule, .in .rule { transform: scaleX(1); }
.bg-navy .rule { background: var(--r-orange); }

/* oversized ghost section numbers (decorative) */
.sec-num {
  position: absolute; top: clamp(1rem, 3vw, 4rem); inset-inline-end: -0.08em; inset-inline-start: auto;
  font-family: 'Heebo', sans-serif; font-weight: 900; line-height: 1;
  font-size: var(--r-num-size, clamp(15rem, 48vw, 44rem));
  color: var(--r-num-color, rgba(241, 150, 45, .14));
  pointer-events: none; user-select: none; z-index: 0;
}
/* even sections: number enters from the opposite side */
.sec-num--alt { inset-inline-end: auto; inset-inline-start: -0.08em; }
.sect, .sect--sm { overflow-x: clip; }
.bg-navy .sec-num { color: rgba(255, 255, 255, .12); }

/* icon variant: a giant thin-stroke icon representing the section */
.sec-num--icon { color: var(--r-num-color, rgba(241, 150, 45, .3)); line-height: 0; }
.sec-num--icon svg { width: .8em; height: .8em; display: block; stroke-width: .4; }
.bg-navy .sec-num--icon { color: rgba(255, 255, 255, .2); }
.sect > .container, .sect--sm > .container { position: relative; z-index: 1; }

.lead { font-size: 1.22rem; color: var(--r-muted); max-width: 56ch; }
.center { text-align: center; }
.center .lead, .center p { margin-inline: auto; }
.center .rule { margin-inline: auto; transform-origin: center; }
.muted { color: var(--r-muted); }
.hidden { display: none !important; }
.mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.75rem; } .mt-4 { margin-top: 3rem; }

.disclaimer {
  font-size: .84rem; color: var(--r-muted);
  border-inline-start: 2px solid var(--r-hair); padding-inline-start: .9rem; max-width: 68ch;
}
.bg-navy .disclaimer { border-color: var(--r-hair-dark); color: rgba(255,255,255,.55); }

/* =============================================================================
 * BUTTON HIERARCHY — one dominant primary (Personal Area), everything else quiet
 * ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  cursor: pointer; font-family: 'Heebo', sans-serif; font-weight: 600; font-size: 1rem;
  padding: .85rem 1.7rem; border-radius: var(--r-radius); border: 1px solid transparent;
  transition: background-color var(--r-fast) ease, color var(--r-fast) ease,
              border-color var(--r-fast) ease, box-shadow var(--r-fast) ease;
  min-height: 48px;
}
.btn svg { width: 1.05em; height: 1.05em; }
.btn:active { transform: translateY(1px); }

/* PRIMARY — האזור האישי שלי (only) */
.btn--primary {
  background: var(--r-petrol); color: #fff; font-weight: 700;
  padding: .95rem 2.1rem; letter-spacing: .01em;
}
.btn--primary:hover { background: var(--r-petrol-dark); }
.btn--primary:focus-visible { outline-color: var(--r-orange); }

/* secondary: quiet outline */
.btn--outline { background: transparent; color: var(--r-ink); border-color: var(--r-hair); }
.btn--outline:hover { border-color: var(--r-ink); }
.btn--outline-light { background: transparent; color: #fff; border-color: var(--r-hair-dark); }
.btn--outline-light:hover { border-color: #fff; }
/* orange CTA — "בחירת דירה" (leads to the tower map) */
.btn--orange { background: var(--r-orange); color: var(--r-navy-deep); font-weight: 700; border-color: var(--r-orange); }
.btn--orange:hover { background: #e0892a; border-color: #e0892a; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(11,34,48,.25); }
.btn--orange:focus-visible { outline-color: var(--r-petrol); }

/* tertiary: text link with arrow */
.link-arrow {
  display: inline-flex; align-items: center; gap: .45rem; cursor: pointer;
  font-family: 'Heebo', sans-serif; font-weight: 600; font-size: .95rem; color: var(--r-petrol);
  border-bottom: 1px solid transparent; transition: border-color var(--r-fast) ease;
}
.link-arrow:hover { border-color: var(--r-petrol); }

/* =============================================================================
 * NAV — minimal bar, transparent over hero, solid after scroll
 * ========================================================================== */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; background: rgba(255, 255, 255, .96); backdrop-filter: blur(14px); border-bottom: 1px solid var(--r-hair); }
.nav__inner { max-width: var(--r-maxw); margin-inline: auto; padding-inline: clamp(20px, 4vw, 40px); height: var(--r-nav-h); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.brand { display: flex; align-items: center; cursor: pointer; }
.brand__logo { height: 32px; width: auto; display: block; }

.nav__links { display: none; gap: 1.9rem; align-items: center; list-style: none; margin: 0; padding: 0; }
.nav__links a { font-family: 'Heebo', sans-serif; font-weight: 500; font-size: 1rem; color: var(--r-ink); transition: color var(--r-fast) ease, opacity var(--r-fast) ease; opacity: .8; }
.nav__links a:hover, .nav__links a.is-active { color: var(--r-petrol); opacity: 1; }

.nav__cta { display: flex; align-items: center; gap: .6rem; }
.nav__cta .btn { padding: .6rem 1.4rem; min-height: 48px; font-size: 1rem; }
.nav__toggle { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-radius); border: 1px solid var(--r-hair); background: transparent; cursor: pointer; color: var(--r-ink); }
.nav__toggle svg { width: 26px; height: 26px; }
@media (min-width: 1060px) { .nav__links { display: flex; } .nav__toggle { display: none; } }

.nav__mobile { display: none; background: #fff; border-bottom: 1px solid var(--r-hair); padding: .8rem clamp(20px, 4vw, 40px) 1.2rem; }
.nav__mobile.open { display: block; }
.nav__mobile a { display: block; padding: .75rem 0; font-family: 'Heebo', sans-serif; font-weight: 500; color: var(--r-ink); border-bottom: 1px solid var(--r-hair-soft); }
.nav__mobile a:last-child { border-bottom: 0; color: var(--r-petrol); font-weight: 700; }

/* =============================================================================
 * HERO — full-bleed rendering, giant serif headline
 * ========================================================================== */
.hero {
  position: relative; min-height: 100svh; display: flex; flex-direction: column;
  justify-content: flex-end; overflow: hidden; color: #fff;
  /* "פנורמה קולנועית": sky-extended wide evening rendering behind a navy scrim */
  background:
    linear-gradient(180deg, rgba(11, 34, 48, .42) 0%, rgba(11, 34, 48, .55) 45%, rgba(8, 26, 37, .94) 100%),
    url('../img/renders/tower-evening-wide.jpg') center 30% / cover no-repeat var(--r-navy-deep);
}
/* mobile: the portrait rendering fits tall screens better than the wide one */
@media (max-width: 767px) {
  .hero {
    background:
      linear-gradient(180deg, rgba(13, 38, 52, .62) 0%, rgba(8, 26, 37, .93) 82%),
      url('../img/renders/tower-evening.jpg') center 30% / cover no-repeat var(--r-navy-deep);
  }
}
.hero .ctas .btn--orange { min-width: min(320px, 80vw); justify-content: center; padding-inline: 2.5rem; }
.hero__content { position: relative; z-index: 1; padding-top: calc(var(--r-nav-h) + 3rem); padding-bottom: clamp(2.5rem, 6vh, 5rem); text-align: center; }
.hero h1, .hero .sub { margin-inline: auto; }
.hero .ctas { justify-content: center; }
.hero .kicker {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: 'Heebo', sans-serif; font-weight: 600; font-size: .82rem; letter-spacing: .24em;
  color: rgba(255,255,255,.85);
}
.hero h1 { color: #fff; margin-top: 1.2rem; max-width: 14ch; }
.hero .sub { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: rgba(255,255,255,.85); max-width: 52ch; margin-top: 1.4rem; }
.hero .ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.hero__cta-block { display: inline-flex; flex-direction: column; gap: 1.2rem; margin-top: 2.2rem; }
.hero .ctas--meta { justify-content: space-between; width: 100%; }

.status-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: 'Heebo', sans-serif; font-weight: 600; font-size: .88rem;
  color: rgba(255,255,255,.9); border: 1px solid var(--r-hair-dark);
  border-radius: 999px; padding: .45rem 1.1rem;
}
.status-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--r-orange); }
.updated { font-size: .85rem; color: rgba(255,255,255,.75); display: inline-flex; align-items: center; gap: .45rem; }
.updated svg { color: rgba(255,255,255,.75); }

/* stat band along the hero's lower edge — numbers on the image, no cards */
.hero__stats {
  position: relative; z-index: 1; border-top: 1px solid var(--r-hair-dark-soft);
  display: grid; grid-template-columns: repeat(3, 1fr);
  max-width: var(--r-maxw); margin-inline: auto; width: 100%;
  padding-inline: clamp(20px, 4vw, 40px);
}
.hero__stat { padding: 1.4rem 0 2rem; text-align: center; }
.hero__stat + .hero__stat { border-inline-start: 1px solid var(--r-hair-dark-soft); }
.hero__stat b { display: block; font-family: 'Heebo', sans-serif; font-weight: 800; font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.1; color: #fff; }
.hero__stat small { font-size: .85rem; color: rgba(255,255,255,.65); letter-spacing: .06em; font-family: 'Heebo', sans-serif; }

/* =============================================================================
 * ACTION BOARD — editorial index, no cards: numbers + hairlines
 * ========================================================================== */
.actions { display: grid; grid-template-columns: 1fr; }
@media (min-width: 700px)  { .actions { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 5vw, 4.5rem); } }
@media (min-width: 1060px) { .actions { grid-template-columns: repeat(4, 1fr); column-gap: clamp(1.6rem, 3vw, 3rem); } }
.action {
  display: flex; flex-direction: column; gap: .55rem; padding: 1.8rem 0 2rem;
  border-top: 1px solid var(--r-hair); color: var(--r-text); cursor: pointer;
  transition: transform var(--r-fast) var(--r-ease), border-color var(--r-fast) ease;
}
.action:hover { transform: translateY(-6px); border-top-color: var(--r-petrol); }
.action__n { font-family: 'Heebo', sans-serif; font-weight: 300; font-size: .9rem; letter-spacing: .18em; color: var(--r-muted); }
.action svg.action__icon { width: 42px; height: 42px; color: var(--r-petrol); stroke-width: 1.1; margin-top: .4rem; }
.action h3 { font-size: 1.18rem; margin: .5rem 0 0; }
.action p { font-size: .95rem; color: var(--r-muted); margin: 0; }
.action .go { margin-top: auto; padding-top: .8rem; color: var(--r-petrol); font-family: 'Heebo', sans-serif; font-weight: 600; font-size: .9rem; display: inline-flex; align-items: center; gap: .4rem; }
@media (prefers-reduced-motion: reduce) { .action:hover { transform: none; } }

/* =============================================================================
 * TIMELINE — thin line, open typography, no boxes
 * ========================================================================== */
.status-grid { display: grid; grid-template-columns: 1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
@media (min-width: 960px) { .status-grid { grid-template-columns: 1.5fr 1fr; } }

.timeline { list-style: none; margin: 0; padding: 0; }
.tl-item { display: grid; grid-template-columns: 26px 1fr; gap: 1.3rem; position: relative; padding-bottom: 2.2rem; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before { content: ''; position: absolute; top: 26px; bottom: 0; inset-inline-start: 12px; width: 1px; background: var(--r-hair); }
.tl-item:last-child::before { display: none; }
.tl-dot { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--r-hair); background: var(--r-paper); z-index: 1; display: grid; place-items: center; }
.tl-dot::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--r-st-future); opacity: .45; }
.tl-item.done .tl-dot::after { background: var(--r-st-done); opacity: 1; }
.tl-item.now .tl-dot { border-color: var(--r-st-now); }
.tl-item.now .tl-dot::after { background: var(--r-st-now); opacity: 1; }
.tl-body h3 { font-size: 1.2rem; display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; margin-bottom: .3rem; }
.tl-body p { font-size: .98rem; color: var(--r-muted); margin: 0; max-width: 58ch; }
.tl-status { font-family: 'Heebo', sans-serif; font-weight: 600; font-size: .88rem; letter-spacing: .1em; }
.tl-status.now { color: var(--r-st-now); }
.tl-status.future { color: var(--r-st-future); }
.tl-status.done { color: var(--r-st-done); }

/* updates — simple hairline list */
.updates h3 { font-size: 1.05rem; letter-spacing: .02em; }
.update { padding: 1.2rem 0; border-top: 1px solid var(--r-hair); }
.update:last-of-type { border-bottom: 1px solid var(--r-hair); }
.update time { font-family: 'Heebo', sans-serif; font-weight: 600; font-size: .9rem; letter-spacing: .12em; color: var(--r-terra); display: block; margin-bottom: .2rem; }
.update h3 { font-size: 1.02rem; margin-bottom: .15rem; }
.update p { font-size: .92rem; color: var(--r-muted); margin: 0; }
.updates__icon { margin-top: 2.4rem; display: flex; justify-content: center; color: rgba(241, 150, 45, .3); line-height: 0; }
.updates__icon svg { width: clamp(14rem, 24vw, 22rem); height: auto; stroke-width: .5; }

/* FAQ mark below the accordion */
.faq__icon { margin-top: 2.6rem; display: flex; justify-content: center; color: rgba(241, 150, 45, .3); line-height: 0; }
.faq__icon svg { width: clamp(9rem, 14vw, 13rem); height: auto; stroke-width: .5; }

/* draw-on entrance: strokes trace themselves in like a sketch */
.icon-draw svg :is(path, rect, circle) {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.3s var(--r-ease);
}
.icon-draw svg :is(path, rect, circle):nth-child(2) { transition-delay: .9s; }
.icon-draw svg :is(path, rect, circle):nth-child(3) { transition-delay: 1.7s; }
.icon-draw svg :is(path, rect, circle):nth-child(4) { transition-delay: 2.5s; }
.icon-draw.in svg :is(path, rect, circle) { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  .icon-draw svg :is(path, rect, circle) { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
}

/* =============================================================================
 * PROCESS — the dark navy statement section
 * ========================================================================== */
.flow { display: grid; grid-template-columns: 1fr; gap: 0; counter-reset: flow; margin-top: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 900px) { .flow { grid-template-columns: repeat(5, 1fr); column-gap: clamp(1.4rem, 3vw, 2.6rem); } }
.flow-step { counter-increment: flow; border-top: 1px solid var(--r-hair-dark); padding: 1.4rem 0 2rem; position: relative; }
.flow-step::before {
  content: '0' counter(flow); display: block;
  font-family: 'Heebo', sans-serif; font-weight: 900; font-size: clamp(2.6rem, 5vw, 3.6rem);
  line-height: 1; color: var(--r-orange);
  margin-bottom: .9rem;
}
.flow-step h3 { color: #fff; font-size: 1.1rem; margin-bottom: .3rem; }
.flow-step p { font-size: .92rem; color: rgba(255,255,255,.6); margin: 0; }

/* decorative route across the process section — SVG built in redesign.js so it can draw in like a sketch */
.route-deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; color: rgba(255, 255, 255, .26); display: none; }
@media (min-width: 960px) { .route-deco { display: block; } }
.route-deco svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* "how it works" — open two-column Q&A list, no cards */
.qa { display: grid; grid-template-columns: 1fr; column-gap: clamp(2.5rem, 6vw, 5rem); }
@media (min-width: 800px) { .qa { grid-template-columns: 1fr 1fr; } }
.qa-item { border-top: 1px solid var(--r-hair-dark-soft); padding: 1.3rem 0 1.5rem; }
.qa-item h3 { color: #fff; font-size: 1.05rem; margin-bottom: .35rem; }
.qa-item p { font-size: .95rem; color: rgba(255,255,255,.62); margin: 0; }

/* =============================================================================
 * ENTITLEMENTS — standalone thin icons, hairline separated, no cards
 * ========================================================================== */
.facts { display: grid; grid-template-columns: repeat(3, 1fr); }
.fact { padding: 2rem clamp(.5rem, 2.5vw, 2.2rem); text-align: center; border-inline-start: 1px solid var(--r-hair-soft); }
.fact:first-child { border-inline-start: 0; }
.fact svg { width: 50px; height: 50px; color: var(--r-petrol); stroke-width: 1; margin-bottom: 1rem; }
.fact b { display: block; font-family: 'Heebo', sans-serif; font-weight: 600; font-size: 1.12rem; color: var(--r-ink); margin-bottom: .2rem; }
.fact small { color: var(--r-muted); font-size: .88rem; }
@media (max-width: 599px) {
  .fact { padding-block: 1.4rem; }
  .fact svg { width: 38px; height: 38px; margin-bottom: .7rem; }
  .fact b { font-size: .95rem; }
  .fact small { font-size: .78rem; }
}

/* =============================================================================
 * FULL-BLEED IMAGE MOMENTS
 * ========================================================================== */
.bleed { position: relative; overflow: hidden; height: clamp(420px, 82vh, 780px); }
.bleed img { width: 100%; height: 118%; object-fit: cover; position: absolute; inset-inline: 0; top: 0; }

/* --pano variant: wide render, whole building visible in frame */
.bleed--pano { height: clamp(360px, 52vw, 800px); background: var(--r-navy-deep); }
.bleed--pano img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }
/* thin white inner frame */
.bleed--pano::after {
  content: ''; position: absolute; inset: clamp(14px, 2.2vw, 30px);
  border: 1px solid rgba(255, 255, 255, .8); z-index: 1; pointer-events: none;
}
.bleed--pano figcaption { z-index: 2; }
/* --pending variant: plain blue band until a new rendering is supplied */
.bleed--pending { height: clamp(280px, 36vw, 520px); background: linear-gradient(180deg, #103042 0%, var(--r-navy-deep) 78%); }
.bleed figcaption {
  position: absolute; bottom: 1.4rem; inset-inline-start: clamp(20px, 4vw, 40px); z-index: 1;
  font-family: 'Heebo', sans-serif; font-weight: 500; font-size: .82rem; letter-spacing: .14em;
  color: rgba(255,255,255,.85); background: rgba(11,34,48,.35); backdrop-filter: blur(6px);
  padding: .45rem 1rem; border-radius: 2px;
}

/* =============================================================================
 * ABOUT — editorial split + open comparison (no boxes)
 * ========================================================================== */
.about-grid { display: grid; grid-template-columns: 1fr; gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center; }
@media (min-width: 960px) { .about-grid { grid-template-columns: 1.05fr 1fr; } }
.about-img { width: 100%; aspect-ratio: 11/14; object-fit: cover; border-radius: var(--r-radius-img); }

.transform { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-top: 2.5rem; }
@media (min-width: 700px) { .transform { grid-template-columns: 1fr auto 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; } }
.tr-col { border-top: 2px solid var(--r-hair); padding-top: 1.1rem; }
.tr-col.new { border-top-color: var(--r-petrol); }
.tr-col h3 { font-size: .92rem; font-family: 'Heebo', sans-serif; font-weight: 600; letter-spacing: .14em; color: var(--r-muted); margin-bottom: .8rem; }
.tr-col.new h3 { color: var(--r-petrol); }
.tr-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: .98rem; }
.tr-arrow { display: none; }
@media (min-width: 700px) { .tr-arrow { display: grid; place-items: center; align-self: center; color: var(--r-muted); } .tr-arrow svg { width: 26px; height: 26px; stroke-width: 1; } }

/* =============================================================================
 * FACILITIES — large standalone icons, open grid
 * ========================================================================== */
.facilities { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3.5rem); }
@media (min-width: 960px) { .facilities { grid-template-columns: repeat(5, 1fr); } }
.facility svg { width: 54px; height: 54px; color: var(--r-petrol); stroke-width: 1; margin-bottom: 1.1rem; }
.facility h3 { font-size: 1.1rem; margin-bottom: .3rem; }
.facility p { font-size: .93rem; color: var(--r-muted); margin: 0; }
.bg-navy .facility svg { color: var(--r-orange); }
.bg-navy .facility p { color: rgba(255,255,255,.62); }

/* =============================================================================
 * LOCATION
 * ========================================================================== */
.loc-grid { display: grid; grid-template-columns: 1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
@media (min-width: 960px) { .loc-grid { grid-template-columns: 1fr 1.1fr; } }
.loc-list { list-style: none; margin: 1.6rem 0 0; padding: 0; }
.loc-list li { display: flex; gap: 1rem; align-items: flex-start; padding: 1.1rem 0; border-top: 1px solid var(--r-hair-soft); }
.loc-list svg { width: 30px; height: 30px; color: var(--r-petrol); stroke-width: 1.1; flex: none; margin-top: .2rem; }
.loc-list b { display: block; font-family: 'Heebo', sans-serif; font-weight: 600; color: var(--r-ink); font-size: 1.05rem; }
.loc-list small { color: var(--r-muted); font-size: .9rem; }
.map-frame { border: 1px solid var(--r-hair); border-radius: var(--r-radius-img); overflow: hidden; background: var(--r-stone); }
.map-frame iframe { display: block; width: 100%; height: 440px; border: 0; }

/* =============================================================================
 * APARTMENT MIX — oversized numbers, tint bars, no cards (JS-rendered)
 * ========================================================================== */
.mix { display: grid; grid-template-columns: 1fr 1fr; }
@media (min-width: 900px) { .mix { grid-template-columns: repeat(4, 1fr); } }
.mix__item { padding: 2rem clamp(1rem, 2.5vw, 2.4rem); text-align: center; border-inline-start: 1px solid var(--r-hair-soft); }
.mix__item:first-child { border-inline-start: 0; }
@media (max-width: 899px) { .mix__item:nth-child(3) { border-inline-start: 0; } .mix__item:nth-child(n+3) { border-top: 1px solid var(--r-hair-soft); } }
.mix__n { font-family: 'Heebo', sans-serif; font-weight: 900; font-size: clamp(3.2rem, 7vw, 4.6rem); line-height: 1; color: var(--r-ink); }
/* text variant of the big number (e.g. "דופלקסים ופנטהאוזים") */
.mix__t { font-family: 'Heebo', sans-serif; font-weight: 800; font-size: clamp(1.15rem, 2.4vw, 1.55rem); line-height: 1.25; color: var(--r-ink); display: grid; place-items: center; min-height: clamp(3.2rem, 7vw, 4.6rem); }
.mix__bar { width: 34px; height: 3px; margin: .8rem auto .7rem; border-radius: 2px; background: var(--r-orange); }
.mix__l { font-family: 'Heebo', sans-serif; font-weight: 600; color: var(--r-ink); }
.mix__meta { color: var(--r-muted); font-size: .9rem; margin-top: .3rem; }

/* =============================================================================
 * DOCUMENTS — dark elegant download rows (fill-on-hover)
 * ========================================================================== */
.dl { margin-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--r-hair-dark-soft); }
.dl-row {
  position: relative; display: grid; grid-template-columns: auto 1fr auto auto auto;
  gap: clamp(1rem, 3vw, 2.5rem); align-items: center;
  padding: clamp(1.4rem, 2.6vw, 2.1rem) clamp(.8rem, 2vw, 1.6rem);
  border-bottom: 1px solid var(--r-hair-dark-soft);
  color: #fff; overflow: hidden; isolation: isolate;
  transition: padding-inline .5s var(--r-ease);
}
.dl-row::before {
  content: ''; position: absolute; inset: 0; z-index: -1; background: var(--r-terra);
  transform: translateY(101%); transition: transform .5s var(--r-ease);
}
.dl-row:hover::before { transform: translateY(0); }
.dl-row:hover { padding-inline: clamp(1.2rem, 3vw, 2.4rem); }
.dl-row__no { font-family: 'Heebo', sans-serif; color: var(--r-orange); font-size: .95rem; transition: color .4s; }
.dl-row:hover .dl-row__no { color: #fff; }
.dl-row__t { font-family: 'Heebo', sans-serif; font-size: clamp(1.15rem, 2.2vw, 1.7rem); font-weight: 600; line-height: 1.25; }
.dl-row__t small { display: block; font-weight: 400; font-family: 'Assistant', sans-serif; font-size: .82rem; color: rgba(255,255,255,.55); margin-top: .2rem; transition: color .4s; }
.dl-row:hover .dl-row__t small { color: rgba(255,255,255,.85); }
.dl-row__meta { font-size: .8rem; letter-spacing: .12em; color: rgba(255,255,255,.55); transition: color .4s; white-space: nowrap; }
.dl-row:hover .dl-row__meta { color: rgba(255,255,255,.85); }
.dl-row__type { font-size: .72rem; font-weight: 700; letter-spacing: .1em; padding: .35rem .7rem; border: 1px solid rgba(255,255,255,.3); border-radius: 100px; }
.dl-row__arrow {
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3);
  display: grid; place-items: center; flex: none; transition: background .4s, border-color .4s;
}
.dl-row__arrow svg { width: 24px; height: 24px; transition: transform .5s var(--r-ease); }
.dl-row:hover .dl-row__arrow { background: #fff; border-color: #fff; }
.dl-row:hover .dl-row__arrow svg { transform: translateY(3px); color: var(--r-terra); }
@media (max-width: 760px) {
  .dl-row { grid-template-columns: auto 1fr auto; }
  .dl-row__meta { grid-column: 2; }
  .dl-row__type { display: none; }
}

/* =============================================================================
 * FAQ — hairline accordion, no boxes
 * ========================================================================== */
.faq { max-width: 820px; margin-inline: auto; }
.faq details { border-top: 1px solid var(--r-hair); }
.faq details:last-child { border-bottom: 1px solid var(--r-hair); }
.faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  font-family: 'Heebo', sans-serif; font-weight: 600; font-size: 1.12rem; color: var(--r-ink);
  padding: 1.3rem .2rem; transition: color var(--r-fast) ease;
}
.faq summary:hover { color: var(--r-petrol); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: 'Heebo', sans-serif; font-weight: 300; font-size: 1.6rem; color: var(--r-petrol); line-height: 1; flex: none; }
.faq details[open] summary::after { content: '\2212'; }
.faq details > p { padding: 0 .2rem 1.4rem; margin: 0; color: var(--r-muted); font-size: 1rem; max-width: 60ch; }

/* =============================================================================
 * DEVELOPER — textured (architectural grid) brand section
 * ========================================================================== */
.dev-center { display: flex; flex-direction: column; align-items: center; gap: clamp(1.5rem, 3vw, 2.5rem); }
.dev-mark { width: clamp(110px, 13vw, 160px); height: auto; }
.dev-quote { font-family: 'Heebo', sans-serif; font-weight: 500; font-size: clamp(1.25rem, 2.4vw, 1.7rem); line-height: 1.5; color: var(--r-ink); max-width: 46ch; margin: 0 auto 1.6rem; }
.dev-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.5rem; margin-top: 1.8rem; }
.dev-fact b { display: block; font-family: 'Heebo', sans-serif; font-weight: 800; font-size: 1.7rem; color: var(--r-petrol); line-height: 1.2; }
.dev-fact small { color: var(--r-muted); font-size: .88rem; }

/* =============================================================================
 * GALLERY — featured stage + thumbnails + fullscreen lightbox
 * ========================================================================== */
.stage-wrap { position: relative; }
.stage {
  position: relative; width: 100%; aspect-ratio: 16/9.5; max-height: 76vh;
  background: var(--r-navy-deep); border-radius: var(--r-media-radius, 16px); overflow: hidden;
  border: 0; padding: 0; cursor: zoom-in; display: block;
  box-shadow: 0 10px 34px rgba(11,34,48,.14);
}
.stage img { width: 100%; height: 100%; object-fit: cover; transition: opacity .35s ease; }

.stage-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
  background: #fff; color: var(--r-ink); display: grid; place-items: center;
  box-shadow: 0 4px 16px rgba(11,34,48,.22);
  transition: background-color var(--r-fast) ease, transform var(--r-fast) var(--r-ease), box-shadow var(--r-fast) ease;
}
.stage-nav svg { width: 26px; height: 26px; stroke-width: 2; }
.stage-nav:hover { background: var(--r-paper); transform: translateY(-50%) scale(1.08); box-shadow: 0 6px 20px rgba(11,34,48,.3); }
.stage-nav.prev { inset-inline-start: 18px; }
.stage-nav.next { inset-inline-end: 18px; }

.thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 14px; }
.thumb {
  aspect-ratio: 16/10; border-radius: calc(var(--r-media-radius, 16px) * .75); overflow: hidden;
  border: 2px solid transparent; background: #fff; padding: 0; cursor: pointer;
  opacity: .85; transition: opacity var(--r-fast) ease, border-color var(--r-fast) ease, transform var(--r-fast) var(--r-ease);
  box-shadow: 0 3px 12px rgba(11,34,48,.08);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb:hover { opacity: 1; transform: translateY(-4px); }
.thumb[aria-current="true"] { opacity: 1; border-color: var(--r-petrol); }
@media (prefers-reduced-motion: reduce) { .thumb:hover, .stage-nav:hover { transform: translateY(-50%); } .thumb:hover { transform: none; } }
@media (max-width: 640px) { .stage-nav { width: 42px; height: 42px; } .thumbs { gap: 8px; } .thumb { border-radius: 8px; } }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 90; display: none; flex-direction: column; background: rgba(8, 22, 31, .96); padding: 0; }
.lightbox.open { display: flex; }
.lightbox__bar { display: flex; justify-content: space-between; align-items: center; padding: 1rem clamp(16px, 3vw, 32px); color: rgba(255,255,255,.75); font-family: 'Heebo', sans-serif; font-size: .88rem; }
.lightbox__img { flex: 1; min-height: 0; display: grid; place-items: center; padding: 0 clamp(12px, 6vw, 80px) 2rem; }
.lightbox__img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lightbox button { background: transparent; border: 1px solid var(--r-hair-dark); border-radius: 2px; color: #fff; cursor: pointer; width: 46px; height: 46px; display: grid; place-items: center; transition: border-color var(--r-fast) ease, background-color var(--r-fast) ease; }
.lightbox button:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.lightbox button svg { width: 24px; height: 24px; }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; }
.lightbox__nav.prev { inset-inline-start: clamp(8px, 2vw, 24px); }
.lightbox__nav.next { inset-inline-end: clamp(8px, 2vw, 24px); }
.lightbox__nav.next svg { transform: scaleX(-1); }

/* =============================================================================
 * HELP / CONTACT — open info column + minimal underline form
 * ========================================================================== */
.help-grid { display: grid; grid-template-columns: 1fr; gap: clamp(2.5rem, 6vw, 5.5rem); align-items: start; }
@media (min-width: 960px) { .help-grid { grid-template-columns: 1fr 1fr; } }
.help-person { display: flex; gap: 1.1rem; align-items: center; margin-top: 1.8rem; }
.help-person .avatar { width: 58px; height: 58px; border-radius: 50%; border: 1px solid var(--r-hair); color: var(--r-petrol); display: grid; place-items: center; flex: none; }
.help-person .avatar svg { width: 30px; height: 30px; stroke-width: 1.1; }
.help-person b { font-family: 'Heebo', sans-serif; font-weight: 600; color: var(--r-ink); display: block; font-size: 1.1rem; }
.help-person small { color: var(--r-muted); }
.help-lines { list-style: none; margin: 1.4rem 0 0; padding: 0; }
.help-lines li { display: flex; align-items: center; gap: .8rem; padding: .85rem 0; border-top: 1px solid var(--r-hair-soft); font-size: .98rem; }
.help-lines svg { color: var(--r-petrol); stroke-width: 1.1; flex: none; width: 24px; height: 24px; }

.form { border-top: 2px solid var(--r-ink); padding-top: 1.8rem; }
.btn--light { background: #fff; color: var(--r-navy-deep); font-weight: 700; }
.btn--light:hover { background: rgba(255,255,255,.88); }

/* dark (navy) variant of the help/contact block — card + boxed fields */
.bg-navy .form {
  border: 1px solid rgba(255,255,255,.16); border-radius: 16px;
  background: rgba(255,255,255,.04);
  padding: clamp(1.6rem, 3vw, 2.4rem);
}
.bg-navy .field label { color: rgba(255,255,255,.88); }
.bg-navy .field input, .bg-navy .field select, .bg-navy .field textarea {
  color: #fff; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18); border-radius: 10px;
  padding: .75rem 1rem;
  transition: border-color var(--r-fast) ease, background-color var(--r-fast) ease;
}
.bg-navy .field select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left .9rem center; background-size: 16px;
  padding-inline-end: 2.6rem;
}
.bg-navy .field select option { color: var(--r-ink); background: #fff; }
.bg-navy .field ::placeholder { color: rgba(255,255,255,.45); opacity: 1; }
.bg-navy .field input:focus, .bg-navy .field select:focus, .bg-navy .field textarea:focus {
  outline: none; border-color: var(--r-orange); background: rgba(255,255,255,.09); margin-bottom: 0;
}
.bg-navy .form-ok { color: var(--r-orange); }
.bg-navy .help-person .avatar { border-color: rgba(255,255,255,.3); color: var(--r-orange); }
.bg-navy .help-person b { color: #fff; }
.bg-navy .help-person small { color: rgba(255,255,255,.6); }
.bg-navy .help-lines li { border-top-color: rgba(255,255,255,.12); color: rgba(255,255,255,.8); }
.bg-navy .help-lines svg { color: var(--r-orange); }
.form h3 { font-size: 1.25rem; }
.field { margin-bottom: 1.4rem; }
.field label { display: block; font-family: 'Heebo', sans-serif; font-weight: 600; font-size: .85rem; letter-spacing: .06em; margin-bottom: .35rem; color: var(--r-ink); }
.field input, .field select, .field textarea {
  width: 100%; padding: .7rem .1rem; border: 0; border-bottom: 1px solid var(--r-hair);
  border-radius: 0; background: transparent; font: inherit; color: var(--r-text);
  transition: border-color var(--r-fast) ease;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom: 2px solid var(--r-petrol); margin-bottom: -1px; }
.field ::placeholder { color: var(--r-muted); opacity: .7; }
.form-ok { color: var(--r-petrol); font-weight: 700; }

/* =============================================================================
 * FINAL CTA BAND — restrained brand color, one dominant action
 * ========================================================================== */
.cta-band { background: var(--r-petrol); color: #fff; text-align: center; padding-block: clamp(4rem, 9vw, 7rem); }
.cta-band h2 { color: #fff; font-size: clamp(1.9rem, 4vw, 2.8rem); margin-bottom: .4em; }
.cta-band p { color: rgba(255,255,255,.85); margin-inline: auto; max-width: 44ch; }
.cta-band .btn--cta-invert { background: #fff; color: var(--r-petrol); font-weight: 700; padding: 1rem 2.4rem; margin-top: 1.6rem; }
.cta-band .btn--cta-invert:hover { background: var(--r-paper); box-shadow: 0 6px 24px rgba(11,34,48,.25); }

/* =============================================================================
 * FOOTER
 * ========================================================================== */
.footer { background: var(--r-navy-deep); color: rgba(255,255,255,.65); font-size: .95rem; }
.footer a { color: rgba(255,255,255,.65); transition: color var(--r-fast) ease; }
.footer a:hover { color: #fff; }
.footer__grid { display: grid; gap: 3rem 1.5rem; grid-template-columns: 1fr 1fr; padding-block: clamp(3.5rem, 7vw, 5.5rem); }
.footer__grid > div:first-child { grid-column: 1 / -1; }
@media (min-width: 800px) {
  .footer__grid { grid-template-columns: 1.6fr 1fr 1fr; gap: 3rem; }
  .footer__grid > div:first-child { grid-column: auto; }
}
/* mobile: everything centered */
@media (max-width: 799px) {
  .footer__grid { text-align: center; }
  .footer__grid p { margin-inline: auto; }
  .footer__grid > div:first-child > div { justify-content: center; }
}
.footer h4 { color: #fff; font-family: 'Heebo', sans-serif; font-weight: 600; font-size: .85rem; letter-spacing: .16em; margin-bottom: 1.2rem; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.footer .brand-name { font-family: 'Heebo', sans-serif; font-weight: 600; font-size: 1.3rem; color: #fff; display: block; margin-bottom: .8rem; }
.footer .logo-on-dark { filter: brightness(0) invert(1); opacity: .85; height: 30px; width: auto; }
.footer__bar { border-top: 1px solid var(--r-hair-dark-soft); padding-block: 1.3rem; font-size: .82rem; color: rgba(255,255,255,.45); }
.footer__bar a { color: rgba(255,255,255,.55); }

/* =============================================================================
 * MOTION — reveal (hooks match common.js: .reveal → .in) + ambient effects
 * ========================================================================== */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity var(--r-slow) var(--r-ease), transform var(--r-slow) var(--r-ease); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; }

/* image reveal: soft zoom-settle (observed by redesign.js) */
.reveal-zoom { opacity: 0; transform: scale(1.045); transition: opacity .9s var(--r-ease), transform 1.3s var(--r-ease); will-change: opacity, transform; }
.reveal-zoom.in { opacity: 1; transform: scale(1); }

/* ghost section numbers slide in from their side */
.sec-num.reveal { transform: translateX(-48px); transition-duration: 1.1s; }
.sec-num--alt.reveal { transform: translateX(48px); }
.sec-num.reveal.in { transform: none; }

/* pulse on the "current stage" timeline dots */
@keyframes r-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(217,127,33,.45); }
  70%  { box-shadow: 0 0 0 9px rgba(217,127,33,0); }
  100% { box-shadow: 0 0 0 0 rgba(217,127,33,0); }
}
.tl-item.now .tl-dot::after { animation: r-pulse 2.6s ease-out infinite; }

/* micro-interactions */
.action .go svg, .link-arrow svg { transition: transform var(--r-fast) var(--r-ease); }
.action:hover .go svg, .link-arrow:hover svg { transform: translateX(-4px); }
.doc { transition: background-color var(--r-fast) ease, transform var(--r-fast) var(--r-ease); }
.doc:hover { transform: translateX(-5px); }
.btn { transition: background-color var(--r-fast) ease, color var(--r-fast) ease, border-color var(--r-fast) ease, box-shadow var(--r-fast) ease, transform var(--r-fast) var(--r-ease); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(11,34,48,.25); }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-zoom, .sec-num.reveal { opacity: 1; transform: none; transition: none; }
  .tl-item.now .tl-dot::after { animation: none; }
  .bleed img { transform: none !important; height: 100%; }
  .doc:hover, .btn--primary:hover, .action:hover .go svg, .link-arrow:hover svg { transform: none; }
}

/* skip link */
.skip { position: absolute; inset-inline-start: -999px; z-index: 99; }
.skip:focus { inset-inline-start: 12px; top: 12px; background: var(--r-navy); color: #fff; padding: .6rem 1rem; border-radius: 4px; }

/* =============================================================================
 * RESIDENTS AREA (residents.html) — data components ported from the old
 * portal (styles.css/portal.css) onto the redesign tokens. Loaded from this
 * single stylesheet on both pages; harmless on index.html.
 * ========================================================================== */
:root {
  /* availability-map statuses (used inline by residents-ui.js) */
  --status-available: #2f8f5b;
  --status-reserved:  #e0892a;
  --status-selected:  #9aa0a6;
  --status-taken:     #9aa0a6;
  --status-market:    #c2bcb0;
}

/* anchored sections shouldn't hide under the fixed nav */
[id] { scroll-margin-top: calc(var(--r-nav-h) + 24px); }

/* --- navy page header (sub-page hero band) --------------------------------- */
.page-head { padding-top: calc(var(--r-nav-h) + clamp(3rem, 8vw, 5.5rem)); padding-bottom: clamp(3rem, 7vw, 5rem); }
.page-head h1 { color: #fff; font-size: clamp(2.3rem, 5vw, 3.6rem); font-weight: 800; letter-spacing: -.015em; }
.page-head .lead { color: rgba(255,255,255,.72); }

/* --- simple grids ----------------------------------------------------------- */
.grid { display: grid; gap: 22px; }
@media (min-width: 720px)  { .grid--2 { grid-template-columns: 1fr 1fr; } .grid--3 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1020px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

/* --- light sheet card (also used as the map container) ---------------------- */
.card { background: #fff; border: 1px solid var(--r-hair); border-radius: var(--r-radius-img); }
.card--pad { padding: 1.6rem 1.8rem; }

/* --- data tables ------------------------------------------------------------ */
.table-wrap { overflow-x: auto; border: 1px solid var(--r-hair); border-radius: var(--r-radius-img); background: #fff; }
table.data { width: 100%; border-collapse: collapse; min-width: 680px; font-size: 1rem; }
table.data th, table.data td { padding: .95rem 1.1rem; text-align: right; border-bottom: 1px solid var(--r-hair-soft); }
table.data thead th { font-family: 'Heebo', sans-serif; font-weight: 700; color: var(--r-ink); background: var(--r-stone); font-size: .9rem; white-space: nowrap; }
table.data tbody tr:hover { background: rgba(29,43,51,.03); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data td { color: var(--r-text); }
/* the queue table sits as a light sheet inside the navy band */
.bg-navy .table-wrap { border-color: rgba(255,255,255,.25); box-shadow: 0 18px 48px rgba(0,0,0,.28); }
/* scrollable variant: ~5 rows visible, sticky header, subtle scrollbar */
.table-wrap--scroll { max-height: 21.5rem; overflow: auto; scrollbar-width: thin; scrollbar-color: rgba(29,43,51,.25) transparent; }
.table-wrap--scroll table.data thead th { position: sticky; top: 0; z-index: 2; box-shadow: 0 1px 0 var(--r-hair); }
.table-wrap--scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.table-wrap--scroll::-webkit-scrollbar-thumb { background: rgba(29,43,51,.18); border-radius: 8px; }
.table-wrap--scroll::-webkit-scrollbar-thumb:hover { background: rgba(29,43,51,.32); }
.table-wrap--scroll::-webkit-scrollbar-track { background: transparent; }

/* --- selection order: 4 compensation groups (order.js) ----------------------
 * White accordion bars on the navy band; rows show plot NUMBERS only, no names. */
.gacc { border: 1px solid var(--r-hair); border-radius: var(--r-radius-img); overflow: hidden; background: #fff; }
.gacc + .gacc { margin-top: .8rem; }
.bg-navy .gacc { border-color: rgba(255,255,255,.25); box-shadow: 0 18px 48px rgba(0,0,0,.28); }
/* white surfaces inside the navy band keep their own ink (bg-navy paints text white) */
.bg-navy .gacc { color: var(--r-text); }
.gacc summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .8rem; padding: .95rem 1.2rem; font-family: 'Heebo', sans-serif; background: #fcfbf8; }
.gacc summary::-webkit-details-marker { display: none; }
.gacc summary b { font-weight: 800; font-size: 1.15rem; color: var(--r-ink); }
.gacc summary small { color: var(--r-muted); font-size: .9rem; margin-inline-start: auto; }
.gacc summary .caret { flex: none; width: 20px; height: 20px; color: var(--r-muted); transition: transform .2s; }
.gacc[open] summary { border-bottom: 1px solid var(--r-hair); }
.gacc[open] summary .caret { transform: rotate(180deg); }
.gacc summary:hover { background: #f6f4ee; }

.gtable { width: 100%; border-collapse: collapse; font-size: .98rem; table-layout: fixed; }
.gtable th, .gtable td { padding: .8rem 1.1rem; text-align: center; border-bottom: 1px solid var(--r-hair-soft); }
.gtable tbody tr:last-child td { border-bottom: 0; }
.gtable thead th { background: var(--r-stone); font-family: 'Heebo', sans-serif; font-weight: 700; color: var(--r-ink); font-size: .85rem; white-space: nowrap; }
/* full-width spread (RTL): every header centered over its cells, even columns */
.gtable th:nth-child(1) { width: 15%; }
.gtable td.pos { font-family: 'Heebo', sans-serif; font-weight: 800; color: var(--r-ink); }
.gtable td.plot b { font-family: 'Heebo', sans-serif; font-weight: 700; color: var(--r-ink); }
.chip--lottery { background: rgba(47,143,91,.14); color: var(--status-available); }
.twrap { overflow-x: auto; }
/* cap at ~5 visible rows; longer lists scroll */
.twrap--scroll { max-height: 21rem; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(29,43,51,.25) transparent; }
.twrap--scroll .gtable thead th { position: sticky; top: 0; z-index: 2; box-shadow: 0 1px 0 var(--r-hair); }
.twrap--scroll::-webkit-scrollbar { width: 7px; }
.twrap--scroll::-webkit-scrollbar-thumb { background: rgba(29,43,51,.18); border-radius: 8px; }
@media (max-width: 600px) {
  .gtable { font-size: .9rem; }
  .gtable th, .gtable td { padding: .6rem .7rem; }
}
.bg-navy .muted { color: rgba(255,255,255,.6); }

/* --- chips & room dots ------------------------------------------------------ */
.chip { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; font-size: .8rem; padding: .25rem .6rem; border-radius: 100px; font-family: 'Heebo', sans-serif; white-space: nowrap; }
.chip--available { background: rgba(47,143,91,.14);  color: var(--status-available); }
.chip--reserved  { background: rgba(224,137,42,.16); color: var(--status-reserved); }
.chip--taken     { background: rgba(154,158,166,.2); color: #6f737b; }
.chip--selected  { background: rgba(154,158,166,.2); color: #6f737b; }
.chip--market    { background: var(--r-stone); color: var(--r-muted); }
.chip--warn      { background: rgba(224,137,42,.16); color: #b3651b; }
.roomdot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-inline-start: 6px; vertical-align: middle; }

/* --- apartment model cards --------------------------------------------------- */
.model-card { overflow: hidden; display: flex; flex-direction: column; transition: transform var(--r-fast) var(--r-ease), box-shadow var(--r-fast) ease, border-color var(--r-fast) ease; }
.model-card:hover { transform: translateY(-4px); border-color: var(--r-petrol); box-shadow: 0 10px 30px rgba(11,34,48,.1); }
.model-card__img { background: var(--r-stone); aspect-ratio: 16/11; display: grid; place-items: center; border-bottom: 1px solid var(--r-hair-soft); }
.model-card__img img { width: 100%; height: 100%; object-fit: contain; padding: .6rem; }
/* icon header instead of a plan thumbnail — uniform, calm cards */
.model-card__icon { background: var(--r-stone); display: grid; place-items: center; padding: 1.6rem 0; border-bottom: 1px solid var(--r-hair-soft); }
.model-card__icon svg { width: 46px; height: 46px; }
.model-card__body { padding: 1.2rem 1.3rem 1.4rem; }
.model-card__code { font-family: 'Heebo', sans-serif; font-weight: 800; font-size: 1.5rem; color: var(--r-ink); }
.model-card__meta { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; color: var(--r-muted); font-size: .92rem; margin-top: .5rem; }
.model-card__meta b { color: var(--r-text); font-weight: 700; }
/* clickable card → model popup */
.model-card--click { cursor: pointer; }
.model-card--click:focus-visible { outline: 2px solid var(--r-petrol); outline-offset: 2px; }
.model-card__go { display: inline-flex; align-items: center; gap: .4rem; margin-top: .9rem; color: var(--r-petrol); font-family: 'Heebo', sans-serif; font-weight: 600; font-size: .9rem; }
.model-card__go svg { transition: transform var(--r-fast) var(--r-ease); }
.model-card--click:hover .model-card__go svg { transform: translateX(-4px); }

/* --- availability tower map --------------------------------------------------- */
.legend { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; margin-bottom: 1.4rem; }
.legend span { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--r-text); font-weight: 600; }
.legend i { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }
.tower { display: grid; gap: 8px; }
.tower__floor { display: grid; grid-template-columns: 104px 1fr; gap: 10px; align-items: stretch; }
@media (max-width: 640px) { .tower__floor { grid-template-columns: 86px 1fr; } }
.tower__fnum { display: flex; align-items: center; justify-content: center; font-family: 'Heebo', sans-serif; font-weight: 700; color: var(--r-ink); background: var(--r-stone); border-radius: var(--r-radius); font-size: .95rem; white-space: nowrap; padding-inline: .5rem; }
.tower__fnum.is-ph { background: var(--r-navy-deep); color: var(--r-orange); }
/* floor number with a plan PDF → link (icon + hover show it's clickable) */
.tower__fnum--link { gap: .3rem; cursor: pointer; text-decoration: none; transition: background-color .15s ease, color .15s ease; }
.tower__fnum--link svg { width: 13px; height: 13px; opacity: .65; flex: none; }
.tower__fnum--link:hover, .tower__fnum--link:focus-visible { background: var(--r-petrol); color: #fff; }
.tower__fnum--link:hover svg, .tower__fnum--link:focus-visible svg { opacity: 1; }
.tower__units { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.unit {
  position: relative; border: 1px solid var(--r-hair); border-radius: var(--r-radius); padding: .6rem .5rem;
  text-align: center; cursor: default; background: #fff; min-height: 56px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: transform .15s ease, box-shadow .15s ease;
}
.unit__model { font-family: 'Heebo', sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--r-ink); }
.unit__tag { font-size: .82rem; color: var(--r-muted); }
.unit::before { content: ''; position: absolute; inset-block: 6px; inline-size: 4px; inset-inline-start: 5px; border-radius: 4px; background: var(--status-market); }
.unit.is-compensation { cursor: pointer; }
.unit.is-compensation:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(11,34,48,.14); }
.unit.s-available::before { background: var(--status-available); }
.unit.s-reserved::before  { background: var(--status-reserved); }
.unit.s-selected::before  { background: var(--status-selected); }
.unit.s-selected { background: var(--r-stone); }
.unit.s-selected .unit__model { color: #80848c; }
.unit.s-taken::before { background: var(--status-taken); }
.unit.s-taken { background: var(--r-stone); }
.unit.s-taken .unit__model { color: #80848c; }
.unit.is-market { opacity: .62; }

/* --- tower map, mobile: accordion list by floor -------------------------------- */
.tower-acc { display: none; }
@media (max-width: 759px) {
  .tower { display: none; }
  .tower-acc { display: block; }
  /* drop the card frame so the accordion uses the full content width */
  #tower-map.card { border: 0; background: transparent; padding: 0; }
}
.tacc-floor { border: 1px solid var(--r-hair); border-radius: 4px; margin-bottom: 8px; background: #fff; overflow: hidden; }
.tacc-floor summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .7rem; padding: .85rem 1rem; font-family: 'Heebo', sans-serif; }
.tacc-floor summary::-webkit-details-marker { display: none; }
.tacc-floor summary .fnum { font-weight: 800; font-size: 1.05rem; color: var(--r-ink); white-space: nowrap; }
.tacc-floor.is-ph summary { background: var(--r-navy-deep); }
.tacc-floor.is-ph summary .fnum { color: var(--r-orange); }
.tacc-floor.is-ph summary .tacc-sum { color: rgba(255,255,255,.7); }
.tacc-sum { color: var(--r-muted); font-size: .85rem; font-weight: 600; flex: 1; }
.tacc-avail { color: var(--status-available); }
.tacc-caret { flex: none; color: var(--r-muted); transition: transform .2s ease; line-height: 0; }
.tacc-caret svg { width: 18px; height: 18px; }
.tacc-floor[open] .tacc-caret { transform: rotate(180deg); }
.tacc-body { border-top: 1px solid var(--r-hair-soft); }
.tacc-unit { display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; border-bottom: 1px solid var(--r-hair-soft); }
.tacc-unit:last-of-type { border-bottom: 0; }
.tacc-unit[data-acc-unit] { cursor: pointer; }
.tacc-unit[data-acc-unit]:focus-visible { outline: 2px solid var(--r-petrol); outline-offset: -2px; }
.tacc-unit b { font-family: 'Heebo', sans-serif; font-weight: 800; font-size: 1.1rem; color: var(--r-ink); min-width: 52px; }
.tacc-unit .meta { flex: 1; color: var(--r-muted); font-size: .88rem; }
.tacc-unit.is-market { background: var(--r-stone); }
.tacc-unit.is-market b { color: var(--r-muted); }
.tacc-pdf { display: inline-flex; align-items: center; gap: .4rem; color: var(--r-petrol); font-size: .85rem; font-weight: 700; text-decoration: none; padding: .6rem 1rem; }
.tacc-pdf svg { width: 15px; height: 15px; }

/* --- tower stat strip (light, above the map) ---------------------------------- */
.statstrip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; border-top: 1px solid var(--r-hair); border-bottom: 1px solid var(--r-hair); padding-block: 1.4rem; }
@media (min-width: 800px) { .statstrip { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 799px) { .statstrip { text-align: center; } }
.statstrip .n { font-family: 'Heebo', sans-serif; font-weight: 800; font-size: 2.2rem; line-height: 1.15; color: var(--r-petrol); }
.statstrip .l { color: var(--r-muted); font-size: .92rem; }

/* --- key/value block (unit-details modal) ------------------------------------- */
.kv { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--r-hair-soft); border: 1px solid var(--r-hair); border-radius: var(--r-radius-img); overflow: hidden; }
@media (min-width: 640px) { .kv { grid-template-columns: 1fr 1fr; } }
.kv__row { background: #fff; padding: 1rem 1.2rem; }
.kv__k { font-size: .85rem; color: var(--r-muted); font-weight: 600; }
.kv__v { font-family: 'Heebo', sans-serif; font-weight: 700; color: var(--r-ink); font-size: 1.15rem; }

/* --- ghost button (modal plan link) -------------------------------------------- */
.btn--ghost { background: transparent; color: var(--r-ink); border-color: var(--r-hair); }
.btn--ghost:hover { border-color: var(--r-petrol); color: var(--r-petrol); }

/* --- modal (DH.ui.modal in common.js) ------------------------------------------ */
.modal { position: fixed; inset: 0; z-index: 80; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(8,22,31,.7); backdrop-filter: blur(3px); }
.modal.open { display: flex; }
.modal__box { background: #fff; border-radius: var(--r-radius-img); max-width: 460px; width: 100%; box-shadow: 0 18px 48px rgba(0,0,0,.3); overflow: hidden; }
.modal__head { padding: 1.2rem 1.4rem; border-bottom: 1px solid var(--r-hair); display: flex; justify-content: space-between; align-items: center; }
.modal__head h3 { font-size: 1.15rem; }
.modal__body { padding: 1.4rem; }
.modal__close { border: 0; background: var(--r-stone); width: 40px; height: 40px; border-radius: var(--r-radius); cursor: pointer; font-size: 1.2rem; color: var(--r-ink); }
.modal__close:hover { background: var(--r-petrol); color: #fff; }
.modal__body { max-height: 78vh; overflow: auto; }

/* wide variant: plan image (left) + details (right) */
.modal__box--wide { max-width: 900px; }
.model-pop { display: grid; gap: 1.6rem; align-items: start; }
@media (min-width: 720px) { .model-pop { grid-template-columns: 1fr 1.4fr; } } /* RTL: col 1 (right) = details, col 2 (left) = image */
.model-pop__img { background: var(--r-stone); border: 1px solid var(--r-hair-soft); border-radius: var(--r-radius-img); display: grid; place-items: center; min-height: 240px; }
.model-pop__img img { width: 100%; height: 100%; max-height: 430px; object-fit: contain; padding: .8rem; }
.model-pop__img--none { gap: .6rem; color: var(--r-muted); padding: 2rem; text-align: center; }
.model-pop__img--none svg { width: 44px; height: 44px; }
.model-pop__kv { grid-template-columns: 1fr; } /* single column inside the narrow details pane */
@media (max-width: 719px) { .model-pop .model-pop__img { order: -1; } } /* stacked: image on top */
/* action bar: one row spanning the popup, under the image + details */
.model-pop__footer { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--r-hair-soft); }
.model-pop__footer .btn { flex: 1 1 0; justify-content: center; text-align: center; min-width: 150px; gap: .5rem; }
.model-pop__footer .btn svg { width: 1.2em; height: 1.2em; }
.model-pop__back svg { transform: scaleX(-1); } /* back arrow points forward-right in RTL */