:root { --navy: #302a68; --gold: #d5b36c; --cream: #fbfaf6; --ink: #201c42; --muted: #69657c; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: "DM Sans", sans-serif; }
.hero { isolation: isolate; min-height: 100svh; overflow: hidden; position: relative; display: flex; flex-direction: column; padding: 2.4rem 7vw 2.5rem; }
header, footer { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; }
.logo { display: block; width: min(18rem, 42vw); mix-blend-mode: multiply; }
.location { margin: 0; color: var(--navy); font-size: .75rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; white-space: nowrap; }
.content { position: relative; z-index: 1; max-width: 720px; margin: auto 0; padding: 2.5rem 0; }
.eyebrow { display: flex; align-items: center; gap: .65rem; margin: 0 0 1.25rem; color: var(--muted); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow span { width: 2.4rem; height: 2px; background: var(--gold); }
h1 { margin: 0; color: var(--navy); font: 700 clamp(3.6rem, 8vw, 7rem)/.96 "Playfair Display", Georgia, serif; letter-spacing: -.055em; }
.intro { max-width: 545px; margin: 1.8rem 0 2rem; color: var(--muted); font-size: clamp(1rem, 1.5vw, 1.13rem); line-height: 1.7; }
.actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 3.2rem; padding: .8rem 1.15rem; text-decoration: none; font-size: .9rem; font-weight: 700; transition: transform .2s, background .2s, color .2s; }
.button:hover { transform: translateY(-2px); }
.primary { color: white; background: var(--navy); box-shadow: 0 10px 24px rgba(48, 42, 104, .18); }
.primary:hover { background: var(--gold); color: var(--ink); }
.secondary { border: 1px solid #d7d1c3; color: var(--navy); background: rgba(255,255,255,.58); }
.secondary:hover { border-color: var(--gold); background: #fff; }
footer { color: var(--muted); font-size: .8rem; }
footer a { color: var(--navy); font-weight: 700; text-decoration-color: var(--gold); text-underline-offset: .25rem; }
.line { z-index: -1; position: absolute; border: clamp(20px, 3vw, 50px) solid var(--gold); opacity: .18; transform: rotate(45deg); }
.line-one { width: min(38vw, 560px); height: min(38vw, 560px); top: -23vw; right: -11vw; }
.line-two { width: min(25vw, 360px); height: min(25vw, 360px); bottom: -17vw; right: 12vw; border-color: var(--navy); opacity: .08; }
.listings { padding: 6rem 7vw; background: #f4f1e8; }
.section-heading { max-width: 690px; margin-bottom: 2.5rem; }
.section-heading h2 { margin: 0; color: var(--navy); font: 700 clamp(2.2rem, 4.4vw, 4rem)/1.02 "Playfair Display", Georgia, serif; letter-spacing: -.045em; }
.section-heading > p:last-child { max-width: 570px; margin: 1rem 0 0; color: var(--muted); line-height: 1.65; }
.property-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.property-card { overflow: hidden; background: #fff; box-shadow: 0 14px 35px rgba(35, 27, 68, .08); }
.property-card img { display: block; width: 100%; height: 17rem; object-fit: cover; }
.property-copy { padding: 1.45rem; }
.property-type { margin: 0 0 .55rem; color: #9d7b3a; font-size: .71rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.property-copy h3 { margin: 0; color: var(--navy); font: 700 1.55rem/1.1 "Playfair Display", Georgia, serif; }
.property-copy > p:not(.property-type) { min-height: 4.5rem; margin: .8rem 0 1.25rem; color: var(--muted); font-size: .9rem; line-height: 1.6; }
.property-copy a { color: var(--navy); font-size: .85rem; font-weight: 700; text-decoration-color: var(--gold); text-underline-offset: .28rem; }
.photo-credit { margin: 1.5rem 0 0; color: var(--muted); font-size: .75rem; }
.photo-credit a { color: inherit; }
@media (max-width: 850px) { .property-grid { grid-template-columns: 1fr; max-width: 35rem; } .property-card img { height: 15rem; } .property-copy > p:not(.property-type) { min-height: 0; } }
@media (max-width: 650px) { .hero { padding: 1.3rem 1.4rem 2rem; } header { align-items: flex-start; flex-direction: column; gap: .1rem; } .logo { width: 13.5rem; } .content { padding: 4rem 0; } .location { font-size: .67rem; } .actions { flex-direction: column; align-items: stretch; } footer { align-items: flex-start; flex-direction: column; gap: .45rem; } .line-one { width: 80vw; height: 80vw; top: -42vw; right: -37vw; } .line-two { width: 58vw; height: 58vw; bottom: -30vw; right: -16vw; } .listings { padding: 4rem 1.4rem; } }