/* ─────────────────────────────────────────────
   VERDANT RIDGE — deep green / creamy soft gold
   ───────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}

:root{
  --ink:#080F0B;
  --green:#0A1410;
  --green-2:#0F2018;
  --green-3:#17362A;
  --gold:#D6BE8C;
  --gold-soft:#EBDCBB;
  --cream:#F3EDE0;
  --line:rgba(214,190,140,.22);
  --pad:3rem;
  --font-d:'Archivo','Helvetica Neue',Arial,sans-serif;
  --font-b:'Inter','Helvetica Neue',Arial,sans-serif;
  --font-a:'Cormorant Garamond','Cormorant',Georgia,serif;
}

html{width:100%;max-width:100vw;min-height:100%;overflow-x:clip;scrollbar-width:none}
html::-webkit-scrollbar{display:none}
body{
  margin:0;width:100%;max-width:100vw;min-height:100%;overflow-x:clip;
  background:var(--green);color:var(--cream);
  font-family:var(--font-b);font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.accent{font-family:var(--font-a);font-style:italic;font-weight:400;color:var(--gold);
  letter-spacing:.005em;font-size:1.14em;line-height:0.9}

.eyebrow{
  font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);opacity:.8;margin:0 0 1.6rem;font-weight:500;
}

/* ── character hover (split-flap) ───────────── */
.chr{display:inline-flex;overflow:hidden;line-height:1.15;
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  cursor:pointer;vertical-align:bottom}
.ch-wrap{position:relative;display:inline-block;overflow:hidden;height:1.15em}
.ch-top,.ch-bot{display:block;white-space:pre}
.ch-top{transform:translateY(0);transition:transform .34s cubic-bezier(.7,0,.2,1);transition-delay:calc(var(--i)*18ms)}
.ch-bot{position:absolute;left:0;top:0;transform:translateY(100%);
  transition:transform .34s cubic-bezier(.7,0,.2,1);transition-delay:calc(var(--i)*18ms);color:var(--gold)}
.chr:hover .ch-top{transform:translateY(-100%)}
.chr:hover .ch-bot{transform:translateY(0)}

/* ── intro ─────────────────────────────────── */
.intro-bg{position:fixed;inset:0 0 auto 0;height:100vh;height:100dvh;z-index:10000;background:var(--ink)}

.name-layer{
  position:fixed;inset:0 0 auto 0;height:100vh;height:100dvh;z-index:10005;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;overflow:hidden;
}
.brand{
  display:flex;align-items:flex-end;position:relative;transform-origin:center center;
  font-family:var(--font-d);font-weight:600;font-stretch:92%;line-height:1;
  font-size:clamp(1.6rem,3.4vw,2.4rem);letter-spacing:-.035em;
  color:var(--cream);white-space:nowrap;
}
/* The second half of the lockup switches to the slanted serif. It sets
   much smaller than the grotesk at the same px, so it takes a size lift;
   the top nudge is in its own em, which keeps the two baselines locked
   together at every scale the intro passes through. */
#b-two,#b-dot{
  font-family:var(--font-a);font-style:italic;font-weight:400;
  font-size:1.18em;letter-spacing:-.005em;
  position:relative;top:0;
}
#b-dot{color:var(--gold);opacity:0}
.brand .ch{display:inline-block;overflow:hidden;vertical-align:top}
.brand .ch .chi{display:block;transform:translateY(110%);will-change:transform}

.transition-panel{position:fixed;inset:0 0 auto 0;height:100vh;height:100dvh;z-index:10002;pointer-events:none}
.t-panel-dark,.t-panel-gold{position:absolute;inset:0;transform:translateY(100%);will-change:transform}
.t-panel-dark{background:var(--green-2)}
.t-panel-gold{background:var(--gold)}

/* ── hero ──────────────────────────────────── */
.scroll-wrap{position:relative;height:400vh}
.hero{position:sticky;top:0;width:100%;height:100vh;height:100dvh;overflow:hidden;opacity:0}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block}
.hero-content{position:relative;z-index:1;width:100%;height:100%;pointer-events:none}
.hero-content a,.hero-content span{pointer-events:auto}

.hero-tagline{
  position:absolute;top:var(--pad);left:var(--pad);
  font-family:var(--font-d);font-weight:400;font-size:.92rem;line-height:1.45;
  letter-spacing:.005em;color:var(--cream);max-width:26rem;
  mix-blend-mode:difference;clip-path:inset(0 0 100% 0);opacity:0;
}
.hero-tagline .accent{mix-blend-mode:normal}

.hero-bar{
  position:absolute;bottom:var(--pad);left:var(--pad);right:var(--pad);
  display:flex;justify-content:space-between;align-items:flex-end;
  mix-blend-mode:difference;clip-path:inset(0 0 100% 0);opacity:0;
}
.hero-line{
  position:absolute;bottom:calc(var(--pad) + 2.6rem);left:var(--pad);right:var(--pad);height:1px;
  background:rgba(243,237,224,.45);mix-blend-mode:difference;transform-origin:left center;opacity:0;
}
.bar-center{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:1.4rem;align-items:center}
.bar-center .sep{font-size:.8rem;opacity:.28;user-select:none}
.bar-right{display:flex;gap:2rem}

/* ── reveal sequence ───────────────────────── */
.reveal-wrap{
  position:fixed;top:0;left:0;width:100vw;height:100vh;height:100dvh;z-index:10002;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;opacity:0;overflow:hidden;
}
.reveal-canvas{position:absolute;width:100%;height:100%;display:block;transform:scale(0);will-change:transform}
.reveal-frame{position:absolute;inset:0;transform:scale(0);will-change:transform;pointer-events:none}
.reveal-overlay{position:absolute;inset:0;background:var(--green);opacity:0}
.corner{position:absolute;width:20px;height:20px;z-index:2}
.corner::before,.corner::after{content:'';position:absolute;background:var(--gold-soft);opacity:.85}
.corner::before{width:1px;height:100%;left:50%;top:0}
.corner::after{height:1px;width:100%;top:50%;left:0}
.corner.tl{top:2rem;left:2rem}
.corner.tr{top:2rem;right:2rem}
.corner.bl{bottom:2rem;left:2rem}
.corner.br{bottom:2rem;right:2rem}
.frame-meta{
  position:absolute;bottom:2rem;font-size:.58rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold-soft);opacity:.75;
}
.fm-l{left:3.6rem}
.fm-r{right:3.6rem}

.reveal-phrase{
  position:relative;z-index:3;margin:0;padding:0 8vw;text-align:center;
  font-family:var(--font-d);font-weight:500;font-stretch:92%;
  font-size:clamp(1.5rem,4.4vw,3.4rem);line-height:1.05;letter-spacing:-.03em;
  color:var(--cream);mix-blend-mode:difference;
}

/* ── after ─────────────────────────────────── */
.section-after{position:relative;min-height:100vh;background:var(--green);z-index:20010}
.section-after::before{
  content:'';position:absolute;top:-32vh;left:0;right:0;height:32vh;
  background:linear-gradient(to top,var(--green),transparent);pointer-events:none;z-index:3;
}

.statement{position:relative;min-height:100vh;padding:44vh var(--pad) 72vh}
.statement-text{
  position:relative;z-index:20;width:min(66%,62rem);
  font-family:var(--font-d);font-weight:400;font-stretch:96%;
  font-size:clamp(1.7rem,3.5vw,3.2rem);line-height:1.16;letter-spacing:-.02em;color:var(--cream);
}
.statement-sub{
  position:relative;z-index:20;margin-top:2.6rem;max-width:34rem;
  font-size:.85rem;line-height:1.55;color:rgba(243,237,224,.58);
}
.statement-btn{position:relative;z-index:20;margin-top:2.4rem}
.statement-badge{
  position:absolute;top:44vh;right:var(--pad);z-index:20;
  display:flex;align-items:center;gap:.5rem;
  font-size:.6rem;letter-spacing:.24em;color:var(--gold);
}
.statement-badge svg{width:1.3em;height:1.3em}
.statement-photo-wrap{
  position:absolute;right:var(--pad);bottom:26vh;z-index:10;
  width:clamp(200px,24vw,360px);aspect-ratio:3/4;overflow:hidden;
  clip-path:inset(100% 0 0 0);
}
.statement-photo{width:100%;height:100%;object-fit:cover;transform:scale(1.25)}

/* ── residences list ───────────────────────── */
.residences{position:relative;padding:14vh 0 22vh;overflow:hidden}
.thread-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.thread{fill:none;stroke:url(#thread-fade);stroke-width:2;opacity:.34}
.residences-inner{position:relative;z-index:2;padding:0 var(--pad);max-width:1500px;margin:0 auto}
.res-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.res-item{
  position:relative;padding:1.1rem 0;border-bottom:1px solid var(--line);
  font-family:var(--font-d);font-weight:400;font-stretch:96%;
  font-size:clamp(1.6rem,4.2vw,3.6rem);line-height:1.1;letter-spacing:-.03em;
  color:rgba(243,237,224,.5);cursor:pointer;
  transition:color .4s ease,padding-left .5s cubic-bezier(.7,0,.2,1);
  will-change:color,padding-left;
}
.res-item::after{
  content:attr(data-meta);position:absolute;right:0;bottom:1.7rem;
  font-family:var(--font-b);font-size:.6rem;letter-spacing:.2em;
  color:var(--gold);opacity:0;transform:translateX(14px);
  transition:opacity .5s ease,transform .5s ease;
}
.res-preview{
  position:fixed;top:0;left:0;width:clamp(190px,17vw,280px);aspect-ratio:4/5;
  z-index:40;pointer-events:none;opacity:0;overflow:hidden;
}
.res-preview img{width:100%;height:100%;object-fit:cover}
.res-item.is-active,
.res-item:hover{color:var(--cream);padding-left:2.2rem}
.res-item.is-active::after,
.res-item:hover::after{opacity:.9;transform:translateX(0)}

/* ── parallax gallery ──────────────────────── */
.gallery{position:relative;z-index:20011;background:var(--green);padding:16vh var(--pad) 22vh}
.gallery-head{max-width:1500px;margin:0 auto 10vh}
.gallery-title{
  margin:0;font-family:var(--font-b);font-weight:300;
  font-size:clamp(2.1rem,6.2vw,5.4rem);line-height:.96;letter-spacing:-.05em;color:var(--cream);
}
.gallery-title .accent{font-size:1em;font-weight:300}
.gal-grid{
  max-width:1500px;margin:0 auto;
  display:grid;grid-template-columns:4fr 3.3fr 3.1fr;
  gap:clamp(1rem,2.6vw,3rem);align-items:start;
}
/* Each column is offset and drifts at its own rate — that, rather than
   per-tile margins, is what keeps the grid dense while still reading
   as three planes at different depths. */
.gal-col{display:flex;flex-direction:column;gap:clamp(2rem,5vw,5.5rem);will-change:transform}
.gal-col--b{margin-top:16vh}
.gal-col--c{margin-top:6vh}
.gal{margin:0}
.gal-inner{position:relative;overflow:hidden;background:var(--green)}
.gal-inner.r43{aspect-ratio:4/3}
.gal-inner.r34{aspect-ratio:3/4}
.gal-inner.r11{aspect-ratio:1/1}
.gal img{width:100%;height:100%;object-fit:cover;transform:scale(1.22);will-change:transform}
.gal figcaption{
  margin-top:.8rem;line-height:1.4;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(243,237,224,.42);
}

/* ── specs ─────────────────────────────────── */
.specs{position:relative;z-index:20011;background:var(--green);padding:16vh var(--pad) 18vh;border-top:1px solid var(--line)}
.specs-inner{max-width:1500px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,7vw,7rem)}
.specs-text{font-family:var(--font-a);font-weight:300;font-size:clamp(1.35rem,2.5vw,2.2rem);
  line-height:1.18;letter-spacing:0;max-width:26rem}
.specs-rule{height:1px;background:var(--line);margin:2.4rem 0}
.specs-arrow{margin-top:3rem;color:var(--gold)}
.specs-arrow svg{width:2.4rem;height:2.4rem}
.spec-group{border-bottom:1px solid var(--line)}
.spec-head{
  display:flex;justify-content:space-between;align-items:center;padding:1.3rem 0;cursor:pointer;
  font-family:var(--font-d);font-size:clamp(1rem,1.8vw,1.4rem);letter-spacing:-.01em;
}
.spec-icon{position:relative;width:12px;height:12px;flex:none}
.spec-icon::before,.spec-icon::after{content:'';position:absolute;background:var(--gold);transition:transform .4s cubic-bezier(.7,0,.2,1)}
.spec-icon::before{width:100%;height:1px;top:50%;left:0}
.spec-icon::after{height:100%;width:1px;left:50%;top:0}
.spec-group.open .spec-icon::after{transform:scaleY(0)}
.spec-body{overflow:hidden;height:0}
.spec-body ul{margin:0;padding:0 0 1.4rem 0;list-style:none}
.spec-body li{font-size:.78rem;line-height:1.85;color:rgba(243,237,224,.55);letter-spacing:.02em}
.spec-body li::before{content:'—  ';color:var(--gold);opacity:.6}

/* ── horizontal walk ───────────────────────── */
.strip{position:relative;z-index:20011;background:var(--green);border-top:1px solid var(--line)}
.strip-pin{
  height:100vh;height:100dvh;width:100%;overflow:hidden;
  display:flex;align-items:center;
}
.strip-head,.strip-foot{
  position:absolute;left:var(--pad);right:var(--pad);z-index:3;
  display:flex;justify-content:space-between;align-items:baseline;
}
.strip-head{top:14vh}
.strip-head .eyebrow{margin:0}
.strip-foot{
  bottom:10vh;font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(243,237,224,.34);
}
.strip-count{font-size:.6rem;letter-spacing:.22em;color:rgba(243,237,224,.45)}
.strip-count b{font-weight:500;color:var(--gold)}
.strip-track{
  display:flex;gap:clamp(1rem,2.4vw,2.4rem);padding:0 var(--pad);
  will-change:transform;
}
.pan{
  flex:none;position:relative;margin:0;
  height:54vh;aspect-ratio:4/3;overflow:hidden;background:var(--green);
}
/* The image is wider than its frame by exactly the parallax headroom, so
   it can slide inside the mask without ever exposing an edge. */
.pan img{
  position:absolute;top:0;left:-12.5%;width:125%;height:100%;
  /* the global img{max-width:100%} would clamp this straight back to the
     frame width and leave the parallax nothing to slide into */
  max-width:none;
  object-fit:cover;will-change:transform;
}
.pan::after{
  content:'';position:absolute;inset:auto 0 0 0;height:38%;z-index:1;
  background:linear-gradient(to top,rgba(8,15,11,.78),transparent);pointer-events:none;
}
.pan figcaption{
  position:absolute;left:1rem;bottom:.9rem;z-index:2;
  font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cream);opacity:.92;
}
@media (max-width:900px){
  .strip-head{top:15vh}
  .strip-foot{bottom:13vh}
  /* A 4:3 panel sized off viewport height is wider than a phone screen,
     so on portrait the frame goes square and the strip stays legible. */
  .pan{height:40vh;aspect-ratio:1/1}
  .pan figcaption{left:.8rem;bottom:.75rem;font-size:.5rem}
}

/* ── outro ─────────────────────────────────── */
.outro{position:relative;z-index:20011;background:var(--ink);padding:16vh var(--pad) 4rem;text-align:center;overflow:hidden}
.outro-mark em{font-family:var(--font-a);font-style:italic;font-weight:400;font-size:1.34em;line-height:0}
.outro-mark em span{color:var(--gold)}
.outro-mark{
  font-family:var(--font-d);font-weight:600;font-stretch:88%;
  font-size:clamp(1.9rem,9.5vw,9.5rem);line-height:.9;letter-spacing:-.05em;
  color:var(--cream);white-space:nowrap;
}
.outro-line{margin:2.2rem auto 0;max-width:34rem;font-family:var(--font-a);font-weight:300;
  font-size:clamp(1rem,1.7vw,1.5rem);line-height:1.3;color:rgba(243,237,224,.62)}
.outro-bar{
  display:flex;justify-content:space-between;margin-top:14vh;padding-top:1.2rem;
  border-top:1px solid var(--line);font-size:.58rem;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(243,237,224,.4);
}

/* ── responsive ────────────────────────────── */
@media (max-width:900px){
  :root{--pad:1.4rem}
  .hero-tagline{font-size:.78rem;max-width:18rem}
  .bar-center{display:none}
  .bar-right{gap:1.1rem}
  .corner{width:14px}
  .corner.tl,.corner.tr{top:1.2rem}
  .corner.bl,.corner.br{bottom:1.2rem}
  .corner.tl,.corner.bl{left:1.2rem}
  .corner.tr,.corner.br{right:1.2rem}
  .frame-meta{bottom:1.2rem;font-size:.5rem}
  .fm-l{left:2.4rem}.fm-r{right:2.4rem}
  .statement{padding:32vh var(--pad) 56vh}
  .statement-text{width:100%}
  .statement-badge{top:26vh}
  .statement-photo-wrap{position:relative;right:auto;bottom:auto;margin:4rem 0 0 auto;width:62vw}
  .specs-inner{grid-template-columns:1fr;gap:4rem}
  .gal-grid{grid-template-columns:1fr 1fr;gap:1rem}
  .gal-col--c{grid-column:1 / -1;flex-direction:row;margin-top:2rem}
  .gal-col--c .gal{flex:1}
  .gal-col--b{margin-top:7vh}
  .outro-bar{flex-direction:column;gap:.5rem;align-items:center}
}