:root {
  --ink: #17201d;
  --paper: #f5f2e9;
  --cream: #ebe5d7;
  --sage: #c8d8c0;
  --green: #315b48;
  --acid: #d8f06b;
  --orange: #f47b45;
  --lavender: #a9a1db;
  --white: #fffefa;
  --line: rgba(23, 32, 29, .16);
  --shadow: 0 24px 60px rgba(23, 32, 29, .13);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "DM Sans", sans-serif; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
.skip-link { position: fixed; left: 1rem; top: -4rem; z-index: 100; background: var(--ink); color: white; padding: .75rem 1rem; }
.skip-link:focus { top: 1rem; }

.site-header { position: relative; z-index: 20; height: 84px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(1.25rem, 5vw, 5rem); border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: .7rem; font: 800 1.1rem "Manrope", sans-serif; letter-spacing: -.03em; }
.brand-mark { display: flex; align-items: end; gap: 2px; width: 28px; height: 28px; padding: 5px; border-radius: 50%; background: var(--ink); }
.brand-mark i { display: block; width: 4px; border-radius: 4px; background: var(--acid); }
.brand-mark i:nth-child(1) { height: 8px; }.brand-mark i:nth-child(2) { height: 16px; }.brand-mark i:nth-child(3) { height: 11px; }
.main-nav { display: flex; align-items: center; gap: 2rem; font-size: .9rem; font-weight: 600; }
.main-nav a { position: relative; }
.main-nav a::after { content: ""; position: absolute; left: 0; bottom: -.35rem; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .25s; }
.main-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.saved-button { border: 0; border-radius: 999px; color: white; background: var(--ink); padding: .72rem 1rem; cursor: pointer; }
.saved-button span { display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; margin-left: .3rem; border-radius: 50%; color: var(--ink); background: var(--acid); }
.menu-button { display: none; border: 1px solid var(--line); border-radius: 999px; background: transparent; padding: .65rem 1rem; }

.hero { min-height: calc(100vh - 84px); display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(2rem, 5vw, 6rem); padding: clamp(3rem, 7vw, 7rem) clamp(1.25rem, 5vw, 5rem); overflow: hidden; }
.hero-copy { max-width: 760px; }
.eyebrow { margin: 0 0 1rem; text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; font-weight: 800; }
h1, h2, h3 { font-family: "Manrope", sans-serif; }
h1 { max-width: 850px; margin: 0; font-size: clamp(3.25rem, 6.6vw, 7.2rem); line-height: .93; letter-spacing: -.075em; }
h1 em { position: relative; z-index: 1; font-style: normal; white-space: nowrap; }
h1 em::after { content: ""; position: absolute; z-index: -1; left: -.06em; right: -.08em; bottom: .03em; height: .28em; background: var(--acid); transform: rotate(-1deg); }
.hero-intro { max-width: 610px; margin: 2rem 0; font-size: clamp(1rem, 1.6vw, 1.22rem); line-height: 1.65; color: #46504c; }
.search-panel { max-width: 690px; display: grid; grid-template-columns: 1fr auto; gap: .6rem; padding: .55rem; border: 1px solid var(--line); border-radius: 18px; background: var(--white); box-shadow: 0 18px 45px rgba(23,32,29,.08); }
.search-panel label span { display: block; padding: .15rem .7rem 0; font-size: .68rem; font-weight: 700; color: #65706b; }
.search-panel input { width: 100%; border: 0; outline: 0; padding: .35rem .7rem .4rem; color: var(--ink); background: transparent; font-weight: 600; }
.search-panel button, .booking-drawer form > button { border: 0; border-radius: 13px; color: white; background: var(--green); padding: 0 1.35rem; font-weight: 700; cursor: pointer; transition: transform .2s, background .2s; }
.search-panel button:hover, .booking-drawer form > button:hover { transform: translateY(-2px); background: var(--ink); }
.trust-row { display: flex; gap: 1.5rem; margin-top: 1.3rem; color: #66706c; font-size: .78rem; }
.trust-row b { color: var(--ink); }

.hero-visual { position: relative; min-height: 590px; display: grid; place-items: center; }
.sun { position: absolute; width: min(39vw, 470px); aspect-ratio: 1; border-radius: 50%; background: var(--acid); }
.sun::after { content: ""; position: absolute; inset: -50px; border: 1px solid rgba(23,32,29,.12); border-radius: 50%; }
.window-card { position: relative; z-index: 2; width: min(90%, 420px); overflow: hidden; border: 8px solid var(--white); border-radius: 210px 210px 24px 24px; background: var(--white); box-shadow: var(--shadow); transform: rotate(2deg); }
.window-scene { position: relative; height: 420px; overflow: hidden; background: linear-gradient(155deg, #97b8ad 0 42%, #d6c7ad 42%); }
.window-scene::before { content: ""; position: absolute; left: 50%; top: 0; width: 3px; height: 58%; background: rgba(255,255,255,.65); }
.window-scene::after { content: ""; position: absolute; left: 0; right: 0; top: 58%; height: 4px; background: rgba(255,255,255,.8); }
.desk { position: absolute; left: 22%; right: 9%; bottom: 22%; height: 18px; border-radius: 4px; background: #4f392e; }
.desk::before, .desk::after { content: ""; position: absolute; top: 14px; width: 9px; height: 90px; background: #4f392e; }.desk::before { left: 10%; }.desk::after { right: 10%; }
.desk i { position: absolute; right: 23%; bottom: 18px; width: 110px; height: 70px; border: 7px solid #2a3431; border-radius: 7px; background: #d8f06b; transform: skew(-4deg); }
.chair { position: absolute; right: 9%; bottom: 4%; width: 110px; height: 100px; border-radius: 50px 50px 20px 20px; background: var(--orange); }
.plant { position: absolute; left: 10%; bottom: 26%; }
.plant span { display: block; width: 45px; height: 55px; border-radius: 4px 4px 18px 18px; background: #d88a56; }
.plant i { position: absolute; bottom: 40px; left: 17px; width: 24px; height: 70px; border-radius: 100% 0 100% 0; background: #315b48; transform-origin: bottom; }
.plant i:nth-child(1) { transform: rotate(-40deg); }.plant i:nth-child(2) { transform: rotate(4deg); height: 90px; }.plant i:nth-child(3) { transform: rotate(43deg); }
.featured-info { display: flex; align-items: center; justify-content: space-between; padding: 1.2rem 1rem .8rem; }
.featured-info div span { display: block; margin-bottom: .25rem; color: #6e7773; font-size: .7rem; }.featured-info strong { font-family: "Manrope"; font-size: 1.15rem; }.rating { font-weight: 700; }
.floating-note { position: absolute; z-index: 4; display: flex; align-items: center; gap: .55rem; border: 1px solid var(--line); border-radius: 14px; background: var(--white); box-shadow: 0 14px 40px rgba(23,32,29,.15); font-size: .78rem; font-weight: 700; }
.note-one { left: 0; top: 23%; padding: .85rem 1rem; transform: rotate(-4deg); }.status-dot { width: 9px; height: 9px; border-radius: 50%; background: #4faa6f; box-shadow: 0 0 0 4px rgba(79,170,111,.18); }
.note-two { right: -2%; bottom: 18%; flex-direction: column; align-items: start; gap: 0; padding: .85rem 1.2rem; transform: rotate(3deg); }.note-two b { font: 800 2rem "Manrope"; }.note-two span { color: #69736f; font-size: .65rem; }

.discovery { padding: 7rem clamp(1.25rem, 5vw, 5rem); background: var(--white); }
.section-heading { display: grid; grid-template-columns: 1fr minmax(250px, 420px); align-items: end; gap: 2rem; }
.section-heading h2, .how h2, .host-banner h2 { margin: 0; font-size: clamp(2.5rem, 5vw, 5rem); line-height: 1; letter-spacing: -.06em; }
.section-heading > p { margin: 0; line-height: 1.65; color: #5f6965; }
.filter-row { display: flex; gap: .55rem; overflow-x: auto; margin: 3rem 0 2rem; padding-bottom: .25rem; }
.filter-button { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 999px; background: transparent; padding: .75rem 1.1rem; font-weight: 700; cursor: pointer; }
.filter-button.active { color: white; background: var(--ink); }
.space-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.space-card { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: var(--paper); transition: transform .3s, box-shadow .3s; }
.space-card:hover { transform: translateY(-7px); box-shadow: var(--shadow); }
.space-card[hidden] { display: none; }
.heart { position: absolute; z-index: 3; right: 1rem; top: 1rem; display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(255,255,255,.9); font-size: 1.35rem; cursor: pointer; }
.heart.saved { color: #c54646; }
.space-art { position: relative; height: 250px; overflow: hidden; }
.art-juniper { background: #b8cbb1; }.arch { position: absolute; left: 16%; top: 12%; width: 45%; height: 88%; border-radius: 100px 100px 0 0; background: #f0dfbf; }.table { position: absolute; left: 20%; bottom: 18%; width: 65%; height: 13px; background: #76553c; box-shadow: 20px 50px 0 -2px #76553c; }.leaf { position: absolute; width: 90px; height: 150px; border-radius: 100% 0 100% 0; background: var(--green); }.leaf-a { right: -15px; bottom: -25px; transform: rotate(-30deg); }.leaf-b { right: 28px; bottom: -65px; transform: rotate(25deg); background: #5e806c; }
.art-focus { background: #d9d2ed; }.orb { position: absolute; right: 10%; top: -17%; width: 220px; height: 220px; border-radius: 50%; background: var(--orange); }.bench { position: absolute; left: 10%; right: 10%; bottom: 17%; height: 70px; border-radius: 20px 20px 6px 6px; background: var(--green); box-shadow: inset 0 13px rgba(255,255,255,.12); }.lamp { position: absolute; left: 20%; bottom: 38%; width: 8px; height: 100px; background: var(--ink); }.lamp::after { content: ""; position: absolute; left: -28px; top: -30px; width: 64px; height: 35px; border-radius: 50px 50px 5px 5px; background: var(--acid); }
.art-library { background: #d5b37e; }.shelf { position: absolute; top: 12%; width: 24%; height: 72%; border: 12px solid #694c36; background: repeating-linear-gradient(to bottom, #b75d3b 0 13px, #e3ca8f 13px 18px, #5c765e 18px 32px); }.shelf-a { left: 7%; }.shelf-b { right: 7%; }.reading-table { position: absolute; left: 30%; right: 30%; bottom: 10%; height: 16px; background: #4e392d; box-shadow: 10px 50px 0 -3px #4e392d; }
.space-content { padding: 1.25rem; }
.space-meta { display: flex; justify-content: space-between; color: #65706c; font-size: .72rem; }.space-meta strong { color: var(--ink); }
.space-content h3 { margin: .65rem 0 .5rem; font-size: 1.5rem; letter-spacing: -.04em; }.space-content p { min-height: 3.2em; margin: 0; color: #59635f; font-size: .9rem; line-height: 1.55; }
.amenities { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0; }.amenities span { border-radius: 999px; background: rgba(49,91,72,.1); padding: .35rem .65rem; font-size: .68rem; font-weight: 700; }
.book-button { width: 100%; border: 1px solid var(--ink); border-radius: 11px; background: transparent; padding: .8rem; font-weight: 700; cursor: pointer; transition: .2s; }.book-button:hover { color: white; background: var(--ink); }
.empty-state { padding: 3rem; text-align: center; border: 1px dashed var(--line); border-radius: 18px; }

.how { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(3rem, 8vw, 8rem); padding: 8rem clamp(1.25rem, 5vw, 5rem); background: var(--sage); }
.how-intro > p:last-child { max-width: 380px; margin-top: 1.5rem; line-height: 1.7; }
.steps { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(23,32,29,.3); }
.steps li { display: grid; grid-template-columns: 64px 1fr; gap: 1.2rem; padding: 2rem 0; border-bottom: 1px solid rgba(23,32,29,.3); }.steps li > span { font-size: .7rem; font-weight: 800; }.steps h3 { margin: 0 0 .5rem; font-size: 1.5rem; letter-spacing: -.04em; }.steps p { max-width: 520px; margin: 0; color: #43534c; line-height: 1.6; }
.host-banner { position: relative; overflow: hidden; min-height: 520px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 5rem 1.25rem; text-align: center; color: white; background: var(--green); }
.host-banner h2 { position: relative; z-index: 2; max-width: 850px; }.host-banner .eyebrow { position: relative; z-index: 2; color: var(--acid); }.host-banner a { position: relative; z-index: 2; margin-top: 2rem; border-radius: 999px; color: var(--ink); background: var(--acid); padding: .95rem 1.4rem; font-weight: 800; }
.host-shape { position: absolute; border-radius: 50%; border: 1px solid rgba(216,240,107,.45); }.shape-one { width: 550px; height: 550px; left: -180px; top: -230px; }.shape-two { width: 300px; height: 300px; right: -80px; bottom: -100px; background: var(--orange); border: 0; opacity: .8; }

footer { display: grid; grid-template-columns: 1fr 1fr auto; gap: 2rem; align-items: center; padding: 3rem clamp(1.25rem, 5vw, 5rem); background: var(--ink); color: white; }.footer-brand { color: white; }footer p { color: #b8c1bd; }footer > div { display: flex; gap: 1.2rem; }footer small { grid-column: 1 / -1; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,.15); color: #89928e; }

.drawer-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(23,32,29,.45); backdrop-filter: blur(4px); }
.booking-drawer { position: fixed; z-index: 50; top: 0; right: 0; width: min(100%, 480px); height: 100%; overflow-y: auto; padding: 5rem 2rem 2rem; background: var(--white); box-shadow: -20px 0 60px rgba(23,32,29,.2); transform: translateX(105%); transition: transform .35s ease; }.booking-drawer.open { transform: translateX(0); }.booking-drawer h2 { margin: 0 0 2rem; font-size: 2.6rem; letter-spacing: -.06em; }.drawer-close { position: absolute; right: 1.5rem; top: 1.3rem; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; background: transparent; font-size: 1.5rem; cursor: pointer; }
.booking-drawer form { display: grid; gap: 1rem; }.booking-drawer label { display: grid; gap: .4rem; font-size: .78rem; font-weight: 700; }.booking-drawer input, .booking-drawer select { width: 100%; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); padding: .9rem; }.booking-total { display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; padding: 1.2rem 0; border-top: 1px solid var(--line); }.booking-total strong { font-size: 1.5rem; }.booking-drawer form > button { min-height: 52px; }.form-note { text-align: center; color: #75807b; font-size: .72rem; }.success-message { text-align: center; padding-top: 4rem; }.success-message span { display: inline-grid; place-items: center; width: 70px; height: 70px; border-radius: 50%; color: var(--green); background: var(--acid); font-size: 2rem; }.success-message h3 { font-size: 2rem; }
.toast { position: fixed; z-index: 80; left: 50%; bottom: 1.5rem; padding: .8rem 1.1rem; border-radius: 999px; color: white; background: var(--ink); opacity: 0; transform: translate(-50%, 20px); transition: .25s; pointer-events: none; }.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; }.hero-visual { min-height: 520px; }.space-grid { grid-template-columns: 1fr 1fr; }.space-card:last-child { grid-column: 1 / -1; }.how { grid-template-columns: 1fr; }.note-one { left: 7%; }.note-two { right: 6%; }
}
@media (max-width: 680px) {
  .site-header { height: 72px; }.menu-button { display: block; }.main-nav { position: absolute; left: 1rem; right: 1rem; top: 64px; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: .8rem; border: 1px solid var(--line); border-radius: 16px; background: var(--white); box-shadow: var(--shadow); }.main-nav.open { display: flex; }.main-nav a, .saved-button { padding: .9rem; }.saved-button { text-align: left; }
  .hero { padding-top: 4rem; }.hero-intro { margin: 1.5rem 0; }.search-panel { grid-template-columns: 1fr; }.search-panel button { min-height: 50px; }.trust-row { flex-wrap: wrap; gap: .6rem 1rem; }.hero-visual { min-height: 450px; }.window-scene { height: 340px; }.note-one { left: 0; top: 19%; }.note-two { right: 0; bottom: 9%; }
  .section-heading { grid-template-columns: 1fr; }.space-grid { grid-template-columns: 1fr; }.space-card:last-child { grid-column: auto; }.how, .discovery { padding-top: 5rem; padding-bottom: 5rem; }.steps li { grid-template-columns: 45px 1fr; }footer { grid-template-columns: 1fr; }footer small { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }