/* ═══════════ HABITURE — habitat + nature ═══════════ */
:root{
  --ivory:#FCFBF7;
  --paper:#F6F3EC;
  --gold:#B08D57;
  --gold-deep:#967544;
  --gold-ink:#8a6c3c;
  --ink:#2A2721;
  --stone:#847C6F;
  --bronze-bg:#2E2822;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Jost',Helvetica,sans-serif;
  --ease:cubic-bezier(.22,.9,.24,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);font-weight:300;color:var(--ink);
  background:var(--ivory);line-height:1.65;font-size:17px;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.wrap{max-width:1180px;margin:0 auto;padding:0 6vw}
.serif{font-family:var(--serif);font-weight:400}

/* ─── eyebrow labels ─── */
.eyebrow{
  display:block;font-size:.72rem;letter-spacing:.42em;color:var(--gold);
  margin-bottom:1.1rem;font-weight:400;
}
.eyebrow.light{color:#E8D9C0}
.eyebrow.bronze{color:#C9A76F}
.eyebrow.spaced{margin-top:2.6rem}

/* ═══════════ NAV ═══════════ */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;
  padding:.9rem 4vw;
  background:rgba(252,251,247,.88);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(176,141,87,.16);
  transform:translateY(-100%);transition:transform .5s var(--ease);
}
#nav.show{transform:translateY(0)}
.nav-brand{display:flex;align-items:center;gap:.7rem}
.nav-logo{width:32px;height:auto}
.nav-word{letter-spacing:.34em;font-size:.85rem;font-weight:400}
.nav-links{display:flex;gap:2.2rem;align-items:center}
.nav-links a{
  font-size:.72rem;letter-spacing:.22em;color:var(--stone);
  transition:color .25s;
}
.nav-links a:hover{color:var(--gold-ink)}
.nav-cta{
  border:1px solid var(--gold);color:var(--gold-ink)!important;
  padding:.45rem 1.2rem;transition:background .25s,color .25s!important;
}
.nav-cta:hover{background:var(--gold);color:#fff!important}

/* ═══════════ HERO ═══════════ */
.hero{
  min-height:100svh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;position:relative;
  text-align:center;padding:0 6vw 28vh;overflow:hidden;
}
.hero-mark{width:min(132px,28vw);margin:0 auto}
.hero-word{
  font-family:var(--sans);font-weight:300;letter-spacing:.52em;
  font-size:clamp(1.9rem,5.4vw,3.6rem);margin-top:2.4rem;
  text-indent:.52em; /* balance tracking */
  color:var(--ink);
}
.hero-sub{
  letter-spacing:.5em;font-size:.72rem;color:var(--gold);margin-top:1.2rem;text-indent:.5em;
}
.hero-tag{
  font-family:var(--serif);font-style:italic;font-size:clamp(1.05rem,2vw,1.35rem);
  color:var(--stone);margin-top:2.6rem;
}
.scroll-cue{
  position:absolute;bottom:3.2rem;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.8rem;
  font-size:.6rem;letter-spacing:.4em;color:var(--stone);text-indent:.4em;
}
.cue-line{width:1px;height:56px;background:linear-gradient(var(--gold),transparent);
  animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* contour bands */
.contour-band{
  position:absolute;left:-10%;right:-10%;bottom:-4%;height:38%;
  background:url('assets/contour.jpg') center/cover no-repeat;
  mix-blend-mode:multiply;opacity:.55;pointer-events:none;
  animation:drift 60s linear infinite alternate;
}
.contour-band.flipped{top:-4%;bottom:auto;transform:scaleY(-1);opacity:.3}
@keyframes drift{from{transform:translateX(-3%)}to{transform:translateX(3%)}}
.contour-band.flipped{animation:driftFlip 60s linear infinite alternate}
@keyframes driftFlip{from{transform:scaleY(-1) translateX(-3%)}to{transform:scaleY(-1) translateX(3%)}}

/* hero entrance */
.rise{opacity:0;transform:translateY(26px);animation:rise 1.1s var(--ease) forwards}
.r1{animation-delay:.15s}.r2{animation-delay:.35s}.r3{animation-delay:.55s}.r4{animation-delay:.75s}.r5{animation-delay:1.15s}
@keyframes rise{to{opacity:1;transform:none}}

/* ═══════════ SCROLL REVEALS ═══════════ */
.reveal{opacity:0;transform:translateY(44px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}
.d2{transition-delay:.15s}.d3{transition-delay:.3s}.d4{transition-delay:.45s}

/* ═══════════ LEGACY ═══════════ */
.legacy{padding:9rem 0 6rem}
.legacy-grid{display:grid;grid-template-columns:5fr 7fr;gap:5rem;align-items:start}
.big-year{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(4.6rem,11vw,9rem);line-height:.95;color:var(--ink);
  display:flex;flex-direction:column;
}
.since{font-family:var(--sans);font-size:.8rem;letter-spacing:.5em;color:var(--gold);margin-bottom:.6rem}
.legacy-copy .lede{
  font-family:var(--serif);font-size:1.55rem;line-height:1.45;margin-bottom:1.6rem;color:var(--ink);
}
.legacy-copy p+p{margin-top:1.1rem;color:var(--stone)}
.stat-row{
  display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;
  margin-top:6rem;padding-top:3.4rem;border-top:1px solid rgba(176,141,87,.25);
}
.stat-n{
  font-family:var(--serif);font-size:clamp(2.4rem,4.6vw,3.6rem);color:var(--gold-ink);display:block;line-height:1;
}
.stat-l{font-size:.68rem;letter-spacing:.28em;color:var(--stone);display:block;margin-top:.7rem;text-transform:uppercase}

/* ═══════════ FULL-BLEED PARALLAX ═══════════ */
.bleed{position:relative;height:82vh;overflow:hidden;margin:5rem 0}
.bleed.tall{height:96vh}
.parallax{
  position:absolute;inset:-18% 0;width:100%;height:136%;
  object-fit:cover;will-change:transform;
}
.bleed::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(20,16,10,.55),rgba(20,16,10,0) 55%);
}
.bleed-caption{
  position:absolute;left:6vw;bottom:9vh;z-index:2;color:#fff;
}
.bleed-caption h2{
  font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,5.6vw,4.4rem);line-height:1.05;
}
.bleed-stats{margin-top:1.4rem;font-size:.72rem;letter-spacing:.3em;color:#E8D9C0}
.bleed-quote{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2;padding:0 8vw;text-align:center;
  background:radial-gradient(ellipse 60% 45% at 50% 50%,rgba(15,12,8,.42),rgba(15,12,8,0) 75%);
}
.bleed-quote p{
  color:#fff;font-size:clamp(1.5rem,3.4vw,2.5rem);font-style:italic;max-width:20em;
  text-shadow:0 2px 30px rgba(0,0,0,.45);
}

/* ═══════════ PROJECT INTRO ═══════════ */
.project-intro{
  display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:end;
  padding-top:2rem;padding-bottom:4rem;
}
.project-intro h3{font-size:clamp(1.7rem,3.2vw,2.5rem);line-height:1.15}
.project-intro p{color:var(--stone)}
.mini-stats{display:flex;flex-wrap:wrap;gap:1.6rem;margin-top:1.6rem}
.mini-stats span{
  font-size:.66rem;letter-spacing:.26em;color:var(--gold-ink);
  border-top:1px solid rgba(176,141,87,.4);padding-top:.6rem;
}

/* ═══════════ HORIZONTAL GALLERY ═══════════ */
.h-gallery{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;padding:0 0 1rem}
.h-gallery::-webkit-scrollbar{display:none}
.h-gallery.grabbing{cursor:grabbing}
.h-track{display:flex;gap:1.4rem;padding:0 6vw;width:max-content}
.h-track figure{flex:0 0 auto;width:min(480px,74vw)}
.h-track img{
  height:min(340px,52vw);width:100%;object-fit:cover;
  transition:transform .8s var(--ease);
}
.h-track figure:hover img{transform:scale(1.03)}
.h-track figcaption{
  margin-top:.8rem;font-size:.66rem;letter-spacing:.3em;color:var(--stone);text-transform:uppercase;
}

/* ═══════════ WORLD / FEATURES ═══════════ */
.section-head{padding:7rem 6vw 3.4rem;text-align:center}
.section-head h2{font-size:clamp(2.2rem,4.6vw,3.4rem);font-weight:400}
.head-note{max-width:44em;margin:1.4rem auto 0;color:var(--stone)}
.feature{
  display:grid;grid-template-columns:7fr 5fr;gap:4.5rem;align-items:center;
  padding-top:3rem;padding-bottom:3rem;
}
.feature.flip{grid-template-columns:5fr 7fr}
.feature.flip .feature-media{order:2}
.feature.flip .feature-text{order:1}
.feature-media img{width:100%;object-fit:cover}
.feature-media.towers img{max-height:640px;object-fit:contain;background:transparent}
.feature-text h3{font-size:clamp(1.6rem,3vw,2.3rem);margin-bottom:1rem}
.feature-text p{color:var(--stone)}
.duo{display:grid;grid-template-columns:3fr 2fr;gap:1.4rem;padding-top:0;padding-bottom:3rem}
.duo img{width:100%;height:100%;object-fit:cover}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;padding-bottom:4rem}
.trio img{width:100%;height:260px;object-fit:cover;transition:transform .8s var(--ease)}
.trio figure{overflow:hidden}
.trio figure:hover img{transform:scale(1.05)}
figcaption{margin-top:.8rem;font-size:.66rem;letter-spacing:.3em;color:var(--stone);text-transform:uppercase}

/* ═══════════ HF HOLDINGS ═══════════ */
.holdings{background:var(--bronze-bg);color:#EDE6DA;padding-bottom:7rem;margin-top:4rem}
.holdings .section-head h2{color:#F3EBDD}
.holdings .head-note{color:#B5A996}
.mob-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2.6rem}
.mob-grid img{width:100%;height:320px;object-fit:cover;filter:saturate(.9)}
.mob-grid .pair{display:grid;grid-template-columns:3fr 2fr;gap:.6rem}
.mob-grid .pair img{height:320px}
.mob-grid .pair img:last-child{object-position:56% 62%}
.mob-grid figcaption{color:#CBBFA9;letter-spacing:.18em;line-height:1.7}
.mob-grid figcaption strong{color:#EDE6DA;font-weight:500}
.mob-grid figcaption span{display:block;font-size:.62rem;letter-spacing:.26em;color:#94886F}

/* ═══════════ PACIFIC NW ═══════════ */
.pnw{padding-bottom:4rem}
.pnw-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:1.6rem}
.pnw-grid figure:nth-child(1){grid-column:span 5;grid-row:span 2}
.pnw-grid figure:nth-child(2){grid-column:span 7}
.pnw-grid figure:nth-child(3){grid-column:span 4}
.pnw-grid figure:nth-child(4){grid-column:span 3}
.pnw-grid img{width:100%;height:100%;min-height:240px;object-fit:cover}
.pnw-grid figure{display:flex;flex-direction:column}
.pnw-grid figcaption{line-height:1.7}
.pnw-grid figcaption strong{font-weight:500;color:var(--ink)}
.pnw-grid figcaption span{display:block;font-size:.6rem;color:var(--gold-ink)}
.tall-card img{min-height:520px}

/* ═══════════ TEAM ═══════════ */
.team{position:relative;padding:2rem 0 7rem;overflow:hidden}
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2.4rem;position:relative;z-index:2}
.member{text-align:center}
.member img{
  width:100%;aspect-ratio:1;object-fit:cover;filter:grayscale(1);
  transition:filter .6s;
}
.member:hover img{filter:grayscale(.2)}
.member h4{
  font-family:var(--serif);font-weight:500;font-size:1.25rem;margin-top:1.2rem;letter-spacing:.04em;
}
.member p{font-size:.72rem;letter-spacing:.16em;color:var(--stone);margin-top:.4rem;text-transform:uppercase;line-height:1.9}

/* ═══════════ CONTACT ═══════════ */
.contact{background:var(--paper);border-top:1px solid rgba(176,141,87,.2)}
.contact-inner{text-align:center;padding-top:7rem;padding-bottom:4rem}
.foot-mark{width:104px;margin:0 auto 2.4rem}
.contact h2{font-size:clamp(2rem,4.4vw,3.2rem);line-height:1.15}
.contact-link{
  display:inline-block;margin-top:2.2rem;font-size:.85rem;letter-spacing:.3em;
  color:var(--gold-ink);border-bottom:1px solid var(--gold);padding-bottom:.35rem;
  transition:letter-spacing .4s var(--ease);
}
.contact-link:hover{letter-spacing:.42em}
.foot-line{width:1px;height:70px;background:var(--gold);margin:4rem auto 2.6rem;opacity:.5}
.foot-word{font-size:.64rem;letter-spacing:.34em;color:var(--stone)}
.foot-copy{font-size:.64rem;color:#A69D8E;margin-top:1rem;padding-bottom:2rem}

/* ═══════════ RESPONSIVE ═══════════ */
@media(max-width:900px){
  .legacy-grid,.project-intro,.feature,.feature.flip{grid-template-columns:1fr;gap:2.4rem}
  .feature.flip .feature-media{order:0}
  .stat-row{grid-template-columns:repeat(2,1fr);gap:2.6rem}
  .duo,.trio{grid-template-columns:1fr;gap:1.2rem}
  .trio img{height:56vw}
  .mob-grid{grid-template-columns:1fr}
  .pnw-grid{display:flex;flex-direction:column}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .nav-links a:not(.nav-cta){display:none}
  .bleed{height:64vh}
  .bleed.tall{height:78vh}
}
.static-mode *,.static-mode *::before,.static-mode *::after{animation:none!important;transition:none!important}
.static-mode .rise,.static-mode .reveal{opacity:1!important;transform:none!important}
.static-mode{scroll-behavior:auto}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .rise,.reveal{opacity:1;transform:none}
  .parallax{inset:0;height:100%}
  html{scroll-behavior:auto}
}