/* HIP · opening journey (night drive over satellite imagery). Tokens come from style.css (:root). */
#journey { position: relative; height: 360vh; background: #05080f; }
.jr-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #05080f; }
.jr-tilt { position: absolute; inset: 0; perspective: 1100px; perspective-origin: 50% 36%; overflow: hidden; transform-origin: 50% 74%; will-change: transform; }
#jr-canvas { position: absolute; display: block; transform-origin: 50% 66%; will-change: transform; }
.jr-horizon { position: absolute; left: 0; right: 0; top: 0; height: 58%; z-index: 3; opacity: 0; pointer-events: none; background: linear-gradient(180deg, #04060d 0%, #060b1a 34%, rgba(11, 20, 46, 0.985) 46%, rgba(12, 22, 50, 0.7) 56%, rgba(9, 15, 34, 0.28) 74%, rgba(5, 8, 15, 0) 100%); }
.jr-dive { position: absolute; z-index: 7; left: var(--gutter); right: var(--gutter); top: clamp(104px, 17vh, 170px); max-width: 640px; opacity: 0; visibility: hidden; will-change: opacity, transform; pointer-events: none; }
.jr-dive h2 { font: 500 clamp(2rem, 4.4vw, 3.8rem)/1.05 var(--display); color: var(--ink); } .jr-dive h2 em { color: var(--accent-bright); font-style: italic; }
.jr-top { position: absolute; z-index: 8; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: clamp(14px, 2.4vw, 28px) var(--gutter); pointer-events: none; }
.jr-brand { pointer-events: auto; display: block; } .jr-brand img { height: 46px; width: auto; display: block; }
.jr-skip { pointer-events: auto; background: rgba(5, 8, 15, 0.7); color: var(--ink); border: 1px solid rgba(var(--ink-rgb), 0.28); border-radius: 999px; min-height: 44px; padding: 10px 18px; font: 500 12px/1 var(--body); letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; transition: border-color 0.25s, color 0.25s; }
@media (hover: hover) { .jr-skip:hover { border-color: var(--accent-bright); color: var(--accent-bright); } }
.jr-skip:focus-visible, .jr-hero a:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; }
/* hero: the investment line, over the opening view */
.jr-hero { position: absolute; z-index: 7; inset: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: clamp(84px, 14vh, 150px) var(--gutter) clamp(26px, 6vh, 64px); will-change: opacity, transform; pointer-events: none; }
.jr-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(5, 8, 15, 0.8) 0%, rgba(5, 8, 15, 0.38) 34%, rgba(5, 8, 15, 0) 58%), linear-gradient(90deg, rgba(5, 8, 15, 0.5) 0%, rgba(5, 8, 15, 0) 52%); }
.jr-copy { max-width: 880px; }
.jr-copy .kicker { margin-bottom: 18px; }
.jr-hero h1 { font: 500 clamp(2.2rem, 4.9vw, 4.7rem)/1.04 var(--display); letter-spacing: -0.015em; color: var(--ink); }
.jr-hero h1 b { font-weight: 600; } .jr-hero h1 em { font-style: italic; color: var(--accent-bright); font-weight: 500; }
.jr-hero .lead { margin-top: 22px; max-width: 560px; font-size: clamp(1rem, 1.35vw, 1.2rem); color: var(--ink-soft); }
.jr-facts { list-style: none; display: grid; grid-template-columns: repeat(4, auto); gap: 8px clamp(18px, 3vw, 44px); margin-top: 28px; justify-content: start; }
.jr-facts li { display: flex; flex-direction: column; gap: 3px; border-left: 1px solid rgba(var(--accent-rgb), 0.55); padding-left: 12px; }
.jr-facts b { font: 600 clamp(1.15rem, 1.9vw, 1.6rem)/1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.jr-facts span { font-size: 11.5px; letter-spacing: 0.04em; color: var(--ink-faint); text-transform: uppercase; }
.jr-hero .row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; pointer-events: auto; }
.jr-fine { margin-top: 22px; max-width: 640px; font-size: 11.5px; line-height: 1.55; color: rgba(var(--ink-rgb), 0.5); }
.jr-rera { display: flex; align-items: center; gap: 12px; flex: none; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); text-align: left; pointer-events: auto; }
.jr-rera img { width: 78px; height: 78px; background: #fff; padding: 4px; border-radius: 4px; display: block; } .jr-rera b { font-weight: 600; color: var(--ink); letter-spacing: 0.06em; }
/* landmarks on the map */
.jr-wide, .jr-cards { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.jr-wl { position: absolute; left: 0; top: 0; white-space: nowrap; font: 500 10.5px/1 var(--body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); background: rgba(5, 8, 15, 0.74); border: 1px solid rgba(var(--ink-rgb), 0.22); border-radius: 999px; padding: 7px 12px 7px 24px; will-change: transform; }
.jr-wl::before { content: ""; position: absolute; left: 10px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: #9fd4ff; box-shadow: 0 0 0 3px rgba(159, 212, 255, 0.2); }
.jr-wl.jr-area::before { background: var(--accent-bright); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.25); }
.jr-card { position: absolute; left: 0; top: 0; width: 226px; padding: 12px 14px 13px; background: rgba(8, 12, 19, 0.9); border: 1px solid rgba(180, 220, 255, 0.26); border-left: 2px solid var(--accent-bright); border-radius: 6px; opacity: 0; visibility: hidden; will-change: transform, opacity; }
.jr-card .k { display: block; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-bright); }
.jr-card b { display: block; margin-top: 5px; font: 600 16.5px/1.2 var(--display); color: var(--ink); } .jr-card .s { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.4; color: var(--ink-soft); }
.jr-pin { position: absolute; z-index: 5; left: 0; top: 0; width: 0; height: 0; opacity: 0; pointer-events: none; will-change: transform, opacity; }
.jr-pin img { position: absolute; left: 50%; top: 50%; height: 30px; width: auto; transform: translate(-50%, -50%); filter: drop-shadow(0 0 10px rgba(var(--accent-bright-rgb), 0.9)); }
.jr-pin i { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; border: 1.5px solid var(--accent-bright); animation: jr-ping 2.2s var(--ease) infinite; }
.jr-pin.big img { height: 46px; } .jr-pin.big i { width: 96px; height: 96px; margin: -48px 0 0 -48px; }
@keyframes jr-ping { 0% { transform: scale(0.45); opacity: 0.95; } 100% { transform: scale(1.5); opacity: 0; } }
/* drive HUD + arrival */
.jr-hud { position: absolute; z-index: 6; left: 50%; bottom: clamp(26px, 7vh, 64px); transform: translateX(-50%); display: flex; align-items: center; gap: 14px; opacity: 0; visibility: hidden; font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.jr-hud em { position: relative; width: clamp(110px, 22vw, 260px); height: 1px; background: rgba(var(--ink-rgb), 0.3); display: block; }
.jr-hud i { position: absolute; top: 50%; left: 0; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--accent-bright); box-shadow: 0 0 12px 2px rgba(var(--accent-bright-rgb), 0.75); }
.jr-arrive { position: absolute; z-index: 7; left: var(--gutter); right: var(--gutter); top: clamp(104px, 17vh, 170px); max-width: 640px; opacity: 0; visibility: hidden; will-change: opacity, transform; }
.jr-arrive h2 { font: 500 clamp(2rem, 4.4vw, 3.8rem)/1.05 var(--display); color: var(--ink); } .jr-arrive h2 em { color: var(--accent-bright); font-style: italic; }
.jr-arrive .lead { margin-top: 14px; font-size: 1rem; color: var(--ink-soft); max-width: 520px; }
.jr-arrive .more { margin-top: 18px; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-bright); }
.jr-credit { position: absolute; z-index: 8; left: var(--gutter); right: var(--gutter); bottom: 8px; font-size: 9.5px; letter-spacing: 0.04em; color: rgba(var(--ink-rgb), 0.38); pointer-events: none; }
.jr-list { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 860px) {
  .jr-hero { flex-direction: column; align-items: stretch; justify-content: flex-end; padding-top: 84px; }
  .jr-hero::before { background: linear-gradient(0deg, rgba(5, 8, 15, 0.94) 0%, rgba(5, 8, 15, 0.8) 55%, rgba(5, 8, 15, 0.1) 100%); }
  .jr-facts { grid-template-columns: repeat(2, auto); } .jr-hero .lead { font-size: 0.95rem; margin-top: 14px; } .jr-fine { font-size: 10.5px; margin-top: 14px; }
  .jr-rera { align-self: flex-start; } .jr-rera img { width: 58px; height: 58px; } .jr-card { width: 196px; } .jr-hud { bottom: 40px; }
  .jr-hero .row { margin-top: 20px; } .jr-brand img { height: 38px; } .jr-credit { display: none; } .jr-wide { display: none; }
}
@media (max-height: 640px) and (min-width: 861px) { .jr-fine, .jr-hero .lead { display: none; } .jr-facts { margin-top: 18px; } }
/* reduced motion: no pinned scrub; the finished composition plus the list */
#journey.jr-static { height: auto; } .jr-static .jr-stage { position: relative; } .jr-static .jr-skip { display: none; }
.jr-static .jr-list { position: static; width: auto; height: auto; clip-path: none; white-space: normal; padding: 18px var(--gutter) 26px; background: #05080f; color: var(--ink-soft); list-style: none; font-size: 14px; } .jr-static .jr-list li { padding: 5px 0; } .jr-static .jr-list b { color: var(--ink); }

.jr-pin b { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); white-space: nowrap; font: 500 10.5px/1 var(--body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); background: rgba(5, 8, 15, 0.78); border: 1px solid rgba(var(--accent-bright-rgb), 0.5); border-radius: 999px; padding: 7px 12px; }
.jr-pin.big b { display: none; }

/* the film's own edge-darkening (page vignette + the vignette baked into the footage), faded in over the descent so the swap to footage is invisible */
.jr-seam { position: absolute; inset: 0; z-index: 4; opacity: 0; pointer-events: none; background:
  radial-gradient(ellipse 64% 70% at 50% 50%, transparent 50%, rgba(var(--bg-rgb), 0.86) 97%),
  linear-gradient(to right, rgba(var(--bg-rgb), 0.82), transparent 16%, transparent 84%, rgba(var(--bg-rgb), 0.82)),
  linear-gradient(to bottom, rgba(var(--bg-rgb), 0.5), transparent 22%, transparent 70%, rgba(var(--bg-rgb), 0.72)),
  radial-gradient(circle farthest-corner at 50% 50%, transparent 0%, rgba(0, 0, 0, 0.048) 25%, rgba(0, 0, 0, 0.182) 50%, rgba(0, 0, 0, 0.37) 75%, rgba(0, 0, 0, 0.572) 100%); }

/* the film's colour grade (cooler, a little dimmer), multiplied over the map as the descent ends */
.jr-grade { position: absolute; inset: 0; z-index: 4; opacity: 0; pointer-events: none; background: rgb(184, 205, 222); mix-blend-mode: multiply; }

/* the drive: beacons standing on the map (a layer with the canvas's own tilt; each beacon is a billboard that faces the camera) and the nearby-campus badge */
.jr-world { position: absolute; pointer-events: none; transform-origin: 50% 66%; transform-style: preserve-3d; will-change: transform; }
.jr-bc { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; visibility: hidden; will-change: transform; }
.jr-ring { position: absolute; left: -24px; top: -24px; width: 48px; height: 48px; border-radius: 50%; border: 2px solid rgba(255, 214, 150, 0.95); box-shadow: 0 0 26px 6px rgba(255, 186, 110, 0.5), inset 0 0 20px rgba(255, 186, 110, 0.4); opacity: var(--a, 0); }
.jr-up { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; }
.jr-bc { --hh: 170px; } .jr-bc-work { --hh: 240px; }
.jr-shaft { position: absolute; left: -3px; bottom: 0; width: 6px; height: var(--hh); transform-origin: 50% 100%; transform: scaleY(var(--rise, 0)); opacity: var(--a, 0); background: linear-gradient(0deg, rgba(255, 220, 160, 0.98), rgba(255, 200, 130, 0.6) 42%, rgba(255, 200, 130, 0)); filter: drop-shadow(0 0 10px rgba(255, 190, 110, 0.85)); }
.jr-tip { position: absolute; left: 0; top: calc(-1 * var(--hh) * var(--rise, 0)); width: 1px; height: 1px; }
.jr-bc-work .jr-shaft { width: 8px; left: -4px; }
.jr-bc-work .jr-ring { left: -34px; top: -34px; width: 68px; height: 68px; }
.jr-cards .jr-card { width: 190px; padding: 9px 13px 10px; } .jr-cards .jr-card b { margin-top: 0; font-size: 15.5px; } .jr-cards .jr-card-work { width: 270px; border-left-width: 3px; } .jr-cards .jr-card .s { margin-top: 3px; font-size: 12.5px; color: var(--accent-bright); }
.jr-badge { position: absolute; z-index: 6; right: var(--gutter); top: clamp(110px, 24vh, 260px); width: min(250px, calc(100vw - 2 * var(--gutter))); padding: 10px 14px 11px; background: rgba(8, 12, 19, 0.9); border: 1px solid rgba(180, 220, 255, 0.26); border-right: 2px solid var(--accent-bright); border-radius: 6px; opacity: 0; visibility: hidden; pointer-events: none; will-change: opacity, transform; }
.jr-badge { display: none; }   /* Bajaj Finserv is a standing card on the map now */
.jr-badge-old { background: rgba(8, 12, 19, 0.96); border-color: rgba(var(--accent-bright-rgb), 0.55); box-shadow: 0 6px 24px rgba(5, 8, 15, 0.6); } .jr-badge b { font-size: 18px; } .jr-badge .s { color: var(--ink); font-weight: 500; }
.jr-badge .k { display: block; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-bright); }
.jr-badge b { display: block; font: 600 16.5px/1.2 var(--display); color: var(--ink); } .jr-badge .s { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.35; color: var(--ink-soft); }
@media (max-width: 860px) { .jr-cards .jr-card { width: 150px; padding: 8px 11px 9px; } .jr-cards .jr-card-work { width: 210px; } .jr-badge { top: 76px; width: auto; left: var(--gutter); } }

/* the sky: three night-Earth stills scaled in depth over the map (orbit → western Maharashtra → Pune from 40 km → the satellite city) */
.jr-sky { position: absolute; inset: 0; z-index: 5; overflow: hidden; pointer-events: none; }
.jr-skybg { position: absolute; inset: 0; background: #03050c; }
.jr-cl { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 62%; will-change: transform, opacity; opacity: 0; visibility: hidden; }
/* v12: night-Earth stills; each layer's origin (and cover crop) sits on Pune so the push-in closes on the city */
.jr-cl0 { transform-origin: 43.5% 47%; object-position: 43.5% 47%; }
.jr-cl1 { transform-origin: 50.5% 58%; object-position: 50.5% 58%; }
.jr-cl2 { transform-origin: 50% 50%; object-position: 50% 50%; }

/* v10: the five areas (wide view), the landmarks off the route, the "epicentre" line, road names on the map, and the skip button that also lives on the film's stage during the drive chapter */
.jr-wl.jr-area { font-size: 11.5px; letter-spacing: 0.2em; }
/* v12: the city named on the way down, before the areas: a marker on the city with a leader line up to a large label */
.jr-pune { position: absolute; z-index: 7; left: 0; top: 0; width: 0; height: 0; opacity: 0; visibility: hidden; pointer-events: none; will-change: transform, opacity; }
.jr-pune .d { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--accent-bright); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.28), 0 0 24px rgba(255, 190, 110, 0.85); }
.jr-pune .r { position: absolute; left: -24px; top: -24px; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid rgba(255, 214, 150, 0.9); box-shadow: 0 0 18px rgba(255, 186, 110, 0.45); }
.jr-pune .l { position: absolute; left: -1px; bottom: 10px; width: 2px; height: 84px; background: linear-gradient(0deg, rgba(255, 214, 150, 0.1), rgba(255, 214, 150, 0.95)); }
.jr-pune b { position: absolute; left: 50%; bottom: 100px; transform: translateX(-50%); white-space: nowrap; font: 600 clamp(22px, 2.6vw, 38px)/1 var(--display); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); background: rgba(5, 8, 15, 0.78); border: 1px solid rgba(var(--ink-rgb), 0.22); border-radius: 999px; padding: 14px 26px 14px 44px; }
.jr-pune b::before { content: ""; position: absolute; left: 20px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%; background: var(--accent-bright); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.25); }
@media (max-width: 860px) { .jr-pune .l { height: 60px; } .jr-pune b { bottom: 74px; letter-spacing: 0.18em; } }
.jr-wl.jr-tower { margin-top: 26px; }   /* sits under the Kalyani Nagar chip: the two points are ~400 m apart, a few pixels at the wide zoom */
.jr-wl.jr-tower::before { background: #ffd48a; box-shadow: 0 0 0 3px rgba(255, 212, 138, 0.22); }
.jr-mapcap { position: absolute; z-index: 7; left: var(--gutter); bottom: clamp(56px, 9vh, 100px); max-width: 760px; opacity: 0; visibility: hidden; pointer-events: none; will-change: opacity; font: 400 clamp(30px, 4.2vw, 60px)/1.08 var(--display); letter-spacing: -0.01em; color: var(--ink); text-shadow: 0 2px 28px rgba(5, 8, 15, 0.95), 0 0 3px rgba(5, 8, 15, 0.9); }   /* the film caption's look */
.jr-mapcap em { font-style: italic; color: var(--accent-bright); }   /* the same accent as the film captions */
.jr-bc-road { --hh: 0px; }
/* v12: the project site's beacon and card, and the lit towers standing on the buildings along the chase */
.jr-bc-site { --hh: 260px; } .jr-bc-site .jr-shaft { width: 8px; left: -4px; background: linear-gradient(0deg, rgba(255, 236, 200, 1), rgba(255, 214, 150, 0.7) 50%, rgba(255, 214, 150, 0)); } .jr-bc-site .jr-ring { left: -34px; top: -34px; width: 68px; height: 68px; border-color: rgba(255, 236, 200, 1); }
.jr-cards .jr-card-site { width: 270px; border-left-width: 3px; border-left-color: #ffe6c0; }
.jr-bc-tower { --hh: 0px; }
.jr-twr { position: absolute; left: calc(var(--w, 20px) * -0.5); bottom: 0; width: var(--w, 20px); height: var(--h, 100px); opacity: 0; will-change: opacity; pointer-events: none; border-radius: 1px 1px 0 0;
  background: repeating-linear-gradient(90deg, transparent 0 4px, rgba(6, 9, 15, 0.9) 4px 6px), repeating-linear-gradient(0deg, rgba(255, 228, 185, 0.96) 0 3px, rgba(9, 12, 19, 0.97) 3px 7px);
  box-shadow: 0 0 22px rgba(255, 196, 120, 0.28), inset 0 1px 0 rgba(255, 236, 200, 0.9); }
@media (max-width: 860px) { .jr-cards .jr-card-site { width: 210px; } }
.jr-roadtxt { position: absolute; left: 0; bottom: 6px; transform: translateX(-50%); white-space: nowrap; opacity: 0; will-change: opacity; pointer-events: none; font: 600 15px/1 var(--body); letter-spacing: 0.26em; text-transform: uppercase; color: rgba(255, 240, 210, 0.95); text-shadow: 0 0 12px rgba(255, 196, 120, 0.7), 0 1px 2px rgba(0, 0, 0, 0.9); }
.film-skip { position: absolute; z-index: 12; top: clamp(14px, 2.4vw, 28px); right: var(--gutter); opacity: 0; visibility: hidden; transition: opacity 0.3s var(--ease), visibility 0.3s; }
.film-skip.on { opacity: 1; visibility: visible; }
@media (max-width: 860px) { .jr-wide { display: block; } .jr-wl.jr-area { font-size: 9.5px; letter-spacing: 0.14em; } .jr-wl.jr-work, .jr-wl.jr-tower { display: none; } .jr-mapcap { bottom: 118px; max-width: 86vw; font-size: clamp(28px, 8.5vw, 40px); } .jr-roadtxt { font-size: 12px; } }
/* v12 phones: the hero copy must fit under the logo on one screen — tighter type, buttons in a wrapping row, a smaller RERA block; on short phones the footnote and the QR go */
@media (max-width: 860px) {
  .jr-hero { padding-top: 76px; }
  .jr-copy .kicker { font-size: 10px; letter-spacing: 0.16em; margin-bottom: 12px; }
  .jr-hero h1 { font-size: clamp(30px, 9vw, 40px); line-height: 1.04; }
  .jr-hero .lead { font-size: 15px; line-height: 1.45; margin-top: 12px; }
  .jr-facts { margin-top: 14px; }
  .jr-hero .row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } .jr-hero .row .cta, .jr-hero .row .cta-ghost { padding: 10px 16px; font-size: 12.5px; }
  .jr-fine { font-size: 11px; line-height: 1.35; margin-top: 12px; }
  .jr-rera { margin-top: 12px; } .jr-rera img { width: 56px; height: 56px; }
}
@media (max-width: 860px) and (max-height: 720px) { .jr-fine, .jr-rera img { display: none; } .jr-hero .lead { display: none; } }
/* readability over the lit-city opening (client, 2026-10-21): heavier weights, a dark edge and a soft halo on every line of hero copy, tinted ghost buttons */
.jr-hero h1 { font-weight: 600; text-shadow: 0 0 1px rgba(5, 8, 15, 0.95), 0 1px 2px rgba(5, 8, 15, 0.9), 0 3px 10px rgba(5, 8, 15, 0.85), 0 6px 34px rgba(5, 8, 15, 0.8); }
.jr-hero h1 em { font-weight: 600; }
.jr-hero .lead, .jr-copy .lead { font-weight: 600; color: var(--ink); text-shadow: 0 0 1px rgba(5, 8, 15, 0.95), 0 1px 2px rgba(5, 8, 15, 0.9), 0 3px 12px rgba(5, 8, 15, 0.85); }
.jr-copy .kicker { font-weight: 700; color: var(--accent-bright); text-shadow: 0 0 1px rgba(5, 8, 15, 0.95), 0 1px 3px rgba(5, 8, 15, 0.9), 0 3px 12px rgba(5, 8, 15, 0.85); }
.jr-facts b { font-weight: 700; text-shadow: 0 0 1px rgba(5, 8, 15, 0.95), 0 1px 2px rgba(5, 8, 15, 0.9), 0 3px 12px rgba(5, 8, 15, 0.85); }
.jr-facts span { font-weight: 600; color: var(--ink); text-shadow: 0 0 1px rgba(5, 8, 15, 0.95), 0 1px 2px rgba(5, 8, 15, 0.9), 0 2px 8px rgba(5, 8, 15, 0.85); }
.jr-facts li { border-left-color: rgba(var(--accent-bright-rgb), 0.9); }
.jr-fine { font-weight: 500; color: var(--ink-soft); text-shadow: 0 0 1px rgba(5, 8, 15, 0.95), 0 1px 2px rgba(5, 8, 15, 0.9), 0 2px 10px rgba(5, 8, 15, 0.85); }
.jr-hero .row .cta { font-weight: 700; box-shadow: 0 4px 18px rgba(5, 8, 15, 0.55); }
.jr-hero .row .cta-ghost { font-weight: 700; background: rgba(5, 8, 15, 0.55); border-color: var(--accent-bright); text-shadow: 0 1px 2px rgba(5, 8, 15, 0.9); box-shadow: 0 4px 18px rgba(5, 8, 15, 0.45); }
.jr-rera span { font-weight: 600; text-shadow: 0 1px 2px rgba(5, 8, 15, 0.9), 0 2px 10px rgba(5, 8, 15, 0.85); }
.jr-credit { text-shadow: 0 1px 2px rgba(5, 8, 15, 0.9); }
/* client (2026-10-21): the hero's supporting text in white and larger */
.jr-copy .kicker { color: #fff; font-size: 13px; letter-spacing: 0.2em; }
.jr-hero .lead, .jr-copy .lead { color: #fff; font-size: clamp(1.15rem, 1.6vw, 1.45rem); line-height: 1.5; max-width: 640px; }
.jr-facts b { color: #fff; font-size: clamp(1.35rem, 2.2vw, 1.9rem); }
.jr-facts span { color: #fff; font-size: 13.5px; }
.jr-fine { color: #fff; font-size: 13.5px; line-height: 1.55; max-width: 720px; }
.jr-rera span { color: #fff; font-size: 14px; }
@media (max-width: 860px) { .jr-copy .kicker { font-size: 11px; } .jr-hero .lead { font-size: 16.5px; } .jr-facts span { font-size: 12.5px; } .jr-fine { font-size: 12.5px; } }
/* cards stand on the building (inside the beacon billboard, above the shaft), left or right of the shaft; they scale with distance like the towers */
.jr-up .jr-card { position: absolute; top: auto; bottom: calc(var(--hh) * var(--rise, 0) + 14px); left: 0; width: 230px; padding: 9px 13px 10px; transform: translateX(-100%) translateX(-12px); visibility: hidden; opacity: 0; will-change: opacity; }
.jr-up .jr-card.jr-card-right { transform: translateX(12px); }
.jr-up .jr-card b { margin-top: 0; font-size: 15.5px; } .jr-up .jr-card .s { margin-top: 3px; font-size: 12.5px; color: var(--accent-bright); }
.jr-up .jr-card-work, .jr-up .jr-card-site { width: 270px; border-left-width: 3px; } .jr-up .jr-card-site { border-left-color: #ffe6c0; }
@media (max-width: 860px) { .jr-up .jr-card { width: 170px; padding: 8px 11px 9px; } .jr-up .jr-card-work, .jr-up .jr-card-site { width: 210px; } }
/* the standing cards are seen in perspective: bigger type and taller shafts so they read from the chase height; on phones every card goes to the right of its shaft (the left ones ran off the screen) */
.jr-bc { --hh: 230px; } .jr-bc-work { --hh: 300px; } .jr-bc-site { --hh: 320px; }
.jr-up .jr-card { width: 290px; padding: 11px 15px 12px; background: rgba(8, 12, 19, 0.94); }
.jr-up .jr-card b { font-size: 21px; line-height: 1.15; } .jr-up .jr-card .s { font-size: 14.5px; margin-top: 4px; }
.jr-up .jr-card-work, .jr-up .jr-card-site { width: 340px; }
@media (max-width: 860px) { .jr-bc { --hh: 170px; } .jr-bc-work { --hh: 220px; } .jr-bc-site { --hh: 240px; } .jr-up .jr-card, .jr-up .jr-card.jr-card-left { width: 200px; padding: 8px 11px 9px; transform: translateX(10px); } .jr-up .jr-card-work, .jr-up .jr-card-site { width: 230px; } .jr-up .jr-card b { font-size: 17px; } .jr-up .jr-card .s { font-size: 12.5px; } }
.jr-tilt-world { z-index: 3; overflow: visible; pointer-events: none; }   /* beacons, towers and standing cards above the horizon haze */

.jr-bc-site { --hh: 360px; } .jr-bc-work { --hh: 280px; }   /* the site card rides highest, the office/campus cards below it, hotels/mall lowest: no two cards on the same height band */
@media (max-width: 860px) { .jr-bc-site { --hh: 280px; } .jr-bc-work { --hh: 210px; } }

  /* ── the arithmetic ── */
  #invest .sum { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr; align-items: stretch; gap: clamp(6px, 1.2vw, 18px); margin-top: 52px; }
  #invest .sum > div { border: 1px solid var(--hair); border-radius: var(--r); padding: 20px 18px 18px; background: var(--surface); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
  #invest .sum > em { align-self: center; font: 400 clamp(22px, 2.6vw, 38px)/1 var(--display); color: var(--accent); font-style: normal; }
  #invest .sum span { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); }
  #invest .sum b { font: 500 clamp(28px, 3.4vw, 54px)/1 var(--display); color: var(--ink); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
  #invest .sum i { font-style: normal; font-size: 12.5px; color: var(--ink-soft); }
  #invest .sum .hl { border-color: rgba(var(--accent-rgb), 0.6); background: linear-gradient(160deg, rgba(var(--accent-rgb), 0.18), var(--surface) 70%); } #invest .sum .hl b { color: var(--accent-bright); }
  @media (max-width: 980px) { #invest .sum { grid-template-columns: 1fr 1fr; } #invest .sum > em { display: none; } #invest .sum .hl { grid-column: 1 / -1; } }
  #invest .ladder { --p: 0; margin-top: clamp(40px, 6vw, 72px); }
  .lad-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 14px; margin-bottom: 18px; }
  .lad-k { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-faint); }
  .lad-top b { font: 500 clamp(28px, 3.4vw, 52px)/1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; } #lad-val { color: var(--accent-bright); }
  .lad-eq { font: 400 clamp(20px, 2vw, 30px)/1 var(--display); color: var(--accent); } .lad-note { font-size: 12.5px; color: var(--ink-soft); }
  .lad-plot { position: relative; height: clamp(230px, 32vw, 400px); padding-bottom: 30px; }
  .lad-cap { position: absolute; left: 0; right: 0; top: 0; border-top: 1px dashed rgba(var(--accent-bright-rgb), 0.55); } .lad-cap span { position: absolute; left: 0; top: 6px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-bright); }
  .lad-bars { position: absolute; left: 0; right: 0; top: 0; bottom: 30px; display: grid; grid-template-columns: repeat(29, minmax(0, 1fr)); gap: clamp(3px, 0.5vw, 8px); align-items: end; }
  .lad-bars > i { display: block; height: calc(var(--h) * 1%); border-radius: 3px 3px 0 0; background: linear-gradient(to top, rgba(var(--accent-rgb), 0.55), var(--accent)); transform-origin: 50% 100%; transform: scaleY(clamp(0, calc(var(--p) * 13 - var(--i)), 1)); will-change: transform; }
  .lad-bars > i.end { background: linear-gradient(to top, var(--accent), var(--accent-bright)); box-shadow: 0 0 22px rgba(var(--accent-bright-rgb), 0.35); }
  .lad-beyond { grid-column: 13 / -1; align-self: stretch; margin-top: 6px; border: 1.5px dashed rgba(var(--accent-bright-rgb), 0.6); border-radius: 4px; background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.2), rgba(var(--accent-rgb), 0.04) 75%), repeating-linear-gradient(135deg, rgba(var(--ink-rgb), 0.08) 0 9px, transparent 9px 18px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 8px; padding: clamp(14px, 2.4vw, 34px); text-align: left; min-width: 0; }
  .lad-beyond b { font: 500 clamp(22px, 2.6vw, 40px)/1.1 var(--display); color: var(--accent-bright); letter-spacing: -0.01em; }
  .lad-beyond span { font-size: clamp(14px, 1.25vw, 19px); line-height: 1.35; color: var(--ink); }
  .lad-beyond small { display: block; font-size: clamp(12px, 0.95vw, 14px); line-height: 1.45; color: var(--ink-soft); }
  .lad-axis { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
  @media (max-width: 600px) { .lad-axis span:nth-child(2) { display: none; } .lad-beyond { padding: 12px; gap: 6px; margin-top: 30px; } .lad-beyond b { font-size: 21px; } .lad-beyond span { font-size: 13px; } .lad-beyond small { font-size: 11.5px; } }
  #invest .chain { margin-top: clamp(48px, 7vw, 84px); } .chain-h, .not h3 { font: 500 clamp(22px, 2.2vw, 32px)/1.15 var(--display); margin-bottom: 20px; }
  .chain ol { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; counter-reset: ch; border: 1px solid var(--hair); border-radius: var(--r); overflow: hidden; }
  .chain li { position: relative; padding: 22px 22px 22px 22px; display: flex; flex-direction: column; gap: 8px; background: var(--surface); counter-increment: ch; }
  .chain li + li { border-left: 1px solid var(--hair); } .chain li + li::before { content: "→"; position: absolute; left: -12px; top: 22px; width: 24px; height: 24px; border-radius: 50%; background: var(--bg); border: 1px solid var(--hair); display: grid; place-items: center; font-size: 13px; color: var(--accent); }
  .chain b { font: 500 clamp(18px, 1.7vw, 24px)/1.2 var(--display); color: var(--accent-bright); } .chain span { color: var(--ink-soft); font-size: clamp(14px, 1.05vw, 16px); }
  @media (max-width: 760px) { .chain ol { grid-template-columns: 1fr; } .chain li + li { border-left: 0; border-top: 1px solid var(--hair); } .chain li + li::before { content: "↓"; left: 22px; top: -12px; } }
  #invest .not { margin-top: clamp(40px, 6vw, 72px); border-left: 2px solid var(--accent); padding: 4px 0 4px clamp(18px, 2.4vw, 32px); max-width: 860px; }
  .not ul { list-style: none; display: grid; gap: 12px; } .not li { position: relative; padding-left: 20px; color: var(--ink-soft); font-size: clamp(14.5px, 1.1vw, 17px); } .not li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 1px; background: var(--accent); }
  /* nearby names in the location section */
  .near-h { margin: 40px 0 6px; font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent); font-weight: 500; }
  .near { list-style: none; } .near li { padding: 14px 0; border-bottom: 1px solid var(--hair); display: grid; gap: 3px; } .near b { font: 500 clamp(17px, 1.4vw, 21px)/1.25 var(--display); color: var(--ink); } .near span { font-size: 13.5px; color: var(--ink-soft); } .near .soon { color: var(--accent-bright); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; }
  @media (prefers-reduced-motion: reduce) { #invest .ladder { --p: 1 !important; } }