:root{
  --cream:#F5F3EE;
  --cream-deep:#ECE7DC;
  --teal:#1B4452;
  --teal-deep:#12313C;
  --terracotta:#C7752F;
  --terracotta-deep:#A85F22;
  --ink:#23260F;
  --ink-soft:#3E3F2C;
  --white:#FFFFFF;
  --line: rgba(35,38,15,0.14);
  --line-on-teal: rgba(245,243,238,0.22);
  --gold:#E4A468;
  --ease: cubic-bezier(.16,.84,.24,1);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:'Work Sans', sans-serif; font-weight:400;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  cursor:auto;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
h1,h2,h3{ font-family:'Fraunces', serif; font-weight:500; margin:0; letter-spacing:-0.01em; color:var(--ink); }
p{ margin:0; line-height:1.7; }
.container{ max-width:1280px; margin:0 auto; padding:0 44px; }
@media(max-width:720px){ .container{padding:0 22px;} }
button{ font-family:'Work Sans', sans-serif; cursor:pointer; border:none; background:none; }
.icon-hidden{ display:none; }

/* -------- custom cursor -------- */
.cursor-dot, .cursor-ring{ position:fixed; top:0; left:0; pointer-events:none; z-index:9999; border-radius:50%; transform:translate(-50%,-50%); }
.cursor-dot{ width:6px; height:6px; background:var(--terracotta); transition:opacity .2s; }
.cursor-ring{ width:34px; height:34px; border:1px solid rgba(199,117,47,0.5); transition:transform .18s var(--ease), opacity .2s, width .25s, height .25s, background .25s; }
.cursor-ring.big{ width:64px; height:64px; background:rgba(199,117,47,0.08); }
@media(hover:none), (pointer:coarse){ .cursor-dot,.cursor-ring{ display:none; } }

/* -------- scroll progress -------- */
.scroll-progress{ position:fixed; top:0; left:0; height:2px; background:var(--terracotta); z-index:200; width:0%; }

/* -------- buttons -------- */
.btn-primary, .btn-outline{
  display:inline-flex; align-items:center; gap:10px; padding:16px 30px; font-size:14.5px;
  letter-spacing:0.02em; border-radius:100px; position:relative;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  white-space:nowrap;
}
.btn-primary{ background:var(--terracotta); color:var(--white); }
.btn-primary:hover{ background:var(--terracotta-deep); }
.btn-outline{ background:transparent; color:var(--white); border:1px solid rgba(255,255,255,0.55); }
.btn-outline:hover{ border-color:#fff; background:rgba(255,255,255,0.08); }
.btn-primary.full{ width:100%; justify-content:center; margin-top:10px; }

/* -------- header -------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:100; padding:28px 0;
  transition: background .4s var(--ease), padding .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
header.solid{ background:rgba(245,243,238,0.9); backdrop-filter: blur(12px); padding:16px 0; border-color:var(--line); }
.header-row{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.logo-link{ position:relative; display:inline-block; }
.logo-mark{ height:72px; transition:height .4s var(--ease), opacity .4s var(--ease); display:block; }
header.solid .logo-mark{ height:58px; }
.logo-mark.logo-on-light{ position:absolute; top:0; left:0; opacity:0; }
.logo-mark.logo-on-dark{ opacity:1; }
header.solid .logo-mark.logo-on-dark{ opacity:0; }
header.solid .logo-mark.logo-on-light{ opacity:1; position:relative; }
nav.main-nav{ display:flex; gap:36px; }
nav.main-nav a{ font-size:14px; letter-spacing:0.02em; color:rgba(255,255,255,0.92); position:relative; padding-bottom:4px; transition:color .35s var(--ease); }
header.solid nav.main-nav a{ color:var(--ink-soft); }
nav.main-nav a::after{ content:''; position:absolute; left:0; right:100%; bottom:0; height:1px; background:currentColor; transition:right .35s var(--ease); }
nav.main-nav a:hover::after{ right:0; }
.header-actions{ display:flex; align-items:center; gap:22px; }
.lang-switch{ display:flex; align-items:center; gap:7px; font-size:12.5px; letter-spacing:0.03em; color:rgba(255,255,255,0.85); transition:color .4s var(--ease); }
header.solid .lang-switch{ color:var(--ink-soft); }
.lang-switch button{ padding:2px 3px; color:inherit; opacity:.5; transition:opacity .25s; }
.lang-switch button.active{ opacity:1; font-weight:600; }
.lang-switch .div{ opacity:.35; font-size:11px; }
.nav-toggle{ display:none; width:26px; height:20px; position:relative; }
.nav-toggle span{ position:absolute; left:0; right:0; height:1.5px; background:#fff; transition:.3s; }
header.solid .nav-toggle span{ background:var(--ink); }
.nav-toggle span:nth-child(1){ top:0; } .nav-toggle span:nth-child(2){ top:9px; } .nav-toggle span:nth-child(3){ top:18px; }
@media(max-width:960px){
  nav.main-nav{
    position:fixed; top:0; right:0; height:100vh; width:78%; max-width:340px; background:var(--cream);
    flex-direction:column; justify-content:center; padding:0 44px; gap:26px;
    transform:translateX(100%); transition:transform .5s var(--ease); box-shadow:-20px 0 60px rgba(0,0,0,0.15);
  }
  nav.main-nav.open{ transform:translateX(0); }
  nav.main-nav a{ color:var(--ink); font-size:19px; }
  .header-actions .btn-primary{ display:none; }
  .nav-toggle{ display:block; z-index:110; }
}

/* -------- hero -------- */
.hero{ position:relative; height:100vh; min-height:680px; display:flex; align-items:flex-end; overflow:hidden; }
.hero-media{ position:absolute; inset:0; }
.hero-media img{ width:100%; height:100%; object-fit:cover; transform:scale(1.1); animation: heroZoom 11s var(--ease) forwards; }
@keyframes heroZoom{ to{ transform:scale(1); } }
.hero-media::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,20,16,0.15) 0%, rgba(12,16,12,0.1) 30%, rgba(10,14,10,0.68) 88%, rgba(9,12,9,0.8) 100%); }
.hero-grain{ position:absolute; inset:0; opacity:.04; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%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)'/%3E%3C/svg%3E"); mix-blend-mode:overlay; }
.hero-content{ position:relative; z-index:2; width:100%; padding-bottom:100px; color:var(--white); }
.hero-eyebrow{ font-size:14.5px; letter-spacing:0.08em; color:rgba(255,255,255,0.85); margin-bottom:22px; }
.hero-title{ font-size:clamp(64px, 12vw, 156px); line-height:0.92; font-weight:500; }
.hero-title .line{ display:block; overflow:hidden; }
.reveal-word{ display:inline-block; color:#fff; transform:translateY(105%); animation:wordUp 1s var(--ease) forwards; }
.hero-title .line:nth-child(2) .reveal-word:nth-child(2){ animation-delay:.08s; }
.hero-title .line:nth-child(1) .reveal-word{ animation-delay:0s; }
.reveal-word.accent{ color:var(--gold); font-style:italic; }
@keyframes wordUp{ to{ transform:translateY(0); } }
.hero-sub{ max-width:520px; margin-top:30px; font-size:17.5px; color:rgba(255,255,255,0.88); }
.hero-cta{ display:flex; gap:16px; margin-top:42px; flex-wrap:wrap; }
.reveal-up{ opacity:0; transform:translateY(24px); animation:riseIn 1s var(--ease) forwards; animation-delay:.5s; }
.hero-cta.reveal-up{ animation-delay:.75s; }
@keyframes riseIn{ to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce){
  .hero-media img{ animation:none; transform:none; }
  .reveal-word,.reveal-up{ animation:none; opacity:1; transform:none; }
  .reveal{ transition:none !important; opacity:1 !important; transform:none !important; }
}
.scroll-cue{ position:absolute; right:44px; bottom:40px; z-index:2; display:flex; flex-direction:column-reverse; align-items:center; gap:12px; color:rgba(255,255,255,0.75); font-size:12px; letter-spacing:0.08em; }
.scroll-cue .line{ width:1px; height:50px; background:rgba(255,255,255,0.4); position:relative; overflow:hidden; }
.scroll-cue .line::after{ content:''; position:absolute; top:-100%; left:0; right:0; height:100%; background:#fff; animation:scrollLine 2.2s ease-in-out infinite; }
@keyframes scrollLine{ 0%{top:-100%;} 60%{top:100%;} 100%{top:100%;} }
@media(max-width:720px){ .scroll-cue{ display:none; } }

/* -------- marquee -------- */
.marquee-strip{ background:var(--ink); overflow:hidden; padding:22px 0; white-space:nowrap; }
.marquee-track{ display:inline-flex; gap:22px; animation:marquee 26s linear infinite; will-change:transform; }
.marquee-track span{ font-family:'Fraunces', serif; font-style:italic; font-size:22px; color:var(--cream); letter-spacing:0.01em; }
.marquee-track span.dot{ color:var(--terracotta); font-style:normal; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* -------- manifesto -------- */
.manifesto{ padding:150px 0 120px; }
.section-tag{ font-size:13.5px; letter-spacing:0.1em; color:var(--terracotta-deep); margin-bottom:24px; font-weight:600; }
.manifesto-text{ font-family:'Fraunces', serif; font-size:clamp(30px,4.4vw,54px); line-height:1.28; max-width:1000px; color:var(--ink); font-weight:400; }
.manifesto-stats{ display:flex; gap:0; margin-top:90px; border-top:1px solid var(--line); padding-top:44px; flex-wrap:wrap; }
.m-stat{ flex:1; min-width:180px; padding-right:40px; }
.m-num{ font-family:'Fraunces', serif; font-size:clamp(46px,5vw,68px); color:var(--teal); font-weight:500; line-height:1; }
.m-label{ font-size:14px; color:var(--ink-soft); margin-top:12px; max-width:220px; }

/* -------- residence (pinned scrollytelling) -------- */
.residence{ position:relative; background:var(--cream-deep); }
.residence-pin{ position:sticky; top:0; height:100vh; overflow:hidden; }
.residence-media{ position:absolute; inset:0; }
.r-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .7s var(--ease); }
.r-img.active{ opacity:1; }
.residence-media::after{ content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(8,11,8,0.78) 0%, rgba(8,11,8,0.35) 45%, rgba(8,11,8,0.05) 70%); }
.residence-steps{ position:relative; z-index:2; margin-top:-100vh; padding:0 0 0; }
.r-step{
  min-height:100vh; display:flex; flex-direction:column; justify-content:center; max-width:460px;
  padding:0 60px; color:#fff; opacity:.25; transition:opacity .5s var(--ease);
}
.r-step.active{ opacity:1; }
.r-index{ font-family:'Fraunces', serif; font-size:15px; color:var(--gold); letter-spacing:0.1em; margin-bottom:18px; display:block; }
.r-step h3{ color:#fff; font-size:clamp(28px,3.4vw,42px); line-height:1.15; text-shadow:0 2px 20px rgba(0,0,0,0.35); }
.r-step p{ color:rgba(255,255,255,0.85); font-size:16px; margin-top:16px; max-width:400px; text-shadow:0 1px 12px rgba(0,0,0,0.3); }
.residence > .section-tag{ position:relative; z-index:2; margin:0 0 0 60px; padding-top:70px; color:var(--gold); }
@media(max-width:900px){
  .residence-pin{ position:relative; height:60vh; }
  .residence-steps{ margin-top:0; }
  .r-step{ min-height:auto; padding:60px 22px; color:var(--ink); opacity:1; }
  .r-step h3{ color:var(--ink); }
  .r-step p{ color:var(--ink-soft); }
  .residence > .section-tag{ margin:0; padding:60px 22px 0; color:var(--terracotta-deep); }
  .r-index{ color:var(--terracotta-deep); }
}

/* -------- horizontal gallery -------- */
.hgallery{ padding:140px 0 110px; overflow:hidden; }
.hgallery-head{ margin-bottom:50px; display:flex; align-items:flex-end; gap:24px; flex-wrap:wrap; }
.hgallery-head h2{ font-size:clamp(30px,3.6vw,44px); margin-top:10px; flex:1; min-width:240px; }
.hgallery-hint{ font-size:13.5px; color:var(--ink-soft); padding-bottom:6px; }
.hgallery-track{ display:flex; gap:22px; overflow-x:auto; padding:0 44px 20px; scroll-snap-type:x proximity; cursor:grab; scrollbar-width:none; }
.hgallery-track::-webkit-scrollbar{ display:none; }
.hgallery-track.dragging{ cursor:grabbing; scroll-snap-type:none; }
.hg-item{ position:relative; flex:none; width:min(72vw,420px); aspect-ratio:4/5; overflow:hidden; scroll-snap-align:start; background:var(--cream-deep); }
.hg-item img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); user-select:none; -webkit-user-drag:none; }
.hg-item:hover img{ transform:scale(1.05); }
.hg-cap{ position:absolute; left:18px; bottom:16px; color:#fff; font-size:13.5px; letter-spacing:0.03em; padding:6px 14px; background:rgba(10,14,10,0.45); backdrop-filter:blur(6px); border-radius:100px; }

/* -------- video -------- */
.video-section{ position:relative; height:88vh; min-height:520px; overflow:hidden; }
.video-section video{ width:100%; height:100%; object-fit:cover; }
.video-overlay-content{ position:absolute; left:0; right:0; bottom:60px; z-index:2; pointer-events:none; }
.video-overlay-content h3{ color:#fff; font-size:clamp(26px,3.6vw,44px); max-width:640px; text-shadow:0 2px 24px rgba(0,0,0,0.35); }
.video-controls{ position:absolute; right:32px; bottom:32px; display:flex; gap:10px; z-index:3; }
.video-ctrl-btn{ width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,0.5); color:#fff; display:flex; align-items:center; justify-content:center; transition:.3s; background:rgba(10,14,10,0.25); backdrop-filter:blur(6px); }
.video-ctrl-btn:hover{ background:rgba(255,255,255,0.15); border-color:#fff; }
.video-ctrl-btn svg{ width:18px; height:18px; }

/* -------- location -------- */
.location{ background:var(--teal-deep); color:var(--cream); padding:140px 0; }
.location-grid{ display:grid; grid-template-columns:0.95fr 1.05fr; gap:80px; align-items:center; }
.location h2{ color:var(--cream); font-size:clamp(30px,3.8vw,46px); line-height:1.16; margin-top:6px; }
.location .section-tag{ color:var(--gold); }
.location-copy > p{ color:rgba(245,243,238,0.82); font-size:16.5px; margin-top:24px; max-width:460px; }
.location-list{ list-style:none; margin:36px 0 0; padding:0; max-width:440px; }
.location-list li{ display:flex; justify-content:space-between; padding:15px 0; border-bottom:1px solid var(--line-on-teal); font-size:15px; color:rgba(245,243,238,0.9); }
.location-list li b{ color:var(--gold); font-weight:600; }
.location-address{ margin-top:26px; font-size:13px; color:rgba(245,243,238,0.55); letter-spacing:0.02em; max-width:420px; }
.location-frame{ position:relative; overflow:hidden; aspect-ratio:4/3.3; }
.location-frame img{ width:100%; height:100%; object-fit:cover; }
@media(max-width:900px){ .location-grid{ grid-template-columns:1fr; gap:44px; } }

/* -------- contact -------- */
.contact{ background:var(--cream); padding:140px 0; }
.contact-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:80px; }
.contact h2{ font-size:clamp(30px,3.6vw,44px); max-width:420px; line-height:1.16; margin-top:6px; }
.contact-info{ margin-top:32px; }
.contact-info div{ margin-bottom:20px; }
.contact-info .label{ display:block; font-size:12.5px; letter-spacing:0.03em; color:var(--ink-soft); opacity:.65; margin-bottom:5px; }
.contact-info .value{ font-size:16.5px; color:var(--ink); }
.contact-info a.value:hover{ color:var(--terracotta); }
.rform{ display:flex; flex-direction:column; gap:8px; max-width:480px; }
.field{ position:relative; }
.field label{ position:absolute; left:0; top:16px; font-size:15.5px; color:var(--ink-soft); opacity:.55; pointer-events:none; transition:.25s var(--ease); }
.field input{ width:100%; background:transparent; border:none; border-bottom:1px solid var(--line); color:var(--ink); font-family:'Work Sans'; font-size:15.5px; padding:16px 0 12px; outline:none; transition:border-color .3s; }
.field input:focus{ border-color:var(--terracotta); }
.field input:focus + label, .field input:not(:placeholder-shown) + label{ top:-4px; font-size:11.5px; color:var(--terracotta-deep); opacity:1; }
.form-note{ font-size:12.5px; color:var(--ink-soft); opacity:.55; margin-top:10px; }
@media(max-width:900px){ .contact-grid{ grid-template-columns:1fr; gap:50px; } }

/* -------- footer -------- */
footer{ background:var(--ink); color:rgba(245,243,238,0.6); padding:44px 0; }
.footer-row{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.footer-logo{ height:28px; opacity:0.92; }
.footer-row span{ font-size:13px; }

/* -------- reveal utility -------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }