/* Golden Visa page: hero with a window onto the islands, "empty is not neutral",
   the five-year ruler (sticky, scroll-driven), the route chooser, conversion,
   buying, FAQ. Palette from site.css?v=927a8a364c only. Layout is logical so Hebrew mirrors. */

/* ---------------------------------------------------------------- hero -- */
.gv-hero {
  max-width: var(--maxw); margin-inline: auto; min-height: 100svh;
  padding: clamp(3.5rem, 9svh, 6rem) var(--gutter) 3.5rem; border-top: 1px solid var(--hair);
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 5vw, 6rem); align-items: center;
}
.gv-hero__title { font-size: clamp(2.3rem, 1.2rem + 3.6vw, 5rem); line-height: 1.04; letter-spacing: -0.025em; max-width: 17ch; }
.gv-hero__lede { margin-top: 1.8rem; max-width: 40ch; font-size: var(--t-base); color: color-mix(in oklab, var(--ink) 96%, var(--bg)); }
.gv-hero__also { margin-top: 1.1rem; font: italic 400 var(--t-xl)/1.25 var(--display); color: var(--gold); max-width: 28ch; }
:lang(he) .gv-hero__also { font-style: normal; }
.gv-hero__acts { margin-top: 2.4rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 2rem; }
.gv-hero__link { font: 500 .78rem/1 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-soft); text-underline-offset: .45em; padding-block: .6rem; }
:lang(he) .gv-hero__link { letter-spacing: 0; text-transform: none; font-size: .95rem; }
@media (hover: hover) and (pointer: fine) { .gv-hero__link:hover { color: var(--gold); } }

.gv-hero__fig { position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: var(--r); overflow: clip; box-shadow: 0 0 0 1px var(--gold-soft), 0 30px 60px -30px hsl(0 0% 0% / .8); }
.gv-hero__fig::after { content: ""; position: absolute; inset: .9rem; border: 1px solid color-mix(in oklab, var(--gold) 55%, transparent); border-radius: 2px; pointer-events: none; }
.gv-hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; transform: scale(1.03); }

/* ----------------------------------------------- jump to buy, rent, manage -- */
.gv-jump { display: flex; flex-wrap: wrap; gap: .2rem 2.2rem; margin: 0; padding-block-end: .7rem; border-block-end: 1px solid var(--gold-soft); }
.gv-jump__a { display: inline-flex; align-items: baseline; gap: .55rem; min-height: 44px; padding-block: .5rem; color: inherit; text-decoration: none; }
.gv-jump__h { font: italic 400 var(--t-xl)/1.1 var(--display); color: var(--gold); }
:lang(he) .gv-jump__h { font-style: normal; }
.gv-jump__s { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.gv-jump__a::after { content: "\2193"; color: var(--gold-soft); transition: transform 300ms var(--ease), color 300ms var(--ease); }
.gv-jump__a:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 2px; }
@media (hover: hover) and (pointer: fine) {
  .gv-jump__a:hover::after { color: var(--gold); transform: translateY(3px); }
  .gv-jump__a:hover .gv-jump__h { text-decoration: underline; text-underline-offset: .3em; }
}
@media (max-width: 560px) { .gv-jump { gap: .1rem 1.4rem; } }
@media (prefers-reduced-motion: reduce) { .gv-jump__a::after { transition: none; } }
.by, #rent, #manage { scroll-margin-top: 4rem; }
.gv-top { max-width: var(--maxw); margin-inline: auto; padding: clamp(5.5rem, 11svh, 7rem) var(--gutter) 0; }
.gv-top__h { font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.6rem); line-height: 1.06; letter-spacing: -0.02em; max-width: 24ch; margin-block-end: 1.4rem; }

/* ------------------------------------------------------- empty is not neutral -- */
.gv-empty { max-width: var(--maxw); margin-inline: auto; padding: clamp(4rem, 12svh, 9rem) var(--gutter); border-top: 1px solid var(--hair); }
.gv-empty__h { font-size: var(--t-3xl); line-height: 1; letter-spacing: -0.03em; color: var(--gold); font-style: italic; max-width: 12ch; }
:lang(he) .gv-empty__h { font-style: normal; }
.gv-empty__cols { margin-top: 2.6rem; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 2rem clamp(2rem, 6vw, 7rem); align-items: start; }
.gv-empty__cols p { max-width: 46ch; font-size: var(--t-base); }
.gv-empty__fine { padding-inline-start: 1.6rem; border-inline-start: 1px solid var(--gold-soft); color: var(--ink); }

/* ------------------------------------------------------------- the ruler -- */
.rl { position: relative; height: 540svh; border-top: 1px solid var(--hair); }
.rl__stage {
  position: sticky; top: 0; height: 100svh; max-width: var(--maxw); margin-inline: auto;
  padding: 6.5rem var(--gutter) 3rem; display: grid; grid-template-rows: auto auto 1fr; align-content: center; gap: clamp(2rem, 6svh, 4rem);
}
.rl__h { font-size: var(--t-3xl); line-height: 1; letter-spacing: -0.03em; max-width: 14ch; }
.rl__head .kicker { margin-bottom: 1rem; }

.rl__track { position: relative; padding-block: 1.2rem 2.6rem; }
.rl__line { position: absolute; inset-inline: .55rem; inset-block-start: 1.75rem; height: 1px; background: var(--hair); }
.rl__fill { position: absolute; inset: -1px 0; background: var(--gold); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
[dir="rtl"] .rl__fill { transform-origin: 100% 50%; }
.rl__nodes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); position: relative; }
.rl__node { display: grid; justify-items: start; gap: .9rem; }
.rl__dot { width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 1px var(--gold-soft); transition: background-color 400ms var(--ease), box-shadow 400ms var(--ease), transform 500ms var(--ease); }
.rl__node.is-lit .rl__dot { background: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.rl__node.is-top .rl__dot { transform: scale(1.35); }
.rl__roman { font: 400 1.5rem/1 var(--display); letter-spacing: .06em; color: var(--gold-soft); transition: color 400ms var(--ease); }
.rl__node.is-lit .rl__roman, .rl__node.is-top .rl__roman { color: var(--gold); }
.rl__label { font: 500 .68rem/1.2 var(--text); letter-spacing: .2em; text-transform: uppercase; color: color-mix(in oklab, var(--ink) 80%, var(--bg)); }
:lang(he) .rl__label { letter-spacing: 0; text-transform: none; font-size: .9rem; }
.rl__node.is-top .rl__label { color: var(--ink); }

.rl__short { position: absolute; inset-inline-start: 0; inset-block-end: 0; display: flex; align-items: center; gap: .9rem; font: 500 .66rem/1 var(--text); letter-spacing: .2em; text-transform: uppercase; color: color-mix(in oklab, var(--ink) 55%, var(--bg)); opacity: 0; transition: opacity 500ms var(--ease); }
:lang(he) .rl__short { letter-spacing: 0; text-transform: none; font-size: .85rem; }
.rl__short-bar { width: 5rem; height: 1px; background: color-mix(in oklab, var(--ink) 45%, var(--bg)); position: relative; }
.rl__short-bar::after { content: ""; position: absolute; inset-inline: -.3rem; top: -6px; height: 13px; border-inline-end: 1px solid var(--gold); transform: skewX(-24deg); }
.rl__short.is-on { opacity: 1; }

.rl__text { display: grid; align-items: start; min-height: 14rem; }
.rl__ch { grid-area: 1 / 1; opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--ease), transform 800ms var(--ease); }
.rl__ch.is-on { opacity: 1; transform: none; }
.rl__ch:not(.is-on) { pointer-events: none; }
.rl__ch .cta { margin-top: 1.6rem; }
.rl__hint { display: flex; align-items: center; gap: 1rem; font: 500 .7rem/1 var(--text); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-soft); }
.rl__hint::before { content: ""; width: 3rem; height: 1px; background: var(--gold); transform-origin: 0 50%; animation: gv-hint 2.4s var(--ease) 2; }
[dir="rtl"] .rl__hint::before { transform-origin: 100% 50%; }
:lang(he) .rl__hint { letter-spacing: 0; text-transform: none; font-size: .95rem; }
@keyframes gv-hint { 0% { transform: scaleX(0); } 60% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } }
.rl__mark { display: flex; align-items: baseline; gap: .9rem; font: 500 .72rem/1 var(--text); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 1.2rem; }
:lang(he) .rl__mark { letter-spacing: 0; text-transform: none; font-size: .95rem; }
.rl__big { font: 400 1.5rem/1 var(--display); letter-spacing: .06em; color: var(--gold); }
.rl__title { font: italic 400 var(--t-2xl)/1.04 var(--display); letter-spacing: -0.02em; color: var(--gold); max-width: 18ch; }
:lang(he) .rl__title { font-style: normal; }
.rl__body { margin-top: 1.2rem; max-width: 46ch; color: color-mix(in oklab, var(--ink) 97%, var(--bg)); }

/* ------------------------------------------------------------ the routes -- */
.rt { max-width: var(--maxw); margin-inline: auto; padding: clamp(4rem, 12svh, 9rem) var(--gutter); border-top: 1px solid var(--hair); }
.rt__title { font-size: var(--t-3xl); line-height: 1; letter-spacing: -0.03em; }
.rt__body { margin-top: 3rem; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 4vw, 5rem); align-items: stretch; }
.rt__tabs { display: grid; gap: .8rem; align-content: start; }
.rt__tab {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; width: 100%; text-align: start; cursor: pointer;
  padding: 1.15rem 1.3rem; background: transparent; color: var(--ink); border: 1px solid var(--hair); border-radius: var(--r);
  font: 400 1.3rem/1.2 var(--display); transition: border-color 300ms var(--ease), background-color 300ms var(--ease);
}
.rt__sum { font: 500 .8rem/1 var(--text); letter-spacing: .1em; color: var(--gold-soft); white-space: nowrap; }
.rt__tab[aria-selected="true"] { border-color: var(--gold); background: var(--surface); }
.rt__tab[aria-selected="true"] .rt__sum { color: var(--gold); }
@media (hover: hover) and (pointer: fine) { .rt__tab:hover { border-color: var(--gold-soft); } }
.rt__plate { background: var(--raised); border-radius: var(--r); padding: clamp(1.6rem, 3.4vw, 3.4rem); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--ink) 10%, transparent); min-height: 20rem; }
.rt__panel:not([hidden]) { animation: gv-in 500ms var(--ease); }
@keyframes gv-in { from { opacity: 0; transform: translateY(10px); } }
.rt__amount { font: 400 clamp(3.2rem, 2rem + 5vw, 6.4rem)/1 var(--display); letter-spacing: -0.03em; color: var(--gold); }
.rt__h { margin-top: 1rem; font: 400 var(--t-xl)/1.15 var(--display); }
.rt__list { margin: 1.6rem 0 0; padding: 0; list-style: none; display: grid; gap: .9rem; }
.rt__list li { position: relative; padding-inline-start: 1.6rem; max-width: 52ch; }
.rt__list li::before, .cv__facts li::before { content: ""; position: absolute; inset-inline-start: 0; top: .85em; width: .8rem; height: 1px; background: var(--gold); }
.rt__note { margin-top: 2rem; max-width: 70ch; font-size: var(--t-sm); color: color-mix(in oklab, var(--ink) 75%, var(--bg)); }

/* ----------------------------------------------------------- conversion -- */
.cv { max-width: var(--maxw); margin-inline: auto; padding: clamp(4rem, 12svh, 9rem) var(--gutter); border-top: 1px solid var(--hair);
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 6rem); align-items: start; }
.cv__fig { grid-column: 1; grid-row: 1 / 3; margin: 0; position: sticky; top: 7rem; aspect-ratio: 4 / 5; border-radius: var(--r); overflow: clip; box-shadow: 0 0 0 1px var(--gold-soft); }
.cv__fig img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; transform: scale(1.05); }
.cv__text { grid-column: 2; }
.cv__h { font-size: var(--t-3xl); line-height: 1; letter-spacing: -0.03em; max-width: 12ch; }
.cv__p { margin-top: 1.4rem; max-width: 52ch; font-size: var(--t-base); }
.cv__sub { margin-top: 2.2rem; font: italic 400 var(--t-xl)/1.1 var(--display); color: var(--gold); }
:lang(he) .cv__sub { font-style: normal; }
.cv__facts { margin: 1.1rem 0 0; padding: 0; list-style: none; display: grid; gap: .8rem; }
.cv__facts li { position: relative; padding-inline-start: 1.6rem; max-width: 52ch; }
.cv__facts--tight { gap: .55rem; font-size: var(--t-sm); }
.cv__plate { grid-column: 2; background: var(--raised); border-radius: var(--r); padding: clamp(1.6rem, 3vw, 2.8rem); border-inline-start: 2px solid var(--gold);
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--ink) 10%, transparent); }
.cv__real { font: 400 var(--t-2xl)/1.05 var(--display); color: var(--gold); letter-spacing: -0.02em; margin-bottom: 1.2rem; }
.cv__plate .cta { margin-top: 1.8rem; }

/* --------------------------------------------------------------- buying -- */
.by { max-width: var(--maxw); margin-inline: auto; padding: clamp(3rem, 8svh, 6rem) var(--gutter) clamp(4rem, 12svh, 9rem); border-top: 1px solid var(--hair);
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 5vw, 6rem); align-items: center; }
.by__fig { margin: 0; aspect-ratio: 16 / 10; border-radius: var(--r); overflow: clip; box-shadow: 0 0 0 1px var(--gold-soft); }
.by__fig img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; transform: scale(1.05); }
.by__h { font-size: var(--t-3xl); line-height: 1; letter-spacing: -0.03em; }
.by__p { margin-top: 1.4rem; max-width: 40ch; }
.by .cta { margin-top: 2rem; }

/* ------------------------------------------------------------------ FAQ -- */
.fq { max-width: 60rem; margin-inline: auto; padding: clamp(3rem, 8svh, 6rem) var(--gutter) clamp(3rem, 8svh, 6rem); border-top: 1px solid var(--hair); }
.fq__h { font-size: var(--t-2xl); line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 2rem; }
.fq__item { border-bottom: 1px solid var(--hair); }
.fq__item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; padding: 1.3rem 0; font: 400 var(--t-xl)/1.2 var(--display); }
.fq__item summary::-webkit-details-marker { display: none; }
.fq__item summary::after { content: "+"; color: var(--gold); font: 400 1.8rem/1 var(--text); transition: transform 240ms var(--ease); }
.fq__item[open] summary::after { transform: rotate(45deg); }
.fq__item p { padding-bottom: 1.4rem; max-width: 58ch; color: color-mix(in oklab, var(--ink) 90%, var(--bg)); }
.fq__item[open] p { animation: gv-in 360ms var(--ease); }

/* ------------------------------------------------------------------ end -- */
.gv-end { max-width: var(--maxw); margin-inline: auto; padding: 2rem var(--gutter) 6rem; display: grid; gap: .8rem; justify-items: start; }
.gv-end p { font-size: var(--t-sm); color: color-mix(in oklab, var(--ink) 75%, var(--bg)); max-width: 70ch; }
.gv-end__credit { font-size: .75rem !important; opacity: .8; }
.gv-end .next { margin-top: 2rem; }

/* ---------------------------------------------------------------- phone -- */
@media (max-width: 860px) {
  .gv-hero { grid-template-columns: 1fr; min-height: 0; padding-top: 3.5rem; }
  .gv-hero__fig { aspect-ratio: 4 / 3; order: -1; }
  .gv-empty__cols, .rt__body, .cv, .by { grid-template-columns: 1fr; }
  .cv__fig { position: relative; top: 0; grid-column: 1; grid-row: auto; aspect-ratio: 4 / 3; }
  .cv__text, .cv__plate { grid-column: 1; }
  .rl { height: 520svh; }
  .rl__stage { padding-top: 5.5rem; gap: 1.6rem; }
  .rl__nodes { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .rl__label { font-size: .56rem; letter-spacing: .08em; }
  :lang(he) .rl__label { font-size: .72rem; }
  .rl__roman { font-size: 1.1rem; }
  .rl__short { display: none; }
  .rl__text { min-height: 16rem; }
}

@media (prefers-reduced-motion: reduce) {
  .gv-hero__img, .cv__fig img, .by__fig img { transform: none; }
  .rl { height: auto; }
  .rl__stage { position: relative; height: auto; padding-block: 5rem; }
  .rl__ch { grid-area: auto; opacity: 1; transform: none; margin-bottom: 2.4rem; }
  .rl__text { display: block; }
  .rl__ch--intro { display: none; }
  .rl__fill { transform: none; }
  .rl__node .rl__dot { background: var(--gold); }
  .rl__short { opacity: 1; }
  .rt__panel:not([hidden]), .fq__item[open] p { animation: none; }
}
