/* ===================== Nine Mansion v8 · watercolour hero, day into night, self-drawing sketches ===================== */
/* 1 · fluid watercolour behind the hero (white paper stays white where there is no ink) */
.archstick{touch-action:pan-y}
#fluid{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}
.archstick .hero-title,.archstick .arch,.archstick .hero-over{z-index:1}


/* 2 · day into night */
.night{position:relative;height:280vh;background:#fff;padding:0}
.nstick{position:sticky;top:0;height:100vh;overflow:hidden}
.nsky{position:absolute;inset:0;opacity:0;background:radial-gradient(70% 60% at 70% 30%,#1B2840 0%,#0E1522 55%,#090D15 100%)}
.twinkle i{position:absolute;width:var(--s);height:var(--s);border-radius:999px;background:#F7DFA0;box-shadow:0 0 8px 2px rgba(247,223,160,.55);opacity:0;transition:opacity 1.2s}
.night.lit .twinkle i{animation:twk 3.2s ease-in-out infinite}
@keyframes twk{0%,100%{opacity:.15}50%{opacity:.95}}
.ngrid{position:relative;z-index:1;height:100%;display:grid;grid-template-columns:1fr auto;gap:56px;align-items:center}
.ntext h2{transition:color .8s}.ntext .eyebrow{transition:color .8s}
.ncaps{position:relative;margin-top:22px;min-height:120px;max-width:440px}
.ncap{position:absolute;inset:0 auto auto 0;opacity:0;transform:translateY(12px);transition:opacity .7s var(--curve),transform .7s var(--curve)}
.ncap.on{opacity:1;transform:none}
.ncap .n{font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--champ)}
.ncap p:last-child{margin-top:8px;font-size:17px;line-height:27px;color:var(--ink2);transition:color .8s}
.nbar{margin-top:26px;width:180px;height:2px;background:rgba(127,127,127,.25);overflow:hidden}
.nbar i{display:block;height:100%;background:var(--champ);transform-origin:left;transform:scaleX(0)}
.nhint{margin-top:10px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink2);transition:color .8s}
.night.dark h2{color:#F4EEE2}.night.dark h2 em{color:#E7C98A}.night.dark .ncap p:last-child,.night.dark .nhint{color:#C7CBD3}
.nframe{position:relative;height:min(76vh,640px);aspect-ratio:4/5;border-radius:999px 999px 6px 6px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(14,20,28,.6)}
.nframe img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .25s}
#nDay{object-position:12% center}#nNight{opacity:0}
.ncv{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;opacity:0}
@media (max-width:980px){
  .night{height:260vh}
  .ngrid{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:18px;align-items:start;padding-top:84px;padding-bottom:24px}
  .ncaps{min-height:84px}.ncap p:last-child{font-size:15px;line-height:23px}.nhint{display:none}.nbar{margin-top:12px}
  .nframe{height:auto;width:min(100%,46vh);justify-self:center}
}
@media (prefers-reduced-motion:reduce){.night{height:auto}.nstick{position:relative;height:auto;padding:72px 0}}

/* 3 · sketches that draw themselves */
section.prices,section.contact{position:relative;overflow:hidden}
section.prices>.wrap,section.contact>.wrap{position:relative;z-index:1}
.sketch,.leafy>svg.sketch{position:absolute;pointer-events:none;z-index:0;overflow:visible}
.sketch path{fill:none;stroke:var(--champ);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;opacity:.55;transition:stroke-dashoffset 2.6s cubic-bezier(.35,.1,.25,1)}
.sketch.in path{stroke-dashoffset:0}
.sketch.house{right:-2%;bottom:0;width:min(62vw,860px);height:auto;opacity:.5}
.sketch.emblem{right:4%;top:40px;width:min(36vw,440px);height:auto;opacity:.7}
@media (max-width:980px){.sketch.house{width:110vw;right:-20vw;opacity:.3}.sketch.emblem{width:70vw;right:-8vw;top:20px;opacity:.45}}