:root{
  --black:#0a0a0d;
  --near-black:#111116;
  --panel:#17171d;
  --ink:#f3f1ec;
  --ink-dim:#b9b7c2;
  --gold:#e8c77a;
  --green:#00D26A;
  --blue:#3B2FE0;
  --yellow:#FFD600;
  --red:#E53935;
  --serif:'Playfair Display', Georgia, serif;
  --sans:'Inter', -apple-system, Segoe UI, sans-serif;
  --am:'Noto Sans Ethiopic', var(--sans);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--black); color:var(--ink); font-family:var(--sans); line-height:1.5; overflow-x:hidden;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}

/* ---------- Header ---------- */
header{position:fixed; top:0; left:0; right:0; z-index:100; padding:22px 0; background:rgba(10,10,13,.92);}
header .wrap{display:flex; align-items:center; justify-content:space-between;}
.brand{display:flex; align-items:center; gap:12px; font-family:var(--sans); font-weight:600; letter-spacing:.14em; font-size:14px;}
.dots{display:flex; gap:5px;}
.dots span{width:7px; height:7px; border-radius:50%; display:inline-block;}
.dots span:nth-child(1){background:var(--green);}
.dots span:nth-child(2){background:var(--blue);}
.dots span:nth-child(3){background:var(--yellow);}
.dots span:nth-child(4){background:var(--red);}
nav{display:flex; gap:36px; font-size:13px; letter-spacing:.08em; color:var(--ink-dim);}
nav a:hover{color:var(--ink);}
nav a.active{color:var(--ink);}
.nav-lease{color:var(--gold) !important;}
.nav-signin{border:1px solid rgba(243,241,236,.3); padding:8px 16px; border-radius:999px; font-size:12px; letter-spacing:.06em; color:var(--ink) !important; white-space:nowrap;}
.nav-signin:hover{border-color:var(--gold); color:var(--gold) !important;}

/* ---------- Hero (homepage full hero) ---------- */
.hero{position:relative; min-height:100vh; display:flex; align-items:center;}
.hero-media{position:absolute; inset:0; z-index:0;}
.hero-media img{width:100%; height:100%; object-fit:cover; opacity:.55;}
.hero-media::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,13,.55) 0%, rgba(10,10,13,.35) 35%, rgba(10,10,13,.92) 92%), linear-gradient(90deg, rgba(10,10,13,.95) 0%, rgba(10,10,13,.2) 55%);}
.hero-content{position:relative; z-index:1; padding-top:120px;}
.kicker{display:flex; align-items:center; gap:14px; font-size:12px; letter-spacing:.22em; color:var(--gold); margin-bottom:26px;}
.kicker::before{content:''; width:34px; height:1px; background:var(--gold);}
h1.headline{font-family:var(--serif); font-weight:500; font-size:clamp(44px, 8vw, 96px); line-height:.98; color:var(--ink);}
h1.headline em{font-style:italic; color:var(--gold); font-weight:500; display:block;}
.promise{max-width:520px; font-size:17px; color:var(--ink-dim); margin:28px 0 40px; font-weight:400;}
.promise b{color:var(--ink); font-weight:600;}
.cta-row{display:flex; gap:18px; flex-wrap:wrap;}
.btn{display:inline-flex; align-items:center; gap:10px; padding:15px 28px; font-size:13px; letter-spacing:.06em; font-weight:600; border-radius:2px; transition:all .2s ease;}
.btn-primary{background:var(--blue); color:#fff;}
.btn-primary:hover{background:#4f42ff;}
.btn-ghost{border:1px solid rgba(243,241,236,.3); color:var(--ink);}
.btn-ghost:hover{border-color:var(--ink); background:rgba(255,255,255,.05);}

/* ---------- Sub-page hero (shorter, for interior pages) ---------- */
.page-hero{position:relative; min-height:56vh; display:flex; align-items:flex-end; padding-bottom:70px;}
.page-hero .hero-content{padding-top:160px;}
.page-hero h1.headline{font-size:clamp(38px, 6vw, 68px);}

/* ---------- Section shell ---------- */
section{position:relative; padding:120px 0;}
.eyebrow{font-size:12px; letter-spacing:.2em; color:var(--gold); margin-bottom:18px; font-weight:600;}
h2.section-title{font-family:var(--serif); font-weight:500; font-size:clamp(30px,4vw,46px); max-width:620px; margin-bottom:20px;}
.section-lede{color:var(--ink-dim); max-width:560px; font-size:16px; margin-bottom:64px;}
.am{font-family:var(--am); color:var(--ink-dim); font-size:14px; display:block; margin-top:4px; font-weight:400;}

/* ---------- Story strip ---------- */
.story-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:rgba(255,255,255,.08); border-top:1px solid rgba(255,255,255,.08);}
.story-card{background:var(--black); padding:44px 36px; position:relative;}
.story-card::before{content:''; position:absolute; top:0; left:0; right:0; height:2px;}
.story-card:nth-child(1)::before{background:var(--green);}
.story-card:nth-child(2)::before{background:var(--blue);}
.story-card:nth-child(3)::before{background:var(--yellow);}
.story-num{font-family:var(--serif); font-style:italic; font-size:15px; color:var(--gold); margin-bottom:20px; display:block;}
.story-card h3{font-family:var(--serif); font-weight:500; font-size:24px; margin-bottom:14px;}
.story-card p{color:var(--ink-dim); font-size:14.5px;}

/* ---------- Offering (homepage 4-up teaser) ---------- */
.offer-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:24px;}
.offer-card{border:1px solid rgba(255,255,255,.1); padding:32px 24px; transition:border-color .2s ease, transform .2s ease;}
.offer-card:hover{border-color:rgba(232,199,122,.5); transform:translateY(-3px);}
.offer-index{font-size:12px; color:var(--ink-dim); letter-spacing:.1em; margin-bottom:22px;}
.offer-card h3{font-family:var(--serif); font-weight:500; font-size:19px; margin-bottom:10px;}
.offer-card p{color:var(--ink-dim); font-size:13.5px;}
.offer-cta{margin-top:56px; display:flex; justify-content:center;}

/* ---------- Portfolio (full catalog grid, offering.html) ---------- */
.portfolio-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08);}
.portfolio-card{background:var(--black); padding:38px 32px;}
.portfolio-index{font-family:var(--serif); font-style:italic; color:var(--gold); font-size:15px; margin-bottom:18px; display:block;}
.portfolio-card h3{font-family:var(--serif); font-weight:500; font-size:20px; margin-bottom:12px;}
.portfolio-card p{color:var(--ink-dim); font-size:13.5px; margin-bottom:16px;}
.portfolio-tag{display:inline-block; font-size:11px; letter-spacing:.06em; color:var(--ink-dim); border:1px solid rgba(255,255,255,.15); padding:5px 10px; border-radius:999px;}

/* ---------- Experience teaser (no photography yet — pattern-led) ---------- */
.experience{background:var(--panel); overflow:hidden;}
.exp-inner{position:relative; display:flex; align-items:center; gap:80px;}
.exp-numeral{font-family:var(--serif); font-style:italic; font-size:clamp(120px,20vw,260px); line-height:1; color:rgba(232,199,122,.12); font-weight:600; position:absolute; right:-20px; top:50%; transform:translateY(-50%); z-index:0; pointer-events:none;}
.exp-text{position:relative; z-index:1; max-width:560px;}
.exp-tags{display:flex; gap:10px; flex-wrap:wrap; margin-top:28px;}
.exp-tag{font-size:12px; padding:8px 16px; border:1px solid rgba(255,255,255,.15); border-radius:999px; color:var(--ink-dim);}

/* ---------- Location ---------- */
.loc-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start;}
.loc-list{list-style:none;}
.loc-list li{padding:20px 0; border-bottom:1px solid rgba(255,255,255,.08); display:flex; gap:16px; align-items:baseline;}
.loc-list li span.dot{width:6px; height:6px; border-radius:50%; background:var(--gold); flex-shrink:0; transform:translateY(-3px);}
.loc-list li b{font-family:var(--serif); font-size:17px; font-weight:500;}
.loc-list li small{display:block; color:var(--ink-dim); font-size:13px; margin-top:2px;}
.map-box{border:1px solid rgba(255,255,255,.12); min-height:280px; display:flex; align-items:center; justify-content:center; text-align:center; padding:32px; background:repeating-linear-gradient(135deg, rgba(255,255,255,.02) 0 2px, transparent 2px 14px);}
.map-box p{color:var(--ink-dim); font-size:13px; max-width:260px;}

/* ---------- Leasing invitation ---------- */
.lease{background:var(--panel);}
.lease-grid{display:grid; grid-template-columns:1fr 1fr; gap:70px;}
form{display:grid; gap:18px;}
.field label{display:block; font-size:12px; letter-spacing:.08em; color:var(--ink-dim); margin-bottom:8px; text-transform:uppercase;}
.field input, .field select, .field textarea{width:100%; background:var(--black); border:1px solid rgba(255,255,255,.15); color:var(--ink); padding:13px 14px; font-family:var(--sans); font-size:14px; border-radius:2px;}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--gold);}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
form button{margin-top:6px;}

/* ---------- Footer ---------- */
footer{padding:70px 0 40px; border-top:1px solid rgba(255,255,255,.08);}
.footer-top{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:40px; margin-bottom:50px;}
.footer-brand p{color:var(--ink-dim); font-size:13.5px; max-width:320px; margin-top:14px;}
.palette-strip{display:flex; height:4px; width:160px; border-radius:2px; overflow:hidden; margin-top:20px;}
.palette-strip span{flex:1;}
.footer-links{display:flex; gap:60px; flex-wrap:wrap;}
.footer-col h4{font-size:12px; letter-spacing:.1em; color:var(--ink-dim); margin-bottom:16px; text-transform:uppercase;}
.footer-col a{display:block; font-size:14px; margin-bottom:10px; color:var(--ink-dim);}
.footer-col a:hover{color:var(--ink);}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; padding-top:30px; border-top:1px solid rgba(255,255,255,.06); font-size:12.5px; color:var(--ink-dim);}
.platform-link{opacity:.6; font-size:12px;}
.platform-link:hover{opacity:1;}

@media (max-width:900px){
  .story-grid{grid-template-columns:1fr;}
  .offer-grid{grid-template-columns:1fr 1fr;}
  .portfolio-grid{grid-template-columns:1fr;}
  .loc-grid, .lease-grid, .exp-inner{grid-template-columns:1fr; gap:36px;}
  .field-row{grid-template-columns:1fr;}
  nav{display:none;}
  section{padding:80px 0;}
}