/* ==========================================================================
   Real estate — "Two licences, one deal"
   The skyline through reeded glass, a pinned sideways journey in which the
   search and the financing run as one line, art-directed photo frames waiting
   on the client's shots, and the two roles disclosed in plain words.
   Loads after site.css.
   ========================================================================== */

/* ---- Hero: skyline through fluted glass (.glassbg lives in site.css) -------- */
.rhero { position: relative; isolation: isolate; overflow: hidden; display: grid; align-items: end;
  min-height: min(100svh, 1000px); padding: clamp(8.5rem, 14vw, 11rem) 0 clamp(3.5rem, 7vw, 5.5rem); }
/* legibility: dark above the fold line, the city showing through the middle,
   and a clean hand-off into the page below */
.rhero::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70% 60% at 18% 62%, rgba(4,6,11,.72), transparent 72%),
    linear-gradient(180deg, rgba(4,6,11,.78) 0%, rgba(4,6,11,.2) 32%, rgba(4,6,11,.35) 62%, var(--bg) 100%); }

.rhero__in { position: relative; }
.rhero__split { display: grid; grid-template-columns: auto auto auto; justify-content: start; align-items: center;
  gap: clamp(1.25rem, 3.5vw, 3rem); }
.rhero__side { min-width: 0; }
.rhero__k { color: var(--ink-2); margin-bottom: .6rem; }
.rhero__word { font-family: var(--serif); font-style: italic; font-size: clamp(1.9rem, 1rem + 3.4vw, 3.8rem); line-height: 1;
  letter-spacing: -.03em; color: var(--blue-2); }
.rhero__rule { position: relative; width: clamp(48px, 7vw, 110px); height: 1px; background: var(--line-2); }
.rhero__rule::after { content: ''; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; translate: -50% -50%;
  border-radius: 50%; background: var(--cyan); box-shadow: 0 0 18px 2px rgba(92,208,255,.55); }
.rhero__title { margin-top: clamp(1.5rem, 3.5vw, 2.5rem); font-weight: 500; font-size: clamp(2.6rem, 1rem + 6vw, 6.4rem);
  line-height: .95; letter-spacing: -.055em; }
.rhero__title em { color: var(--blue-2); }
.rhero__lead { margin-top: 1.5rem; max-width: 54ch; color: var(--ink-2); font-size: clamp(1rem, .96rem + .3vw, 1.14rem); }
.rhero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.75rem; margin-top: clamp(1.75rem, 3vw, 2.25rem); }
@media (max-width: 720px) {
  .rhero { min-height: 0; }
  .rhero__split { grid-template-columns: 1fr; gap: .9rem; }
  .rhero__rule { width: 60px; }
}

/* ---- Journey: two lanes, one line -------------------------------------------
   Geometry lives in three variables so the SVG merge, the lanes, the dots and
   the handoff markers all agree: --ly is the line's height inside the track,
   --gap the distance of each ghost lane from it, --sw the width of the merge. */
.jr { --ly: 72px; --gap: 44px; --sw: 240px; --ew: clamp(340px, 30vw, 460px); --ep: clamp(1.25rem, 2.5vw, 2.5rem); --edge: calc((100vw - min(100vw - 2 * var(--gutter), var(--max))) / 2);
  position: relative; border-top: 1px solid var(--line); }
.jr__skip { position: absolute; left: var(--gutter); top: 1rem; z-index: 5; padding: .6rem 1rem; border-radius: 999px;
  background: var(--ink); color: var(--bg); font-size: .85rem; clip-path: inset(50%); opacity: 0; }
.jr__skip:focus-visible { clip-path: none; opacity: 1; }

.jr__pin { position: relative; display: flex; flex-direction: column; height: 100svh; min-height: 640px; overflow: hidden;
  padding-top: clamp(5.75rem, 9vh, 7rem); }
.jr__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 1.5rem 3rem; }
.jr__intro .label { margin-bottom: 1.25rem; }
.jr__intro .h2 { font-size: clamp(2rem, 1.1rem + 2.8vw, 3.6rem); }
.jr__lead { margin-top: 1rem; max-width: 60ch; color: var(--ink-2); font-size: 1rem; }
.jr__hud { display: flex; border: 1px solid var(--line); border-radius: 16px; background: rgba(8,12,22,.7); }
.jr__hud div { padding: .85rem 1.3rem; min-width: 124px; }
.jr__hud div + div { border-left: 1px solid var(--line); }
.jr__hud dt { color: var(--ink-3); font: 500 .64rem/1.4 var(--mono); letter-spacing: .07em; text-transform: uppercase; margin-bottom: .35rem; }
.jr__hud dd { font-size: 1.6rem; font-weight: 500; letter-spacing: -.04em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.jr__hud dd span { font-size: .8rem; color: var(--ink-3); letter-spacing: 0; margin-left: .15em; }
.jr__hud #jrSkip { color: var(--cyan); }

/* the route sits in the optical middle of whatever height is left */
.jr__view { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; padding-bottom: clamp(2.5rem, 6vh, 4rem); }
.jr__track { position: relative; display: flex; width: max-content; padding-left: var(--edge); will-change: transform; }

/* where the lanes come in and meet */
.jr__start { position: relative; flex: none; width: var(--sw); }
.jr__merge { position: absolute; left: 0; overflow: visible; }
.jr__merge--h { top: calc(var(--ly) - 60px); width: var(--sw); height: 120px; }
.jr__merge--v { display: none; }
.jr__in { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.jr__in--a { stroke: var(--blue-2); }
.jr__in--b { stroke: var(--cyan); }
.jr__tag { position: absolute; left: 0; font: 500 .64rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.jr__tag--a { top: calc(var(--ly) - var(--gap) - 22px); color: var(--blue-2); }
.jr__tag--b { top: calc(var(--ly) + var(--gap) + 12px); color: var(--cyan); }

/* stations */
.jr__list { display: flex; }
.jr__st { position: relative; flex: none; width: clamp(300px, 26vw, 390px); padding: calc(var(--ly) + var(--gap) + 44px) clamp(2rem, 3vw, 3rem) 0 0; }
.jr__dot { position: absolute; z-index: 2; left: 0; top: var(--ly); width: 13px; height: 13px; translate: -50% -50%; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--line-2); transition: background .45s, border-color .45s, box-shadow .45s; }
.jr__st.is-on .jr__dot { background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 0 6px rgba(92,208,255,.14), 0 0 22px rgba(92,208,255,.5); }
/* a handoff: the two ghost lanes having to pass the file across */
.jr__hand { position: absolute; left: 0; top: calc(var(--ly) - var(--gap)); height: calc(2 * var(--gap)); width: 0;
  border-left: 1px dashed rgba(238,242,250,.28); transition: border-color .5s; }
.jr__hand i { position: absolute; left: 10px; top: -28px; white-space: nowrap; font: 500 .6rem/1 var(--mono); font-style: normal;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding: .3rem .45rem; border-radius: 6px;
  border: 1px solid var(--line); background: var(--bg); transition: color .45s, border-color .45s; }
.jr__st.is-on .jr__hand { border-color: rgba(238,242,250,.08); }
.jr__st.is-on .jr__hand i { color: var(--cyan); border-color: rgba(92,208,255,.35); text-decoration: line-through; text-decoration-color: rgba(92,208,255,.6); }

.jr__k { color: var(--ink-3); margin-bottom: .7rem; transition: color .45s; }
.jr__st.is-on .jr__k { color: var(--cyan); }
.jr__st h3 { font-size: clamp(1.4rem, 1.1rem + .9vw, 1.95rem); font-weight: 500; letter-spacing: -.04em; line-height: 1.1; margin-bottom: .8rem; }
.jr__st h3 em { color: var(--blue-2); }
.jr__me { color: var(--ink); font-size: .98rem; line-height: 1.55; max-width: 34ch; }
.jr__usual { margin-top: 1rem; padding-left: .85rem; border-left: 1px solid var(--line-2); max-width: 34ch;
  color: var(--ink-3); font-size: .86rem; line-height: 1.5; }
.jr__usual b { font-weight: 500; color: var(--ink-2); }

.jr__end { flex: none; width: var(--ew); padding: calc(var(--ly) - .62em) var(--edge) 0 var(--ep); font-size: clamp(2rem, 1.2rem + 1.9vw, 3rem);
  box-sizing: content-box; }
.jr__big { font-size: 1em; font-weight: 500; letter-spacing: -.05em; line-height: 1; }
.jr__big em { color: var(--cyan); }
.jr__endp { margin: 1.1rem 0 1.75rem; font-size: 1rem; color: var(--ink-2); max-width: min(36ch, 100%); }

/* the lanes, laid across the stations */
.jr__lanes { position: absolute; left: calc(var(--edge) + var(--sw)); right: calc(var(--edge) + var(--ew) + var(--ep)); top: 0; height: calc(var(--ly) * 2 + var(--gap)); pointer-events: none; }
.jr__ghost { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed rgba(238,242,250,.16); }
.jr__ghost--a { top: calc(var(--ly) - var(--gap)); }
.jr__ghost--b { top: calc(var(--ly) + var(--gap)); }
.jr__line { position: absolute; left: 0; right: 0; top: calc(var(--ly) - 1px); height: 2px;
  background: rgba(238,242,250,.1); border-radius: 2px; }
.jr__line i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--blue-2), var(--cyan));
  box-shadow: 0 0 14px rgba(92,208,255,.45); transform-origin: 0 50%; transform: scaleX(0); }
.jr__usualtag { position: absolute; left: 1.25rem; top: calc(var(--ly) + var(--gap) + 10px); font: 500 .6rem/1 var(--mono);
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); opacity: .8; }

.jr__cue { position: absolute; right: var(--edge); bottom: clamp(1.25rem, 3vh, 2rem); display: flex; align-items: center; gap: .6rem;
  color: var(--ink-3); font: 500 .66rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; transition: opacity .5s; }
.jr__cue i { font-style: normal; color: var(--cyan); animation: jr-nudge 1.8s var(--ease) infinite; }
.jr.is-done .jr__cue { opacity: 0; }
@keyframes jr-nudge { 0%, 100% { transform: none; } 50% { transform: translateX(6px); } }

/* Vertical route: phones, short screens, and reduced motion. Same content,
   same lanes, turned ninety degrees and never pinned. */
@media (max-width: 860px), (max-height: 620px), (prefers-reduced-motion: reduce) {
  .jr { --lx: 32px; padding: clamp(4.5rem, 10vw, 6rem) 0; }
  .jr__pin { height: auto; min-height: 0; overflow: visible; padding-top: 0; }
  .jr__head { grid-template-columns: 1fr; }
  .jr__hud, .jr__cue, .jr__usualtag { display: none; }
  .jr__view { display: block; margin-top: 2.5rem; padding-bottom: 0; }
  .jr__track { display: block; width: auto; height: auto; padding: 0 var(--gutter); max-width: 720px; }
  .jr__start { width: auto; height: 150px; }
  .jr__merge--h { display: none; }
  .jr__merge--v { display: block; top: 0; width: 64px; height: 150px; }
  .jr__tag { left: 84px; }
  .jr__tag--a { top: 14px; }
  .jr__tag--b { top: 36px; }
  .jr__list { display: block; }
  .jr__st { width: auto; padding: 0 0 2.75rem 84px; }
  .jr__dot { left: var(--lx); top: .45rem; translate: -50% 0; }
  .jr__hand { display: none; }
  .jr__st[data-handoff] .jr__k::after { content: 'Handoff skipped'; display: block; margin-top: .45rem; color: var(--ink-3); }
  .jr__st.is-on[data-handoff] .jr__k::after { color: rgba(92,208,255,.7); }
  /* the end block sits over the lanes, so the route stops where the promise starts */
  .jr__end { position: relative; z-index: 1; width: auto; margin-left: -8px; padding: .5rem 0 0 92px; background: var(--bg); }
  .jr__lanes { left: var(--gutter); right: auto; top: 150px; bottom: 0; width: 64px; height: auto; overflow: hidden; }
  .jr__ghost { top: 0; bottom: 0; right: auto; width: 0; height: auto; border-top: 0; border-left: 1px dashed rgba(238,242,250,.14); }
  .jr__ghost--a { left: 8px; }
  .jr__ghost--b { left: 56px; }
  .jr__line { left: calc(var(--lx) - 1px); right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .jr__line i { transform-origin: 50% 0; transform: scaleY(0); background: linear-gradient(180deg, var(--blue-2), var(--cyan)); }
}
@media (prefers-reduced-motion: reduce) { .jr__line i { transform: none; } }

/* ---- Buying / selling / investing: art-directed frames -------------------- */
.sides { padding: clamp(4rem, 7vw, 6rem) 0; border-top: 1px solid var(--line); }
.sides__head { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.sides__head .h2 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.4rem); }
.sides__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2vw, 2rem); perspective: 1200px; }
.side__f { position: relative; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; display: grid; place-items: center;
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 80% at 30% 0%, rgba(61,123,255,.16), transparent 60%),
    radial-gradient(90% 70% at 100% 100%, rgba(92,208,255,.08), transparent 60%),
    var(--bg-2); }
/* film grain, only while the frame waits for its photo */
.side__f::before { content: ''; position: absolute; inset: 0; opacity: .35; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); }
.side__f img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.side__f:has(img)::before, .side__f:has(img) .side__ph, .side__f:has(img) .side__crop { display: none; }
/* crop marks in the four corners, like a shot on a contact sheet */
.side__crop { position: absolute; inset: 14px; pointer-events: none;
  background:
    linear-gradient(var(--ink-3), var(--ink-3)) 0 0 / 16px 1px, linear-gradient(var(--ink-3), var(--ink-3)) 0 0 / 1px 16px,
    linear-gradient(var(--ink-3), var(--ink-3)) 100% 0 / 16px 1px, linear-gradient(var(--ink-3), var(--ink-3)) 100% 0 / 1px 16px,
    linear-gradient(var(--ink-3), var(--ink-3)) 0 100% / 16px 1px, linear-gradient(var(--ink-3), var(--ink-3)) 0 100% / 1px 16px,
    linear-gradient(var(--ink-3), var(--ink-3)) 100% 100% / 16px 1px, linear-gradient(var(--ink-3), var(--ink-3)) 100% 100% / 1px 16px;
  background-repeat: no-repeat; opacity: .8; }
.side__ph { position: relative; text-align: center; padding: 1rem; }
.side__ph b { display: block; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(2rem, 1.4rem + 1.6vw, 3rem);
  line-height: 1; color: var(--ink-2); letter-spacing: -.02em; }
.side__ph i { display: block; margin-top: .75rem; font: 500 .64rem/1.5 var(--mono); font-style: normal; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-2); }
.side__k { margin-top: 1.4rem; color: var(--cyan); }
.side h3 { margin-top: .55rem; font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem); font-weight: 500; letter-spacing: -.035em; }
.side h3 em { color: var(--blue-2); }
.side__l { margin-top: 1rem; display: grid; gap: .55rem; }
.side__l li { position: relative; padding-left: 1.1rem; color: var(--ink-2); font-size: .94rem; line-height: 1.5; }
.side__l li::before { content: ''; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--blue-2); }
/* a different angle: each frame tips up into place as it enters. CSS scroll
   timeline, off the main thread; browsers without it just show the frame. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .side__f { transform-origin: 50% 100%; animation: side-tip linear both; animation-timeline: view(); animation-range: entry 0% cover 38%; }
  }
}
@keyframes side-tip { from { transform: rotateX(16deg) translateY(40px) scale(.94); opacity: .3; } to { transform: none; opacity: 1; } }
@media (max-width: 900px) {
  .sides__grid { grid-template-columns: 1fr; gap: 3rem; }
  .side__f { aspect-ratio: 4 / 3; }
}

/* ---- The two roles, out in the open ---------------------------------------- */
.roles { padding-bottom: clamp(4rem, 7vw, 6rem); }
.roles__card { padding: clamp(1.75rem, 3.5vw, 3rem); border: 1px solid var(--line); border-radius: 24px;
  background: linear-gradient(180deg, var(--bg-2), var(--bg)); }
.roles__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.5rem 2rem;
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem); border-bottom: 1px solid var(--line); }
.roles__top .label { margin-bottom: 1.1rem; }
.roles__h { font-size: clamp(1.7rem, 1.1rem + 2vw, 2.7rem); font-weight: 500; letter-spacing: -.045em; line-height: 1.05; }
.roles__h em { color: var(--blue-2); }
.roles__logo { height: clamp(56px, 6vw, 76px); width: auto; }
.roles__l { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.75rem); padding-top: clamp(1.5rem, 3vw, 2.25rem); }
.roles__l li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; }
.roles__l li > b { font: 500 .7rem/1.9 var(--mono); color: var(--cyan); font-variant-numeric: tabular-nums; }
.roles__l h3 { font-size: 1.08rem; font-weight: 500; letter-spacing: -.02em; margin-bottom: .45rem; }
.roles__l p { color: var(--ink-2); font-size: .93rem; line-height: 1.55; }
.roles__l strong { color: var(--ink); font-weight: 500; }
@media (max-width: 900px) { .roles__l { grid-template-columns: 1fr; } }

/* attribution for the stand-in photography, in the footer's legal block
   (CC BY / BY-SA need it on the page while those photos are in use) */
.ftr__credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ftr__credit a:hover { color: var(--ink); }