*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --ochre:  #C8902A;
  --clay:   #A04A1A;
  --esp:    #1C0E06;
  --linen:  #F2E8D4;
  --sand:   #D9B880;
  --cream:  #FAF6EE;
  --warm:   #6A3A1A;
  --mid:    #8B6040;
  --off:    #F5F0E6;
  --green:  #3D6B40;
  --lgreen: #6B9B60;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'Jost', sans-serif;
  --ease:  cubic-bezier(0.16, 1, 0.3, 1);
}
html { scroll-behavior: smooth; }
body { background: var(--cream); color: var(--esp); font-family: var(--sans); font-weight: 300; -webkit-font-smoothing: antialiased; overflow-x: hidden; }

/* NAV */
nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 20px 52px; background: rgba(250,246,238,0.93); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(200,144,42,0.1); transition: padding 0.4s var(--ease); }
.nav-logo { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--esp); }
.nav-wm { font-family: var(--sans); font-weight: 200; font-size: 13px; letter-spacing: 0.28em; text-transform: uppercase; }
.nav-links { display: flex; align-items: center; gap: 32px; list-style: none; }
.nav-links a { font-family: var(--sans); font-weight: 300; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; color: var(--warm); transition: color 0.2s; }
.nav-links a:hover { color: var(--ochre); }
.nav-cta { font-family: var(--sans); font-size: 11px; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; color: var(--cream); background: var(--esp); padding: 11px 24px; border-radius: 2px; transition: background 0.25s; }
.nav-cta:hover { background: var(--clay); }

/* HERO */
.hero { min-height: 100vh; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.hero-sky { position: absolute; inset: 0; background: linear-gradient(to bottom, #6fa0c8 0%, #b8c8d8 38%, #d4c0a0 68%, #c4a060 100%); }
.hero-building { position: absolute; bottom: 0; left: 0; right: 0; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(28,14,6,0.08) 0%, rgba(28,14,6,0.0) 32%, rgba(28,14,6,0.52) 68%, rgba(28,14,6,0.84) 100%); }
.grain { position: absolute; inset: 0; pointer-events: none; opacity: 0.04; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 300px; }
.hero-eco-badge { position: absolute; top: 100px; right: 52px; z-index: 4; background: rgba(61,107,64,0.85); backdrop-filter: blur(8px); border: 1px solid rgba(107,155,96,0.5); border-radius: 3px; padding: 12px 18px; display: flex; align-items: center; gap: 10px; opacity: 0; animation: fadeIn 1s ease 1.5s forwards; }
.eco-badge-dot { width: 8px; height: 8px; border-radius: 50%; background: #a0d870; }
.eco-badge-text { font-family: var(--sans); font-size: 9px; font-weight: 400; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(200,240,180,0.9); }
.hero-content { position: relative; z-index: 2; padding: 0 10vw 96px; max-width: 1300px; margin: 0 auto; width: 100%; }
.hero-pill { display: inline-flex; align-items: center; gap: 10px; background: rgba(200,144,42,0.18); border: 1px solid rgba(200,144,42,0.35); border-radius: 40px; padding: 7px 18px; margin-bottom: 28px; font-family: var(--sans); font-size: 10px; font-weight: 400; letter-spacing: 0.25em; text-transform: uppercase; color: var(--sand); opacity: 0; animation: fadeUp 0.9s var(--ease) 0.2s forwards; }
.pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ochre); animation: pulse 2s ease infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(0.7)} }
.hero-h1 { font-family: var(--serif); font-size: clamp(52px, 7.5vw, 108px); font-weight: 300; line-height: 1.0; color: var(--linen); max-width: 800px; opacity: 0; animation: fadeUp 1s var(--ease) 0.4s forwards; }
.hero-h1 em { font-style: italic; color: var(--sand); }
.hero-bottom { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 44px; opacity: 0; animation: fadeUp 1s var(--ease) 0.7s forwards; }
.hero-sub { font-family: var(--sans); font-size: 15px; font-weight: 300; line-height: 1.75; color: rgba(242,232,212,0.72); max-width: 420px; letter-spacing: 0.04em; }
.hero-actions { display: flex; gap: 16px; align-items: center; flex-shrink: 0; }
.btn-primary { font-family: var(--sans); font-size: 11px; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; color: var(--esp); background: var(--ochre); padding: 16px 32px; border-radius: 2px; transition: background 0.25s; }
.btn-primary:hover { background: var(--sand); }
.btn-ghost { font-family: var(--sans); font-size: 11px; font-weight: 300; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; color: rgba(242,232,212,0.6); display: flex; align-items: center; gap: 8px; transition: color 0.25s; }
.btn-ghost:hover { color: var(--sand); }
.btn-ghost::after { content: '→'; transition: transform 0.25s; }
.btn-ghost:hover::after { transform: translateX(4px); }
.hero-stats { position: relative; z-index: 3; display: flex; border-top: 1px solid rgba(242,232,212,0.07); background: rgba(28,14,6,0.68); backdrop-filter: blur(8px); opacity: 0; animation: fadeIn 1s ease 1.1s forwards; }
.hero-stat { flex: 1; padding: 20px 0; text-align: center; border-right: 1px solid rgba(242,232,212,0.07); }
.hero-stat:last-child { border-right: none; }
.hs-num { font-family: var(--serif); font-size: 32px; font-weight: 300; color: var(--linen); line-height: 1; margin-bottom: 4px; }
.hs-label { font-family: var(--sans); font-size: 9px; font-weight: 300; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(217,184,128,0.5); }

/* SHARED */
.container { max-width: 1200px; margin: 0 auto; padding: 0 10vw; }
.eyebrow { font-family: var(--sans); font-size: 9px; font-weight: 400; letter-spacing: 0.4em; text-transform: uppercase; color: var(--ochre); display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.eyebrow::before { content: ''; display: block; width: 24px; height: 1px; background: var(--ochre); }
.eyebrow.green { color: var(--lgreen); }
.eyebrow.green::before { background: var(--lgreen); }

/* WHO */
.forwho { padding: 100px 0 80px; background: var(--cream); }
.forwho-top { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end; margin-bottom: 60px; }
.forwho-h2 { font-family: var(--serif); font-size: clamp(38px, 4.5vw, 60px); font-weight: 300; line-height: 1.08; color: var(--esp); }
.forwho-h2 em { font-style: italic; color: var(--clay); }
.forwho-intro { font-family: var(--sans); font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--warm); }
.forwho-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.who-card { border: 1px solid rgba(200,144,42,0.15); border-radius: 3px; padding: 38px 30px; background: var(--off); position: relative; overflow: hidden; transition: border-color 0.3s, transform 0.3s var(--ease); }
.who-card:hover { border-color: rgba(200,144,42,0.4); transform: translateY(-4px); }
.who-card-num { font-family: var(--serif); font-size: 60px; font-weight: 300; color: rgba(200,144,42,0.07); line-height: 1; position: absolute; top: 14px; right: 18px; }
.who-icon { margin-bottom: 22px; }
.who-tag { font-family: var(--sans); font-size: 9px; font-weight: 500; letter-spacing: 0.35em; text-transform: uppercase; color: var(--ochre); margin-bottom: 10px; }
.who-title { font-family: var(--serif); font-size: 24px; font-weight: 400; color: var(--esp); line-height: 1.2; margin-bottom: 12px; }
.who-body { font-family: var(--sans); font-size: 13px; font-weight: 300; line-height: 1.75; color: var(--warm); }

/* KIDS SAFETY BANNER */
.safety-banner { background: #f9f3e8; border-top: 2px solid rgba(200,144,42,0.2); border-bottom: 2px solid rgba(200,144,42,0.2); padding: 48px 0; }
.safety-inner { display: grid; grid-template-columns: auto 1fr auto; gap: 48px; align-items: center; }
.safety-icon { width: 64px; height: 64px; background: rgba(200,144,42,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.safety-text h3 { font-family: var(--serif); font-size: 28px; font-weight: 400; color: var(--esp); margin-bottom: 8px; }
.safety-text h3 em { font-style: italic; color: var(--clay); }
.safety-text p { font-family: var(--sans); font-size: 14px; font-weight: 300; color: var(--warm); line-height: 1.75; }
.safety-points { display: flex; flex-direction: column; gap: 10px; min-width: 240px; }
.safety-point { display: flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: 12px; font-weight: 300; color: var(--warm); }
.safety-point::before { content: '✓'; color: var(--ochre); font-size: 12px; flex-shrink: 0; }

/* BEDROOMS */
.bedrooms { padding: 100px 0; background: var(--cream); }
.bedrooms-header { text-align: center; margin-bottom: 64px; }
.bedrooms-h2 { font-family: var(--serif); font-size: clamp(36px, 4.5vw, 62px); font-weight: 300; color: var(--esp); line-height: 1.05; }
.bedrooms-h2 em { font-style: italic; color: var(--clay); }
.beds-sub { font-family: var(--sans); font-size: 13px; font-weight: 300; color: var(--mid); margin-top: 14px; letter-spacing: 0.08em; }
.beds-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.bed-card { background: var(--off); border: 1px solid rgba(200,144,42,0.14); border-radius: 4px; padding: 46px 42px; position: relative; overflow: hidden; transition: border-color 0.3s, transform 0.3s var(--ease); }
.bed-card:hover { border-color: rgba(200,144,42,0.35); transform: translateY(-3px); }
.bed-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at top right, rgba(200,144,42,0.05), transparent 60%); opacity: 0; transition: opacity 0.4s; }
.bed-card:hover::before { opacity: 1; }
.bed-num-ghost { font-family: var(--serif); font-size: 90px; font-weight: 300; color: rgba(200,144,42,0.06); line-height: 1; position: absolute; top: 14px; right: 20px; }
.bed-badge { display: inline-flex; align-items: center; gap: 8px; border-radius: 20px; padding: 5px 14px; margin-bottom: 18px; border: 1px solid; }
.bed-badge.master { background: rgba(200,144,42,0.1); border-color: rgba(200,144,42,0.25); }
.bed-badge.annex { background: rgba(61,107,64,0.1); border-color: rgba(61,107,64,0.3); }
.bed-badge.jj { background: rgba(80,80,160,0.08); border-color: rgba(80,80,160,0.2); }
.bed-badge span { font-family: var(--sans); font-size: 9px; font-weight: 400; letter-spacing: 0.3em; text-transform: uppercase; }
.bed-badge.master span { color: var(--ochre); }
.bed-badge.annex span { color: var(--green); }
.bed-badge.jj span { color: #5858b0; }
.bed-name { font-family: var(--serif); font-size: 28px; font-weight: 300; color: var(--esp); line-height: 1.15; margin-bottom: 16px; }
.bed-features { list-style: none; display: flex; flex-direction: column; gap: 9px; margin-top: 18px; }
.bed-features li { font-family: var(--sans); font-size: 13px; font-weight: 300; color: var(--warm); display: flex; gap: 10px; align-items: flex-start; line-height: 1.5; }
.bed-features li::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--ochre); flex-shrink: 0; margin-top: 6px; }
.bed-card.wide { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.jj-diagram { background: rgba(200,144,42,0.04); border: 1px solid rgba(200,144,42,0.12); border-radius: 4px; padding: 32px 24px; margin-top: 24px; }
.jj-rooms { display: flex; align-items: center; gap: 0; }
.jj-room { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 12px; background: var(--cream); border: 1px solid rgba(200,144,42,0.15); border-radius: 3px; position: relative; }
.jj-room-num { font-family: var(--serif); font-size: 36px; font-weight: 300; color: rgba(200,144,42,0.25); line-height: 1; }
.jj-room-name { font-family: var(--sans); font-size: 11px; font-weight: 400; letter-spacing: 0.15em; text-transform: uppercase; color: var(--esp); }
.jj-room-desc { font-family: var(--sans); font-size: 10px; font-weight: 300; color: var(--mid); letter-spacing: 0.08em; }
.jj-door-hint { margin-top: 8px; opacity: 0.7; }
.jj-bath { flex-shrink: 0; width: 88px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 8px; }
.jj-bath-icon { width: 48px; height: 48px; border-radius: 50%; background: rgba(200,144,42,0.08); border: 1px solid rgba(200,144,42,0.2); display: flex; align-items: center; justify-content: center; }
.jj-bath-label { font-family: var(--sans); font-size: 10px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--warm); text-align: center; line-height: 1.4; }
.jj-bath-note { font-family: var(--sans); font-size: 9px; font-weight: 300; color: var(--sand); text-align: center; line-height: 1.4; letter-spacing: 0.05em; }
/* Connecting lines between rooms and bath */
.jj-rooms::before, .jj-rooms::after { display: none; }
.jj-diagram-label { font-family: var(--sans); font-size: 9px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--sand); display: block; text-align: center; margin-top: 14px; }

/* BENTO */
.space { padding: 100px 0; background: var(--off); }
.space-header { margin-bottom: 60px; }
.space-h2 { font-family: var(--serif); font-size: clamp(36px, 4vw, 56px); font-weight: 300; line-height: 1.05; color: var(--esp); margin-bottom: 10px; }
.space-h2 em { font-style: italic; color: var(--clay); }
.space-intro { font-family: var(--sans); font-size: 14px; font-weight: 300; color: var(--warm); line-height: 1.7; max-width: 520px; }
.bento { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: 260px 260px 200px; gap: 8px; }
.bc { border-radius: 4px; overflow: hidden; position: relative; border: 1px solid rgba(200,144,42,0.07); transition: border-color 0.3s; }
.bc:hover { border-color: rgba(200,144,42,0.22); }
.b1{grid-column:1/6;grid-row:1} .b2{grid-column:6/9;grid-row:1} .b3{grid-column:9/13;grid-row:1}
.b4{grid-column:1/5;grid-row:2} .b5{grid-column:5/9;grid-row:2} .b6{grid-column:9/13;grid-row:2}
.b7{grid-column:1/4;grid-row:3} .b8{grid-column:4/8;grid-row:3} .b9{grid-column:8/13;grid-row:3}
.bento-bg { position: absolute; inset: 0; transition: transform 0.6s var(--ease); }
.bc:hover .bento-bg { transform: scale(1.04); }
.bento-inner { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px 22px; }
.b-tag { font-family: var(--sans); font-size: 8px; font-weight: 500; letter-spacing: 0.35em; text-transform: uppercase; color: var(--ochre); margin-bottom: 4px; }
.b-name { font-family: var(--serif); font-size: 20px; font-weight: 300; color: var(--linen); line-height: 1.2; }
.b-note { font-family: var(--sans); font-size: 10px; font-weight: 300; color: rgba(217,184,128,0.55); margin-top: 3px; }
.bg-pool { background: linear-gradient(to bottom, rgba(28,14,6,0) 30%, rgba(28,14,6,0.72) 100%), linear-gradient(135deg, #5090c0 0%, #3468a0 60%, #7ab0d0 100%); }
.bg-pool::after { content:''; position:absolute; inset:0; background: repeating-linear-gradient(-30deg, rgba(255,255,255,0.04) 0, rgba(255,255,255,0.04) 1px, transparent 1px, transparent 18px); animation: shimmer 4s linear infinite; }
@keyframes shimmer { from{background-position:0 0} to{background-position:40px 0} }
.bg-living { background: linear-gradient(to bottom, rgba(28,14,6,0.05) 0%, rgba(28,14,6,0.7) 100%), linear-gradient(160deg, #e8d8b0 0%, #c4a870 50%, #a08040 100%); }
.bg-exterior { background: linear-gradient(to bottom, rgba(28,14,6,0) 20%, rgba(28,14,6,0.72) 100%), linear-gradient(170deg, #88aac8 0%, #b0c4a0 40%, #c8a870 70%, #a07840 100%); }
.bg-gym { background: linear-gradient(to bottom, rgba(28,14,6,0.1) 0%, rgba(28,14,6,0.78) 100%), linear-gradient(135deg, #3a2820 0%, #5a3825 60%, #804828 100%); }
.bg-cowork { background: linear-gradient(to bottom, rgba(28,14,6,0.05) 0%, rgba(28,14,6,0.72) 100%), linear-gradient(135deg, #d4c8a0 0%, #b0a070 50%, #907840 100%); }
.bg-courtyard { background: linear-gradient(to bottom, rgba(28,14,6,0) 0%, rgba(28,14,6,0.75) 100%), linear-gradient(160deg, #b8a880 0%, #d0b870 40%, #a89060 100%); }
.bg-movie { background: linear-gradient(to bottom, rgba(28,14,6,0.12) 0%, rgba(28,14,6,0.85) 100%), linear-gradient(135deg, #0d1b2a 0%, #1b263b 40%, #415a77 100%); }
.bg-play { background: linear-gradient(to bottom, rgba(28,14,6,0) 10%, rgba(28,14,6,0.68) 100%), linear-gradient(135deg, #6baa5e 0%, #4a8040 50%, #2d6028 100%); }
.bg-annex { background: linear-gradient(to bottom, rgba(28,14,6,0) 10%, rgba(28,14,6,0.72) 100%), linear-gradient(135deg, #a0b8c0 0%, #607888 100%); }

/* AMENITIES */
.amenities-section { padding: 90px 0; background: var(--cream); }
.amenities-h2 { font-family: var(--serif); font-size: clamp(30px, 3.5vw, 48px); font-weight: 300; color: var(--esp); margin-bottom: 10px; }
.amenities-h2 em { font-style: italic; color: var(--clay); }
.amenities-intro { font-family: var(--sans); font-size: 14px; font-weight: 300; color: var(--warm); line-height: 1.7; max-width: 440px; margin-bottom: 52px; }
.amenities-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid rgba(200,144,42,0.12); margin-bottom: 2px; }
.amenities-grid + .amenities-grid { border-top: none; }
.ag { padding: 32px 28px; border-right: 1px solid rgba(200,144,42,0.12); }
.ag:last-child { border-right: none; }
.ag-title { font-family: var(--sans); font-size: 9px; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ochre); margin-bottom: 20px; display: flex; align-items: center; gap: 9px; }
.ag-title.eco-title { color: var(--lgreen); }
.ag-list { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.ag-list li { font-family: var(--sans); font-size: 13px; font-weight: 300; color: var(--warm); display: flex; align-items: flex-start; gap: 9px; line-height: 1.4; }
.ag-list li::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--ochre); flex-shrink: 0; margin-top: 6px; }
.ag-list li.eco::before { background: var(--lgreen); }

/* TICKER */
.ticker { padding: 38px 0; background: var(--linen); overflow: hidden; border-top: 1px solid rgba(200,144,42,0.12); border-bottom: 1px solid rgba(200,144,42,0.12); }
.ticker-track { display: flex; width: max-content; animation: ticker 40s linear infinite; }
.ticker-track:hover { animation-play-state: paused; }
@keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.t-item { display: flex; align-items: center; gap: 12px; padding: 0 40px; border-right: 1px solid rgba(200,144,42,0.18); flex-shrink: 0; white-space: nowrap; }
.t-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ochre); }
.t-dot.green { background: var(--lgreen); }
.t-label { font-family: var(--sans); font-size: 11px; font-weight: 300; letter-spacing: 0.2em; text-transform: uppercase; color: var(--warm); }

/* SUSTAINABILITY */
.sustain { padding: 100px 0; background: #0e1a0e; position: relative; overflow: hidden; }
.sustain-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 70% at 30% 50%, rgba(61,107,64,0.2), transparent); }
.sustain-grain { position: absolute; inset: 0; opacity: 0.03; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 300px; }
.sustain-inner { position: relative; z-index: 2; }
.sustain-header { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; margin-bottom: 72px; }
.sustain-h2 { font-family: var(--serif); font-size: clamp(36px, 4.5vw, 60px); font-weight: 300; color: #d0e8c0; line-height: 1.08; }
.sustain-h2 em { font-style: italic; color: #90d070; }
.sustain-intro { font-family: var(--sans); font-size: 15px; font-weight: 300; line-height: 1.8; color: rgba(160,210,140,0.65); }
.sustain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: rgba(107,155,96,0.1); border: 1px solid rgba(107,155,96,0.1); }
.s-card { background: #0e1a0e; padding: 40px 34px; transition: background 0.3s; position: relative; overflow: hidden; }
.s-card:hover { background: #121e12; }
.s-card::before { content:''; position:absolute; inset:0; background: radial-gradient(ellipse at bottom left, rgba(61,107,64,0.12), transparent 60%); opacity:0; transition:opacity 0.4s; }
.s-card:hover::before { opacity: 1; }
.s-icon { margin-bottom: 22px; }
.s-tag { font-family: var(--sans); font-size: 9px; font-weight: 400; letter-spacing: 0.35em; text-transform: uppercase; color: var(--lgreen); margin-bottom: 10px; }
.s-title { font-family: var(--serif); font-size: 26px; font-weight: 300; color: #d0e8c0; line-height: 1.2; margin-bottom: 14px; }
.s-body { font-family: var(--sans); font-size: 13px; font-weight: 300; line-height: 1.75; color: rgba(160,210,140,0.5); }
.s-detail { font-family: var(--sans); font-size: 11px; font-weight: 400; letter-spacing: 0.12em; color: rgba(144,208,112,0.7); margin-top: 14px; padding: 8px 12px; background: rgba(61,107,64,0.15); border-radius: 2px; display: inline-block; }

/* FEEL */
.feel { padding: 100px 0; background: var(--off); }
.feel-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: center; }
.feel-h2 { font-family: var(--serif); font-size: clamp(36px, 4vw, 52px); font-weight: 300; line-height: 1.1; color: var(--esp); margin-bottom: 24px; }
.feel-h2 em { font-style: italic; color: var(--clay); }
.feel-body { font-family: var(--sans); font-size: 14px; font-weight: 300; line-height: 1.85; color: var(--warm); margin-bottom: 14px; }
.feel-list { list-style: none; margin-top: 28px; }
.feel-list li { font-family: var(--sans); font-size: 14px; font-weight: 300; color: var(--esp); padding: 13px 0; border-bottom: 1px solid rgba(200,144,42,0.12); display: flex; gap: 16px; align-items: baseline; }
.feel-list li strong { font-weight: 500; min-width: 130px; }
.feel-list li span { color: var(--warm); }
.feel-cards { display: flex; flex-direction: column; gap: 10px; }
.feel-card { border-radius: 4px; overflow: hidden; position: relative; height: 150px; cursor: default; }
.feel-card:first-child { height: 210px; }
.fcbg { position: absolute; inset: 0; transition: transform 0.5s var(--ease); }
.feel-card:hover .fcbg { transform: scale(1.05); }
.fc1{background:linear-gradient(to right,#88b0d0,#5888b0)} .fc2{background:linear-gradient(135deg,#e8d4a0,#c0a060)} .fc3{background:linear-gradient(135deg,#6baa5e,#3d6b40)}
.fc-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 20%, rgba(28,14,6,0.62) 100%); }
.fc-label { position: absolute; bottom: 14px; left: 18px; font-family: var(--serif); font-size: 19px; font-weight: 300; font-style: italic; color: var(--linen); }
.fc-tag { position: absolute; top: 12px; left: 16px; font-family: var(--sans); font-size: 9px; font-weight: 400; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(217,184,128,0.7); }

/* LOCATION */
.location { padding: 100px 0; background: var(--cream); }
.loc-header { margin-bottom: 52px; }
.loc-h2 { font-family: var(--serif); font-size: clamp(32px, 4vw, 54px); font-weight: 300; line-height: 1.1; color: var(--esp); margin-bottom: 16px; }
.loc-h2 em { font-style: italic; color: var(--clay); }
.loc-body { font-family: var(--sans); font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--warm); max-width: 680px; }
.dist-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 48px; }
.dist-col-title { font-family: var(--sans); font-size: 9px; font-weight: 500; letter-spacing: 0.38em; text-transform: uppercase; color: var(--ochre); padding-bottom: 14px; border-bottom: 1px solid rgba(200,144,42,0.25); margin-bottom: 4px; display: flex; align-items: center; gap: 10px; }
.dist-col-title svg { flex-shrink: 0; }
.dist-table { width: 100%; border-collapse: collapse; }
.dist-table tbody tr { border-bottom: 1px solid rgba(200,144,42,0.07); }
.dist-table tbody tr:hover { background: rgba(200,144,42,0.03); }
.dist-table td { font-family: var(--sans); font-size: 13px; font-weight: 300; padding: 10px 0; color: var(--warm); }
.dist-table td:first-child { color: var(--esp); }
.dist-table td.cat { font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sand); }
.dist-table td.drive { font-family: var(--serif); font-size: 17px; font-weight: 300; color: var(--ochre); text-align: right; white-space: nowrap; }
.map-wrap { border-radius: 6px; overflow: hidden; box-shadow: 0 4px 32px rgba(28,14,6,0.08); }
.map-wrap iframe { display: block; width: 100%; height: 480px; border: 0; }
.map-note { font-family: var(--sans); font-size: 10px; color: var(--sand); letter-spacing: 0.1em; margin-top: 10px; }

/* BOOKING */
.booking { padding: 110px 0; background: var(--esp); position: relative; overflow: hidden; }
.booking-grain { position: absolute; inset: 0; opacity: 0.025; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 300px; }
.booking-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 70% at 25% 50%, rgba(200,144,42,0.07), transparent); }
.booking-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.booking-h2 { font-family: var(--serif); font-size: clamp(34px, 4vw, 56px); font-weight: 300; line-height: 1.1; color: var(--linen); margin-bottom: 22px; }
.booking-h2 em { font-style: italic; color: var(--sand); }
.booking-body { font-family: var(--sans); font-size: 14px; font-weight: 300; line-height: 1.8; color: rgba(242,232,212,0.52); margin-bottom: 12px; }
.booking-form { background: rgba(242,232,212,0.04); border: 1px solid rgba(217,184,128,0.13); border-radius: 4px; padding: 42px; }
.bf-label { font-family: var(--sans); font-size: 9px; font-weight: 400; letter-spacing: 0.35em; text-transform: uppercase; color: var(--sand); margin-bottom: 8px; display: block; }
.bf-input,.bf-select,.bf-textarea { width: 100%; background: rgba(242,232,212,0.06); border: 1px solid rgba(217,184,128,0.13); border-radius: 2px; padding: 12px 16px; font-family: var(--sans); font-size: 13px; font-weight: 300; color: var(--linen); outline: none; margin-bottom: 18px; letter-spacing: 0.05em; transition: border-color 0.25s; }
.bf-input:focus,.bf-select:focus,.bf-textarea:focus { border-color: rgba(200,144,42,0.4); }
.bf-input::placeholder,.bf-textarea::placeholder { color: rgba(217,184,128,0.22); }
.bf-select { cursor: pointer; -webkit-appearance: none; color: rgba(217,184,128,0.45); }
.bf-select option { background: var(--esp); color: var(--linen); }
.bf-textarea { height: 84px; resize: none; }
.bf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bf-submit { width: 100%; padding: 16px; background: var(--ochre); border: none; border-radius: 2px; cursor: pointer; font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.25em; text-transform: uppercase; color: var(--esp); transition: background 0.25s; margin-top: 4px; }
.bf-submit:hover { background: var(--sand); }
.bf-note { font-family: var(--sans); font-size: 10px; font-weight: 300; color: rgba(217,184,128,0.26); text-align: center; margin-top: 10px; letter-spacing: 0.1em; }

/* FOOTER */
footer { background: #110804; padding: 60px 10vw 40px; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 48px; border-bottom: 1px solid rgba(217,184,128,0.07); }
.footer-brand-name { font-family: var(--sans); font-weight: 200; font-size: 13px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--linen); margin: 14px 0 8px; }
.footer-tagline { font-family: var(--serif); font-size: 15px; font-style: italic; color: var(--sand); font-weight: 300; }
.footer-col h4 { font-family: var(--sans); font-size: 9px; font-weight: 400; letter-spacing: 0.35em; text-transform: uppercase; color: var(--ochre); margin-bottom: 18px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.footer-col ul li a { font-family: var(--sans); font-size: 13px; font-weight: 300; color: rgba(217,184,128,0.36); text-decoration: none; transition: color 0.25s; }
.footer-col ul li a:hover { color: var(--sand); }
.footer-col address { font-style: normal; font-family: var(--sans); font-size: 12px; font-weight: 300; line-height: 1.9; color: rgba(217,184,128,0.3); }
.footer-bottom { padding-top: 26px; display: flex; align-items: center; justify-content: space-between; }
.footer-bottom p { font-family: var(--sans); font-size: 10px; font-weight: 300; color: rgba(217,184,128,0.17); letter-spacing: 0.12em; }

/* ANIMATIONS */
@keyframes fadeUp { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.rd1{transition-delay:.1s} .rd2{transition-delay:.2s} .rd3{transition-delay:.3s} .rd4{transition-delay:.4s}

/* RESPONSIVE */
@media (max-width: 960px) {
  nav { padding: 16px 24px; }
  .nav-links { display: none; }
  .container { padding: 0 24px; }
  .hero-content { padding: 0 24px 180px; }
  .hero-h1 { font-size: 44px; }
  .hero-bottom { flex-direction: column; align-items: flex-start; gap: 22px; }
  .hero-eco-badge { display: none; }
  .forwho-top,.forwho-cards,.beds-grid,.sustain-grid,.feel-inner,.booking-inner,.footer-top { grid-template-columns: 1fr; }
  .dist-cols { grid-template-columns: 1fr; gap: 0; }
  .bed-card.wide { grid-column: 1; display: block; }
  .bento { display: flex; flex-direction: column; }
  .bc { height: 200px; }
  .b1 { height: 260px; }
  .amenities-grid { grid-template-columns: 1fr 1fr; }
  .ag { border-right: none; border-bottom: 1px solid rgba(200,144,42,0.12); }
  .safety-inner { grid-template-columns: 1fr; }
  .sustain-header { grid-template-columns: 1fr; gap: 28px; }
}