@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --ink: #1e2928;
  --muted: #66716e;
  --paper: #f4f1ea;
  --paper-dark: #e7e3da;
  --pine: #193b38;
  --pine-deep: #112c2a;
  --orange: #d76943;
  --blue: #a9c8c9;
  --line: rgba(30, 41, 40, .16);
  --sans: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --mono: "DM Mono", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); line-height: 1.55; }
a { color: inherit; }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 20; padding: .75rem 1rem; background: var(--orange); color: #fff; text-decoration: none; }
.skip-link:focus { top: 1rem; }

.site-header { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1.25rem clamp(1.25rem, 4vw, 4rem); background: var(--paper); border-bottom: 1px solid var(--line); }
.wordmark { display: flex; align-items: center; gap: .8rem; text-decoration: none; }
.wordmark-mark { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--orange); color: #fff; font-family: var(--mono); font-size: .78rem; }
.wordmark-copy { font-size: .78rem; font-weight: 700; line-height: 1.15; letter-spacing: .03em; text-transform: uppercase; }
.wordmark-copy em { color: var(--muted); font-size: .68rem; font-style: normal; font-weight: 500; }
.main-nav { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); font-size: .82rem; font-weight: 700; }
.main-nav a { text-decoration: none; }
.nav-button { padding: .7rem 1rem; border: 1px solid var(--ink); border-radius: 999px; }

.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .95fr); min-height: min(720px, calc(100vh - 80px)); }
.hero-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(4rem, 8vw, 8rem) clamp(1.25rem, 7vw, 7rem); }
.eyebrow { margin: 0 0 1.25rem; color: var(--orange); font-family: var(--mono); font-size: .7rem; font-weight: 500; letter-spacing: .1em; line-height: 1.2; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-weight: 700; letter-spacing: -.055em; line-height: .98; }
h1 { max-width: 680px; margin-bottom: 2rem; font-size: clamp(3.6rem, 8vw, 7.3rem); }
h1 span { color: var(--pine); }
.hero-intro { max-width: 510px; margin-bottom: 2.2rem; color: var(--muted); font-size: clamp(1rem, 1.4vw, 1.2rem); }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1.25rem 1.7rem; }
.button { display: inline-flex; align-items: center; gap: .9rem; padding: .9rem 1.25rem; border: 1px solid transparent; border-radius: 999px; font-size: .8rem; font-weight: 800; text-decoration: none; transition: transform .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--orange); color: #fff; }
.button-dark { background: var(--ink); color: #fff; }
.button-light { background: var(--paper); color: var(--ink); }
.text-link { font-size: .82rem; font-weight: 800; text-decoration: none; }
.text-link span { color: var(--orange); margin-left: .25rem; }
.hero-photo { min-height: 560px; margin: 0; overflow: hidden; background: #c8c0b4; }
.hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 46% center; }

.placeholder { position: relative; overflow: hidden; background-color: #b0b9b2; color: rgba(255,255,255,.9); }
.placeholder::before, .placeholder::after { position: absolute; content: ""; pointer-events: none; }
.placeholder::before { inset: 0; background: linear-gradient(135deg, rgba(25,59,56,.2), transparent 45%), repeating-linear-gradient(118deg, transparent 0 45px, rgba(255,255,255,.08) 46px 47px); }
.placeholder::after { width: 62%; height: 75%; right: -4%; bottom: -20%; border-radius: 55% 0 0 0; background: rgba(25,59,56,.22); transform: rotate(-8deg); }
.placeholder-hero { background: linear-gradient(142deg, #9aada8, #738a86 54%, #4d6c68); }
.placeholder-hero::after { width: 75%; height: 45%; bottom: -8%; background: rgba(235,232,219,.3); transform: rotate(-5deg); }
.placeholder-label, .placeholder-caption { position: absolute; z-index: 1; left: 1.5rem; font-family: var(--mono); font-size: .64rem; letter-spacing: .05em; text-transform: uppercase; }
.placeholder-label { top: 1.5rem; padding: .4rem .55rem; border: 1px solid rgba(255,255,255,.5); border-radius: 999px; }
.placeholder-caption { right: 1.5rem; bottom: 1.5rem; max-width: 230px; line-height: 1.35; text-align: right; text-transform: none; }
.window-shape { position: absolute; z-index: 1; left: 18%; top: 18%; width: 47%; height: 46%; border: 14px solid rgba(244,241,234,.78); box-shadow: 0 0 0 5px rgba(25,59,56,.18); }
.window-shape::before { position: absolute; content: ""; top: 0; bottom: 0; left: 50%; width: 5px; background: rgba(25,59,56,.25); }

.facts-strip { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.facts-strip > div { display: flex; align-items: center; gap: 1rem; min-height: 112px; padding: 1.25rem clamp(1rem, 3vw, 2.5rem); border-right: 1px solid var(--line); }
.facts-strip > div:last-child { border-right: 0; }
.facts-strip strong { font-size: clamp(1.2rem, 2.4vw, 2rem); letter-spacing: -.06em; }
.facts-strip span { color: var(--muted); font-family: var(--mono); font-size: .62rem; line-height: 1.4; text-transform: uppercase; }

.section-shell { max-width: 1320px; margin: 0 auto; padding: clamp(5rem, 10vw, 9rem) clamp(1.25rem, 5vw, 4rem); }
.intro-section { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(3rem, 9vw, 10rem); }
h2 { margin-bottom: 1.5rem; font-size: clamp(2.7rem, 5.7vw, 5.5rem); }
.intro-content { max-width: 620px; padding-top: 2.2rem; color: var(--muted); font-size: 1rem; }
.large-copy { color: var(--ink); font-size: clamp(1.45rem, 2.3vw, 2.1rem); letter-spacing: -.04em; line-height: 1.18; }

.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; padding-top: 0; }
.feature-card { min-height: 300px; padding: 2rem; }
.feature-card h3 { margin: 3.5rem 0 1rem; font-size: clamp(1.55rem, 2.2vw, 2rem); }
.feature-card p { max-width: 270px; margin-bottom: 0; opacity: .82; }
.feature-icon { font-family: var(--mono); font-size: .7rem; }
.feature-card-dark { background: var(--pine); color: var(--paper); }
.feature-card-orange { background: var(--orange); color: #fff; }
.feature-card-blue { background: var(--blue); }
.feature-card-cream { background: var(--paper-dark); }

.walkthrough-section {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 5vw, 4rem);
}
.walkthrough-frame-shell { width: 100%; overflow: hidden; background: #edeae2; }
.walkthrough-frame-shell iframe { display: block; width: 100%; height: clamp(760px, 92vh, 1000px); border: 0; background: #edeae2; }
.plan-card { position: relative; min-height: 440px; background: #d9d4c8; transform: rotate(1.5deg); box-shadow: 18px 18px 0 var(--orange); }
.plan-room { position: absolute; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .25rem; border: 1px solid rgba(25,59,56,.55); background: rgba(244,241,234,.58); color: var(--pine); font-family: var(--mono); text-transform: uppercase; }
.plan-room span, .plan-balcony span { font-size: .55rem; letter-spacing: .06em; }
.plan-room b, .plan-balcony b { font-size: .72rem; }
.plan-room-main { left: 12%; top: 12%; width: 64%; height: 65%; }
.plan-room-bath { right: 9%; top: 43%; width: 18%; height: 34%; }
.plan-room-hall { left: 12%; bottom: 6%; width: 64%; height: 12%; }
.plan-balcony { position: absolute; left: 12%; top: 5%; width: 64%; height: 7%; display: flex; align-items: center; justify-content: center; gap: .5rem; border: 1px dashed var(--pine); color: var(--pine); font-family: var(--mono); text-transform: uppercase; }
.plan-line { position: absolute; border-top: 1px solid var(--orange); }
.plan-line-one { left: 17%; top: 32%; width: 27%; transform: rotate(90deg); }
.plan-line-two { left: 46%; top: 52%; width: 20%; transform: rotate(90deg); }
.plan-north { position: absolute; right: 5%; top: 5%; color: var(--orange); font-family: var(--mono); font-size: .9rem; }

.gallery-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2.5rem; }
.gallery-heading h2 { margin-bottom: 0; }
.gallery-heading > p { max-width: 330px; margin-bottom: .45rem; color: var(--muted); font-size: .9rem; }
.gallery-grid { display: grid; grid-template-columns: 1.2fr .8fr .8fr; grid-template-rows: 245px 245px 245px 180px; gap: .75rem; }
.gallery-photo { margin: 0; overflow: hidden; background: var(--paper-dark); }
.gallery-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.gallery-photo:hover img { transform: scale(1.015); }
.gallery-main { grid-column: 1 / 3; grid-row: 1 / 3; }
.gallery-kitchen { grid-column: 3; grid-row: 1 / 3; }
.gallery-bathroom { grid-column: 1; grid-row: 3; }
.gallery-storage { grid-column: 2; grid-row: 3; }
.gallery-pool { grid-column: 3; grid-row: 3; }
.gallery-panorama { grid-column: 1 / -1; grid-row: 4; }
.gallery-main img { object-position: center 48%; }
.gallery-kitchen img { object-position: center 48%; }
.gallery-bathroom img { object-position: center 42%; }
.gallery-pool img { object-position: center 58%; }

.location-section { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 9vw, 10rem); background: var(--pine); color: var(--paper); max-width: none; }
.location-section > * { max-width: 560px; }
.location-section { padding-right: max(1.25rem, calc((100vw - 1240px) / 2)); padding-left: max(1.25rem, calc((100vw - 1240px) / 2)); }
.location-intro p:not(.eyebrow) { max-width: 470px; color: rgba(244,241,234,.72); }
.location-poster { margin: 2.4rem 0 0; max-width: 410px; }
.location-poster img { display: block; width: 100%; aspect-ratio: 1 / 1.22; object-fit: cover; object-position: center 46%; filter: saturate(.9); }
.location-poster figcaption { margin-top: .65rem; color: rgba(244,241,234,.54); font-family: var(--mono); font-size: .62rem; letter-spacing: .05em; text-transform: uppercase; }
.location-links { align-self: end; }
.location-links a { display: grid; grid-template-columns: 1fr auto; gap: .25rem 1rem; padding: 1.2rem 0; border-top: 1px solid rgba(244,241,234,.24); text-decoration: none; }
.location-links a:last-child { border-bottom: 1px solid rgba(244,241,234,.24); }
.location-links span { font-size: 1.1rem; font-weight: 700; }
.location-links small { color: rgba(244,241,234,.62); font-size: .75rem; }
.location-links b { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--orange); font-size: 1.2rem; }

.details-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(3rem, 9vw, 10rem); }
.details-list { border-top: 1px solid var(--line); }
.details-list > div { display: grid; grid-template-columns: 150px 1fr; gap: 1.5rem; padding: 1.2rem 0; border-bottom: 1px solid var(--line); }
.details-list span { color: var(--orange); font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; }
.details-list p { margin-bottom: 0; }

.availability-section { background: var(--orange); color: #fff; }
.availability-inner { max-width: 740px; margin: 0 auto; padding: clamp(5rem, 10vw, 9rem) 1.25rem; text-align: center; }
.availability-inner .eyebrow { color: rgba(255,255,255,.72); }
.availability-inner h2 { max-width: 720px; margin-right: auto; margin-left: auto; }
.availability-inner p:not(.eyebrow) { max-width: 480px; margin: 0 auto 2rem; color: rgba(255,255,255,.82); }

.site-footer { display: flex; justify-content: space-between; gap: 1rem; padding: 1.4rem clamp(1.25rem, 4vw, 4rem); background: var(--pine-deep); color: rgba(244,241,234,.7); font-family: var(--mono); font-size: .62rem; letter-spacing: .04em; text-transform: uppercase; }

a:focus-visible, button:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
@media (max-width: 1050px) and (min-width: 801px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 800px) {
  .main-nav a:not(.nav-button) { display: none; }
  .hero, .intro-section, .location-section, .details-section { grid-template-columns: 1fr; }
  .hero-copy { padding-top: 5rem; padding-bottom: 4rem; }
  .hero-photo { min-height: 470px; }
  .facts-strip { grid-template-columns: repeat(2, 1fr); }
  .facts-strip > div:nth-child(2) { border-right: 0; }
  .facts-strip > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card { min-height: 220px; }
  .feature-card h3 { margin-top: 2.5rem; }
  .plan-card { min-height: 360px; max-width: 560px; width: 100%; }
  .walkthrough-frame-shell iframe { height: 720px; }
  .gallery-heading { display: block; }
  .gallery-heading > p { margin-top: 1.25rem; }
  .gallery-grid { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: 240px; }
  .gallery-main { grid-column: 1 / -1; grid-row: auto; min-height: 360px; }
  .gallery-kitchen { grid-column: auto; grid-row: span 2; }
  .gallery-bathroom, .gallery-storage, .gallery-pool { grid-column: auto; grid-row: auto; }
  .gallery-panorama { grid-column: 1 / -1; grid-row: auto; }
  .location-section { padding-right: 1.25rem; padding-left: 1.25rem; }
  .details-list > div { grid-template-columns: 110px 1fr; }
}
@media (max-width: 480px) {
  h1 { font-size: 3.5rem; }
  h2 { font-size: 2.8rem; }
  .hero-photo { min-height: 380px; }
  .facts-strip > div { display: block; min-height: 100px; }
  .facts-strip strong { display: block; margin-bottom: .4rem; }
  .gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 260px; }
  .gallery-grid .gallery-photo { grid-column: 1; grid-row: auto; }
  .gallery-grid .gallery-main { min-height: 300px; }
  .gallery-grid .gallery-panorama { min-height: 150px; }
  .site-footer { display: block; }
  .site-footer span { display: block; margin: .35rem 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button { transition: none; }
}