/* v5: the new identity («amber and night») and the scenes after the opening. Loaded after style.css (the stage and the opening act of v4) and overrides it.
   The picture of the opening is still drawn by stage.js; scenes.js only writes progress numbers (custom properties) and transforms, the layout lives here.
   Without scenes.js, or with reduced motion (no .fx on <html>), every scene is a plain stacked section. */
:root {
  --bg: #121010; --panel: #1D1916; --amber: #FFB13B; --orange: #FF7A2F; --cream: #F7F1E8; --ink: #17120E;
  --blue: #17120E;                                   /* the navy of v4 is the warm black now (the header over the sky, the skip link) */
  --gut: clamp(18px, 6vw, 110px);
  --ease: cubic-bezier(.23, 1, .32, 1);
}
html, body { background: var(--bg); color: var(--cream); }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.stage { background: var(--bg); }
.note, .note-act { display: none !important; }

/* ---------------------------------------------------------------- header and buttons in the new colours */
.site-header { opacity: var(--hdr-o, 1); }
.site-header.dark { color: var(--ink); }
.site-header.off { pointer-events: none; visibility: hidden; }
.brand { gap: 10px; font-weight: 300; }
.brand b, .foot-name b { font-weight: 900; }
.mark { display: block; width: 30px; height: 30px; flex: none; overflow: visible; }
.no-js .site-header, .static .site-header { background: rgba(18, 16, 16, .8); }
.btn { --fill: #FFC966; background: var(--amber); color: var(--ink); border-radius: 99px; }
.btn2 { display: inline-flex; align-items: center; gap: 10px; font: 700 clamp(16px, 1.25vw, 19px)/1 var(--font); text-decoration: none; padding: 16px 26px; border-radius: 99px; background: var(--amber); color: var(--ink); transition: scale 160ms var(--ease), background 220ms var(--ease), color 220ms var(--ease); }
.btn2.ghost { background: transparent; color: var(--cream); box-shadow: inset 0 0 0 1.5px rgba(247, 241, 232, .55); }
.btn2:active { scale: .97; }
.btn2 .arr { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) { .btn2.ghost:hover { background: var(--cream); color: var(--ink); } .btn2:not(.ghost):hover { background: #FFC966; } }
.eyebrow { display: inline-block; font: 600 clamp(13px, 1vw, 16px)/1 var(--font); letter-spacing: .04em; padding: 9px 16px; border-radius: 99px; box-shadow: inset 0 0 0 1.5px rgba(247, 241, 232, .4); color: rgba(247, 241, 232, .86); }
.hx { font: 900 clamp(32px, 4.3vw, 76px)/1.03 var(--font); letter-spacing: -.02em; text-wrap: balance; }
.hx em { font-style: normal; color: var(--amber); }
.lede { font: 400 clamp(16px, 1.3vw, 21px)/1.55 var(--body); color: rgba(247, 241, 232, .8); }

/* ---------------------------------------------------------------- scene 1: the picture of the opening shrinks into a tilted card, the page turns dark, the statement lights up word by word */
.s1 { background: var(--bg); padding: 14vh var(--gut); }
.s1-halo { display: none; }
.say { font: 800 clamp(24px, 3.05vw, 54px)/1.22 var(--font); letter-spacing: -.012em; margin-top: 22px; text-wrap: pretty; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.chips li { font: 600 clamp(13px, 1vw, 16px)/1 var(--font); padding: 11px 17px; border-radius: 99px; background: rgba(247, 241, 232, .07); box-shadow: inset 0 0 0 1.5px rgba(247, 241, 232, .22); }
.fx.live .runway { height: 730vh; height: 730svh; }      /* the pinned stage (100) + the journey of v4 (420) + the hold of its finale (40): main.js; then scene 1 (170): scenes.js */
.fx.live .stage canvas, .fx.live .poster { transform: var(--gl-t, none) !important; border-radius: var(--gl-r, 0); transform-origin: 50% 50%; will-change: transform; }
.fx.live .poster { overflow: hidden; }
.fx.live .act-final.fading { filter: opacity(var(--fin-o, 1)); }      /* a filter, not the opacity property: main.js writes the opacity of the acts itself (an !important opacity here showed the dark plate of the finale over the whole journey) */
.fx.live .act-final.gone * { pointer-events: none !important; }
.fx.live .s1 { position: absolute; inset: 0; z-index: 4; padding: 0; background: none; pointer-events: none; opacity: var(--s1-o, 0); }
.fx.live .s1-halo { display: block; position: absolute; inset: 0; background: radial-gradient(52vw 62vh at 27% 50%, rgba(255, 150, 40, .30), transparent 66%); }
.fx.live .s1-txt { position: absolute; inset-inline-start: var(--gut); top: 50%; translate: 0 -50%; width: min(43vw, 760px); }
.fx.live .say .w { opacity: calc(.15 + .85 * var(--on, 0)); }
.fx.live .chips { opacity: var(--chips-o, 0); translate: 0 calc((1 - var(--chips-o, 0)) * 16px); }

/* ---------------------------------------------------------------- the scenes: a tall section with one pinned screen */
.scene { position: relative; padding: 12vh var(--gut); }
.glow { display: none; }
.fx .scene { padding: 0; }
.fx .scene .pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; }
.fx .glow { display: block; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(48vw 58vh at var(--gx, 28%) var(--gy, 50%), rgba(255, 150, 40, .26), transparent 66%); }

/* ---------------------------------------------------------------- scene 2: the deck of four glass cards */
.s2-txt .hx { margin-top: 20px; }
.s2-txt .lede { margin-top: 18px; max-width: 34em; }
.s2-txt .btn2 { margin-top: 28px; }
.deck { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 40px; }
.gc { position: relative; isolation: isolate; border-radius: 28px; padding: clamp(22px, 2.3vw, 36px); background: linear-gradient(160deg, rgba(247, 241, 232, .13), rgba(247, 241, 232, .045)); box-shadow: inset 0 0 0 1.5px rgba(247, 241, 232, .2); }
.gc .no { display: block; font: 900 clamp(54px, 6.2vw, 104px)/.9 var(--font); letter-spacing: -.03em; color: var(--amber); }
.gc h3 { font: 800 clamp(21px, 2vw, 33px)/1.14 var(--font); letter-spacing: -.01em; margin-top: .55em; }
.gc p { font: 400 clamp(15px, 1.12vw, 18px)/1.55 var(--body); margin-top: .75em; opacity: .88; }
.fx .s2 { height: 430vh; height: 430svh; }
.fx .s2-txt { position: absolute; inset-inline-start: var(--gut); top: 50%; translate: 0 -50%; width: min(40vw, 640px); }
.fx .deck { position: absolute; inset-inline-end: calc(var(--gut) + 12vw); top: 50%; translate: 0 -50%; display: block; margin: 0; width: min(29vw, 430px, 52vh); aspect-ratio: 4 / 5.3; perspective: 1500px; }
.fx .gc { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; transform: var(--tf, none); opacity: var(--o, 1); will-change: transform, opacity; backface-visibility: hidden;
          background: linear-gradient(160deg, rgba(60, 52, 46, .92), rgba(34, 29, 26, .92)); box-shadow: 0 34px 70px rgba(0, 0, 0, .55), inset 0 0 0 1.5px rgba(247, 241, 232, .2);
          color: color-mix(in srgb, var(--ink) calc(var(--on, 0) * 100%), var(--cream)); }
.fx .gc::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(150deg, #FFC75E, #FFA02A); opacity: var(--on, 0); box-shadow: 0 30px 90px rgba(255, 150, 40, .45); }
.fx .gc .no { position: absolute; top: clamp(18px, 2vw, 30px); inset-inline-start: clamp(22px, 2.3vw, 36px); color: color-mix(in srgb, var(--ink) calc(var(--on, 0) * 100%), var(--amber)); }

/* ---------------------------------------------------------------- the plain sections after the end (reviews, questions): they rise once when they come into view */
.plain { padding: clamp(70px, 13vh, 150px) var(--gut); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(26px, 5vw, 90px); align-items: start; }
.plain + .plain { padding-top: 0; }
.plain-head .hx { margin-top: 18px; }
.plain-head .lede { margin-top: 10px; }
.fx .rise { opacity: 0; translate: 0 26px; transition: opacity 700ms var(--ease) var(--d, 0s), translate 900ms var(--ease) var(--d, 0s); }
.fx .rise.in { opacity: 1; translate: none; }
.rev-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.rev { border-radius: 24px; padding: 24px; background: linear-gradient(160deg, rgba(247, 241, 232, .1), rgba(247, 241, 232, .035)); box-shadow: inset 0 0 0 1.5px rgba(247, 241, 232, .16); display: flex; flex-direction: column; gap: 12px; }
.stars { color: var(--amber); font-size: 20px; letter-spacing: 3px; line-height: 1; }
.rev-t { font: 600 clamp(17px, 1.35vw, 21px)/1.45 var(--font); flex: 1; }
.rev-n { font: 700 15px/1.2 var(--font); }
.rev-n span { font-weight: 400; opacity: .65; }
.qa { display: grid; gap: 10px; }
.qa details { border-radius: 20px; background: rgba(247, 241, 232, .055); box-shadow: inset 0 0 0 1.5px rgba(247, 241, 232, .14); transition: background 240ms var(--ease), box-shadow 240ms var(--ease); }
.qa details[open] { background: rgba(255, 177, 59, .09); box-shadow: inset 0 0 0 1.5px rgba(255, 177, 59, .55); }
.qa summary { list-style: none; cursor: pointer; display: block; position: relative; padding: 22px 24px; padding-inline-end: 76px; font: 700 clamp(17px, 1.4vw, 22px)/1.3 var(--font); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; position: absolute; inset-inline-end: 20px; top: 50%; margin-top: -17px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 400 24px/1 var(--font); color: var(--ink); background: var(--amber); transition: rotate 300ms var(--ease); }
.qa details[open] summary::after { rotate: 45deg; }
.ans { padding: 0 24px 22px; display: grid; gap: 10px; max-width: 46em; }
.ans p { font: 400 clamp(15px, 1.15vw, 18px)/1.65 var(--body); color: rgba(247, 241, 232, .86); }
@media (max-width: 760px), (max-aspect-ratio: 9/10) { .plain { grid-template-columns: 1fr; } .qa summary { padding: 17px 18px; padding-inline-end: 66px; } .qa summary::after { inset-inline-end: 16px; } .ans { padding: 0 18px 18px; } }

/* ---------------------------------------------------------------- the contact dock: floats at the bottom from the end of the opening on */
.dock { position: fixed; inset-inline: 0; bottom: max(14px, env(safe-area-inset-bottom, 0px)); z-index: 40; margin-inline: auto; width: max-content; max-width: calc(100vw - 20px); display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 99px;
        background: rgba(34, 29, 26, .72); box-shadow: 0 14px 40px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(247, 241, 232, .2); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
        font: 700 15px/1 var(--font); transition: translate 520ms cubic-bezier(.32, .72, 0, 1), opacity 300ms linear; }
.fx .dock:not(.on), .dock.by-form { translate: 0 140%; opacity: 0; pointer-events: none; }      /* by-form: the lead form card is on the screen (scenes.js) */
.dock a { display: flex; align-items: center; min-height: 44px; padding: 0 17px; border-radius: 99px; text-decoration: none; color: var(--cream); white-space: nowrap; transition: background 200ms var(--ease), scale 160ms var(--ease); }
.dock a:active { scale: .96; }
.dock .dock-home { padding: 0 10px; }
/* the valuation link (.dock-val) is shown at every width (10 Oct, the owner's yes; it used to be hidden on a wide screen), the colours stay: only the call button is amber */
.dock .mark { width: 26px; height: 26px; }
.dock .dock-wa { box-shadow: inset 0 0 0 1.5px rgba(247, 241, 232, .4); }
.dock .dock-call { background: var(--amber); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .dock a:not(.dock-call):hover { background: rgba(247, 241, 232, .12); } .dock .dock-call:hover { background: #FFC966; } }

/* ---------------------------------------------------------------- footer */
.foot { background: #0C0B0A; color: rgba(247, 241, 232, .8); padding: 48px var(--gut) 104px; font: 400 15.5px/1.5 var(--body); }
.foot a { text-decoration: none; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 28px 40px; }
.foot .social { columns: 2; column-gap: 22px; }
.foot-name { display: flex; align-items: center; gap: 12px; font: 300 26px/1 var(--font); color: var(--cream); }
.foot-line, .foot-lic { margin-top: 10px; }
.foot ul { list-style: none; }
.foot-contact { margin-top: 14px; }
.foot-h { font: 700 15px/1 var(--font); color: var(--amber); margin-bottom: 12px; }
.foot-h2 { margin-top: 26px; }
.foot-nav li, .foot-contact li { margin-top: 4px; break-inside: avoid; }
.foot-base { margin-top: 30px; padding-top: 18px; box-shadow: inset 0 1px 0 rgba(247, 241, 232, .14); display: flex; flex-wrap: wrap; gap: 8px 26px; font-size: 14px; opacity: .8; }
.legal { display: flex; flex-wrap: wrap; gap: 6px 20px; }
@media (hover: hover) and (pointer: fine) { .foot a:hover { color: var(--amber); } }

/* ---------------------------------------------------------------- phone and narrow screens */
@media (max-width: 760px), (max-aspect-ratio: 9/10) {
  .act-open .h1 { color: var(--ink); }                                 /* the headline of a phone stands in the sky: warm black (it was navy) */
  .fx.live .s1-halo { background: radial-gradient(90vw 40vh at 50% 26%, rgba(255, 150, 40, .30), transparent 66%); }
  .fx.live .s1-txt { inset-inline: var(--gut); top: auto; bottom: 13svh; translate: none; width: auto; }
  .say { font-size: clamp(21px, 5.9vw, 30px); margin-top: 14px; }
  .chips { margin-top: 18px; gap: 8px; }
  .fx .s2-txt { inset-inline: var(--gut); top: calc(9svh + 6px); translate: none; width: auto; }
  .fx .s2-txt .lede, .fx .s2-txt .btn2 { display: none; }      /* a phone window with little height: no room above the deck (the tall-phone block at the end of the file shows them again) */
  .hx { font-size: clamp(28px, 8.2vw, 44px); }
  .fx .deck { inset-inline: 0; margin-inline: auto; top: auto; bottom: 14svh; translate: none; width: min(74vw, 46svh); }
  .dock { font-size: 14px; }
  .dock .dock-link { display: none; }                                  /* a phone: the three actions of the contact bar of v4 (the button of the finale is not shown on a phone) */
  .dock a { padding: 0 13px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}

/* ================================================================ scenes 3 - 6 */
.more2 { display: inline-flex; align-items: center; gap: 8px; font: 700 clamp(15px, 1.1vw, 18px)/1.2 var(--font); color: var(--amber); text-decoration: none; }
.more2 .arr { width: 18px; height: 18px; transition: translate 220ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .more2:hover .arr { translate: -5px 0; } }
.hs { font: 800 clamp(20px, 2vw, 34px)/1.15 var(--font); letter-spacing: -.01em; margin-top: 16px; max-width: 15em; text-wrap: balance; }

/* ---------------------------------------------------------------- scene 3: the carousel of the three neighbourhoods */
.ring { list-style: none; display: none; }
.hoods { list-style: none; display: grid; gap: 34px; margin-top: 40px; }
.light { font: 600 14px/1 var(--font); letter-spacing: .1em; color: var(--amber); }
.hn { font: 900 clamp(44px, 7vw, 110px)/1 var(--font); letter-spacing: -.03em; margin-top: 8px; }
.hi .sub { font: 700 clamp(18px, 1.5vw, 24px)/1.25 var(--font); margin-top: 10px; }
.hi .sent { font: 400 clamp(15px, 1.15vw, 18px)/1.5 var(--body); opacity: .84; margin-top: 8px; }
.hi .more2 { margin-top: 14px; }
.fx .s3 { height: 400vh; height: 400svh; }
.fx .s3-head { position: absolute; inset-inline-start: var(--gut); top: 12svh; z-index: 5; }
.fx .ring { display: block; position: absolute; inset: 0; perspective: 1600px; --cw: min(24vw, 42svh); }
.fx .rc { position: absolute; left: 50%; top: 50%; width: var(--cw); aspect-ratio: 3 / 4.25; margin: calc(var(--cw) * -.708) 0 0 calc(var(--cw) * -.5); border-radius: 26px; overflow: hidden; transform: var(--tf, none); opacity: var(--o, 1); will-change: transform, opacity; box-shadow: 0 40px 90px rgba(0, 0, 0, .6); }
.fx .rc img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fx .rc::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1.5px rgba(247, 241, 232, .24); background: linear-gradient(180deg, rgba(18, 16, 16, .1) 40%, rgba(18, 16, 16, .5)); }
.fx .hoods { display: block; margin: 0; position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.fx .hood { position: absolute; inset: 0; opacity: var(--o, 0); visibility: var(--v, hidden); }
.fx .hood .light { position: absolute; left: 0; right: 0; top: 13.5svh; text-align: center; font-size: clamp(13px, 1.05vw, 17px); }
.fx .hood .hn { position: absolute; left: 0; right: 0; top: 50%; translate: 0 calc(-50% + var(--y, 0px)); margin: 0; text-align: center; font-size: clamp(64px, 13.5vw, 250px); white-space: nowrap; text-shadow: 0 12px 50px rgba(0, 0, 0, .6); }
.fx .hood .hi { position: absolute; inset-inline-start: var(--gut); bottom: 15svh; width: min(25vw, 390px); translate: 0 var(--y, 0px); pointer-events: auto; }

/* ---------------------------------------------------------------- scene 4: the tilted wall and the two listings */
.wall { display: none; }
.s4-in .hx { margin-top: 18px; }
.s4-in .lede { margin-top: 12px; }
.homes { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; margin-top: 28px; }
.home { border-radius: 22px; overflow: hidden; background: var(--panel); box-shadow: inset 0 0 0 1.5px rgba(247, 241, 232, .16); }
.home img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.home-b { padding: 16px 18px 18px; }
.tag2 { font: 600 13px/1.25 var(--font); color: var(--amber); letter-spacing: .02em; }
.home h3 { font: 800 clamp(20px, 1.7vw, 27px)/1.15 var(--font); margin-top: 6px; }
.home h3 span { font-weight: 400; font-size: .6em; opacity: .7; margin-inline-start: 6px; white-space: nowrap; }
.facts2 { font: 400 15px/1.4 var(--body); opacity: .9; margin-top: 6px; }
.facts2 b { font: 800 1.1em var(--font); }
.home .more2 { margin-top: 12px; font-size: 15px; }
.all2 { margin-top: 24px; }
.fx .s4 { height: 300vh; height: 300svh; }
.fx .wall { display: grid; position: absolute; left: -14vw; top: 50%; width: 110vw; gap: 1.4vw; transform: translateY(-50%) perspective(1700px) rotateX(50deg) rotateZ(-24deg) scale(1.1); }
.fx .wall .row { display: flex; gap: 1.4vw; direction: ltr; transform: translate3d(var(--x, 0px), 0, 0); will-change: transform; }
.fx .wall i { flex: none; width: 21vw; aspect-ratio: 3 / 2; border-radius: 1.2vw; background: #2A2420 center / cover; box-shadow: 0 1.5vw 3vw rgba(0, 0, 0, .5); }
.fx .near .wall i { background-image: var(--im); }
.fx .s4 .pin::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(18, 16, 16, .12) 0%, rgba(18, 16, 16, .3) 36%, rgba(18, 16, 16, .95) 60%); }
.fx .s4-in { position: absolute; z-index: 2; inset-inline-start: var(--gut); top: 50%; translate: 0 -50%; width: min(45vw, 720px); }
.fx .home { transform: perspective(1000px) rotateX(calc((1 - var(--e, 0)) * 58deg)) translateY(calc((1 - var(--e, 0)) * 50px)); transform-origin: 50% 100%; opacity: var(--e, 0); will-change: transform, opacity; }

/* ---------------------------------------------------------------- scene 5: the story (the portrait is the owner's real photograph: never recoloured) */
.huge { display: none; }
.who { margin: 30px 0 0; }
.who img { display: block; width: min(320px, 70vw); height: auto; border-radius: 160px 160px 22px 22px; }
.hx-s { font-size: clamp(28px, 3.3vw, 58px); margin-top: 18px; }
.panels { margin-top: 22px; display: grid; gap: 22px; }
.panel p { font: 400 clamp(16px, 1.3vw, 21px)/1.6 var(--body); color: rgba(247, 241, 232, .86); }
.panel .big { font: 500 clamp(19px, 1.75vw, 29px)/1.45 var(--font); color: var(--cream); }
.panel strong { color: var(--amber); font-weight: 800; }
.panel .pull2 { margin-top: 18px; padding-inline-start: 18px; box-shadow: inset -3px 0 0 var(--amber); font: 700 clamp(19px, 1.7vw, 28px)/1.35 var(--font); color: var(--cream); }
.trio2 { list-style: none; display: grid; gap: 10px; margin: 14px 0 22px; }
.trio2 li { font: 400 clamp(14px, 1.08vw, 17px)/1.45 var(--body); color: rgba(247, 241, 232, .8); padding: 13px 18px; border-radius: 16px; background: rgba(247, 241, 232, .06); box-shadow: inset 0 0 0 1.5px rgba(247, 241, 232, .16); }
.trio2 b, .trio2 h3 { display: block; font: 800 clamp(16px, 1.3vw, 21px)/1.2 var(--font); color: var(--cream); margin-bottom: 3px; }
.fx .s5 { height: 340vh; height: 340svh; }
.fx .huge { display: block; position: absolute; left: 50%; top: 50%; translate: calc(-50% + var(--hx, 0px)) -50%; font: 900 clamp(160px, 34vw, 640px)/1 var(--font); letter-spacing: -.04em; white-space: nowrap; color: transparent; -webkit-text-stroke: 2px rgba(255, 177, 59, .16); pointer-events: none; }
.fx .who { position: absolute; margin: 0; left: calc(var(--gut) + 3vw); bottom: 0; width: min(27vw, 46svh); }
.fx .who img { width: 100%; border-radius: 999px 999px 0 0; transform: scale(var(--ws, 1)); transform-origin: 50% 100%; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.fx .s5-in { position: absolute; inset-inline-start: var(--gut); top: 50%; translate: 0 -50%; width: min(46vw, 730px); }
.fx .panels { display: block; position: relative; min-height: 46svh; margin-top: 20px; }
.fx .panel { position: absolute; inset: 0 0 auto 0; opacity: var(--o, 0); visibility: var(--v, hidden); translate: 0 var(--y, 0px); }

/* ---------------------------------------------------------------- scene 6: the end: the city at night, the street lights come on */
.s6-bg { display: none; }
.s6 { text-align: center; }
.hx-xl { font-size: clamp(38px, 6.4vw, 118px); }
.s6 .lede { margin: 26px auto 0; max-width: 34em; color: rgba(247, 241, 232, .9); }
.btn-xl { margin-top: 24px; font-size: clamp(18px, 1.5vw, 23px); padding: 20px 34px; }
.fine2 { font: 400 14px/1 var(--body); opacity: .75; margin-top: 12px; }
.fx .s6 { height: 250vh; height: 250svh; }
.fx .s6-bg { display: block; position: absolute; inset: 0; background: #0E0C0B center / cover no-repeat; }
.fx .near .s6-bg { background-image: url(media/open-night-d.jpg); }
.fx .s6-bg { -webkit-mask-image: radial-gradient(circle at 50% 56%, #000 calc(var(--r, 0) * 1%), transparent calc(var(--r, 0) * 1% + 26%)); mask-image: radial-gradient(circle at 50% 56%, #000 calc(var(--r, 0) * 1%), transparent calc(var(--r, 0) * 1% + 26%)); scale: var(--ns, 1.08); }
.fx .s6 .pin::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(64vw 56vh at 50% 50%, rgba(18, 16, 16, .7), rgba(18, 16, 16, .3) 72%), linear-gradient(180deg, rgba(18, 16, 16, .8), rgba(18, 16, 16, 0) 22%, rgba(18, 16, 16, 0) 70%, rgba(18, 16, 16, .88)); }
.fx .s6-in { position: absolute; z-index: 2; inset-inline: var(--gut); top: 50%; translate: 0 -50%; }
.fx .s6 .hx .w { opacity: calc(.14 + .86 * var(--on, 0)); }
.fx .s6-cta { opacity: var(--o, 0); translate: 0 calc((1 - var(--o, 0)) * 24px); }

@media (max-width: 760px), (max-aspect-ratio: 9/10) {
  .fx .s3-head { top: 9svh; inset-inline: var(--gut); }
  .fx .ring { --cw: min(56vw, 34svh); }
  .fx .rc { top: 45%; }
  .fx .hood .light { top: 21svh; }
  .fx .hood .hn { font-size: clamp(54px, 19vw, 112px); top: 45%; }
  .fx .hood:nth-child(3) .hn { font-size: clamp(40px, 14.5vw, 90px); }      /* the long name (two words) has to fit a narrow screen */
  .fx .s6 .pin::after { background: linear-gradient(180deg, rgba(18, 16, 16, .82), rgba(18, 16, 16, .55) 30%, rgba(18, 16, 16, .6) 70%, rgba(18, 16, 16, .9)); }
  .fx .hood .hi { inset-inline: var(--gut); width: auto; bottom: 12svh; }
  .fx .wall { left: -50vw; width: 230vw; top: 25%; gap: 3vw; }
  .fx .wall .row { gap: 3vw; }
  .fx .wall i { width: 46vw; border-radius: 3vw; }
  .fx .s4 .pin::after { background: linear-gradient(180deg, rgba(18, 16, 16, .15) 0%, rgba(18, 16, 16, .95) 46%); }
  .fx .s4-in { inset-inline: var(--gut); width: auto; top: auto; bottom: 11svh; translate: none; }
  .fx .s4-in .lede, .fx .all2 { display: none; }
  .homes { grid-template-columns: 1fr; gap: 10px; margin-top: 16px; }
  .fx .home { display: grid; grid-template-columns: 34% 1fr; }
  .fx .home img { height: 100%; aspect-ratio: auto; }
  .home-b { padding: 10px 13px 12px; }
  .home .more2 { margin-top: 6px; }
  .fx .huge { top: 19svh; font-size: 62vw; }
  .fx .who { left: 50%; translate: -50% 0; bottom: auto; top: 8svh; width: min(40vw, 23svh); }
  .fx .who img { border-radius: 999px; aspect-ratio: 1; object-fit: cover; object-position: 50% 10%; }
  .fx .s5-in { inset-inline: var(--gut); width: auto; top: 34svh; translate: none; }
  .hx-s { font-size: clamp(24px, 6.6vw, 34px); margin-top: 12px; }
  .fx .panels { min-height: 40svh; margin-top: 14px; }
  .trio2 { gap: 7px; margin: 10px 0 14px; }
  .trio2 li { padding: 9px 13px; font-size: 13.5px; line-height: 1.35; }
  .trio2 b, .trio2 h3 { font-size: 15.5px; }
  .fx .near .s6-bg { background-image: url(media/open-night-m.jpg); }
  .hx-xl { font-size: clamp(34px, 10.5vw, 60px); }
}

/* ================================================================ 9 Oct: the listings as a travelling row, tastes of the rest of the site */
/* ---------------------------------------------------------------- scene 4 (replaces the two cards beside the wall): the head above, the row of cards along the bottom, the wall behind */
.s4-head .hx { margin-top: 18px; }
.s4-head .lede { margin-top: 12px; }
.home .ph { display: block; overflow: hidden; aspect-ratio: 3 / 2; }
.home .ph img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; transform: scale(var(--z, 1)); transform-origin: 100% 0; }      /* --z above 1 crops the bottom left corner, where the stamp of the old agency sits on the photographs */
.home-all a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 180px; height: 100%; padding: 24px; text-decoration: none; color: var(--ink); background: linear-gradient(150deg, #FFC75E, #FFA02A); font: 900 clamp(22px, 2vw, 32px)/1.1 var(--font); }
.home-all .arr { width: 34px; height: 34px; }
.fx .s4 { height: 360vh; height: 360svh; }
.fx .wall { top: 40%; opacity: .55; }
.fx .wall i.p { background-size: 124%; background-position: 100% 0; }
.fx .s4 .pin::after { background: linear-gradient(180deg, rgba(18, 16, 16, .82) 0%, rgba(18, 16, 16, .35) 36%, rgba(18, 16, 16, .7) 60%, rgba(18, 16, 16, .97) 100%); }
.fx .s4-head { position: absolute; z-index: 2; inset-inline-start: var(--gut); top: 11svh; width: min(56vw, 820px); }
.fx .homes { position: absolute; z-index: 2; right: var(--gut); bottom: 12svh; display: flex; align-items: stretch; gap: clamp(12px, 1.4vw, 22px); margin: 0; width: max-content; transform: translate3d(var(--tx, 0px), 0, 0); will-change: transform; }
.fx .home { flex: none; width: clamp(250px, 22.4vw, 360px); transform: none; opacity: 1; box-shadow: 0 26px 60px rgba(0, 0, 0, .5), inset 0 0 0 1.5px rgba(247, 241, 232, .16); }
.fx .home-all { width: clamp(200px, 17vw, 280px); box-shadow: 0 26px 70px rgba(255, 150, 40, .3); }
@media (max-height: 760px) and (min-width: 761px) { .home .ph { aspect-ratio: 16 / 9; } .fx .s4-head .lede { display: none; } }

/* ---------------------------------------------------------------- the plain sections that span the whole width: the head above, the cards below; a card tips up into place when it comes into view */
.plain.wide { grid-template-columns: 1fr; gap: clamp(22px, 3.4vw, 46px); }
.plain.wide .plain-head { max-width: 46em; }
.plain-act { margin-top: 4px; }
.fx .rise.tip { transform: perspective(900px) rotateX(16deg); transform-origin: 50% 100%; transition: opacity 700ms var(--ease) var(--d, 0s), translate 900ms var(--ease) var(--d, 0s), transform 900ms var(--ease) var(--d, 0s); }
.fx .rise.tip.in { transform: none; }
.posts, .glist, .tiles { list-style: none; display: grid; gap: 16px; }
.posts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.glist { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.post a, .gitem a, .tile a { position: relative; display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--cream); border-radius: 24px; padding: clamp(20px, 2vw, 30px); background: linear-gradient(160deg, rgba(247, 241, 232, .1), rgba(247, 241, 232, .035)); box-shadow: inset 0 0 0 1.5px rgba(247, 241, 232, .16); transition: background 260ms var(--ease), box-shadow 260ms var(--ease), translate 260ms var(--ease), color 260ms var(--ease); }
.post-d, .tile-k { font: 600 13.5px/1.2 var(--font); letter-spacing: .03em; color: var(--amber); }
.post h3 { font: 800 clamp(19px, 1.6vw, 25px)/1.22 var(--font); margin-top: 12px; text-wrap: balance; }
.post-x { font: 400 clamp(15px, 1.1vw, 17px)/1.6 var(--body); color: rgba(247, 241, 232, .8); margin-top: 10px; flex: 1; }
.post .more2 { margin-top: 18px; }
.gitem a { min-height: clamp(200px, 19vw, 290px); justify-content: flex-end; }
.gno { position: absolute; top: clamp(14px, 1.6vw, 24px); inset-inline-start: clamp(20px, 2vw, 30px); font: 900 clamp(46px, 4.6vw, 78px)/.9 var(--font); letter-spacing: -.03em; color: var(--amber); }
.gitem h3 { font: 800 clamp(18px, 1.5vw, 24px)/1.25 var(--font); text-wrap: balance; padding-inline-end: 34px; }
.gitem .arr, .tile .arr { position: absolute; bottom: clamp(20px, 2vw, 30px); inset-inline-end: clamp(18px, 1.8vw, 26px); width: 24px; height: 24px; color: var(--amber); transition: translate 260ms var(--ease), color 260ms var(--ease); }
.tile a { min-height: 150px; justify-content: space-between; gap: 22px; }
.tile h3 { font: 800 clamp(18px, 1.5vw, 24px)/1.25 var(--font); text-wrap: balance; padding-inline-end: 34px; }
@media (hover: hover) and (pointer: fine) {
  .post a:hover, .tile a:hover { translate: 0 -6px; background: linear-gradient(160deg, rgba(255, 177, 59, .16), rgba(255, 177, 59, .05)); box-shadow: inset 0 0 0 1.5px rgba(255, 177, 59, .6); }
  .gitem a:hover { translate: 0 -6px; background: linear-gradient(150deg, #FFC75E, #FFA02A); color: var(--ink); box-shadow: 0 24px 60px rgba(255, 150, 40, .3); }
  .gitem a:hover .gno, .gitem a:hover .arr { color: var(--ink); }
  .gitem a:hover .arr, .tile a:hover .arr, .post a:hover .more2 .arr { translate: -6px 0; }
  .home-all a:hover .arr { translate: -6px 0; }
}
.home-all .arr { transition: translate 260ms var(--ease); }

@media (max-width: 1000px) { .glist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px), (max-aspect-ratio: 9/10) {
  .fx .s4-head { inset-inline: var(--gut); width: auto; top: calc(9svh + 6px); }
  .fx .homes { bottom: 13svh; gap: 12px; }
  .fx .home { display: block; width: min(74vw, 300px); }
  .fx .home .ph { aspect-ratio: 16 / 10; }
  .fx .home-all { width: 52vw; }
  .fx .wall { top: 30%; }
  .posts, .tiles { grid-template-columns: 1fr; }
  .glist { grid-template-columns: 1fr; }
  .gitem a { min-height: 150px; }
  .tile a { min-height: 112px; }
}

/* ================================================================ 9 Oct, second review: three listings and the link, the whole site in a menu, the reviews in one row */
.fx { scroll-behavior: smooth; }
/* ---------------------------------------------------------------- the reviews: one row beside a small head */
.plain.revs { grid-template-columns: minmax(0, .62fr) minmax(0, 2fr); align-items: center; }
.rev-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rev { padding: 20px 22px; gap: 10px; }
.rev-t { font-size: clamp(15px, 1.15vw, 18px); }

/* ---------------------------------------------------------------- the listings on a wide screen: three cards and the «all listings» card fill the row and stand up one after another (a phone keeps the travelling row) */
@media (min-width: 761px) and (min-aspect-ratio: 9/10) {
  .fx .s4 { height: 250vh; height: 250svh; }
  .fx .homes { left: var(--gut); right: var(--gut); width: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, .66fr); transform: none; }
  .fx .home, .fx .home-all { width: auto; }
  .fx .home { transform: perspective(1100px) rotateX(calc((1 - var(--e, 0)) * 55deg)) translateY(calc((1 - var(--e, 0)) * 46px)); transform-origin: 50% 100%; opacity: var(--e, 0); will-change: transform, opacity; }
}

/* ---------------------------------------------------------------- the menu button (header and dock) and the panel with the whole site */
.nav { gap: calc(var(--s) * 1.9); }
.menu-btn { display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 0 17px; border: 0; border-radius: 99px; cursor: pointer; font: 700 max(15px, calc(var(--s) * 1.15))/1 var(--font); background: var(--ink); color: var(--cream); transition: scale 160ms var(--ease), background 220ms var(--ease), color 220ms var(--ease); }
.menu-btn:active { scale: .96; }
.bars { width: 16px; height: 10px; background: linear-gradient(currentColor, currentColor) 100% 0 / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) 100% 100% / 62% 2px no-repeat; }
.site-header:not(.dark) .menu-btn, .static .menu-btn, .no-js .menu-btn { background: var(--cream); color: var(--ink); }
.dock .dock-menu { min-height: 44px; font: inherit; background: rgba(247, 241, 232, .12); color: var(--cream); }
html.menu-open { overflow: hidden; }
.menu { position: fixed; inset: 0; margin: 0; padding: 0; border: 0; width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none; overflow-y: auto; overscroll-behavior: contain; color: var(--cream); background: radial-gradient(70vw 60vh at 86% 0%, rgba(255, 150, 40, .2), transparent 62%), rgba(18, 16, 16, .97); }
.menu::backdrop { background: rgba(0, 0, 0, .5); }
.fx .menu[open] { animation: menuIn 460ms var(--ease); }
@keyframes menuIn { from { opacity: 0; clip-path: circle(0% at 8% 5%); } to { opacity: 1; clip-path: circle(150% at 8% 5%); } }
.menu-in { min-height: 100%; display: flex; flex-direction: column; gap: clamp(18px, 3.4vh, 36px); padding: clamp(16px, 3vh, 32px) var(--gut) clamp(22px, 5vh, 48px); }
.menu-top { display: flex; align-items: center; justify-content: space-between; }
.menu-h { display: flex; align-items: center; gap: 12px; font: 300 24px/1 var(--font); }
.menu-h b { font-weight: 900; }
.menu-x { width: 50px; height: 50px; border: 0; border-radius: 50%; cursor: pointer; background: var(--amber); color: var(--ink); font: 700 20px/1 var(--font); transition: rotate 300ms var(--ease), scale 160ms var(--ease); }
.menu-x:active { scale: .94; }
.menu-k { font: 700 14px/1 var(--font); letter-spacing: .06em; color: var(--amber); margin-bottom: 12px; }
.menu ul { list-style: none; }
.menu a { text-decoration: none; color: inherit; }
.menu-here ul { display: flex; flex-wrap: wrap; gap: 8px; }
.menu-here a { display: inline-flex; align-items: center; min-height: 42px; padding: 0 17px; border-radius: 99px; font: 600 16px/1 var(--font); background: rgba(247, 241, 232, .07); box-shadow: inset 0 0 0 1.5px rgba(247, 241, 232, .2); transition: background 200ms var(--ease), color 200ms var(--ease); }
.menu-cols { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px clamp(20px, 3vw, 50px); align-content: start; }
.menu-col a { display: block; padding: 7px 0; font: 800 clamp(18px, 1.7vw, 27px)/1.2 var(--font); letter-spacing: -.01em; text-wrap: balance; transition: color 200ms var(--ease), translate 200ms var(--ease); }
.menu-foot { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 22px; box-shadow: inset 0 1px 0 rgba(247, 241, 232, .14); }
@media (hover: hover) and (pointer: fine) {
  .menu-btn:hover { background: var(--amber); color: var(--ink); }
  .menu-x:hover { rotate: 90deg; }
  .menu-here a:hover { background: var(--amber); color: var(--ink); }
  .menu-col a:hover { color: var(--amber); translate: -5px 0; }
}
@media (max-width: 900px) { .menu-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px), (max-aspect-ratio: 9/10) {
  .plain.revs { grid-template-columns: 1fr; }
  .rev-list { grid-template-columns: 1fr; }
  .site-header .menu-btn { min-height: 36px; padding: 0 12px; gap: 7px; font-size: 14px; }
  .dock { font-size: 13.5px; gap: 3px; }                               /* a phone: four actions have to fit 360 px (menu, valuation, WhatsApp, call); the mark is not shown */
  .dock .dock-home { display: none; }
  .dock a, .dock .dock-menu { padding: 0 11px; }
  .dock .dock-menu { gap: 6px; }
  .nav { gap: 10px; }
  .menu-col a { font-size: 18px; padding: 6px 0; }
  .menu-here a { min-height: 38px; padding: 0 14px; font-size: 15px; }
}
@media (max-width: 480px) { .menu-cols { grid-template-columns: 1fr; gap: 22px; } }

/* ================================================================ 9 Oct: pictures in the teasers (articles and guides: realistic photographs; more of the site: glass and amber) */
.post a { padding: 0; overflow: hidden; }
.post-im { display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.post-im img, .gim img, .tile-im img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale 900ms var(--ease); }
.post-d { margin-top: 0; padding: clamp(16px, 1.7vw, 24px) clamp(20px, 2vw, 30px) 0; }
.post h3, .post-x, .post .more2 { padding-inline: clamp(20px, 2vw, 30px); }
.post .more2 { padding-bottom: clamp(20px, 2vw, 28px); }
/* a guide card: the photograph fills the card, the number and the title stand on a dark fall-off at its bottom */
.gitem a { padding: 0; overflow: hidden; min-height: clamp(300px, 27vw, 420px); isolation: isolate; }
.gim { position: absolute; inset: 0; z-index: -2; }
.gitem a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(18, 16, 16, .25) 0%, rgba(18, 16, 16, .1) 34%, rgba(18, 16, 16, .82) 66%, rgba(18, 16, 16, .97) 100%); transition: opacity 300ms var(--ease); }
.gno { text-shadow: 0 6px 30px rgba(0, 0, 0, .55); }
.gitem h3 { padding: 0 clamp(20px, 2vw, 30px) clamp(20px, 2vw, 30px); padding-inline-end: calc(clamp(18px, 1.8vw, 26px) + 40px); text-shadow: 0 2px 18px rgba(0, 0, 0, .6); }
/* a tile: the glass picture at the end side, the words at the start side */
.tile a { padding: 0; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) clamp(120px, 36%, 200px); min-height: 170px; gap: 0; }
.tile-im { grid-column: 2; grid-row: 1 / span 2; }
.tile-k { grid-column: 1; padding: clamp(18px, 1.8vw, 26px) clamp(20px, 2vw, 28px) 0; }
.tile h3 { grid-column: 1; align-self: end; padding: 0 clamp(20px, 2vw, 28px) clamp(18px, 1.8vw, 26px); padding-inline-end: 12px; }
.tile .arr { inset-inline-end: auto; inset-inline-start: auto; left: calc(clamp(120px, 36%, 200px) + 14px); bottom: clamp(18px, 1.8vw, 26px); display: none; }
@media (hover: hover) and (pointer: fine) {
  .post a:hover .post-im img, .gitem a:hover .gim img, .tile a:hover .tile-im img { scale: 1.06; }
  .gitem a:hover { background: none; color: var(--cream); box-shadow: 0 24px 60px rgba(0, 0, 0, .5), inset 0 0 0 1.5px rgba(255, 177, 59, .7); }
  .gitem a:hover .gno { color: var(--amber); }
  .gitem a:hover .arr { color: var(--amber); }
}
@media (max-width: 760px), (max-aspect-ratio: 9/10) {
  .gitem a { min-height: 250px; }
  .tile a { min-height: 128px; grid-template-columns: minmax(0, 1fr) 34%; }
}

/* ================================================================ 9 Oct: a line animation in every card of the deck (Lottie-style, but inline SVG moved by CSS: no player library, and the colours follow the card)
   The lines are the colour of the card's text, the filled parts are amber on a dark card and cream on the amber card. Only the card in front (.act, written by scenes.js) plays, from its beginning; the others rest on the finished drawing. */
.ill { display: block; width: 132px; margin-top: 12px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 4.6; stroke-linecap: round; stroke-linejoin: round;
       --acc: color-mix(in srgb, #FFF6E1 calc(var(--on, 0) * 100%), var(--amber)); --pit: color-mix(in srgb, #FFA935 calc(var(--on, 0) * 100%), #2B2521); }
.ill * { transform-box: fill-box; transform-origin: center; }
.fx .gc .ill { position: absolute; left: 50%; top: 20%; width: 60%; margin: 0; translate: -50% 0; }
.ill .play, .ill .sp, .ill .bull, .ill .hs, .ill .pn path { fill: var(--acc); stroke: none; }
.ill .dot { fill: currentColor; stroke: none; }
.ill .scan, .ill .bar1, .ill .deal { stroke: var(--acc); }
.ill .bar0, .ill .st { opacity: .28; }
.ill .hole { fill: var(--pit); stroke: none; }
.ill-1 .scan, .ill-4 .rip { opacity: 0; }
.ill-1 .bar1 { stroke-dasharray: 132; }
.ill-3 .ln { stroke-dasharray: 70; }
.ill-4 .route { stroke-dasharray: 92; }
.ill-4 .deal { stroke-dasharray: 36; stroke-width: 6; }
/* 1: the video is made */
.fx .gc.act .ill-1 .scan { animation: il-scan 4.6s cubic-bezier(.6, 0, .4, 1) infinite; }
.fx .gc.act .ill-1 .bar1 { animation: il-bar 4.6s linear infinite; }
.fx .gc.act .ill-1 .play { animation: il-play 4.6s var(--ease) infinite; }
.fx .gc.act .ill-1 .sp { animation: il-spark 2.3s ease-in-out infinite; }
.fx .gc.act .ill-1 .k2 { animation-delay: .5s; }
.fx .gc.act .ill-1 .k3 { animation-delay: 1.1s; }
@keyframes il-scan { 0% { transform: translateX(0); opacity: 0; } 8% { opacity: 1; } 52% { transform: translateX(96px); opacity: 1; } 60%, 100% { transform: translateX(96px); opacity: 0; } }
@keyframes il-bar { 0% { stroke-dashoffset: 132; } 60%, 100% { stroke-dashoffset: 0; } }
@keyframes il-play { 0%, 56% { transform: scale(.5); opacity: .3; } 66% { transform: scale(1.2); opacity: 1; } 74%, 100% { transform: scale(1); opacity: 1; } }
@keyframes il-spark { 0%, 100% { transform: scale(.3) rotate(0deg); opacity: .2; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }
/* 2: one arrow, the middle of the target */
.fx .gc.act .ill-2 .arrow { animation: il-shot 3.8s cubic-bezier(.2, .9, .2, 1) infinite; }
.fx .gc.act .ill-2 .rg { animation: il-ring 3.8s ease-out infinite; }
.fx .gc.act .ill-2 .r2 { animation-delay: .06s; }
.fx .gc.act .ill-2 .r3 { animation-delay: .12s; }
.fx .gc.act .ill-2 .bull { animation: il-bull 3.8s ease-out infinite; }
.fx .gc.act .ill-2 .pp { animation: il-crowd 3.8s ease infinite; }
@keyframes il-shot { 0% { transform: translate(64px, -64px); opacity: 0; } 10% { opacity: 1; } 28%, 86% { transform: translate(0, 0); opacity: 1; } 100% { transform: translate(0, 0); opacity: 0; } }
@keyframes il-ring { 0%, 26% { transform: scale(1); } 34% { transform: scale(1.09); } 46%, 100% { transform: scale(1); } }
@keyframes il-bull { 0%, 26% { transform: scale(.6); } 34% { transform: scale(1.6); } 46%, 100% { transform: scale(1); } }
@keyframes il-crowd { 0%, 20% { opacity: 1; } 40%, 90% { opacity: .18; } 100% { opacity: 1; } }
/* 3: the home page of the listing fills up and is found */
.fx .gc.act .ill-3 .hs { animation: il-home 4.4s var(--ease) infinite; }
.fx .gc.act .ill-3 .ln { animation: il-line 4.4s var(--ease) infinite; }
.fx .gc.act .ill-3 .l2 { animation-delay: .22s; }
.fx .gc.act .ill-3 .l3 { animation-delay: .44s; }
.fx .gc.act .ill-3 .mg { animation: il-mag 4.4s ease-in-out infinite; }
@keyframes il-home { 0%, 6% { transform: scale(0); } 20% { transform: scale(1.14); } 28%, 100% { transform: scale(1); } }
@keyframes il-line { 0%, 10% { stroke-dashoffset: 70; } 36%, 100% { stroke-dashoffset: 0; } }
@keyframes il-mag { 0%, 34% { transform: translate(-30px, 12px); opacity: 0; } 44% { transform: translate(-10px, 4px); opacity: 1; } 58% { transform: translate(0, 0); } 74%, 90% { transform: translate(64px, -24px); opacity: 1; } 100% { transform: translate(64px, -24px); opacity: 0; } }
/* 4: the pin lands, the route runs to the deal */
.fx .gc.act .ill-4 .pn { animation: il-drop 4.2s cubic-bezier(.3, 1.5, .5, 1) infinite; }
.fx .gc.act .ill-4 .rip { animation: il-rip 4.2s ease-out infinite; }
.fx .gc.act .ill-4 .ripb { animation-delay: .34s; }
.fx .gc.act .ill-4 .route { animation: il-route 4.2s ease-in-out infinite; }
.fx .gc.act .ill-4 .deal { animation: il-deal 4.2s ease-out infinite; }
@keyframes il-drop { 0% { transform: translateY(-46px); opacity: 0; } 8% { opacity: 1; } 22%, 100% { transform: translateY(0); opacity: 1; } }
@keyframes il-rip { 0%, 20% { transform: scale(.3); opacity: 0; } 26% { opacity: .9; } 52%, 100% { transform: scale(1.7); opacity: 0; } }
@keyframes il-route { 0%, 30% { stroke-dashoffset: 92; } 58%, 100% { stroke-dashoffset: 0; } }
@keyframes il-deal { 0%, 58% { stroke-dashoffset: 36; } 70%, 100% { stroke-dashoffset: 0; } }
@media (max-width: 760px), (max-aspect-ratio: 9/10) { .fx .gc .ill { top: 17%; width: 46%; } }
@media (max-height: 700px) and (min-width: 761px) { .fx .gc .ill { top: 18%; width: 48%; } }

/* ================================================================ 9 Oct: light cards. The owner: the guide pictures are «dark and sad», the site is dark anyway, break it with bright pictures on a white ground.
   So a guide card and an article card are cream cards now: the bright photograph on top with nothing over it, dark text under it. (The tiles of «more of the site» stay dark glass.) */
/* (minutes later: the cream cards were «too bright, also at the bottom». What he asked for instead: the picture fills the whole card and the words stand on it, readable.)
   So: the bright photograph is the card. The words sit on a small dark glass plate at the bottom of the card (blur and a dark tint only under the words): the upper two thirds of the picture stay bright and clean. */
.gitem a, .post a { position: relative; isolation: isolate; display: block; padding: 0; overflow: hidden; background: #2B2521; color: var(--cream); box-shadow: 0 22px 50px rgba(0, 0, 0, .4); }
.gitem a { min-height: 0; aspect-ratio: 3 / 3.9; }
.post a { aspect-ratio: 4 / 4.5; height: auto; }
.gitem a::before { display: none; }
.gim, .post-im { position: absolute; inset: 0; z-index: -1; display: block; aspect-ratio: auto; overflow: hidden; }
.gim img, .post-im img { transform: translateY(-11%) scale(1.24); }      /* the picture is lifted a little, so that what it shows (the key, the tape measure, the keys on the table) stands above the plate and not under it */
.gno { top: 14px; inset-inline-start: 14px; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--amber); color: var(--ink); font: 900 22px/1 var(--font); letter-spacing: 0; text-shadow: none; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); z-index: 1; }
/* the plate: the guide title, or the date + title + link of an article */
.gitem h3, .post .cap { position: absolute; inset: auto 10px 10px 10px; margin: 0; border-radius: 18px; color: var(--cream); text-shadow: none;
                         background: rgba(18, 16, 16, .6); box-shadow: inset 0 0 0 1px rgba(247, 241, 232, .16); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
.gitem h3 { padding: 16px 18px 18px; padding-inline-end: 52px; flex: none; }
.gitem .arr { color: var(--amber); bottom: 28px; inset-inline-end: 26px; z-index: 1; }
.post .cap { padding: 16px 18px 16px; display: grid; gap: 8px; }
.post .cap .post-d, .post .cap h3, .post .cap .more2 { padding: 0; margin: 0; }
.post-d { color: var(--amber); }
.post-x { display: none; }
.post .more2 { color: var(--amber); margin-top: 2px; }
@media (hover: hover) and (pointer: fine) {
  .post a:hover, .gitem a:hover { translate: 0 -6px; background: #2B2521; color: var(--cream); box-shadow: 0 26px 60px rgba(0, 0, 0, .5), inset 0 0 0 2px var(--amber); }
  .gitem a:hover .gno { color: var(--ink); }
  .gitem a:hover .arr { color: var(--amber); }
}
@media (max-width: 760px), (max-aspect-ratio: 9/10) { .gitem a { min-height: 0; aspect-ratio: 4 / 3.4; } .post a { aspect-ratio: 4 / 3.8; } }

/* ================================================================ 9 Oct: the header is a floating glass bar like the dock (the owner's request), with a bigger mark and name
   The text is always cream now (main.js still flips .dark with the picture: it no longer changes anything). The giant word is planned below the bar (main.js passes an empty free stretch). */
/* second try, the same day: he meant glass ONLY behind the words, no bar across the screen. So the header itself is bare, and the name (right) and the menu (left) each sit on their own glass pill, like the dock.
   saturate(.45): the bright sky behind the glass is toned down, otherwise the pills turn blue. */
/* third try: «not on the logo, and it is still not transparent: it has to be WHITE at a really low opacity, the glass effect of Figma». So: the logo stands bare, and only the menu sits on clear glass:
   a white fill of 8 to 22 percent, the picture blurred behind it, a bright rim along the top edge. The words on it are dark over the bright sky and cream over the dark pictures (main.js flips .dark with the picture). */
.site-header { color: var(--cream); text-shadow: 0 0 8px rgba(18, 16, 16, calc(.55 * var(--hs, 0))); }
.site-header.dark { color: var(--ink); }
.site-header { inset: calc(12px + var(--sat)) 16px auto 16px; height: auto; min-height: 0; padding: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; pointer-events: none; }
.site-header .brand, .site-header .nav { pointer-events: auto; min-height: 58px; }
.site-header .nav { padding-inline: 26px 7px; border-radius: 99px; text-shadow: none; background: linear-gradient(135deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .08));
                    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .28), 0 10px 30px rgba(0, 0, 0, .1);
                    -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); }
.site-header .brand { padding-inline: 8px 0; }
.no-js .site-header, .static .site-header { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.brand { gap: 13px; font-size: 26px; }
.brand .mark { width: 40px; height: 40px; }
.site-header .menu-btn, .site-header:not(.dark) .menu-btn { min-height: 44px; background: var(--amber); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .site-header .menu-btn:hover { background: #FFC966; } }
@media (max-width: 760px), (max-aspect-ratio: 9/10) {
  /* a phone: only the menu button is left in the menu, so there is no glass around it (and no blur over the canvas that redraws every frame); the phone number is in the dock */
  .site-header { inset: calc(8px + var(--sat)) 8px auto 8px; padding: 0; }
  .site-header .brand, .site-header .nav { min-height: 50px; }
  .site-header .nav { padding: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .brand { font-size: 21px; gap: 10px; }
  .brand .mark { width: 34px; height: 34px; }
  .site-header .tel { display: none; }
  .site-header .menu-btn { min-height: 42px; }
  .dock { background: rgba(30, 26, 23, .92); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ================================================================ 10 Oct (night): the live text that was dropped, and the short lead form (the owner's yes to both) */
/* ---------------------------------------------------------------- the authority band: the live H2 and paragraph of the neighbourhoods block. A slim plain band between the opening and the deck: no pin, no effect on scroll, so the hand-over between the two stays as it was */
.auth-band { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 80px); align-items: center; padding: clamp(56px, 10vh, 110px) var(--gut); }
.auth-h { font-size: clamp(28px, 3vw, 52px); }
.auth-t .lede { max-width: 34em; color: rgba(247, 241, 232, .88); text-wrap: pretty; }
.auth-more summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 9px; min-height: 44px; font: 700 clamp(15px, 1.1vw, 18px)/1.2 var(--font); color: var(--amber); }
.auth-more summary::-webkit-details-marker { display: none; }
.auth-more summary::after { content: ""; width: 8px; height: 8px; border: solid currentColor; border-width: 0 2px 2px 0; rotate: 45deg; translate: 0 -2px; transition: rotate 300ms var(--ease), translate 300ms var(--ease); }
.auth-more[open] summary::after { rotate: -135deg; translate: 0 2px; }
.auth-more[open] .lede { margin-bottom: 4px; }

/* ---------------------------------------------------------------- the short lead form (#lead): a plain section after the end scene; the form sits in a white-glass card (the glass of the menu pill in the header) over a soft amber glow */
.lead { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-rows: auto 1fr; grid-template-areas: "txt card" "more card"; gap: clamp(22px, 2.6vw, 44px) clamp(32px, 6vw, 110px); align-items: start; padding: clamp(70px, 13vh, 150px) var(--gut) clamp(96px, 15vh, 160px); }
.lead::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(46vw 54vh at 26% 52%, rgba(255, 150, 40, .26), transparent 68%); }
.lead-txt { grid-area: txt; }
#h-lead:focus { outline: none; }      /* scenes.js moves focus to the heading after a jump on a touch device (a screen reader lands in the form); no ring on a heading */
.lead-card { grid-area: card; display: grid; border-radius: 28px; padding: clamp(22px, 2.4vw, 38px); background: linear-gradient(135deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .08));
             box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(255, 255, 255, .26), 0 30px 80px rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); }
.lead-more { grid-area: more; align-self: end; }      /* on a wide screen the contact actions stand at the bottom edge of the card, the heading at its top edge */
.lead-form { display: grid; gap: 16px; }
.lead-form[hidden], .lead-ok[hidden] { display: none; }
.lead-f { display: grid; gap: 7px; }
.lead-f label { font: 700 15px/1.2 var(--font); color: rgba(247, 241, 232, .94); }
.lead-f label.req::after { content: " *" / ""; color: var(--amber); }      /* the two required fields (name, phone) carry a mark and no extra words; the empty alternative keeps it out of the accessible name (the field has `required` already) */
.lead-f input, .lead-f select { width: 100%; min-height: 54px; padding: 0 16px; border: 0; border-radius: 16px; font: 500 17px/1.2 var(--body); color: var(--cream); background-color: rgba(18, 16, 16, .42); box-shadow: inset 0 0 0 1.5px rgba(247, 241, 232, .3); transition: box-shadow 200ms var(--ease), background-color 200ms var(--ease); }
.lead-f input[type="tel"] { text-align: right; }      /* the number is typed left to right (dir="ltr") but stands at the start side of the page */
.lead-f select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-inline-end: 46px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F7F1E8' stroke-width='2.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 16px center; background-size: 18px; }
.lead-f select option { background: var(--panel); color: var(--cream); }
.lead-f input:focus, .lead-f select:focus { background-color: rgba(18, 16, 16, .62); box-shadow: inset 0 0 0 2px var(--amber); }
.lead-f input:user-invalid, .lead-f select:user-invalid { box-shadow: inset 0 0 0 2px var(--orange); }
.lead-go { width: 100%; justify-content: center; min-height: 58px; margin-top: 6px; border: 0; cursor: pointer; font-size: clamp(17px, 1.3vw, 20px); }
.lead-fine, .lead-consent { text-align: center; font: 400 14px/1.5 var(--body); }
.lead-fine { margin-top: -4px; opacity: .8; }
.lead-consent { color: rgba(247, 241, 232, .74); font-size: 13.5px; }
.lead-consent a { color: var(--amber); text-underline-offset: 3px; }
.lead-ok { display: grid; justify-items: center; align-content: center; gap: 20px; min-height: 100%; text-align: center; outline: none; }
.lead-tick { width: 68px; height: 68px; padding: 17px; border-radius: 50%; background: var(--amber); fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.lead-ok p { font: 800 clamp(22px, 2.1vw, 32px)/1.3 var(--font); text-wrap: balance; }
.fx .lead-ok:not([hidden]) { animation: leadIn 520ms var(--ease) both; }
@keyframes leadIn { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: none; } }
.lead-act { display: flex; flex-wrap: wrap; gap: 12px; }
.lead-sig { margin-top: 24px; font: 400 15.5px/1.6 var(--body); color: rgba(247, 241, 232, .78); }
.lead-sig a { color: inherit; text-decoration-color: rgba(247, 241, 232, .4); text-underline-offset: 3px; }
.lead-full { display: flex; width: max-content; margin-top: 10px; }
@media (hover: hover) and (pointer: fine) { .lead-sig a:hover { color: var(--amber); } .lead-go:hover { background: #FFC966; } .lead-f select:hover:not(:focus), .lead-f input:hover:not(:focus) { box-shadow: inset 0 0 0 1.5px rgba(247, 241, 232, .5); } }
@media (max-width: 760px), (max-aspect-ratio: 9/10) {
  .auth-band { grid-template-columns: 1fr; gap: 12px; padding: 46px var(--gut); }
  .auth-h { font-size: clamp(25px, 7vw, 34px); }
  .lead { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: "txt" "card" "more"; gap: 20px; padding: 64px var(--gut) 132px; }      /* the bottom leaves room for the dock under the last lines */
  .lead::before { background: radial-gradient(90vw 40vh at 50% 38%, rgba(255, 150, 40, .24), transparent 68%); }
  .lead-card { border-radius: 24px; padding: 20px 18px; }
  .lead-form { gap: 14px; }
  .lead-act .btn2 { flex: 1 1 140px; justify-content: center; white-space: nowrap; padding-inline: 14px; font-size: 15px; }      /* the phone number stays on one line at 360 px */
}

/* ---------------------------------------------------------------- #why on a TALL phone (390x844, 360x780, 412x915: width / height up to 7 / 15): there is room above the deck for the lede and the link «לפרטים נוספים על השיטה» (live text that had been dropped).
   The text block starts higher (the header is already off there) and the deck stands a little lower; 30 px are left between the deck and the dock. 11 Oct (review): a Chrome Android window with its address bar (412x780, width / height up to 8 / 15 and 765 px tall) gets them too, with a smaller deck (next block).
   Less height than that keeps the old layout (no lede, no link): the deck cannot shrink below about 255 px wide (the card text would run into the picture) and the text block is about 270 px tall, so on 390x664 (iPhone with its bars) or 412x732 they would run into the deck */
@media (max-aspect-ratio: 7/15), (max-aspect-ratio: 8/15) and (min-height: 765px) {
  .fx .s2-txt { top: calc(6svh + 6px); }
  .fx .s2-txt .lede { display: block; font-size: 14px; line-height: 1.45; margin-top: 8px; }
  .fx .s2-txt .btn2 { display: inline-flex; margin-top: 10px; padding: 11px 18px; font-size: 14px; }
  .fx .deck { bottom: 12svh; }
}
@media (min-aspect-ratio: 7/15) and (max-aspect-ratio: 8/15) and (min-height: 765px) {
  .fx .deck { width: min(74vw, 46svh, calc((82svh - 214px - 20vw) / 1.325)); }      /* what is left under the text (about 190px + 20vw tall, from 6svh + 6px) above the deck's own bottom offset, 18px of air, in the card's ratio 4 / 5.3 */
}

/* 360 px phones: with the wider brand fonts the four actions of the dock no longer fitted (the call button was cut at the edge) */
@media (max-width: 379px) { .dock { font-size: 12.5px; gap: 2px; padding: 5px; } .dock a, .dock .dock-menu { padding: 0 8px; } .dock .dock-menu { gap: 5px; } }