/* ============================================================================
   NARWAL — cinematic layers, hero, scroll experience.
   No-JS shows a readable static page; .js enables the full motion world.
   Compositor-only (transform/opacity). iOS-safe (SVG mask, no fixed-attach).
   ========================================================================== */

/* ---- Lenis smooth-scroll hooks ---- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* =========================== reveal system =========================== */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity var(--dur-reveal) var(--ease-out-soft), transform var(--dur-reveal) var(--ease-out-soft); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; }
.reveal-scale { opacity: 0; transform: scale(.94); transition: opacity var(--dur-reveal) var(--ease-out-expo), transform var(--dur-reveal) var(--ease-out-expo); }
.reveal-scale.in { opacity: 1; transform: none; }

/* line-mask reveal for display headings: each .line wrapped, clipped, slides up */
.mask-head .line { display: block; overflow: hidden; }
.mask-head .line > span { display: block; transform: translateY(110%); transition: transform var(--dur-cine) var(--ease-out-expo); will-change: transform; }
.mask-head.in .line > span { transform: none; }
.mask-head.in .line:nth-child(2) > span { transition-delay: .08s; }
.mask-head.in .line:nth-child(3) > span { transition-delay: .16s; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-scale { opacity: 1 !important; transform: none !important; transition: none !important; }
  .mask-head .line > span { transform: none !important; transition: none !important; }
  * { animation-duration: .001ms !important; }
}

/* =========================== preloader =========================== */
.preloader {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: radial-gradient(120% 120% at 50% 30%, #3a2233 0%, #241712 70%);
  color: var(--cream); transition: opacity .7s var(--ease-out-soft), visibility .7s;
}
.preloader.done { transform: translateY(-100%); pointer-events: none; }
.preloader { transition: transform .95s var(--ease-out-expo); }
/* a thin gold seam on the lifting curtain's edge */
.preloader::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold-soft), transparent); opacity: 0; transition: opacity .3s; }
.preloader.done::after { opacity: .9; }
.pl-inner { text-align: center; }
.pl-word { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 8vw, 72px); letter-spacing: .04em; color: #fff; overflow: hidden; }
.pl-word span { display: inline-block; transform: translateY(110%); animation: pl-rise .8s var(--ease-out-expo) forwards; }
@keyframes pl-rise { to { transform: none; } }
.pl-sub { margin-top: 10px; font-size: 13px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-soft); opacity: 0; animation: pl-fade .6s ease .35s forwards; }
@keyframes pl-fade { to { opacity: .9; } }
.pl-bar { margin: 26px auto 0; width: min(240px, 60vw); height: 2px; background: rgba(255,255,255,.16); border-radius: 2px; overflow: hidden; }
.pl-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--sunset), var(--gold-soft)); transition: width .2s linear; }
.pl-count { margin-top: 12px; font-size: 12px; letter-spacing: .2em; color: rgba(255,255,255,.6); }
html:not(.js) .preloader { display: none; }

/* =========================== custom cursor (desktop, fine pointer) =========================== */
.cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; z-index: 150; pointer-events: none; border-radius: 50%; mix-blend-mode: difference; }
.cursor-dot { width: 7px; height: 7px; background: #fff; transform: translate(-50%, -50%); }
.cursor-ring { width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.85); transform: translate(-50%, -50%); transition: width .25s var(--ease-out-expo), height .25s var(--ease-out-expo), background .25s, opacity .25s; }
.cursor-ring.hover { width: 64px; height: 64px; background: rgba(255,255,255,.12); }
.cursor-ring.down { width: 28px; height: 28px; }
@media (hover: none), (pointer: coarse) { .cursor-dot, .cursor-ring { display: none !important; } }

/* =========================== cinematic hero =========================== */
.cine-stage { position: relative; height: 100vh; background: var(--bg-hero-base); }
.js .cine-stage { height: 320vh; }
.cine-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; isolation: isolate; }
.layer { position: absolute; inset: 0; }

/* sunset sky */
.sky2 {
  z-index: 1;
  background: linear-gradient(180deg,
    #241733 0%, #3a2447 13%, #5e3357 28%, #8c4358 43%,
    #b85d4c 57%, #d9824e 70%, #efb069 83%, #f9e3c2 96%, #f9e7cf 100%);
}
.sky2::after {
  content: ""; position: absolute; left: 50%; bottom: 13%;
  width: 70vw; height: 70vw; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(255,228,172,.9) 0%, rgba(255,198,120,.34) 34%, rgba(255,198,120,0) 64%);
  pointer-events: none;
}
/* a faint starfield in the deep top of the dusk sky */
.sky2::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 9%, rgba(255,245,230,.9), transparent),
    radial-gradient(1.2px 1.2px at 26% 16%, rgba(255,245,230,.7), transparent),
    radial-gradient(1.5px 1.5px at 47% 7%, rgba(255,245,230,.85), transparent),
    radial-gradient(1.1px 1.1px at 68% 13%, rgba(255,245,230,.7), transparent),
    radial-gradient(1.3px 1.3px at 84% 8%, rgba(255,245,230,.8), transparent),
    radial-gradient(1.1px 1.1px at 92% 18%, rgba(255,245,230,.6), transparent);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 30%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 30%);
}

/* the home — full-bleed cinematic scene, gently scales (Ken Burns) on scroll */
.house-full {
  z-index: 2;
  transform-origin: center 58%;
  background: url('/img/hero-home.jpg') center 58% / cover no-repeat, var(--bg-hero-base);
  will-change: transform;
}

/* cinematic vignette — top dusk for nav/headline legibility, warm base that flows into the page */
.hero-vignette {
  z-index: 3; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(28,16,28,.62) 0%, rgba(28,16,28,.12) 22%, rgba(20,12,8,0) 46%, rgba(20,12,8,.18) 74%, rgba(20,12,8,.5) 100%),
    radial-gradient(120% 80% at 50% 8%, rgba(58,34,52,.4), transparent 55%);
}

/* "entering the front door": the whole frame falls into shadow as we step into the threshold */
.enter-veil {
  z-index: 3; pointer-events: none; opacity: 0; will-change: opacity;
  background: radial-gradient(150% 130% at 57% 50%, rgba(8,5,3,.72) 0%, rgba(5,3,2,.9) 55%, rgba(3,2,1,.99) 100%);
}
/* the door OPENS: a bright warm light grows from a sliver at the real doorway and fills the frame */
.door-glow {
  z-index: 3; pointer-events: none; opacity: 0; will-change: opacity, transform; transform-origin: 57% 50%;
  background: radial-gradient(40% 60% at 57% 50%, rgba(255,238,198,1), rgba(255,202,134,.66) 44%, rgba(255,168,88,0) 75%);
  mix-blend-mode: screen;
}
/* F+H: photoreal double doors that swing open at the threshold onto the warm interior + NARWAL */
.hero-doors { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0;
  perspective: 2000px; perspective-origin: 50% 48%; transform-style: preserve-3d; }
.hd-leaf {
  position: absolute; top: -2%; bottom: -2%; width: 51%; overflow: hidden;
  backface-visibility: hidden; will-change: transform;
  /* solid hardwood, lit from the top-left */
  background:
    linear-gradient(108deg, rgba(255,236,200,.12) 0%, rgba(0,0,0,0) 34%, rgba(0,0,0,.26) 100%),
    linear-gradient(180deg, #6f4628 0%, #5b3720 42%, #482a18 100%);
}
/* procedural wood grain (SVG turbulence — no external asset) */
.hd-grain { position: absolute; inset: 0; opacity: .5; mix-blend-mode: overlay; pointer-events: none;
  background-size: 240px 480px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='480'%3E%3Cfilter id='wg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.042 0.006' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23wg)'/%3E%3C/svg%3E"); }
/* two recessed, beveled panels per leaf (raised molding + sunken field) */
.hd-panel { position: absolute; left: 15%; right: 15%; border-radius: 3px;
  background: linear-gradient(165deg, #3f2614, #4f3018 60%, #3a2210);
  box-shadow:
    inset 0 4px 10px rgba(0,0,0,.62), inset 0 -3px 8px rgba(255,214,160,.10),
    0 0 0 2px #34200f, 0 0 0 5px #5e3a22,
    3px 4px 9px rgba(0,0,0,.45), -2px -2px 5px rgba(255,226,180,.10); }
.hd-p1 { top: 7%; height: 41%; }
.hd-p2 { top: 53%; height: 39%; }
.hd-left { left: 0; transform-origin: left center; box-shadow: inset -16px 0 26px rgba(0,0,0,.5); }
.hd-right { right: 0; transform-origin: right center; box-shadow: inset 16px 0 26px rgba(0,0,0,.5); }
/* brass lever handle near the inner edge */
.hd-handle { position: absolute; top: 50%; transform: translateY(-50%); width: 13px; height: 58px; border-radius: 7px; z-index: 4;
  background: linear-gradient(90deg, #f0cf83 0%, #c79a45 45%, #8a6326 100%);
  box-shadow: inset 0 0 0 1px rgba(255,242,205,.55), 2px 3px 9px rgba(0,0,0,.5); }
.hd-handle::before { content: ""; position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 8px; border-radius: 5px;
  background: linear-gradient(180deg, #f6da92, #a9772f); box-shadow: 0 4px 8px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,248,220,.6); }
.hd-left .hd-handle { right: 7%; } .hd-left .hd-handle::before { right: 12px; }
.hd-right .hd-handle { left: 7%; } .hd-right .hd-handle::before { left: 12px; }
/* warm interior light that spills along the inner edge as the leaf opens */
.hd-light { position: absolute; top: 0; bottom: 0; width: 38%; opacity: 0; z-index: 3; }
.hd-left .hd-light { right: 0; background: linear-gradient(90deg, transparent, rgba(255,228,172,.66)); }
.hd-right .hd-light { left: 0; background: linear-gradient(270deg, transparent, rgba(255,228,172,.66)); }
@media (prefers-reduced-motion: reduce) { .hero-doors { display: none; } }

/* fine film grain — cheap cinematic texture (desktop; iOS-safe) */
.hero-grain {
  z-index: 6; pointer-events: none; opacity: .5; 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='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}
@media (hover: none), (pointer: coarse) { .hero-grain { opacity: .32; } }

/* intro headline — luxurious editorial Fraunces */
.headline { z-index: 7; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 17vh; text-align: center; will-change: transform, opacity; }
.headline h1 {
  font-size: clamp(44px, 8.6vw, 112px);
  line-height: 1.01; margin: 0 0 22px; letter-spacing: -.028em;
  font-weight: 480; font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
  color: #fff; text-shadow: 0 2px 44px rgba(28,12,20,.55);
}
.headline h1 em { font-style: italic; font-weight: 480; color: var(--honey); }
.headline p { font-size: clamp(15px, 2.2vw, 21px); color: #ffe9d6; margin: 0 0 30px; letter-spacing: .01em; text-shadow: 0 1px 18px rgba(28,12,20,.5); font-family: var(--font-sans); }

/* TRUE knockout wordmark — responsive HTML text; multiply dims the scene, white letters reveal it through */
.knockout { z-index: 4; display: grid; place-items: center; pointer-events: none; will-change: opacity, transform; }
.ko-panel {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4vh;
  background: radial-gradient(80% 80% at 50% 47%, rgba(34,18,13,.5), rgba(16,9,6,.74));
  color: #fff; mix-blend-mode: multiply;
  text-align: center; line-height: .86; padding: 0 5vw;
}
.ko-top { font-family: var(--font-display); font-weight: 800; font-variation-settings: "opsz" 144; font-size: clamp(52px, 17.5vw, 240px); letter-spacing: .012em; white-space: nowrap; }
.ko-bot { font-family: var(--font-display); font-weight: 500; font-style: italic; font-size: clamp(19px, 5vw, 72px); letter-spacing: .24em; white-space: nowrap; }
.js .knockout { opacity: 0; }

/* scroll cue */
.scroll-cue { position: absolute; z-index: 8; left: 50%; bottom: 30px; transform: translateX(-50%); color: #fff; opacity: .85; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; font-weight: 600; text-shadow: 0 1px 10px rgba(0,0,0,.45); }
.scroll-cue svg { animation: cue-bob 1.6s ease-in-out infinite; }
@keyframes cue-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

@media (prefers-reduced-motion: reduce) {
  .js .cine-stage { height: 100vh; }
  .js .knockout { opacity: 1; }
  .headline { opacity: 0; }
  .house-full { opacity: .92; transform: scale(1.1); }
}

/* =========================== section seams =========================== */
.seam { position: relative; }
.seam-down::after, .seam-up::before { content: ""; position: absolute; left: 0; right: 0; height: 140px; pointer-events: none; z-index: 2; }
.seam-down::after { bottom: -1px; }
.seam-up::before { top: -1px; }

/* =========================== intro band =========================== */
.intro-band { background: var(--bg-intro); color: var(--ink); padding: clamp(80px,11vw,140px) 0; text-align: center; }
.intro-band::after { background: linear-gradient(to bottom, transparent, var(--bg-stats)); }
.intro-inner h2 { font-size: var(--step-h2); margin: 0 0 18px; color: var(--espresso); }
.intro-inner h2 em { font-style: italic; color: var(--gold-2); }
.intro-inner .lede { margin: 0 auto 30px; }
.intro-cta { justify-content: center; display: flex; gap: 14px; flex-wrap: wrap; }

/* =========================== stats / credibility band =========================== */
.stats-band { background: var(--bg-stats); color: var(--cream); padding: clamp(70px,9vw,110px) 0; position: relative; overflow: hidden; }
.stats-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 80% at 80% 10%, rgba(217,119,74,.22), transparent 60%), radial-gradient(50% 70% at 10% 90%, rgba(200,150,74,.16), transparent 60%); }
.stats-grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; text-align: center; }
.stat { padding: 10px; }
.stat-num { font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 6vw, 76px); line-height: 1; color: #fff; letter-spacing: -.02em; }
.stat-num .suf { color: var(--gold-soft); }
.stat-label { margin-top: 12px; font-size: 14px; letter-spacing: .04em; color: #d6c3ab; }
.stat + .stat { position: relative; }
.stats-grid .stat:not(:first-child)::before { content: ""; position: absolute; left: -15px; top: 18%; height: 64%; width: 1px; background: var(--line-dark); }

/* =========================== chevron section =========================== */
.chev-section { background: var(--bg-chev); color: #fff; padding: clamp(80px,10vw,116px) 0; overflow: hidden; }
.chev-head { text-align: center; font-size: var(--step-h2); font-weight: 600; margin: 0 0 14px; position: relative; }
.chev-head em { font-style: italic; color: var(--gold-soft); }
.stick-perch { position: relative; }
/* a little stick figure: falls on the "e", sits & waves hi, then leaps right and is gone */
.stickman { position: absolute; left: 0; top: 0; color: var(--honey); z-index: 6; pointer-events: none;
  opacity: 0; transform: translate(-50%, -60%) scaleY(1); transform-origin: 50% 92%;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.4)); }
.stickman.landed { animation: sm-fall .8s cubic-bezier(.3,1.2,.5,1) forwards; }
@keyframes sm-fall {
  0% { opacity: 0; transform: translate(-50%, -340%) scaleY(1.06); }
  55% { opacity: 1; }
  80% { transform: translate(-50%, -50%) scaleY(.84); }   /* land squash */
  100% { opacity: 1; transform: translate(-50%, -60%) scaleY(1); }
}
.stickman .sm-arm, .stickman .sm-arm2 { transform-box: view-box; transform-origin: 16px 16px; }
.stickman.waving .sm-arm { animation: sm-wave .24s ease-in-out infinite; }
@keyframes sm-wave { 0%,100% { transform: rotate(-12deg); } 50% { transform: rotate(24deg); } }
/* realistic jump: crouch to load → launch + stretch → gravity arc down-right, arms thrown up */
.stickman.jumping { animation: sm-jump 1s forwards; }
@keyframes sm-jump {
  0%   { opacity: 1; transform: translate(-50%, -60%) scaleY(1);  animation-timing-function: ease-in; }
  18%  { transform: translate(-50%, -46%) scaleY(.72);            animation-timing-function: ease-in; }
  27%  { transform: translate(-50%, -48%) scaleY(.8);             animation-timing-function: cubic-bezier(.15,.75,.3,1); }
  48%  { transform: translate(calc(-50% + 42px), -172%) scaleY(1.16); animation-timing-function: ease-out; }
  64%  { transform: translate(calc(-50% + 108px), -214%) scaleY(1.02); animation-timing-function: ease-in; }
  100% { opacity: 0; transform: translate(calc(-50% + 252px), 46%) scaleY(.9); }
}
.stickman.jumping .sm-arm { animation: sm-armR 1s forwards; }
.stickman.jumping .sm-arm2 { animation: sm-armL 1s forwards; }
@keyframes sm-armR { 0% { transform: rotate(0); } 18% { transform: rotate(12deg); } 48% { transform: rotate(-50deg); } 100% { transform: rotate(-56deg); } }
@keyframes sm-armL { 0% { transform: rotate(0); } 18% { transform: rotate(10deg); } 48% { transform: rotate(120deg); } 100% { transform: rotate(128deg); } }
@media (prefers-reduced-motion: reduce) { .stickman { display: none; } }
.chev-lead { text-align: center; color: #e8d8c8; font-size: var(--step-body); margin: 0 auto 30px; max-width: 46ch; }
.chev-lead em { font-style: italic; color: var(--gold-soft); }

/* ---- Fresno "by district": a country of neighborhoods, each a photo-filled state ---- */
.fmap-fig { margin: 8px 0 30px; }
.fmap-stage { position: relative; width: 100%; max-width: 540px; margin: 0 auto; }
.fmap-svg { width: 100%; height: auto; display: block; overflow: visible; }
/* districts read as a real line-drawn map: subdued photo texture under crisp gold borders that draw on */
.fmap-svg .fmap-cell { opacity: 0; transition: opacity .8s var(--ease-out-soft); }
.fmap-svg .fmap-cell.in { opacity: 1; }
.fmap-svg .fmap-cell image { filter: saturate(.9) brightness(.46); }
.fmap-svg .fmap-veil { fill: rgba(16,9,6,.5); }
.fmap-svg .fmap-border { fill: none; stroke: #efce8e; stroke-width: 2.1; stroke-linejoin: round; stroke-linecap: round;
  vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px rgba(217,119,74,.5));
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.8s var(--ease-out-soft); }
.fmap-svg .fmap-border.in { stroke-dashoffset: 0; }
.fmap-svg .fmap-label { fill: #fff7ea; font-family: var(--font-sans); font-weight: 700; font-size: 25px; letter-spacing: .01em;
  text-anchor: middle; paint-order: stroke; stroke: rgba(14,8,5,.7); stroke-width: 3.4px; opacity: 0; transition: opacity .6s; }
.fmap-svg .fmap-label.in { opacity: .97; }
.fmap-cap { text-align: center; color: #cdbba9; font-size: 14.5px; letter-spacing: .02em; margin-top: 16px; }
.fmap-cap em { color: var(--gold-soft); font-style: italic; }
.chev-row { display: flex; justify-content: center; }
.chev {
  width: 240px; height: 312px; margin-left: -32px; flex: 0 0 auto;
  clip-path: polygon(0 0, 72% 0, 100% 50%, 72% 100%, 0 100%, 28% 50%);
  background-size: cover; background-position: center;
  opacity: 0; transform: translateX(-30px); transition: opacity .7s var(--ease-out-soft), transform .7s var(--ease-out-soft);
}
.chev:first-child { margin-left: 0; }
.chev-row.in .chev { opacity: 1; transform: none; }
.chev-row.in .chev-2 { transition-delay: .12s; }
.chev-row.in .chev-3 { transition-delay: .24s; }
.chev-row.in .chev-4 { transition-delay: .36s; }
.chev-1 { background-image: url('/img/keys.jpg'), linear-gradient(135deg, #6e4a30, #a9764a); background-position: center; }
.chev-2 { background-image: url('/img/interior-living.jpg'), linear-gradient(135deg, #5a3f3a, #997058); }
.chev-3 { background-image: url('/img/lifestyle.jpg'), linear-gradient(135deg, #4a3a2a, #8a6a4a); }
.chev-4 { background-image: url('/img/interior-kitchen.jpg'), linear-gradient(135deg, #5a4330, #a07b52); }
.chev-sub { text-align: center; max-width: 62ch; margin: 48px auto 0; color: #d9cab4; font-size: var(--step-body); }
.chev-sub em { color: #fff; font-style: italic; }

/* =========================== city scroll-expand scene =========================== */
.video-band { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--bg-video); margin-top: -1px; }
/* the visual scales from a contained card → full-bleed (GSAP, desktop) */
.video-scale { position: absolute; inset: 0; z-index: 0; overflow: hidden; transform-origin: center center; will-change: transform; box-shadow: 0 50px 120px rgba(0,0,0,.5); }
.video-kb { position: absolute; inset: 0; z-index: 0; background: url('/img/city.jpg') center/cover no-repeat; animation: kenburns 28s ease-in-out infinite alternate; }
.video-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.video-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28,17,11,.42), rgba(28,17,11,.8)); z-index: 2; }
.video-content { position: relative; z-index: 3; color: #fff; text-align: center; padding: 0 24px; }
.video-content h2 { font-size: var(--step-h1); margin: 0 0 16px; color: #fff; text-shadow: 0 2px 30px rgba(0,0,0,.45); }
.video-content .lede { color: #f4e7d8; margin: 0 auto 28px; text-shadow: 0 1px 16px rgba(0,0,0,.4); }
@keyframes kenburns { from { transform: scale(1.05); } to { transform: scale(1.18) translateY(-2%); } }

/* =========================== reviews — 3D spinning testimonial carousel =========================== */
.reviews { position: relative; overflow: hidden; color: var(--cream-2);
  background: radial-gradient(120% 80% at 50% 0%, #4a2a2e 0%, var(--dusk) 46%, #1c1018 100%);
  padding: clamp(44px,5vw,72px) 0 clamp(64px,8vw,96px); }
.reviews::before { content: ""; position: absolute; left: 50%; top: 38%; width: 70vw; height: 70vw; transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(217,119,74,.16), transparent 62%); pointer-events: none; }
.reviews-head { position: relative; z-index: 2; text-align: center; margin-bottom: clamp(38px,5vw,60px); }
.reviews-head .section-title { max-width: 20ch; margin-left: auto; margin-right: auto; font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.6rem); }
.reviews-stat { display: inline-flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 12px; margin: 14px 0 0; color: #e8d2bb; font-size: clamp(14px,1.4vw,16px); letter-spacing: .02em; }
.reviews-stat b { font-family: var(--font-display); font-weight: 700; color: var(--gold-soft); font-size: 1.45em; }
.reviews-stat .dot { color: rgba(231,201,138,.5); }
.reviews-stat .rs-star { color: var(--gold); font-style: normal; margin-left: 2px; }

/* the 3D stage */
.rev-stage { position: relative; height: clamp(430px, 52vw, 500px); margin-top: clamp(20px,3vw,48px); perspective: 4200px; perspective-origin: 50% 50%; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.js .rev-ring { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; will-change: transform; }
/* N: each review IS a unique line-art house (skyline aesthetic), not a photo card */
.js .rev-card {
  position: absolute; left: 50%; top: 50%; width: clamp(244px, 72vw, 290px); height: 366px;
  box-sizing: border-box; background: transparent; color: var(--cream-2);
  backface-visibility: hidden; cursor: grab; transition: opacity .4s ease, filter .4s ease;
}
.rev-house { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; overflow: visible; }
.rev-house .rh-fill { fill: rgba(26,15,10,.62); }
.rev-house .rh-out { fill: none; stroke: #d9b878; stroke-width: 2.4; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.rev-house .rh-door { fill: rgba(8,5,3,.55); stroke: #caa55f; stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.js .rev-card.is-front .rev-house .rh-fill { fill: rgba(30,17,11,.8); }
.js .rev-card.is-front .rev-house .rh-out { stroke: #f3d9a0; filter: drop-shadow(0 0 7px rgba(217,119,74,.55)); }
.rev-body { position: relative; z-index: 1; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; padding: 142px 38px 84px; }
.js .rev-card.is-back { opacity: .26; filter: brightness(.72) saturate(.9); }
.rev-stars { color: var(--gold); letter-spacing: 2.5px; font-size: 12px; margin-bottom: 7px; }
.rev-card blockquote { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(.76rem, .74rem + .18vw, .87rem); line-height: 1.3; color: #fff7ea; margin: 0 0 9px; letter-spacing: -.003em; }
.rev-avatar { width: 36px; height: 36px; font-size: 13px; }
.rev-who strong { font-size: 13px; } .rev-who span { font-size: 11px; }
.rev-foot { display: flex; align-items: center; gap: 11px; margin-top: auto; }
.rev-avatar { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--a, var(--gold)); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 15px; box-shadow: 0 4px 12px rgba(0,0,0,.35); }
.rev-who { display: flex; flex-direction: column; line-height: 1.3; }
.rev-who strong { color: #fff; font-size: 14.5px; }
.rev-who span { color: #d4bfa8; font-size: 12px; }
.rev-who b { color: var(--gold-soft); }
/* folk stand at the door & wave on the front card; duck inside when it rotates away */
.rev-folk { position: absolute; left: 0; right: 0; bottom: 16px; z-index: 4;
  display: flex; align-items: flex-end; justify-content: center; gap: 3px;
  color: #fff7ea; filter: drop-shadow(0 2px 4px rgba(0,0,0,.85));
  transform: translateY(160%); opacity: 0; transition: transform .55s cubic-bezier(.34,1.45,.6,1), opacity .4s; }
.js .rev-card.is-front .rev-folk { transform: translateY(0); opacity: 1; }
.rev-folk .folk { display: block; }
.rev-folk .sm-arm { transform-box: view-box; transform-origin: 12px 15px; }
.rev-folk .folk-kid .sm-arm { transform-origin: 9px 12px; }
.js .rev-card.is-front .rev-folk .sm-arm { animation: sm-wave .26s ease-in-out infinite; }
.js .rev-card.is-front .rev-folk .folk:nth-child(2) .sm-arm { animation-delay: .09s; }
.js .rev-card.is-front .rev-folk .folk:nth-child(3) .sm-arm { animation-delay: .04s; }
.js .rev-card.is-front .rev-folk .folk:nth-child(4) .sm-arm { animation-delay: .14s; }

.rev-controls { position: relative; display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: clamp(22px,3vw,34px); }
.rev-nav { width: 50px; height: 50px; border-radius: 50%; border: 1px solid rgba(231,201,138,.45); background: rgba(255,255,255,.06);
  color: var(--gold-soft); font-size: 26px; line-height: 1; cursor: pointer; display: grid; place-items: center;
  transition: background .3s, transform .3s, border-color .3s; -webkit-tap-highlight-color: transparent; }
.rev-nav:hover { background: rgba(231,201,138,.16); border-color: var(--gold-soft); transform: scale(1.06); }
.rev-nav:active { transform: scale(.94); }
.rev-hint { font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(231,201,138,.6); margin: 0; }

/* no-JS / reduced-motion fallback: a clean scroll-row of cards */
html:not(.js) .rev-stage { height: auto; perspective: none; }
html:not(.js) .rev-ring { display: flex; gap: 20px; overflow-x: auto; padding: 6px 24px; }
html:not(.js) .rev-card { position: static; flex: 0 0 300px; margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .rev-stage { height: auto; perspective: none; }
  .js .rev-ring { position: static; transform: none !important; display: flex; gap: 20px; overflow-x: auto; padding: 6px 20px; width: auto; height: auto; }
  .js .rev-card { position: static; margin: 0; flex: 0 0 300px; opacity: 1 !important; filter: none !important; }
}

/* =========================== Buy / Sell / Invest rows =========================== */
.rows-section { background: var(--bg-rows); color: #fff; padding: clamp(72px,9vw,110px) 0 0; }
.rows-head { padding-bottom: 30px; }
.big-row { display: block; position: relative; border-top: 1px solid var(--line-dark); color: #fff; overflow: hidden; }
.big-row:last-of-type { border-bottom: 1px solid var(--line-dark); }
.big-row::before { content: ""; position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transform: scale(1.08); transition: opacity .6s var(--ease-out-soft), transform .8s var(--ease-out-expo); z-index: 0; }
.big-row::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(28,18,10,.74), rgba(28,18,10,.46)); opacity: 0; transition: opacity .6s var(--ease-out-soft); z-index: 1; }
.big-row:hover::before { opacity: 1; transform: scale(1); }
.big-row:hover::after { opacity: 1; }
.row-buy::before { background-image: url('/img/interior-living.jpg'), linear-gradient(90deg, #4a3320, #7a583a); }
.row-sell::before { background-image: url('/img/hero-home.jpg'), linear-gradient(90deg, #43342a, #786052); }
.row-invest::before { background-image: url('/img/skyline.jpg'), linear-gradient(90deg, #3a3220, #6a6040); }
.big-row-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 46px minmax(180px, 300px) 1fr auto; align-items: center; gap: 30px; padding: 46px 28px; }
.big-row-num { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-family: var(--font-display); }
.big-row-text { color: #d8cdbd; font-size: 15px; max-width: 38ch; margin: 0; transition: color var(--dur-ui); }
.big-row:hover .big-row-text { color: #fff; }
.big-row-word { font-family: var(--font-display); font-size: clamp(54px, 11vw, 148px); font-weight: 600; margin: 0; line-height: .9; letter-spacing: -.03em; }
.big-row-arrow { font-size: 46px; line-height: 1; opacity: 0; transform: translateX(-18px); transition: opacity .5s var(--ease-out-soft), transform .5s var(--ease-out-expo); justify-self: end; }
.big-row:hover .big-row-arrow { opacity: 1; transform: none; }

/* =========================== process timeline =========================== */
.process { position: relative; overflow: hidden; color: var(--cream-2); padding: clamp(80px,10vw,120px) 0;
  background: linear-gradient(180deg, var(--dusk) 0%, var(--plum) 56%, #3a2236 100%); }
.process::before { content: ""; position: absolute; left: 50%; top: -12%; width: 84vw; height: 62vh; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(217,119,74,.16), transparent 62%); pointer-events: none; }
.process > .container { position: relative; }
.timeline { position: relative; margin-top: 48px; }
/* the connector: a faint track, a gold fill that grows, a traveling guide-light */
.tl-track { position: absolute; left: 28px; top: 26px; bottom: 30px; width: 2px; transform: translateX(-50%); background: rgba(255,255,255,.12); border-radius: 2px; }
.tl-fill { position: absolute; left: 0; top: 0; width: 100%; height: 0; border-radius: 2px;
  background: linear-gradient(var(--honey), var(--sunset)); box-shadow: 0 0 10px rgba(231,201,138,.6); }
.tl-guide { position: absolute; left: 50%; top: 0; width: 13px; height: 13px; border-radius: 50%; background: #fff7e6; opacity: 0;
  transform: translate(-50%, 0); box-shadow: 0 0 10px rgba(231,201,138,1), 0 0 22px rgba(217,119,74,.7); }
.tl-end { position: absolute; left: 50%; bottom: -30px; transform: translate(-50%, 0); width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; color: rgba(255,255,255,.4); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.18);
  transition: color .5s, background .5s, border-color .5s, box-shadow .5s; }
.tl-end.lit { color: var(--espresso); background: var(--gold-soft); border-color: var(--honey); box-shadow: 0 0 18px rgba(231,201,138,.85); }
.tl-step { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 26px; padding: 18px 0 40px; }
.js .tl-step { opacity: .42; transform: translateY(12px); transition: opacity .6s var(--ease-out-soft), transform .6s var(--ease-out-soft); }
.js .tl-step.active { opacity: 1; transform: translateY(0); }
.tl-dot { position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.22); color: var(--gold-soft);
  font-family: var(--font-display); font-weight: 700; font-size: 20px;
  transition: background .5s, color .5s, border-color .5s, box-shadow .5s, transform .5s; }
.tl-dot.lit { background: var(--gold-soft); color: var(--espresso); border-color: var(--honey); transform: scale(1.08);
  box-shadow: 0 0 0 6px rgba(231,201,138,.12), 0 0 24px rgba(231,201,138,.55); }
.tl-body h3 { color: #fff; font-size: var(--step-h3); margin: 6px 0 8px; }
.tl-body p { color: #e3d3c4; margin: 0; max-width: 56ch; }
@media (prefers-reduced-motion: reduce) { .js .tl-step { opacity: 1 !important; transform: none !important; } }

/* =========================== testimonial =========================== */
.testimonial { background: var(--cream); padding: clamp(80px,10vw,124px) 0; text-align: center; }
.quote-mark { font-family: var(--font-display); font-size: 90px; line-height: .6; color: var(--gold); opacity: .5; }
.testimonial blockquote { font-family: var(--font-display); font-weight: 400; font-style: italic; font-size: clamp(1.4rem, 1rem + 1.8vw, 2.4rem); line-height: 1.35; color: var(--espresso); max-width: 22ch; margin: 14px auto 28px; letter-spacing: -.01em; }
.testimonial figcaption { color: var(--muted); font-size: 14.5px; letter-spacing: .02em; }
.testimonial figcaption strong { color: var(--espresso); font-weight: 700; }
.stars { color: var(--gold); letter-spacing: 4px; margin-bottom: 8px; font-size: 18px; }

/* =========================== big CTA =========================== */
.cta-band { position: relative; padding: clamp(90px,12vw,150px) 0; text-align: center; color: #fff; overflow: hidden; background: linear-gradient(120deg, var(--wine), var(--sunset) 55%, var(--amber)); }
.cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 90% at 50% 0%, rgba(255,225,180,.4), transparent 60%); pointer-events: none; }
.cta-band h2 { position: relative; font-size: var(--step-h1); color: #fff; margin: 0 0 16px; }
.cta-band p { position: relative; color: #fff3e6; max-width: 50ch; margin: 0 auto 32px; font-size: var(--step-body); }
.cta-actions { position: relative; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* =========================== about / contact bg overrides =========================== */
.about-section { background: var(--bg-about); }
.contact-section { background: var(--bg-contact); }

/* ====================== D: the contact form is a KEY; submit opens a door ====================== */
.key-form { position: relative; margin-top: 64px; background: transparent; border: 0; box-shadow: none; padding: 0; overflow: visible; }
.key-bow {
  position: absolute; top: -64px; left: 50%; transform: translateX(-50%);
  width: 108px; height: 108px; border-radius: 50%; background: #fff; border: 3px solid var(--gold);
  box-shadow: var(--shadow-lift); display: grid; place-items: center; z-index: 3;
  transition: transform .6s cubic-bezier(.7,0,.2,1);
}
.key-bow::after { content: ""; position: absolute; bottom: -11px; left: 50%; transform: translateX(-50%);
  width: 30px; height: 24px; background: #fff; border-left: 3px solid var(--gold); border-right: 3px solid var(--gold); }
.key-bow-ring { width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--line); }
.key-hole { position: absolute; width: 15px; height: 24px; background: var(--gold-2);
  clip-path: polygon(50% 0, 66% 36%, 72% 100%, 28% 100%, 34% 36%); opacity: .9; }
.key-drop { position: absolute; left: 50%; top: -140px; transform: translateX(-50%) rotate(-10deg); opacity: 0; z-index: 4;
  transition: top .95s cubic-bezier(.34,1.56,.64,1), opacity .5s ease, transform .95s cubic-bezier(.34,1.56,.64,1); }
.key-form.dropped .key-drop { top: 12px; opacity: 1; transform: translateX(-50%) rotate(0deg); }
.key-blade { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(26px,3.5vw,40px); padding-top: 60px; box-shadow: var(--shadow-lift); z-index: 2;
  transition: transform .6s cubic-bezier(.7,0,.2,1); }
.key-teeth { position: absolute; right: -13px; bottom: 48px; width: 13px; height: 70px; background: var(--gold);
  clip-path: polygon(0 0, 100% 0, 100% 15%, 52% 21%, 52% 37%, 100% 43%, 100% 59%, 52% 65%, 52% 81%, 100% 87%, 100% 100%, 0 100%);
  border-radius: 0 3px 3px 0; }
/* submit: the key turns in the lock, then the door opens */
.key-form.turning .key-bow { transform: translateX(-50%) rotate(96deg); }
.key-form.turning .key-blade { transform: rotate(2.2deg) scale(.992); }
@media (prefers-reduced-motion: reduce) { .key-drop { display: none; } .key-form.turning .key-bow, .key-form.turning .key-blade { transition: none; } }

/* the success door overlay */
.success-door { position: fixed; inset: 0; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity .25s ease; perspective: 1700px; }
.success-door.open { opacity: 1; pointer-events: auto; }
.sd-room { position: absolute; inset: 0; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 30%, #6a3f2c, #2a160e 70%, #1a0d08 100%); display: grid; place-items: center; }
.sd-message { position: relative; z-index: 1; text-align: center; color: var(--cream-2); max-width: 30ch; padding: 24px;
  opacity: 0; transform: translateY(14px); transition: opacity .7s ease .55s, transform .7s ease .55s; }
.success-door.open .sd-message { opacity: 1; transform: none; }
.sd-keys { color: var(--gold-soft); display: inline-flex; filter: drop-shadow(0 4px 14px rgba(231,201,138,.5)); }
.sd-message h3 { font-family: var(--font-display); font-size: clamp(2rem, 1.4rem + 3vw, 3.4rem); color: #fff; margin: 8px 0 12px; }
.sd-message p { color: #f0ddc8; font-size: var(--step-body); line-height: 1.6; margin: 0 auto; }
.sd-message a { color: var(--gold-soft); }
.sd-message::after { content: "tap anywhere to continue"; display: block; margin-top: 26px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: rgba(240,221,200,.5); }
.sd-door { position: absolute; inset: 0; z-index: 2; transform-origin: right center; transform: rotateY(0deg);
  transition: transform 1.25s cubic-bezier(.66,0,.2,1); transform-style: preserve-3d; backface-visibility: hidden;
  background:
    linear-gradient(90deg, rgba(0,0,0,.32), rgba(0,0,0,0) 14%),
    repeating-linear-gradient(90deg, #5a3a24 0 6px, #51331f 6px 12px),
    linear-gradient(180deg, #6b4429, #43291a);
  box-shadow: inset 0 0 120px rgba(0,0,0,.5); }
.sd-door::before { content: ""; position: absolute; inset: 9% 12%; border: 3px solid rgba(20,10,6,.45); border-radius: 4px;
  box-shadow: inset 0 0 0 10px rgba(255,255,255,.03); }
.sd-knob { position: absolute; left: 30px; top: 50%; width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe9b8, var(--gold) 70%); box-shadow: 0 2px 8px rgba(0,0,0,.5); }
.success-door.open .sd-door { transform: rotateY(112deg); }
@media (prefers-reduced-motion: reduce) { .success-door.open .sd-door { transition: none; transform: rotateY(112deg); } }

/* =========================== responsive =========================== */
@media (max-width: 1024px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 20px; }
  .stats-grid .stat:not(:first-child)::before { display: none; }
}
@media (max-width: 880px) {
  .js .cine-stage { height: 280vh; }
  .ko-bot { letter-spacing: .2em; }
  .video-scale { box-shadow: none; }
  .areas-track { padding: 6px 18px; }
  .chev { width: 152px; height: 198px; margin-left: -20px; }
  .areas-head { align-items: flex-start; }
  .big-row-inner { grid-template-columns: 1fr; grid-template-areas: "num" "word" "text"; gap: 10px; padding: 30px 20px; }
  .big-row-num { grid-area: num; }
  .big-row-word { grid-area: word; font-size: 19vw; line-height: .92; }
  .big-row-text { grid-area: text; max-width: 46ch; }
  .big-row-arrow { display: none; }
  .big-row::before, .big-row::after { opacity: .5; transform: none; }
  .big-row::before { opacity: .42; }
}
@media (max-width: 560px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .cta-actions { flex-direction: column; align-items: stretch; }
}

/* ============================================================================
   EXPERIENCE LAYER — sitewide grain, side-dot journey nav
   ========================================================================== */

/* sitewide film grain — one filmic atmosphere across the whole journey */
.film-grain {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  animation: grain-shift .6s steps(3) infinite;
}
@keyframes grain-shift {
  0% { background-position: 0 0; } 33% { background-position: -90px 40px; }
  66% { background-position: 70px -50px; } 100% { background-position: 0 0; }
}
@media (prefers-reduced-motion: reduce) { .film-grain { animation: none; opacity: .035; } }
/* mobile: kill the per-frame grain animation + overlay blend (expensive full-screen recomposite on scroll) */
@media (hover: none), (pointer: coarse) { .film-grain { opacity: .03; animation: none; mix-blend-mode: normal; } }

/* side-dot journey navigation (the "you are here") */
.dot-nav {
  position: fixed; right: 22px; top: 50%; transform: translateY(-50%);
  z-index: 58; display: flex; flex-direction: column; gap: 15px;
}
.dot-nav a { position: relative; width: 26px; height: 16px; display: grid; place-items: center; }
.dot-nav a::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: rgba(160,138,108,.55); box-shadow: 0 0 0 1px rgba(255,255,255,.18);
  transition: transform .35s var(--ease-out-expo), background .35s, width .35s, height .35s;
}
.dot-nav a:hover::before { background: rgba(200,150,74,.9); transform: scale(1.3); }
.dot-nav a.is-active::before { background: var(--gold); width: 9px; height: 9px; transform: scale(1.55); box-shadow: 0 0 0 4px rgba(200,150,74,.22); }
.dot-nav a span {
  position: absolute; right: 26px; top: 50%; transform: translateY(-50%) translateX(8px);
  opacity: 0; pointer-events: none; white-space: nowrap;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600;
  color: #fff; background: rgba(36,23,18,.82); backdrop-filter: blur(6px);
  padding: 5px 11px; border-radius: 20px; transition: opacity .28s, transform .28s;
}
.dot-nav a:hover span { opacity: 1; transform: translateY(-50%) translateX(0); }
@media (max-width: 880px) { .dot-nav { display: none; } }

/* ---- Golden Hour: living light ---- */
.atmosphere {
  position: fixed; inset: 0; z-index: 88; pointer-events: none; mix-blend-mode: soft-light; opacity: .5;
  background: radial-gradient(130% 100% at 50% -8%, var(--atmo, rgba(255,206,135,.55)), transparent 62%);
  transition: background 1.4s linear;
}
.sun-glow {
  position: fixed; top: 0; left: 0; width: 62vmax; height: 62vmax; border-radius: 50%;
  z-index: 89; pointer-events: none; transform: translate(-50%, -50%); will-change: transform;
  background: radial-gradient(circle, rgba(255,200,124,.26), rgba(255,172,92,.10) 38%, rgba(255,172,92,0) 64%);
  mix-blend-mode: screen; opacity: 0; transition: opacity 1s ease;
}
@media (hover: none), (pointer: coarse) {
  .sun-glow { opacity: .5; width: 96vmax; height: 96vmax; animation: sun-drift 20s ease-in-out infinite alternate; }
}
@keyframes sun-drift { 0% { transform: translate(14vw, 24vh); } 100% { transform: translate(86vw, 62vh); } }
@media (prefers-reduced-motion: reduce) { .sun-glow { animation: none; } }

/* ---- "A clear path home": self-drawing luminous line + traveling guide ---- */
/* ---- Fresno skyline seam: the path line sweeps right & draws the city in a twilight strip ---- */
.skyline-seam {
  position: relative; width: 100%; height: clamp(150px, 18vw, 240px);
  margin: -1px 0; z-index: 4; overflow: hidden;
  background: linear-gradient(180deg, var(--espresso) 0%, #2c1a14 26%, #7a4a39 62%, var(--bg-intro) 100%);
}
.skyline-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.skyline-svg .sk-line {
  fill: none; stroke: url(#skGrad); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round;
  vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 8px rgba(231,201,138,.6));
}
.skyline-svg .sk-guide { fill: #fff7e6; filter: drop-shadow(0 0 9px rgba(231,201,138,1)) drop-shadow(0 0 18px rgba(217,119,74,.7)); }
.skyline-svg .sk-guide-ring { fill: none; stroke: rgba(231,201,138,.6); stroke-width: 1.4; }
@media (prefers-reduced-motion: reduce) { .skyline-svg .sk-guide, .skyline-svg .sk-guide-ring { display: none; } }

.path-home { position: absolute; top: 0; left: 0; width: 100%; z-index: 3; pointer-events: none; overflow: visible; }
.path-home .ph-line {
  fill: none; stroke: url(#phGrad); stroke-width: 2.2; stroke-linecap: round;
  filter: drop-shadow(0 0 7px rgba(200,150,74,.55));
}
.path-home .ph-guide { fill: #fff3da; filter: drop-shadow(0 0 9px rgba(231,201,138,.95)) drop-shadow(0 0 18px rgba(217,119,74,.6)); }
.path-home .ph-guide-ring { fill: none; stroke: rgba(231,201,138,.6); stroke-width: 1; }
/* waypoint "stops" that light up as you pass each place on the route */
.path-home .ph-stop { fill: rgba(231,201,138,.26); stroke: rgba(231,201,138,.42); stroke-width: 1; transition: fill .45s ease; }
.path-home .ph-stop.passed { fill: var(--gold-soft); filter: drop-shadow(0 0 5px rgba(231,201,138,.85)); }
/* the destination: home */
.path-home .ph-home-ring { fill: rgba(22,12,8,.5); stroke: rgba(231,201,138,.5); stroke-width: 1.2; transition: stroke .5s, fill .5s; }
.path-home .ph-home-icon { fill: none; stroke: var(--gold-soft); stroke-width: 1.3; stroke-linejoin: round; transition: stroke .5s; }
.path-home #phHome.arrived .ph-home-ring { fill: rgba(200,150,74,.4); stroke: #fff3da; }
.path-home #phHome.arrived .ph-home-icon { stroke: #fff; }
@media (prefers-reduced-motion: reduce) { .path-home { display: none; } }
/* mobile: the path line spans the whole document — a drop-shadow filter on it re-rasterizes a doc-tall region every
   scroll frame (the "lag"). Drop the line glow and lighten the guide so the line tracks the scroll like silk. */
@media (hover: none), (pointer: coarse) {
  .path-home .ph-line { filter: none; }
  .path-home .ph-guide { filter: drop-shadow(0 0 6px rgba(231,201,138,.85)); }
  .skyline-svg .sk-line { filter: none; }
  .skyline-svg .sk-guide { filter: drop-shadow(0 0 6px rgba(231,201,138,.85)); }
}