/* Luxury real estate v4 - residential launch site (style reference: ERA Residence; recreated, nothing copied).
   Plum title card with script watermark and chamfered frame, arch reveal, day/night, tall condensed display caps.
   Display: Instrument Serif (OFL) uppercase; script: Mrs Saint Delafield; text: Montserrat. HE: Bellefair + Assistant. Mobile first. */
.sv-luxury-real-estate {
  --plum: #2A1420; --plum-2: #36192A; --champ: #CDB991; --ivory: #F6F0E6; --lime: #ECE5DA; --umber: #2E2721; --bronze: #7A5F3E; --mute: #5E5650;
  --hair-d: rgba(205,185,145,.32); --hair-l: rgba(46,39,33,.16);
  --disp: "Instrument Serif", "Bodoni Moda", Georgia, serif; --text: "Montserrat", "DM Sans", Arial, sans-serif; --script: "Mrs Saint Delafield", cursive;
  --out: cubic-bezier(.25,1,.5,1); --io: cubic-bezier(.76,0,.24,1);
  background: var(--ivory); color: var(--umber); font: 300 16px/1.65 var(--text);
}
.sv-luxury-real-estate:lang(he) { --disp: "Bellefair", "Frank Ruhl Libre", serif; --text: "Assistant", "Heebo", Arial, sans-serif; font-weight: 400; }
.sv-luxury-real-estate h1, .sv-luxury-real-estate h2, .sv-luxury-real-estate h3 { font-family: var(--disp); font-weight: 400; text-transform: uppercase; letter-spacing: -.01em; line-height: .92; }
.sv-luxury-real-estate :lang(he) h1, .sv-luxury-real-estate :lang(he) h2, .sv-luxury-real-estate :lang(he) h3, .sv-luxury-real-estate h2:lang(he) { text-transform: none; letter-spacing: 0; line-height: 1.12; }
.sv-luxury-real-estate h2 { font-size: clamp(38px, 5.2vw, 84px); }
.sv-luxury-real-estate h2 em { font-style: italic; color: var(--bronze); }
.sv-luxury-real-estate :lang(he) em { font-style: normal; }
.sv-luxury-real-estate .kicker { display: block; font: 600 10px/1.5 var(--text); letter-spacing: .32em; text-transform: uppercase; }
.sv-luxury-real-estate :lang(he) .kicker { font-size: 13px; letter-spacing: 0; text-transform: none; font-weight: 600; }
.sv-luxury-real-estate .num { font: 600 10px var(--text); letter-spacing: .2em; }
.sv-luxury-real-estate .tlink { font: 600 11px var(--text); letter-spacing: .24em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid currentColor; min-height: 44px; }
.sv-luxury-real-estate :lang(he) .tlink { font-size: 15px; letter-spacing: 0; text-transform: none; }
.sv-luxury-real-estate .cta { font: 600 11px var(--text); letter-spacing: .24em; text-transform: uppercase; border-radius: 36px; padding: 16px 30px; transition: background .8s var(--io); }
.sv-luxury-real-estate :lang(he) .cta { font-size: 15px; letter-spacing: 0; text-transform: none; }
.sv-luxury-real-estate main > section { padding: 96px var(--g); position: relative; }
@media (min-width: 1000px) { .sv-luxury-real-estate main > section { padding-block: 160px; } }
[data-theme="dark"] { background: var(--plum); color: var(--ivory); }
[data-theme="dark"] h2, [data-theme="dark"] h3 { color: var(--ivory); }
[data-theme="dark"] .kicker, [data-theme="dark"] .num { color: var(--champ); }
[data-theme="light"] .kicker, [data-theme="light"] .num { color: var(--bronze); }

/* header: no bar; floats and takes the colour of the section under it */
.er-head { position: fixed; inset: 0 0 auto; z-index: 60; display: flex; align-items: center; gap: 20px; padding: 14px var(--g); color: var(--ivory); transition: color .4s var(--out); pointer-events: none; }
.er-head > * { pointer-events: auto; }
.er-head.on-light { color: var(--umber); }
.er-head.scrolled { background: var(--plum); transition: color .4s var(--out), background .4s var(--out); }
.er-head.scrolled.on-light { background: var(--ivory); box-shadow: 0 1px 0 var(--hair-l); }
.er-head .sp-mark { color: inherit; font-size: 13px; letter-spacing: .36em; }
.er-nav { display: none; margin-inline-start: auto; gap: 26px; }
.er-nav a { display: inline-flex; align-items: center; min-height: 44px; font: 600 10px var(--text); letter-spacing: .32em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid transparent; }
.er-nav a:hover { border-color: currentColor; }
:lang(he) .er-nav a { font-size: 14px; letter-spacing: 0; }
.er-r { display: flex; align-items: center; gap: 10px; margin-inline-start: auto; }
.er-head .sp-lang { color: inherit; border-color: currentColor; }
.er-cta { display: none; min-height: 44px; padding: 0 22px !important; }
.er-head .menu summary { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; list-style: none; cursor: pointer; font: 600 10px var(--text); letter-spacing: .32em; text-transform: uppercase; }
.er-head .menu summary::-webkit-details-marker { display: none; }
:lang(he) .er-head .menu summary { font-size: 14px; letter-spacing: 0; }
.burger { width: 20px; height: 7px; border-block: 1px solid currentColor; }
.er-head .menu nav { position: fixed; inset: 0; z-index: -1; display: grid; align-content: center; gap: 28px; padding: 80px var(--g) 40px; background: var(--plum); color: var(--ivory); overflow-y: auto; }
.er-head .menu nav a { display: flex; align-items: center; min-height: 44px; text-decoration: none; }
.er-head .menu .m-sec a { font: 400 40px/1 var(--disp); text-transform: uppercase; }
:lang(he) .er-head .menu .m-sec a { text-transform: none; font-size: 32px; }
.er-head .menu .m-svc, .er-head .menu .m-home { border-top: 1px solid var(--hair-d); padding-top: 14px; font-size: 14px; }
.er-head .menu[open] summary { color: var(--ivory); }
@media (min-width: 1000px) { .er-nav { display: flex; } .er-r { margin-inline-start: 0; } .er-cta { display: inline-flex; } .er-head .menu { display: none; } .er-head { padding-top: 22px; } }

/* title card: plum, chamfered frame, script watermark, condensed caps; the arch holds the render */
.er-hero { min-height: 100svh; display: grid; justify-items: center; align-content: start; gap: 28px; padding-top: 104px !important; overflow: hidden; text-align: center; }
.er-frame { position: absolute; inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); fill: none; stroke: rgba(246,240,230,.16); stroke-width: 1; pointer-events: none; }
@media (min-width: 1000px) { .er-frame { inset: 22px; width: calc(100% - 44px); height: calc(100% - 44px); } }
.er-water { position: absolute; inset-inline: 0; top: 18%; font: 400 clamp(120px, 26vw, 420px)/1 var(--script); color: rgba(246,240,230,.06); white-space: nowrap; pointer-events: none; text-align: center; }
.er-title { position: relative; z-index: 2; display: grid; justify-items: center; gap: 16px; width: 100%; }
.er-emblem { width: 44px; height: 44px; color: var(--champ); }
.er-flank { display: none; }
.er-hero h1 { display: grid; gap: 10px; color: var(--ivory); }
.er-hero h1 .l1 { font: 600 11px/1.5 var(--text); letter-spacing: .4em; color: var(--champ); }
.er-hero h1 .l2 { font-size: clamp(64px, 10vw, 160px); line-height: .86; }
:lang(he) .er-hero h1 .l1 { font: 400 24px/1.3 var(--disp); letter-spacing: 0; }
:lang(he) .er-hero h1 .l2 { font-size: clamp(56px, 9vw, 140px); line-height: 1.02; }
.er-for { font-size: 15px; color: rgba(246,240,230,.86); max-width: 34ch; }
@media (min-width: 1000px) {
  .er-flank { display: flex; position: absolute; inset-inline: calc(var(--g) + 40px); top: auto; bottom: 14px; justify-content: space-between; font: 400 22px var(--disp); letter-spacing: .8em; color: var(--champ); }
}
.er-arch { position: relative; z-index: 1; margin: 0; width: min(78vw, 440px); aspect-ratio: 3/4; border-radius: 999px 999px 0 0; overflow: hidden; outline: 1px solid var(--hair-d); outline-offset: 10px; }
.er-arch img { width: 100%; height: 100%; object-fit: cover; transition: filter .8s var(--io); }
.er-arch:after { content: ""; position: absolute; inset: 0; background: #1B1430; mix-blend-mode: multiply; opacity: 0; transition: opacity .8s var(--io); }
.er-arch[data-v="night"] img { filter: brightness(.62) saturate(.8) contrast(1.06); }
.er-arch[data-v="night"]:after { opacity: .45; }
.er-dn { position: relative; z-index: 3; display: flex; align-items: center; gap: 12px; }
.er-dn button { min-height: 44px; padding: 0 6px; border: 0; background: none; color: var(--ivory); font: 600 10px var(--text); letter-spacing: .32em; text-transform: uppercase; opacity: .55; cursor: pointer; transition: opacity .8s var(--io); }
:lang(he) .er-dn button { font-size: 14px; letter-spacing: 0; }
.er-dn button.on { opacity: 1; }
.er-dn button:focus-visible { outline: 1px solid var(--champ); outline-offset: 2px; }
.er-dn i { width: 58px; height: 1px; background: rgba(246,240,230,.4); position: relative; }
.er-dn i:after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 50%; background: var(--ivory); transition: transform .8s var(--io); }
.er-dn:has([data-v="night"].on) i:after { transform: translateX(100%); }
[dir="rtl"] .er-dn:has([data-v="night"].on) i:after { transform: translateX(-100%); }
.er-tag { position: relative; z-index: 2; display: grid; justify-items: center; gap: 14px; font: 600 10px var(--text); letter-spacing: .32em; text-transform: uppercase; color: var(--champ); padding-bottom: 8px; }
:lang(he) .er-tag { font-size: 13px; letter-spacing: 0; }
.er-tag i { width: 1px; height: 64px; background: var(--hair-d); }
/* desktop with motion: the arch sits behind the title and opens to full-bleed while pinned */
@media (min-width: 1000px) {
  .arch-pin .er-hero { height: 100vh; min-height: 0; display: block; padding: 0 !important; }
  .arch-pin .er-title { position: absolute; inset: 104px 0 auto; }
  .arch-pin .er-arch { position: absolute; left: 50%; bottom: 0; width: 30vw; height: 50vh; aspect-ratio: auto; translate: -50% 0; outline: 0; }
  .arch-pin .er-dn { position: absolute; left: 50%; bottom: 40px; translate: -50% 0; padding: 0 18px; border-radius: 36px; background: rgba(42,20,32,.78); }
  .arch-pin .er-tag { display: none; }
}

/* intro + spec list */
.er-intro { display: grid; gap: 34px; }
.er-lead { font: 400 clamp(24px, 2.6vw, 38px)/1.3 var(--disp); max-width: 30ch; color: var(--umber); }
:lang(he) .er-lead { line-height: 1.45; }
.er-intro .ctas { margin-top: 0; }
.er-spec { display: grid; gap: 0; border-top: 1px solid var(--hair-l); }
.er-spec div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--hair-l); }
.er-spec dt { font: 600 10px/2 var(--text); letter-spacing: .32em; text-transform: uppercase; color: var(--bronze); }
:lang(he) .er-spec dt { font-size: 13px; letter-spacing: 0; }
.er-spec dd { margin: 0; }
@media (min-width: 1000px) { .er-intro { grid-template-columns: 1.3fr 1fr; column-gap: 96px; align-items: start; } .er-intro .ctas { grid-column: 1; } .er-spec { grid-column: 2; grid-row: 1 / span 2; } }

/* why */
.er-why { display: grid; gap: 36px; background: var(--lime) !important; }
.er-why-h { display: grid; gap: 18px; }
.er-why-p { display: grid; gap: 18px; max-width: 560px; }
@media (min-width: 1000px) { .er-why { grid-template-columns: 1.2fr 1fr; gap: 96px; align-items: end; } }

/* insights inside a rising arch */
.er-arch-sec { background: var(--plum) !important; padding-inline: 0 !important; padding-bottom: 0 !important; }
.er-arch-in { background: var(--lime); color: var(--umber); border-radius: 50vw 50vw 0 0 / 34vw 34vw 0 0; padding: 18vw var(--g) 96px; display: grid; justify-items: center; text-align: center; gap: 22px; }
.er-arch-in h2 { max-width: 14ch; }
.er-vline { width: 1px; height: 96px; background: var(--hair-l); }
.er-arch-in ol { display: grid; gap: 0; max-width: 1080px; width: 100%; text-align: start; border-top: 1px solid var(--hair-l); }
.er-arch-in li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 22px 0; border-bottom: 1px solid var(--hair-l); }
@media (min-width: 1000px) { .er-arch-in { padding-top: 14vw; padding-bottom: 160px; } .er-arch-in ol { grid-template-columns: 1fr 1fr; column-gap: 72px; } }

/* services: framed property-style cards */
.er-svc header { display: grid; gap: 18px; margin-bottom: 48px; }
.er-cards { display: grid; gap: 14px; }
.er-card { position: relative; display: grid; gap: 14px; align-content: start; padding: 28px 26px 56px; border: 1px solid var(--hair-d); transition: background .8s var(--io); }
.er-card:hover { background: var(--plum-2); }
.er-card h3 { font-size: clamp(30px, 2.6vw, 40px); }
.er-card p { color: rgba(246,240,230,.86); font-size: 15px; }
.er-card .arr { position: absolute; bottom: 20px; inset-inline-end: 22px; color: var(--champ); }
.er-svc .center { margin-top: 40px; }
@media (min-width: 700px) { .er-cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .er-cards { grid-template-columns: repeat(3, 1fr); } }

/* sales journey: horizontal gallery, one panel per phase */
.er-jr { padding-inline: 0 !important; overflow: hidden; }
.er-jr-h { padding: 0 var(--g); display: grid; gap: 18px; margin-bottom: 48px; }
.er-jr-h p { max-width: 46ch; color: var(--mute); }
.er-jr-rail { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-inline: var(--g); }
.er-jr-rail::-webkit-scrollbar { display: none; }
.er-jr-rail:focus-visible { outline: 2px solid var(--bronze); outline-offset: -2px; }
.er-jr-track { display: flex; gap: 14px; width: max-content; }
.er-panel { scroll-snap-align: start; position: relative; width: 82vw; min-height: 440px; padding: 30px 26px; display: grid; align-content: end; gap: 18px; overflow: hidden; }
.er-panel.p0, .er-panel.p2 { background: var(--plum); color: var(--ivory); }
.er-panel.p0 h3, .er-panel.p2 h3 { color: var(--ivory); }
.er-panel.p0 .num, .er-panel.p2 .num { color: var(--champ); }
.er-panel.p1, .er-panel.p3 { background: var(--lime); }
.er-panel:before { content: attr(data-n); position: absolute; top: 10px; inset-inline-start: 18px; font: 400 clamp(160px, 22vw, 340px)/.8 var(--disp); opacity: .14; }
.er-panel h3 { font-size: clamp(36px, 3.6vw, 60px); margin: 8px 0 10px; }
.er-panel div { position: relative; max-width: 380px; }
.er-panel figure { margin: 0; position: relative; }
.er-panel figure img { width: 100%; max-height: 300px; object-fit: cover; border-radius: 999px 999px 0 0; }
@media (min-width: 1000px) {
  .er-panel { width: 46vw; min-height: 56vh; padding: 40px 48px; }
  .er-panel.p2 { grid-template-columns: 1fr 1fr; align-items: end; gap: 40px; }
  .er-panel figure img { max-height: 40vh; }
  .jr-pin .er-jr-rail { overflow: hidden; scroll-snap-type: none; }
  .jr-pin .er-jr { min-height: 100vh; display: grid; align-content: center; padding-block: 96px !important; }
}

/* NDA: framed card on plum */
.er-nda-card { max-width: 860px; margin: 0 auto; padding: 56px 28px; border: 1px solid var(--hair-d); outline: 1px solid var(--hair-d); outline-offset: 8px; text-align: center; display: grid; gap: 18px; justify-items: center; }
.er-nda-card p { color: rgba(246,240,230,.86); max-width: 60ch; }
.er-nda .chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border: 1px solid var(--champ); border-radius: 36px; color: var(--champ); font: 600 10px var(--text); letter-spacing: .32em; text-transform: uppercase; }
:lang(he) .er-nda .chip { font-size: 13px; letter-spacing: 0; }
.er-nda .center { margin-top: 36px; }
.er-nda .tlink { color: var(--champ); }

/* how we work */
.er-how h2 { margin-bottom: 48px; }
.er-how ol { display: grid; border-top: 1px solid var(--hair-l); }
.er-how li { display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; padding: 22px 0; border-bottom: 1px solid var(--hair-l); }
.er-how .num { grid-row: span 2; padding-top: 10px; }
.er-how h3 { font-size: 34px; }
.er-how p { color: var(--mute); }
@media (min-width: 1000px) { .er-how ol { grid-template-columns: repeat(5, 1fr); border-top: 0; } .er-how li { grid-template-columns: none; gap: 10px; padding: 24px 24px 0; border-bottom: 0; border-inline-start: 1px solid var(--hair-l); } .er-how li:first-child { border: 0; padding-inline-start: 0; } .er-how .num { grid-row: auto; padding: 0; } }

/* why Shani: arched portrait */
.er-shani { display: grid; gap: 40px; background: var(--lime) !important; }
.er-arch-img { margin: 0; max-width: 440px; }
.er-arch-img img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 999px 999px 0 0; }
.er-shani > div { display: grid; gap: 18px; align-content: center; max-width: 560px; }
@media (min-width: 1000px) { .er-shani { grid-template-columns: 1fr 1.2fr; gap: 96px; align-items: center; } }

/* FAQ */
.er-faq { display: grid; gap: 18px; }
.er-faq .faq { max-width: 900px; border-top: 1px solid var(--hair-l); margin-top: 24px; }
.er-faq .faq details { border-color: var(--hair-l); }
.er-faq summary { font: 400 24px/1.25 var(--disp); text-transform: uppercase; }
:lang(he) .er-faq summary { text-transform: none; font-size: 22px; }
.er-faq details p { color: var(--mute); }

/* contact: framed panel */
.er-cta-band { padding: 14px !important; }
.er-cta-frame { border: 1px solid var(--hair-d); padding: 88px var(--g); text-align: center; }
.er-cta-band h2 span, .er-cta-band h2 em { display: block; }
.er-cta-band h2 { font-size: clamp(32px, 4.2vw, 68px); }
.er-cta-band h2 em { color: var(--champ); }
.er-cta-band .er-cta-frame > p, .er-cta-band .sf-note, .er-cta-band .mail, .er-cta-band .sf a { color: var(--ivory); }
.er-cta-band .mail { margin-top: 20px; }
@media (min-width: 1000px) { .er-cta-band { padding: 22px !important; } }
.sv-luxury-real-estate .sp-foot { background: var(--plum); color: var(--ivory); }

/* side scroll index (desktop, decorative) */
.er-index { display: none; }
@media (min-width: 1000px) {
  .js .er-index { position: fixed; z-index: 40; inset-inline-start: 34px; top: 50%; translate: 0 -50%; display: grid; justify-items: center; gap: 10px; font: 600 10px var(--text); letter-spacing: .1em; color: var(--idx, var(--ivory)); transition: color .4s var(--out); }
  .js .er-index i { width: 1px; height: 200px; background: currentColor; opacity: .25; position: relative; }
  .js .er-index s { position: absolute; inset: 0; background: currentColor; transform: scaleY(var(--ip, 0)); transform-origin: top; }
  .js .er-index span { writing-mode: vertical-rl; letter-spacing: .32em; text-transform: uppercase; }
}

/* preloader (created by JS, once per session) */
.er-pre { position: fixed; inset: 0; z-index: 100; background: var(--plum); display: grid; place-items: center; align-content: center; gap: 16px; color: var(--champ); }
.er-pre i { width: 1px; height: 86px; background: rgba(205,185,145,.25); position: relative; }
.er-pre s { position: absolute; inset: 0; background: var(--champ); transform: scaleY(0); transform-origin: top; }
.er-pre b { font: 600 10px var(--text); letter-spacing: .3em; }
@media (prefers-reduced-motion: reduce) { .er-arch img, .er-arch:after, .er-dn i:after, .er-dn button, .er-card, .er-head { transition: none; } }
@media (max-width: 699px) { .er-cta-band h2 span, .er-cta-band h2 em { display: inline; } }