/* ============================================================
   4 TREMORRA TRAIL · VENTURE 8 STUDIO
   Ink-cinematic single-property landing
   ============================================================ */

:root{
  --ink:#0b0c0d;
  --ink-1:#111315;
  --ink-2:#181a1d;
  --paper:#f3f0e8;
  --paper-2:#e9e4d8;
  --cedar:#c08a4e;         /* weathered cedar / brass accent */
  --cedar-soft:#d8a86f;

  --tx:#f2efe8;            /* primary on ink */
  --tx-2:rgba(242,239,232,.62);
  --tx-3:rgba(242,239,232,.38);
  --line:rgba(242,239,232,.14);
  --line-2:rgba(242,239,232,.08);

  --ink-tx:#15120c;        /* primary on paper */
  --ink-tx-2:rgba(21,18,12,.60);
  --ink-line:rgba(21,18,12,.14);

  --disp:"Archivo",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;

  --ease-expo:cubic-bezier(.16,1,.3,1);
  --ease-quart:cubic-bezier(.25,1,.5,1);
  --pad: clamp(20px, 5vw, 96px);
  --sp: clamp(120px, 18vh, 240px);   /* section rhythm */
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}

/* Lenis smooth-scroll */
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}
body{
  background:var(--ink);
  color:var(--tx);
  font-family:var(--disp);
  font-weight:400;
  font-stretch:100%;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden;height:100vh}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
::selection{background:var(--cedar);color:#0b0c0d}

.mono{font-family:var(--mono);font-weight:400;letter-spacing:.16em;text-transform:uppercase;font-size:.72rem}

/* fluid display helper */
.section{padding-left:var(--pad);padding-right:var(--pad)}

/* ---------- reveal primitives ---------- */
.reveal-line{overflow:hidden}
.reveal-line > span{display:block;transform:translateY(115%);will-change:transform}
.reveal-fade{opacity:0;transform:translateY(24px);will-change:transform,opacity}
.reveal-clip{clip-path:inset(0 0 100% 0);will-change:clip-path}
.reveal-clip img{transform:scale(1.14);will-change:transform}
html.no-motion .reveal-line>span{transform:none}
html.no-motion .reveal-fade{opacity:1;transform:none}
html.no-motion .reveal-clip{clip-path:none}
html.no-motion .reveal-clip img{transform:none}

/* ============================================================
   PRELOADER
   ============================================================ */
.loader{position:fixed;inset:0;z-index:200;background:var(--ink);display:grid;place-items:center;overflow:hidden}
.loader__grid{position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
  background-size:clamp(48px,7vw,96px) clamp(48px,7vw,96px);
  mask-image:radial-gradient(circle at 50% 50%,#000 30%,transparent 78%);
}
.loader__inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
.loader__badge{width:96px;height:96px;border-radius:50%;mix-blend-mode:screen;opacity:.95;animation:spinSlow 22s linear infinite}
@keyframes spinSlow{to{transform:rotate(360deg)}}
.loader__meta{display:flex;flex-direction:column;gap:4px;color:var(--tx-2)}
.loader__meta span:first-child{color:var(--tx);letter-spacing:.34em}
.loader__bar{width:min(52vw,320px);height:1px;background:var(--line);position:relative;overflow:hidden;margin-top:6px}
.loader__bar span{position:absolute;inset:0;background:var(--cedar);transform:scaleX(0);transform-origin:left}
.loader__count{color:var(--tx-3);display:flex;gap:8px}
.loader__count #loaderNum{color:var(--cedar)}
.loader.done{pointer-events:none}

/* ============================================================
   NAV
   ============================================================ */
.nav{position:fixed;top:0;left:0;right:0;z-index:90;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:18px var(--pad);gap:20px;
  transition:background .5s var(--ease-expo),backdrop-filter .5s var(--ease-expo),padding .5s var(--ease-expo),border-color .5s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{background:rgba(11,12,13,.72);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);padding-top:12px;padding-bottom:12px;border-color:var(--line-2)}
.nav__brand{display:flex;align-items:center;gap:12px;justify-self:start}
.nav__badge{width:34px;height:34px;border-radius:50%;mix-blend-mode:screen}
.nav__wordmark{font-weight:800;font-stretch:118%;letter-spacing:.02em;font-size:.92rem;line-height:1;display:flex;align-items:baseline;gap:7px}
.nav__wordmark em{font-style:normal;font-weight:400;font-size:.62rem;letter-spacing:.28em;color:var(--tx-2);font-family:var(--mono)}
.nav__center{justify-self:center;color:var(--tx-2);white-space:nowrap}
.nav__right{justify-self:end;display:flex;align-items:center;gap:20px}
.nav__price{color:var(--tx)}

@media(max-width:860px){
  .nav{grid-template-columns:1fr auto}
  .nav__center{display:none}
  .nav__price{display:none}
}

/* buttons */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:.82rem;letter-spacing:.01em;
  padding:.8em 1.5em;border-radius:100px;border:1px solid var(--line);color:var(--tx);
  transition:color .4s var(--ease-expo),border-color .4s,background .4s var(--ease-expo);overflow:hidden;isolation:isolate}
.btn span{position:relative;z-index:2}
.btn::after{content:"";position:absolute;inset:0;background:var(--cedar);transform:scaleY(0);transform-origin:bottom;z-index:1;transition:transform .5s var(--ease-expo)}
.btn:hover{color:#0b0c0d;border-color:var(--cedar)}
.btn:hover::after{transform:scaleY(1)}
.btn--pill{padding:.6em 1.35em;font-size:.78rem}
.btn--solid{background:var(--cedar);border-color:var(--cedar);color:#0b0c0d}
.btn--solid::after{background:var(--tx)}
.btn--solid:hover{color:#0b0c0d}
.btn--ghost{background:transparent}
.btn:focus-visible{outline:2px solid var(--cedar-soft);outline-offset:3px}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;height:100svh;min-height:640px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
.hero__media{position:absolute;inset:-6% 0 0 0;height:112%}
.hero__img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);will-change:transform}
.hero__grade{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,12,13,.55) 0%,rgba(11,12,13,0) 26%,rgba(11,12,13,0) 42%,rgba(11,12,13,.62) 78%,rgba(11,12,13,.95) 100%)}
.hero__ticks{position:absolute;inset:0;pointer-events:none}
.tick{position:absolute;width:16px;height:16px;opacity:.7}
.tick::before,.tick::after{content:"";position:absolute;background:var(--tx-2)}
.tick::before{width:100%;height:1px;top:50%}
.tick::after{height:100%;width:1px;left:50%}
.tick--tl{top:calc(var(--pad) + 46px);left:var(--pad)}
.tick--tr{top:calc(var(--pad) + 46px);right:var(--pad)}
.tick--bl{bottom:var(--pad);left:var(--pad)}
.tick--br{bottom:var(--pad);right:var(--pad)}
@media(max-width:860px){.hero__ticks{display:none}}

.hero__content{position:relative;z-index:5;padding:0 var(--pad) clamp(38px,7vh,76px)}
.hero__eyebrow{margin-bottom:clamp(14px,2vh,26px)}
.hero__eyebrow span{display:inline-block;font-family:var(--mono);font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;color:var(--cedar-soft)}
.hero__title{margin:0;line-height:.86}
.hero__title .line{display:block;overflow:hidden}
.hero__title .line > span{display:block;white-space:nowrap;
  font-weight:800;font-stretch:118%;letter-spacing:-.025em;
  font-size:clamp(2.8rem,12.2vw,11rem);text-transform:uppercase;
  transform:translateY(112%)}
html.no-motion .hero__title .line>span{transform:none}
.hero__sub{max-width:44ch;margin-top:clamp(16px,2.4vh,30px);font-size:clamp(1rem,1.5vw,1.35rem);color:var(--tx);font-weight:400;line-height:1.4}
.hero__foot{display:flex;flex-wrap:wrap;gap:18px 40px;align-items:baseline;justify-content:space-between;margin-top:clamp(26px,4vh,52px);border-top:1px solid var(--line);padding-top:20px}
.hero__specs{display:flex;align-items:center;gap:16px;color:var(--tx);letter-spacing:.14em}
.hero__specs i{width:4px;height:4px;background:var(--cedar);border-radius:50%;display:inline-block}
.hero__coords{color:var(--tx-2)}

.hero__scroll{position:absolute;z-index:6;right:var(--pad);bottom:clamp(38px,7vh,76px);display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--tx-2);font-size:.66rem;letter-spacing:.2em}
.hero__scrollline{width:1px;height:56px;background:linear-gradient(var(--cedar),transparent);position:relative;overflow:hidden}
.hero__scrollline::after{content:"";position:absolute;top:0;left:0;width:100%;height:40%;background:var(--cedar);animation:scrollPulse 2.2s var(--ease-expo) infinite}
@keyframes scrollPulse{0%{transform:translateY(-100%)}60%,100%{transform:translateY(260%)}}
@media(max-width:860px){.hero__scroll{display:none}}

/* ============================================================
   KICKERS
   ============================================================ */
.kicker{display:flex;align-items:center;gap:12px;color:var(--tx-2)}
.kicker em{font-style:normal;color:var(--cedar);font-weight:500}
.kicker::after{content:"";flex:0 0 46px;height:1px;background:var(--line)}
.kicker--dark{color:var(--ink-tx-2)}
.kicker--dark em{color:var(--cedar)}
.kicker--dark::after{background:var(--ink-line)}

/* ============================================================
   01 · STATEMENT
   ============================================================ */
.statement{padding-top:var(--sp);padding-bottom:var(--sp)}
.statement__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,6vw,90px);align-items:center}
.statement__lead{max-width:52ch}
.statement__title{margin:22px 0 28px;font-weight:800;font-stretch:110%;letter-spacing:-.022em;line-height:1.03;font-size:clamp(1.9rem,4.2vw,3.5rem)}
.statement__title span{display:block}
.statement__body{font-size:clamp(1rem,1.25vw,1.18rem);color:var(--tx-2);line-height:1.62;max-width:42ch}
.statement__by{margin-top:26px;color:var(--tx-3);letter-spacing:.12em}
.statement__by strong{color:var(--tx);font-family:var(--disp);font-weight:700;letter-spacing:0}
.statement__fig{position:relative;overflow:hidden;aspect-ratio:4/5}
.statement__fig img{width:100%;height:100%;object-fit:cover}
.statement__fig figcaption{position:absolute;left:14px;bottom:12px;color:var(--tx-2);font-size:.62rem;letter-spacing:.14em;mix-blend-mode:difference}
@media(max-width:820px){
  .statement__grid{grid-template-columns:1fr;gap:40px;align-items:start}
  .statement__fig{aspect-ratio:3/2}
}

/* ============================================================
   STAT BAND
   ============================================================ */
.stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.stats::before{content:"";position:absolute;inset:0;opacity:.4;
  background-image:linear-gradient(90deg,var(--line-2) 1px,transparent 1px);background-size:16.66% 100%}
.stats__grid{position:relative;display:grid;grid-template-columns:repeat(6,1fr)}
.stat{padding:clamp(34px,5vw,66px) clamp(14px,2vw,30px);border-right:1px solid var(--line-2);display:flex;flex-direction:column;gap:12px}
.stat:last-child{border-right:0}
.stat__num{font-weight:800;font-stretch:115%;letter-spacing:-.02em;font-size:clamp(1.8rem,3.4vw,3.1rem);line-height:1}
.stat__lab{color:var(--tx-3)}
@media(max-width:900px){.stats__grid{grid-template-columns:repeat(3,1fr)}.stats::before{background-size:33.33% 100%}
  .stat:nth-child(3n){border-right:0}.stat:nth-child(-n+3){border-bottom:1px solid var(--line-2)}}
@media(max-width:520px){.stats__grid{grid-template-columns:repeat(2,1fr)}.stats::before{display:none}
  .stat:nth-child(3n){border-right:1px solid var(--line-2)}.stat:nth-child(2n){border-right:0}}

/* ============================================================
   02 · WALKTHROUGH (pinned horizontal)
   ============================================================ */
.walk{background:var(--ink)}
.walk__pin{height:100svh;position:relative;overflow:hidden;display:flex;flex-direction:column}
.walk__head{display:flex;justify-content:space-between;align-items:center;padding:clamp(24px,4vh,48px) var(--pad) 0;position:relative;z-index:4}
.walk__progress{width:min(38vw,240px);height:1px;background:var(--line)}
.walk__progress span{display:block;height:100%;width:0;background:var(--cedar)}
.walk__track{display:flex;align-items:center;gap:clamp(20px,3vw,48px);height:100%;padding:clamp(20px,4vh,54px) var(--pad);will-change:transform}
.panel{position:relative;flex:0 0 auto;width:clamp(280px,42vw,620px);height:70%;overflow:hidden;border-radius:2px}
.panel img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-expo)}
.panel:hover img{transform:scale(1.05)}
.panel__cap{position:absolute;left:0;right:0;bottom:0;padding:22px;display:flex;flex-direction:column;gap:4px;
  background:linear-gradient(0deg,rgba(11,12,13,.86),transparent)}
.panel__idx{color:var(--cedar);letter-spacing:.24em;font-size:.66rem}
.panel__cap h3{font-weight:800;font-stretch:118%;letter-spacing:-.01em;font-size:clamp(1.3rem,2.4vw,2rem);line-height:1}
.panel__cap p{color:var(--tx-2);font-size:.66rem;letter-spacing:.14em}
.walk__note{position:absolute;right:var(--pad);bottom:clamp(18px,3vh,34px);color:var(--tx-3);z-index:4}
@media(max-width:820px){
  .walk__pin{height:auto}
  .walk__track{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;height:auto;transform:none!important;padding-bottom:30px}
  .panel{height:62vh;width:82vw;scroll-snap-align:center}
  .walk__progress{display:none}
}

/* ============================================================
   03 · INTERIOR (light editorial)
   ============================================================ */
.interior{background:var(--paper);color:var(--ink-tx);padding-top:var(--sp);padding-bottom:var(--sp)}
.interior__intro{max-width:1400px;margin:0 auto clamp(60px,9vh,120px)}
.interior__title{font-weight:800;font-stretch:118%;letter-spacing:-.025em;line-height:.98;font-size:clamp(2.6rem,8vw,7rem);color:var(--ink-tx);margin-top:22px}
.feature{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:center;padding:clamp(40px,7vh,100px) 0}
.feature--rev .feature__fig{order:2}
.feature__fig{position:relative;overflow:hidden;aspect-ratio:3/2;background:var(--paper-2)}
.feature__fig img{width:100%;height:100%;object-fit:cover}
.feature__txt{max-width:40ch}
.feature__n{color:var(--cedar);letter-spacing:.2em;font-size:.7rem}
.feature__txt h3{font-weight:800;font-stretch:112%;letter-spacing:-.02em;line-height:1;font-size:clamp(1.8rem,3.6vw,3.2rem);margin:14px 0 18px;overflow:hidden}
.feature__txt h3 span{display:block}
.feature__txt p{color:var(--ink-tx-2);font-size:clamp(1rem,1.2vw,1.14rem);line-height:1.6}
@media(max-width:820px){
  .feature{grid-template-columns:1fr;gap:24px;padding:34px 0}
  .feature--rev .feature__fig{order:0}
}

/* ============================================================
   04 · THE LAND
   ============================================================ */
.land{position:relative;min-height:100svh;overflow:hidden;display:flex;align-items:center;color:var(--tx)}
.land__bg{position:absolute;inset:-8% 0;height:116%;will-change:transform}
.land__bg img{width:100%;height:100%;object-fit:cover}
.land__grade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,12,13,.9) 0%,rgba(11,12,13,.6) 42%,rgba(11,12,13,.15) 78%,transparent 100%),linear-gradient(0deg,rgba(11,12,13,.7),transparent 55%)}
.land__content{position:relative;z-index:4;max-width:640px;padding-top:14vh;padding-bottom:14vh}
.land__title{font-weight:800;font-stretch:122%;letter-spacing:-.025em;line-height:.96;font-size:clamp(2.6rem,7vw,6rem);margin:22px 0 26px}
.land__title span{display:block}
.land__body{font-size:clamp(1rem,1.3vw,1.22rem);color:var(--tx);line-height:1.6;max-width:46ch}
.land__facts{display:flex;flex-wrap:wrap;gap:14px 44px;margin-top:38px;border-top:1px solid var(--line);padding-top:24px}
.lfact{display:flex;flex-direction:column;gap:6px}
.lfact span{color:var(--cedar-soft);font-size:.64rem}
.lfact strong{font-weight:600;font-size:1.02rem;letter-spacing:.01em}
.land__plan{position:absolute;z-index:4;right:var(--pad);bottom:clamp(30px,6vh,64px);width:clamp(150px,20vw,260px);border:1px solid var(--line);padding:8px;background:rgba(11,12,13,.45);backdrop-filter:blur(4px)}
.land__plan img{aspect-ratio:1/1;object-fit:cover;width:100%}
.land__plan figcaption{color:var(--tx-2);font-size:.58rem;letter-spacing:.14em;margin-top:8px;text-align:center}
@media(max-width:920px){.land__plan{display:none}.land__grade{background:linear-gradient(0deg,rgba(11,12,13,.94) 4%,rgba(11,12,13,.4) 60%,rgba(11,12,13,.2))}}

/* ============================================================
   GALLERY MARQUEE
   ============================================================ */
.gallery{background:var(--ink);padding:clamp(80px,12vh,150px) 0}
.gallery__head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:clamp(30px,5vh,60px);gap:20px}
.gallery__credit{color:var(--tx-3)}
.marquee{display:flex;flex-direction:column;gap:clamp(12px,1.4vw,22px)}
.marquee__row{display:flex;gap:clamp(12px,1.4vw,22px);width:max-content;will-change:transform}
.marquee__set{display:flex;gap:clamp(12px,1.4vw,22px)}
.marquee__set img{height:clamp(190px,26vw,340px);width:auto;aspect-ratio:3/2;object-fit:cover;object-position:center 12%;flex:0 0 auto;filter:grayscale(.12) brightness(.94);transition:filter .5s var(--ease-expo),transform .5s var(--ease-expo)}
.marquee__set img:hover{filter:grayscale(0) brightness(1);transform:scale(1.02)}

/* ============================================================
   SPEC SHEET
   ============================================================ */
.spec{padding-top:var(--sp);padding-bottom:var(--sp);max-width:1200px;margin:0 auto}
.spec__head{display:flex;flex-direction:column;gap:18px;margin-bottom:clamp(40px,6vh,72px)}
.spec__title{font-weight:800;font-stretch:118%;letter-spacing:-.02em;font-size:clamp(2.2rem,6vw,5rem);line-height:.95;overflow:hidden}
.spec__title span{display:block}
.spec__list{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(30px,6vw,90px)}
.spec__row{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:20px 0;border-bottom:1px solid var(--line-2)}
.spec__row dt{color:var(--tx-3);flex:0 0 auto}
.spec__row dd{color:var(--tx);text-align:right;font-weight:500}
@media(max-width:760px){.spec__list{grid-template-columns:1fr}}

/* ============================================================
   INQUIRE / CTA
   ============================================================ */
.inquire{background:var(--ink);position:relative;overflow:hidden;border-top:1px solid var(--line)}
.inquire::before{content:"";position:absolute;inset:0;opacity:.4;pointer-events:none;
  background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
  background-size:clamp(56px,8vw,110px) clamp(56px,8vw,110px);
  mask-image:radial-gradient(circle at 50% 40%,#000,transparent 72%)}
.inquire__inner{position:relative;padding-top:clamp(110px,16vh,200px);padding-bottom:clamp(110px,16vh,200px);text-align:center;display:flex;flex-direction:column;align-items:center}
.inquire__title{font-weight:800;font-stretch:125%;letter-spacing:-.03em;line-height:.9;font-size:clamp(3rem,12vw,10rem);text-transform:uppercase;margin:26px 0}
.inquire__title span{display:block}
.inquire__body{max-width:44ch;color:var(--tx-2);font-size:clamp(1rem,1.3vw,1.2rem);line-height:1.6}
.inquire__actions{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin:40px 0 30px}
.inquire__actions .btn{padding:1em 1.9em;font-size:.9rem}
.inquire__agent{color:var(--tx-3)}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{background:#08090a;border-top:1px solid var(--line-2)}
.foot__top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-top:clamp(56px,8vh,96px);padding-bottom:clamp(40px,6vh,72px)}
.foot__brand{display:flex;align-items:center;gap:16px}
.foot__badge{width:56px;height:56px;border-radius:50%;mix-blend-mode:screen}
.foot__name{font-weight:800;font-stretch:118%;letter-spacing:.04em;font-size:1.05rem}
.foot__tag{color:var(--tx-3);margin-top:5px}
.foot__addr .mono{color:var(--tx-3);margin-bottom:10px}
.foot__addr address{font-style:normal;color:var(--tx-2);line-height:1.6;font-size:.98rem}
.foot__bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 30px;align-items:center;
  padding-top:22px;padding-bottom:30px;border-top:1px solid var(--line-2)}
.foot__bar .mono{color:var(--tx-3);font-size:.62rem;letter-spacing:.1em;text-transform:none}
.foot__up{color:var(--tx-2)!important;transition:color .3s}
.foot__up:hover{color:var(--cedar)!important}
@media(max-width:820px){.foot__top{grid-template-columns:1fr;gap:30px}}

/* ============================================================
   MOTION-SAFE
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .hero__img{transform:none}
}