/*!
 * Staya – Boutique Hotel & Resort HTML Template
 * Copyright (c) 2026 DesignVersa. All rights reserved. https://designversa.com
 */
:root {
    --sand: #f4efe6;
    --stone: #ebe3d6;
    --paper: #fbf8f2;
    --forest: #24392e;
    --forest-2: #1a2a22;
    --olive: #5c6b4a;
    --brass: #a88450;
    --brass-2: #c4a472;
    --ink: #1e2a23;
    --text: #414b43;
    --muted: #7a7d73;
    --line: #dcd2c1;
    --line-2: #e8e0d2;
    --bg: var(--sand);
    --panel: var(--paper);
    --on-dark: #f4efe6;
    --shadow: 0 24px 60px rgba(36, 44, 34, .12);
    --serif: "Cormorant Garamond", "Times New Roman", Georgia, serif;
    --sans: "Jost", "Futura", system-ui, -apple-system, "Segoe UI", sans-serif;
    --ease: cubic-bezier(.22, .61, .36, 1);
}
[data-theme="dark"] {
    --sand: #121a15;
    --stone: #18221c;
    --paper: #1b261f;
    --ink: #f1ebe0;
    --text: #cfc8bb;
    --muted: #9a9a8c;
    --line: #2f3d33;
    --line-2: #26332a;
    --forest: #2d4638;
    --brass: #c4a472;
    --shadow: 0 24px 60px rgba(0, 0, 0, .4);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; font-variant-numeric: lining-nums; }
body { margin: 0; font-family: var(--sans); font-weight: 400; color: var(--text); background: var(--bg); line-height: 1.7; font-size: 16px; -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--serif); color: var(--ink); line-height: 1.08; margin: 0 0 14px; font-weight: 500; letter-spacing: -.005em; }
h1 em, h2 em, h3 em { font-style: italic; font-weight: 400; color: var(--brass); }
p { margin: 0 0 16px; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--brass-2); color: #1e2a23; }
.container { width: min(1240px, 100% - 48px); margin-inline: auto; }
.narrow { width: min(820px, 100% - 48px); margin-inline: auto; }
.section { padding: 120px 0; }
.section.tight { padding: 80px 0; }
.stone { background: var(--stone); }
.dark-band { background: var(--forest); color: #d9d3c6; }
.dark-band h2, .dark-band h3 { color: var(--on-dark); }
.center { text-align: center; }
.muted { color: var(--muted); }

/* Small caps + rules */
.smallcaps { display: inline-flex; align-items: center; gap: 14px; font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--brass); }
.smallcaps::before { content: ""; width: 34px; height: 1px; background: currentColor; opacity: .7; }
.smallcaps.plain::before { display: none; }
.smallcaps.light { color: var(--brass-2); }
.center .smallcaps::after, .smallcaps.both::after { content: ""; width: 34px; height: 1px; background: currentColor; opacity: .7; }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.ornament { display: flex; align-items: center; justify-content: center; gap: 16px; color: var(--brass); margin: 18px 0; }
.ornament::before, .ornament::after { content: ""; width: 60px; height: 1px; background: currentColor; opacity: .5; }
.head { max-width: 720px; margin-bottom: 64px; }
.head.center { margin-inline: auto; }
.head h2 { font-size: clamp(38px, 4.6vw, 64px); margin-top: 18px; }
.head p { font-size: 18px; color: var(--muted); font-weight: 300; }
.head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 56px; flex-wrap: wrap; }
.head-row .head { margin-bottom: 0; }
.lead { font-size: 20px; font-weight: 300; color: var(--muted); line-height: 1.65; }
.dropcap::first-letter { font-family: var(--serif); float: left; font-size: 78px; line-height: .8; padding: 8px 12px 0 0; color: var(--brass); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 30px; border-radius: 0; font-family: var(--sans); font-weight: 500; font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase; border: 1px solid transparent; cursor: pointer; transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); white-space: nowrap; }
.btn-primary { background: var(--forest); color: var(--on-dark); }
.btn-primary:hover { background: var(--brass); }
.btn-brass { background: var(--brass); color: #fff; }
.btn-brass:hover { background: #8f6f40; }
.btn-line { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--sand); }
.btn-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .7); }
.btn-light:hover { background: #fff; color: var(--forest); }
.btn-sm { padding: 11px 20px; font-size: 11.5px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.link { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--brass); padding-bottom: 5px; transition: gap .3s var(--ease), color .3s; }
.link:hover { gap: 16px; color: var(--brass); }
.link::after { content: "→"; letter-spacing: 0; }

/* Header */
.header { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line-2); transition: background .4s, border-color .4s, color .4s; color: var(--ink); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 88px; gap: 24px; }
.logo { display: flex; align-items: center; gap: 12px; color: inherit; }
.logo-mark { width: 40px; height: 40px; border: 1px solid currentColor; display: grid; place-items: center; color: var(--brass); }
.logo-text { display: flex; flex-direction: column; line-height: 1; }
.logo-text b { font-family: var(--serif); font-weight: 500; font-size: 28px; letter-spacing: .06em; }
.logo-text small { font-size: 9.5px; letter-spacing: .34em; text-transform: uppercase; margin-top: 5px; opacity: .75; }
.nav-links { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.nav-links a { position: relative; padding: 6px 0; opacity: .88; transition: opacity .2s, color .2s; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--brass); transform: scaleX(0); transition: transform .35s var(--ease); }
.nav-links a:hover, .nav-links a.active { opacity: 1; }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.nav-right { display: flex; align-items: center; gap: 12px; }
.icon-btn { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); background: transparent; cursor: pointer; color: inherit; }
.btn-nav { background: var(--forest); color: var(--on-dark); padding: 13px 22px; font-size: 11.5px; }
.btn-nav:hover { background: var(--brass); }
.menu-toggle { display: none; width: 44px; height: 44px; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); background: transparent; color: inherit; cursor: pointer; place-items: center; }
.mobile-menu { display: none; }
/* Transparent header over full-bleed art */
body:has(.over) .header { position: fixed; left: 0; right: 0; background: transparent; border-color: rgba(255, 255, 255, .18); color: #fff; backdrop-filter: none; }
body:has(.over) .header .logo-mark { color: #fff; }
body:has(.over) .header .btn-nav { background: transparent; border-color: rgba(255, 255, 255, .7); }
body:has(.over) .header .btn-nav:hover { background: #fff; color: var(--forest); }
body:has(.over) .header.scrolled { background: color-mix(in srgb, var(--forest-2) 94%, transparent); backdrop-filter: blur(14px); border-color: transparent; }

/* Full-bleed hero */
.hero { position: relative; min-height: clamp(760px, 100vh, 1000px); display: flex; flex-direction: column; justify-content: flex-end; color: #fff; overflow: hidden; }
.hero .ph { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14, 22, 18, .42) 0%, rgba(14, 22, 18, 0) 60%), linear-gradient(180deg, rgba(14, 22, 18, .5) 0%, rgba(14, 22, 18, .05) 34%, rgba(14, 22, 18, .1) 55%, rgba(14, 22, 18, .72) 100%); }
.hero-inner { position: relative; z-index: 2; padding: 190px 0 60px; }
.hero h1 { color: #fff; font-size: clamp(52px, 8vw, 118px); font-weight: 400; line-height: .98; max-width: 900px; margin: 22px 0 22px; letter-spacing: -.015em; }
.hero h1 em { color: #f0d9b0; }
.hero p { font-size: 19px; font-weight: 300; max-width: 520px; opacity: .92; }
.hero .smallcaps { color: #f0d9b0; }
.hero-meta { position: absolute; right: 0; bottom: 70px; z-index: 2; text-align: right; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; opacity: .85; line-height: 2; }

/* Availability bar */
.avail { position: relative; z-index: 3; display: grid; grid-template-columns: 1.1fr 1.1fr 1.2fr .9fr auto; background: var(--paper); color: var(--ink); box-shadow: var(--shadow); margin-top: 44px; }
.avail > div { padding: 18px 26px; border-right: 1px solid var(--line-2); position: relative; min-width: 0; }
.avail label, .avail .lbl { display: block; font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.avail input[type=date] { border: 0; background: transparent; font-family: var(--serif); font-size: 23px; color: var(--ink); padding: 0; width: 100%; outline: none; cursor: pointer; }
.avail input[type=date]::-webkit-calendar-picker-indicator { opacity: .5; cursor: pointer; }
.avail .nights { font-family: var(--serif); font-size: 23px; color: var(--ink); }
.avail .nights small { font-family: var(--sans); font-size: 13px; color: var(--muted); }
.avail .btn { height: 100%; padding: 0 38px; }
.guest-btn { background: transparent; border: 0; padding: 0; font-family: var(--serif); font-size: 23px; color: var(--ink); cursor: pointer; text-align: left; width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; white-space: nowrap; }
.guest-btn::after { content: ""; width: 8px; height: 8px; border-right: 1px solid var(--muted); border-bottom: 1px solid var(--muted); transform: rotate(45deg); margin-top: -6px; }
.guests-pop { position: absolute; left: 0; top: calc(100% + 8px); width: 300px; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); padding: 10px 22px; display: none; z-index: 20; }
.guests-pop.open { display: block; }
.counter { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--line-2); }
.counter:last-of-type { border-bottom: 0; }
.counter b { display: block; font-weight: 500; color: var(--ink); }
.counter small { color: var(--muted); font-size: 13px; }
.counter .ctl { display: flex; align-items: center; gap: 12px; }
.counter button { width: 34px; height: 34px; border: 1px solid var(--line); background: transparent; cursor: pointer; font-size: 18px; line-height: 1; color: var(--ink); }
.counter button:hover { border-color: var(--brass); color: var(--brass); }
.counter button:disabled { opacity: .3; cursor: default; }
.counter output { min-width: 18px; text-align: center; font-family: var(--serif); font-size: 22px; color: var(--ink); }
.avail-note { display: flex; gap: 26px; margin-top: 16px; font-size: 13px; opacity: .85; flex-wrap: wrap; }
.avail-note span::before { content: "✦ "; color: #f0d9b0; }

/* Page banner (art hero on inner pages) */
.banner { position: relative; min-height: 600px; height: clamp(600px, 76vh, 780px); display: flex; align-items: flex-end; color: #fff; overflow: hidden; }
.banner .ph { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; background-position: center 72%; }
.banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14, 22, 18, .5) 0%, rgba(14, 22, 18, .12) 55%, rgba(14, 22, 18, 0) 75%), linear-gradient(180deg, rgba(14, 22, 18, .5) 0%, rgba(14, 22, 18, 0) 30%, rgba(14, 22, 18, .08) 50%, rgba(14, 22, 18, .7) 100%); }
.banner .container { position: relative; z-index: 2; padding-bottom: 70px; display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.banner h1 { color: #fff; font-size: clamp(50px, 7vw, 100px); font-weight: 400; line-height: 1; margin: 18px 0 16px; }
.banner h1 em { color: #f0d9b0; }
.banner p { font-size: 18px; font-weight: 300; max-width: 540px; margin: 0; opacity: .92; }
.banner .smallcaps { color: #f0d9b0; }
.crumbs { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; opacity: .8; white-space: nowrap; }
.crumbs a:hover { color: #f0d9b0; }
.banner.short { min-height: 520px; height: clamp(520px, 60vh, 640px); }

/* Plain page hero (shared pages) */
.page-hero { padding: 90px 0 50px; text-align: center; border-bottom: 1px solid var(--line-2); margin-bottom: 20px; }
.page-hero h1 { font-size: clamp(46px, 6vw, 84px); font-weight: 400; margin: 18px 0 14px; }
.page-hero .x-lead { font-size: 19px; font-weight: 300; }

/* Placeholder photography (CSS/SVG scenes) */
.ph { position: relative; display: block; background-color: var(--stone); background-size: cover; background-position: center; overflow: hidden; aspect-ratio: 4 / 3; }
.ph.tall { aspect-ratio: 4 / 5; }
.ph.portrait { aspect-ratio: 3 / 4; }
.ph.wide { aspect-ratio: 16 / 9; }
.ph.pano { aspect-ratio: 21 / 9; }
.ph.square { aspect-ratio: 1; }
.ph.fill { aspect-ratio: auto; height: 100%; min-height: 100%; }
.zoom { overflow: hidden; }
.zoom .ph { transition: transform 1.2s var(--ease); }
.zoom:hover .ph { transform: scale(1.05); }
.cap { position: absolute; left: 18px; bottom: 16px; z-index: 2; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, .4); }

/* Intro / editorial */
.intro { display: grid; grid-template-columns: .9fr 1.1fr; gap: 90px; align-items: center; }
.intro h2 { font-size: clamp(40px, 4.8vw, 66px); margin: 20px 0 26px; }
.intro-art { position: relative; padding: 0 0 70px 70px; }
.intro-art .ph:first-child { aspect-ratio: 4 / 5; }
.intro-art .ph.inset { position: absolute; left: 0; bottom: 0; width: 46%; aspect-ratio: 1; border: 10px solid var(--bg); }
.intro-art .stamp { position: absolute; right: -26px; top: 40px; width: 120px; height: 120px; border-radius: 50%; background: var(--forest); color: var(--on-dark); display: grid; place-items: center; text-align: center; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; line-height: 1.5; }
.intro-art .stamp b { display: block; font-family: var(--serif); font-size: 32px; letter-spacing: 0; font-weight: 400; color: var(--brass-2); }
.signature { font-family: var(--serif); font-style: italic; font-size: 28px; color: var(--ink); margin-top: 26px; }
.signature small { display: block; font-family: var(--sans); font-style: normal; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stats div { padding: 36px 28px; border-right: 1px solid var(--line); }
.stats div:last-child { border-right: 0; }
.stats b { display: block; font-family: var(--serif); font-size: 58px; font-weight: 400; color: var(--ink); line-height: 1; }
.stats span { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }

/* Room cards */
.rooms-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.room-card { display: flex; flex-direction: column; background: var(--panel); transition: box-shadow .4s var(--ease); }
.room-card:hover { box-shadow: var(--shadow); }
.room-card .zoom { position: relative; }
.room-card .tag { position: absolute; top: 16px; left: 16px; z-index: 2; background: var(--paper); color: var(--ink); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; padding: 6px 12px; }
.room-card .body { padding: 28px 28px 30px; display: flex; flex-direction: column; flex: 1; }
.room-card h3 { font-size: 32px; margin-bottom: 8px; }
.room-card p { color: var(--muted); font-size: 15px; }
.room-facts { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 4px 0 18px; }
.room-facts span { display: inline-flex; align-items: center; gap: 7px; }
.room-facts svg { color: var(--brass); }
.room-card .foot { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; padding-top: 20px; border-top: 1px solid var(--line-2); gap: 12px; }
.price { font-family: var(--serif); font-size: 32px; color: var(--ink); line-height: 1; }
.price small { font-family: var(--sans); font-size: 12px; color: var(--muted); letter-spacing: .08em; }
.price-label { display: block; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.stay-total { display: block; font-size: 12.5px; color: var(--olive); margin-top: 6px; }
[data-theme="dark"] .stay-total { color: var(--brass-2); }

/* Split feature rows */
.split { display: grid; grid-template-columns: 1.15fr .85fr; gap: 90px; align-items: center; }
.split.rev { grid-template-columns: .85fr 1.15fr; }
.split.rev > :first-child { order: 2; }
.split h2 { font-size: clamp(38px, 4.4vw, 60px); margin: 18px 0 22px; }
.split .ph { aspect-ratio: 5 / 4; }
.ticks { list-style: none; padding: 0; margin: 26px 0 34px; display: grid; gap: 12px; }
.ticks li { display: flex; gap: 14px; align-items: baseline; padding-bottom: 12px; border-bottom: 1px solid var(--line-2); }
.ticks li::before { content: "✦"; color: var(--brass); font-size: 11px; }
.dark-band .ticks li { border-color: rgba(255, 255, 255, .12); }

/* Experiences strip (index) */
.strip-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.strip-card { position: relative; color: #fff; min-height: 520px; display: flex; align-items: flex-end; overflow: hidden; }
.strip-card .ph { position: absolute; inset: 0; aspect-ratio: auto; transition: transform 1.2s var(--ease); }
.strip-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(14, 22, 18, .78)); }
.strip-card:hover .ph { transform: scale(1.06); }
.strip-card div { position: relative; z-index: 2; padding: 30px; }
.strip-card h3 { color: #fff; font-size: 34px; margin: 10px 0 6px; }
.strip-card p { margin: 0; font-size: 14.5px; opacity: .85; }
.strip-card .num { font-size: 11px; letter-spacing: .24em; color: #f0d9b0; }

/* Quote */
.quote { text-align: center; max-width: 980px; margin: 0 auto; }
.quote blockquote { margin: 0; font-family: var(--serif); font-size: clamp(30px, 3.6vw, 50px); line-height: 1.22; color: var(--ink); font-weight: 400; font-style: italic; }
.quote cite { display: block; margin-top: 28px; font-style: normal; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.quote .stars { color: var(--brass); letter-spacing: 6px; margin-bottom: 26px; }
.press { display: flex; justify-content: space-between; align-items: center; gap: 30px; flex-wrap: wrap; margin-top: 80px; padding-top: 40px; border-top: 1px solid var(--line); }
.press span { font-family: var(--serif); font-size: 24px; color: var(--muted); letter-spacing: .04em; }
.press span:nth-child(2n) { font-style: italic; }
.press span.caps { font-family: var(--sans); font-size: 14px; letter-spacing: .3em; text-transform: uppercase; }

/* Offer cards */
.offers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.offer-card { background: var(--panel); display: flex; flex-direction: column; position: relative; }
.offer-card .ph { aspect-ratio: 3 / 2; }
.offer-card .badge { position: absolute; top: 18px; right: 18px; z-index: 2; background: var(--brass); color: #fff; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; padding: 7px 12px; }
.offer-card .body { padding: 30px; display: flex; flex-direction: column; flex: 1; }
.offer-card h3 { font-size: 32px; margin: 12px 0 10px; }
.offer-card p { color: var(--muted); font-size: 15px; }
.offer-card .ticks { margin: 6px 0 26px; font-size: 14.5px; }
.offer-card .foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
.from { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.old { text-decoration: line-through; color: var(--muted); font-size: 18px; margin-right: 6px; }

/* Journal teaser */
.journal { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 34px; }
.journal a { display: flex; flex-direction: column; gap: 14px; }
.journal h3 { font-size: 28px; margin: 0; transition: color .2s; }
.journal a:hover h3 { color: var(--brass); }
.journal .meta { font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.journal a:first-child .ph { aspect-ratio: 4 / 3.2; }
.journal a:first-child h3 { font-size: 36px; }

/* CTA band */
.cta-band { position: relative; color: #fff; text-align: center; padding: 150px 0; overflow: hidden; }
.cta-band .ph { position: absolute; inset: 0; aspect-ratio: auto; }
.cta-band::after { content: ""; position: absolute; inset: 0; background: rgba(16, 26, 20, .52); }
.cta-band .container { position: relative; z-index: 2; }
.cta-band h2 { color: #fff; font-size: clamp(44px, 6vw, 84px); font-weight: 400; margin: 18px 0 18px; }
.cta-band h2 em { color: #f0d9b0; }
.cta-band p { font-size: 18px; font-weight: 300; opacity: .9; max-width: 560px; margin: 0 auto 36px; }
.cta-band .smallcaps { color: #f0d9b0; }

/* Rooms page: filters */
.stay-bar { background: var(--forest); color: var(--on-dark); padding: 16px 0; font-size: 14px; }
.stay-bar .container { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.stay-bar b { font-family: var(--serif); font-size: 21px; font-weight: 500; }
.stay-bar a { color: var(--brass-2); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; }
.filters { display: grid; grid-template-columns: auto 1fr 1fr 1.3fr 1fr; gap: 0; border: 1px solid var(--line); background: var(--panel); margin-bottom: 26px; }
.filters > div { padding: 16px 22px; border-right: 1px solid var(--line-2); min-width: 0; }
.filters > div:last-child { border-right: 0; }
.filters label, .filters .lbl { display: block; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.filters select { width: 100%; border: 0; background: transparent; font-family: var(--serif); font-size: 21px; color: var(--ink); outline: none; cursor: pointer; padding: 0; }
.filters select option { background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 15px; }
.seg { display: flex; gap: 4px; }
.seg button { border: 1px solid var(--line); background: transparent; padding: 9px 16px; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; color: var(--text); }
.seg button.active { background: var(--forest); border-color: var(--forest); color: var(--on-dark); }
.range-row { display: flex; align-items: center; gap: 14px; }
.range-row output { font-family: var(--serif); font-size: 21px; color: var(--ink); white-space: nowrap; min-width: 70px; }
input[type=range] { width: 100%; accent-color: var(--brass); }
.result-line { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); gap: 20px; flex-wrap: wrap; }
.result-line button { background: none; border: 0; border-bottom: 1px solid var(--brass); color: var(--ink); cursor: pointer; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; padding: 0 0 3px; }
.rooms-list { display: grid; gap: 34px; }
.room-row { display: grid; grid-template-columns: 1.05fr 1fr; background: var(--panel); min-height: 380px; }
.room-row:nth-child(even) .zoom { order: 2; }
.room-row .zoom .ph { height: 100%; aspect-ratio: auto; min-height: 340px; }
.room-row .body { padding: 44px 48px; display: flex; flex-direction: column; }
.room-row h3 { font-size: 42px; margin: 12px 0 10px; }
.room-row p { color: var(--muted); }
.room-row .inc { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 24px; }
.room-row .inc span { font-size: 12.5px; border: 1px solid var(--line); padding: 5px 12px; color: var(--text); }
.room-row .foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding-top: 24px; border-top: 1px solid var(--line-2); flex-wrap: wrap; }
.room-row .actions { display: flex; gap: 10px; flex-wrap: wrap; }
.empty { display: none; text-align: center; padding: 70px 20px; border: 1px dashed var(--line); }
.empty h3 { font-size: 32px; }

/* Room detail */
.room-top { padding: 56px 0 40px; }
.room-title { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; margin-bottom: 34px; }
.room-title h1 { font-size: clamp(50px, 6.4vw, 92px); font-weight: 400; margin: 14px 0 0; }
.crumbs.dark { color: var(--muted); opacity: 1; }
.crumbs.dark a:hover { color: var(--brass); }
.gallery-main { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; height: 620px; }
.gallery-main .ph { aspect-ratio: auto; height: 100%; }
.gallery-main .big { grid-row: span 2; position: relative; }
.gallery-main .big .ph { transition: opacity .35s; }
.thumbs { display: flex; gap: 10px; margin-top: 10px; }
.thumbs button { flex: 1; border: 0; padding: 0; cursor: pointer; background: none; position: relative; opacity: .6; transition: opacity .25s; outline-offset: 2px; }
.thumbs button.active, .thumbs button:hover { opacity: 1; }
.thumbs button.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--brass); }
.thumbs .ph { aspect-ratio: 16 / 10; }
.counter-tag { position: absolute; right: 18px; bottom: 16px; z-index: 2; background: rgba(20, 30, 24, .6); color: #fff; font-size: 11px; letter-spacing: .2em; padding: 6px 12px; }
.room-layout { display: grid; grid-template-columns: 1fr 400px; gap: 80px; align-items: start; padding-top: 60px; }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 0 0 50px; }
.facts div { padding: 24px 20px 24px 0; }
.facts div + div { padding-left: 22px; border-left: 1px solid var(--line-2); }
.facts svg { color: var(--brass); margin-bottom: 10px; }
.facts b { display: block; font-family: var(--serif); font-size: 26px; font-weight: 500; color: var(--ink); line-height: 1.1; }
.facts span { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.block { padding: 50px 0; border-bottom: 1px solid var(--line-2); }
.block:first-of-type { padding-top: 0; }
.block h2 { font-size: 40px; margin-bottom: 24px; }
.amenity-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 26px; list-style: none; padding: 0; margin: 0; }
.amenity-list li { display: flex; gap: 12px; align-items: center; font-size: 15px; }
.amenity-list svg { color: var(--brass); flex: none; }
.policy { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--line-2); font-size: 15px; }
.policy:last-child { border: 0; }
.policy b { font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); font-weight: 500; padding-top: 3px; }
.book-widget { position: sticky; top: 112px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); }
.book-widget .top { padding: 28px 30px 22px; border-bottom: 1px solid var(--line-2); display: flex; justify-content: space-between; align-items: flex-end; }
.book-widget .top .price { font-size: 42px; }
.book-widget .rating { font-size: 13px; color: var(--muted); text-align: right; }
.book-widget .rating b { color: var(--brass); letter-spacing: 2px; display: block; font-weight: 400; }
.bw-body { padding: 24px 30px 30px; }
.bw-dates { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); }
.bw-dates div, .bw-guests { padding: 12px 14px; }
.bw-dates div + div { border-left: 1px solid var(--line); }
.bw-guests { border: 1px solid var(--line); border-top: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bw-body label, .bw-body .lbl { display: block; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.bw-body input[type=date], .bw-body select { width: 100%; border: 0; background: transparent; padding: 0; font-family: var(--serif); font-size: 19px; color: var(--ink); outline: none; }
.bw-body select option { font-family: var(--sans); font-size: 15px; background: var(--paper); }
.rates { display: grid; gap: 10px; margin: 20px 0; }
.rate { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--line); padding: 14px 16px; cursor: pointer; transition: border-color .2s, background .2s; }
.rate:has(input:checked) { border-color: var(--brass); background: color-mix(in srgb, var(--brass) 7%, transparent); }
.bw-body .rate { display: flex; font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--text); margin: 0; }
.rate > span { flex: 1; }
.rate input { accent-color: var(--brass); margin-top: 5px; }
.rate b { display: block; font-weight: 500; color: var(--ink); font-size: 15px; }
.rate small { color: var(--muted); font-size: 13px; line-height: 1.4; display: block; }
.rate em { font-style: normal; margin-left: auto; font-family: var(--serif); font-size: 19px; color: var(--ink); white-space: nowrap; }
.breakdown { display: grid; gap: 10px; font-size: 14.5px; margin: 18px 0 22px; }
.breakdown div { display: flex; justify-content: space-between; gap: 12px; }
.breakdown .save { color: var(--olive); }
[data-theme="dark"] .breakdown .save { color: var(--brass-2); }
.breakdown .total { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 4px; font-size: 16px; color: var(--ink); font-weight: 500; }
.breakdown .total span:last-child { font-family: var(--serif); font-size: 30px; font-weight: 500; line-height: 1; }
.bw-note { font-size: 12.5px; color: var(--muted); text-align: center; margin: 14px 0 0; }
.bw-help { padding: 18px 30px; border-top: 1px solid var(--line-2); font-size: 13.5px; display: flex; justify-content: space-between; gap: 10px; color: var(--muted); }
.bw-help a { color: var(--ink); border-bottom: 1px solid var(--brass); }
.date-error { color: #b4452f; font-size: 13px; margin-top: 8px; display: none; }

/* Booking page */
.book-top { padding: 56px 0 30px; }
.book-top h1 { font-size: clamp(46px, 5.6vw, 78px); font-weight: 400; margin: 14px 0 10px; }
.steps { display: flex; gap: 0; margin: 34px 0 0; border-top: 1px solid var(--line); }
.steps li { list-style: none; flex: 1; padding: 18px 0 0; font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); position: relative; display: flex; gap: 12px; align-items: center; }
.steps li::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: transparent; }
.steps li.done::before, .steps li.on::before { background: var(--brass); }
.steps li i { font-style: normal; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-size: 15px; letter-spacing: 0; }
.steps li.on, .steps li.done { color: var(--ink); }
.steps li.on i, .steps li.done i { background: var(--forest); border-color: var(--forest); color: var(--on-dark); }
.steps { padding: 0; }
.book-layout { display: grid; grid-template-columns: 1fr 420px; gap: 70px; align-items: start; padding: 40px 0 120px; }
.panel { background: var(--panel); border: 1px solid var(--line-2); padding: 40px; margin-bottom: 30px; }
.panel h2 { font-size: 36px; margin-bottom: 6px; }
.panel .sub { color: var(--muted); margin-bottom: 28px; }
.panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; flex-wrap: wrap; }
.panel-head .num { font-family: var(--serif); font-size: 18px; color: var(--brass); font-style: italic; }
.stay-edit { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; border: 1px solid var(--line); }
.stay-edit > div { padding: 14px 18px; min-width: 0; }
.stay-edit > div + div { border-left: 1px solid var(--line); }
.stay-edit label { display: block; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.stay-edit input, .stay-edit select { width: 100%; border: 0; background: transparent; padding: 0; font-family: var(--serif); font-size: 19px; color: var(--ink); outline: none; }
.stay-edit select option { font-family: var(--sans); font-size: 15px; background: var(--paper); }
.addons { display: grid; gap: 14px; }
.addon { display: grid; grid-template-columns: 64px 1fr auto; gap: 20px; align-items: center; padding: 18px 20px; border: 1px solid var(--line); cursor: pointer; transition: border-color .2s, background .2s; }
.addon:has(input:checked) { border-color: var(--brass); background: color-mix(in srgb, var(--brass) 6%, transparent); }
.addon .ph { aspect-ratio: 1; }
.addon b { display: block; color: var(--ink); font-weight: 500; font-size: 16px; }
.addon small { color: var(--muted); font-size: 13.5px; display: block; line-height: 1.45; }
.addon .amt { text-align: right; font-family: var(--serif); font-size: 21px; color: var(--ink); white-space: nowrap; }
.addon .amt { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.addon:has(input:disabled) .chk { display: none; }
.addon .amt small { font-family: var(--sans); font-size: 11.5px; }
.addon input[type=checkbox] { position: absolute; opacity: 0; pointer-events: none; }
.addon .chk { width: 22px; height: 22px; border: 1px solid var(--line); display: inline-grid; place-items: center; transition: background .2s; color: transparent; font-size: 12px; }
.addon:has(input:checked) .chk { background: var(--forest); border-color: var(--forest); color: #fff; }
.addon select { border: 1px solid var(--line); background: var(--paper); padding: 6px 8px; font-size: 13.5px; margin-top: 8px; color: var(--ink); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.form-grid .full { grid-column: 1 / -1; }
.field label { display: block; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.field input, .field select, .field textarea { width: 100%; border: 1px solid var(--line); background: var(--sand); color: var(--ink); padding: 14px 16px; font-size: 15.5px; outline: none; border-radius: 0; transition: border-color .2s; }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brass); }
.field .error { display: none; color: #b4452f; font-size: 12.5px; margin-top: 6px; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: #b4452f; }
.field.invalid .error { display: block; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; cursor: pointer; }
.check input { accent-color: var(--forest); margin-top: 5px; width: 16px; height: 16px; flex: none; }
.check a { border-bottom: 1px solid var(--brass); }
.check.invalid { color: #b4452f; }
.form-success { display: none; margin-top: 16px; padding: 14px 18px; border-left: 2px solid var(--brass); background: color-mix(in srgb, var(--brass) 10%, transparent); color: var(--ink); font-size: 15px; }
.pay-note { display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; background: var(--stone); font-size: 14px; margin: 24px 0; }
.pay-note svg { color: var(--brass); flex: none; margin-top: 2px; }
.summary { position: sticky; top: 112px; background: var(--forest); color: #d6d0c3; }
.summary .ph { aspect-ratio: 16 / 9; }
.summary .inner { padding: 30px 32px 34px; }
.summary h3 { color: var(--on-dark); font-size: 32px; margin: 10px 0 4px; }
.summary .smallcaps { color: var(--brass-2); }
.summary .dates { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255, 255, 255, .12); margin: 22px 0; }
.summary .dates div { background: var(--forest); padding: 12px 0; }
.summary .dates div + div { padding-left: 16px; }
.summary .dates span { display: block; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; opacity: .7; }
.summary .dates b { font-family: var(--serif); font-size: 21px; color: var(--on-dark); font-weight: 500; }
.summary .lines { display: grid; gap: 10px; font-size: 14px; }
.summary .lines div { display: flex; justify-content: space-between; gap: 12px; }
.summary .lines .muted { color: #a9ab9d; }
.summary .grand { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid rgba(255, 255, 255, .18); margin-top: 18px; padding-top: 18px; }
.summary .grand span { font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; }
.summary .grand b { font-family: var(--serif); font-size: 44px; font-weight: 500; color: var(--on-dark); line-height: 1; }
.summary .perks { font-size: 13px; margin-top: 18px; padding: 0; list-style: none; display: grid; gap: 6px; color: #b9b6a8; }
.summary .perks li::before { content: "✦ "; color: var(--brass-2); }
.confirm { display: none; text-align: center; padding: 70px 50px; }
.confirm .seal { width: 96px; height: 96px; border-radius: 50%; border: 1px solid var(--brass); display: grid; place-items: center; margin: 0 auto 26px; color: var(--brass); }
.confirm h2 { font-size: 52px; }
.confirm .ref { display: inline-block; font-size: 13px; letter-spacing: .26em; text-transform: uppercase; border: 1px solid var(--line); padding: 10px 20px; margin: 10px 0 26px; }
.confirm .ref b { color: var(--brass); font-weight: 500; }
.confirm .next { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; text-align: left; margin: 36px 0; }
.confirm .next div { border-top: 1px solid var(--line); padding-top: 16px; font-size: 14px; color: var(--muted); }
.confirm .next b { display: block; font-family: var(--serif); font-size: 22px; color: var(--ink); font-weight: 500; }
.booked .booking-form { display: none; }
.booked .confirm { display: block; }

/* Spa / amenities */
.treatments { display: grid; grid-template-columns: 1fr 1fr; gap: 0 70px; }
.treat { display: grid; grid-template-columns: 1fr auto; gap: 4px 20px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.treat h3 { font-size: 27px; margin: 0; }
.treat .p { font-family: var(--serif); font-size: 25px; color: var(--ink); }
.treat p { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 15px; }
.treat small { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--brass); }
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); margin-bottom: 36px; overflow-x: auto; scrollbar-width: none; }
.tabs button { background: none; border: 0; padding: 16px 24px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); cursor: pointer; position: relative; white-space: nowrap; }
.tabs button.active { color: var(--ink); }
.tabs button.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--brass); }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadeUp .5s var(--ease); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.timetable { display: grid; gap: 0; }
.slot { display: grid; grid-template-columns: 120px 1fr auto auto; gap: 26px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--line-2); }
.slot time { font-family: var(--serif); font-size: 26px; color: var(--ink); }
.slot b { display: block; font-weight: 500; color: var(--ink); font-size: 17px; }
.slot small { color: var(--muted); }
.slot .lvl { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--brass); }
.facilities { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.facility { padding: 36px 30px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.facility svg { color: var(--brass); margin-bottom: 22px; }
.facility h3 { font-size: 26px; margin-bottom: 8px; }
.facility p { color: var(--muted); font-size: 14.5px; margin: 0; }
.hours { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255, 255, 255, .12); margin-top: 40px; }
.hours div { background: var(--forest); padding: 26px 28px; }
.hours span { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--brass-2); }
.hours b { display: block; font-family: var(--serif); font-size: 28px; font-weight: 400; color: var(--on-dark); margin-top: 6px; }

/* Dining */
.venue { display: grid; grid-template-columns: 1.1fr .9fr; gap: 80px; align-items: center; padding: 60px 0; }
.venue + .venue { border-top: 1px solid var(--line); }
.venue.rev > :first-child { order: 2; }
.venue h2 { font-size: clamp(40px, 4.4vw, 60px); margin: 16px 0 18px; }
.venue .ph { aspect-ratio: 5 / 4; }
.meta-row { display: flex; gap: 34px; margin: 22px 0 30px; flex-wrap: wrap; }
.meta-row div span { display: block; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.meta-row div b { font-family: var(--serif); font-size: 22px; font-weight: 500; color: var(--ink); }
.menu-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 70px; }
.dish { padding: 18px 0; border-bottom: 1px dotted var(--line); }
.dish div { display: flex; align-items: baseline; gap: 12px; }
.dish h4 { font-size: 24px; margin: 0; }
.dish div::after { content: ""; order: 1; flex: 1; }
.dish .p { order: 2; font-family: var(--serif); font-size: 22px; color: var(--brass); }
.dish p { margin: 4px 0 0; color: var(--muted); font-size: 14.5px; }
.dish .v { font-size: 10px; letter-spacing: .14em; border: 1px solid var(--olive); color: var(--olive); padding: 1px 6px; margin-left: 4px; vertical-align: middle; font-family: var(--sans); }
.reserve { display: grid; grid-template-columns: 1fr 1fr 1fr 1.2fr auto; gap: 0; background: var(--paper); border: 1px solid var(--line); }
.reserve .field { padding: 14px 18px; border-right: 1px solid var(--line-2); }
.reserve .field input, .reserve .field select { border: 0; background: transparent; padding: 0; font-family: var(--serif); font-size: 20px; }
.reserve .field label { margin-bottom: 2px; }
.reserve .btn { height: 100%; }
.reserve .form-success { grid-column: 1 / -1; margin: 0; }

/* Experiences */
.exp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 34px; }
.exp-card { display: flex; flex-direction: column; }
.exp-card .zoom { position: relative; margin-bottom: 22px; }
.exp-card .ph { aspect-ratio: 4 / 4.4; }
.exp-card .kind { position: absolute; left: 16px; top: 16px; z-index: 2; background: var(--paper); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; padding: 6px 12px; color: var(--ink); }
.exp-card h3 { font-size: 31px; margin: 0 0 8px; }
.exp-card p { color: var(--muted); font-size: 15px; margin-bottom: 16px; }
.exp-card .info { display: flex; justify-content: space-between; align-items: center; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); border-top: 1px solid var(--line); padding-top: 14px; margin-top: auto; }
.exp-card .info b { font-family: var(--serif); font-size: 22px; letter-spacing: 0; text-transform: none; color: var(--ink); font-weight: 500; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 50px; }
.chips button { border: 1px solid var(--line); background: transparent; padding: 11px 22px; font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; color: var(--text); transition: all .2s; }
.chips button:hover { border-color: var(--brass); }
.chips button.active { background: var(--forest); color: var(--on-dark); border-color: var(--forest); }
.itinerary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255, 255, 255, .12); }
.day { background: var(--forest); padding: 40px 34px; }
.day .d { font-family: var(--serif); font-size: 64px; color: var(--brass-2); line-height: 1; font-style: italic; }
.day h3 { font-size: 30px; margin: 10px 0 18px; }
.day ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; font-size: 14.5px; }
.day li { display: grid; grid-template-columns: 58px 1fr; gap: 10px; }
.day li span { color: var(--brass-2); font-size: 12px; letter-spacing: .12em; padding-top: 2px; }

/* Offers page */
.feature-offer { display: grid; grid-template-columns: 1.2fr 1fr; background: var(--forest); color: #d6d0c3; }
.feature-offer .ph { aspect-ratio: auto; height: 100%; min-height: 520px; }
.feature-offer .body { padding: 64px 60px; }
.feature-offer h2 { color: var(--on-dark); font-size: clamp(40px, 4.4vw, 62px); margin: 16px 0 18px; }
.feature-offer .price { color: var(--on-dark); font-size: 48px; }
.feature-offer .old { color: #a9ab9d; }
.countdown { display: flex; gap: 10px; margin: 28px 0 32px; }
.countdown div { border: 1px solid rgba(255, 255, 255, .22); padding: 12px 14px; min-width: 76px; text-align: center; }
.countdown b { display: block; font-family: var(--serif); font-size: 36px; color: var(--on-dark); font-weight: 400; line-height: 1; }
.countdown span { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--brass-2); }
.promo { display: flex; gap: 0; max-width: 520px; margin: 30px auto 0; }
.promo input { flex: 1; border: 1px solid var(--line); background: var(--paper); padding: 15px 18px; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; outline: none; min-width: 0; color: var(--ink); }
.promo input:focus { border-color: var(--brass); }
.promo-msg { margin-top: 14px; font-size: 14.5px; min-height: 22px; }
.promo-msg.ok { color: var(--olive); }
.promo-msg.bad { color: #b4452f; }
.terms-list { columns: 2; column-gap: 60px; font-size: 14.5px; color: var(--muted); padding-left: 18px; }
.terms-list li { margin-bottom: 10px; break-inside: avoid; }

/* Gallery */
.masonry { columns: 3; column-gap: 18px; }
.masonry figure { margin: 0 0 18px; break-inside: avoid; position: relative; cursor: zoom-in; overflow: hidden; }
.masonry figure .ph { transition: transform 1s var(--ease); }
.masonry figure:hover .ph { transform: scale(1.04); }
.masonry figcaption { position: absolute; inset: auto 0 0 0; padding: 40px 20px 16px; color: #fff; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; background: linear-gradient(transparent, rgba(14, 22, 18, .65)); opacity: 0; transition: opacity .35s; z-index: 2; }
.masonry figure:hover figcaption { opacity: 1; }
.masonry figcaption b { display: block; font-family: var(--serif); font-size: 22px; letter-spacing: 0; text-transform: none; font-weight: 500; }
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(12, 18, 15, .94); display: none; align-items: center; justify-content: center; padding: 40px 90px; }
.lightbox.open { display: flex; }
.lightbox .ph { width: min(1100px, 100%); aspect-ratio: 3 / 2; max-height: 78vh; }
.lightbox .lb-cap { position: absolute; left: 0; right: 0; bottom: 26px; text-align: center; color: #e9e2d4; font-family: var(--serif); font-size: 22px; }
.lightbox .lb-cap small { display: block; font-family: var(--sans); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--brass-2); }
.lightbox button { position: absolute; background: transparent; border: 1px solid rgba(255, 255, 255, .3); color: #fff; width: 52px; height: 52px; cursor: pointer; font-size: 20px; }
.lightbox button:hover { border-color: var(--brass-2); color: var(--brass-2); }
.lb-close { top: 24px; right: 24px; }
.lb-prev { left: 24px; top: 50%; margin-top: -26px; }
.lb-next { right: 24px; top: 50%; margin-top: -26px; }

/* About */
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px; }
.value .n { font-family: var(--serif); font-size: 60px; font-style: italic; color: var(--brass); line-height: 1; }
.value h3 { font-size: 30px; margin: 14px 0 10px; }
.value p { color: var(--muted); }
.history { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.history div { padding: 30px 26px 0 0; position: relative; }
.history div::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--brass); }
.history b { font-family: var(--serif); font-size: 44px; font-weight: 400; color: var(--ink); display: block; line-height: 1; }
.history h3 { font-size: 23px; margin: 12px 0 8px; }
.history p { color: var(--muted); font-size: 14.5px; }
.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.member .portrait { aspect-ratio: 3 / 4; background: linear-gradient(170deg, var(--stone), color-mix(in srgb, var(--brass) 30%, var(--stone))); display: grid; place-items: end center; overflow: hidden; margin-bottom: 18px; position: relative; }
.member .portrait svg { width: 70%; height: auto; }
.member h3 { font-size: 26px; margin: 0; }
.member p { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin: 4px 0 0; }
.awards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.award { border: 1px solid var(--line); padding: 34px 20px; }
.award svg { color: var(--brass); margin: 0 auto 14px; }
.award b { display: block; font-family: var(--serif); font-size: 24px; font-weight: 500; color: var(--ink); line-height: 1.15; }
.award span { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px; align-items: start; }
.contact-list { display: grid; gap: 0; margin: 30px 0; }
.contact-list div { display: grid; grid-template-columns: 140px 1fr; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line-2); }
.contact-list span { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); padding-top: 4px; }
.contact-list b { font-family: var(--serif); font-size: 22px; font-weight: 500; color: var(--ink); line-height: 1.3; }
.map { position: relative; background: #e6ddcc; border: 1px solid var(--line); overflow: hidden; }
.map svg { width: 100%; height: auto; }
[data-theme="dark"] .map { filter: brightness(.82) saturate(.9); }
.map-card { position: absolute; left: 24px; bottom: 24px; background: var(--paper); padding: 20px 24px; box-shadow: var(--shadow); max-width: 290px; }
.map-card b { font-family: var(--serif); font-size: 24px; font-weight: 500; color: var(--ink); display: block; }
.map-card small { color: var(--muted); font-size: 13.5px; display: block; margin-bottom: 10px; }
.routes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line); }
.route { padding: 34px 28px 0 0; }
.route + .route { padding-left: 28px; border-left: 1px solid var(--line-2); }
.route svg { color: var(--brass); margin-bottom: 16px; }
.route h3 { font-size: 27px; margin-bottom: 4px; }
.route .t { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--brass); }
.route p { color: var(--muted); font-size: 14.5px; margin-top: 10px; }

/* Footer */
.footer { background: var(--forest-2); color: #b9b6a8; padding: 100px 0 34px; }
.footer-top { display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: end; padding-bottom: 70px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.footer-top h2 { color: var(--on-dark); font-size: clamp(34px, 3.6vw, 48px); font-weight: 400; margin: 18px 0 0; }
.footer-top h2 em { color: var(--brass-2); }
.footer-form { display: grid; grid-template-columns: 1fr auto; gap: 0; align-items: start; }
.footer-form .field input { height: 55px; background: transparent; border: 1px solid rgba(255, 255, 255, .25); color: #fff; padding: 16px 18px; }
.footer-form .field input::placeholder { color: #8f9285; }
.footer-form .btn { height: 55px; }
.footer-form .form-success { grid-column: 1 / -1; color: var(--on-dark); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding: 70px 0 60px; }
.footer .logo { color: var(--on-dark); }
.footer .logo-mark { color: var(--brass-2); }
.footer-address { margin-top: 24px; font-size: 15px; line-height: 1.9; }
.footer-address a:hover { color: var(--brass-2); }
.footer h4 { font-family: var(--sans); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--brass-2); font-weight: 500; margin-bottom: 22px; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; font-size: 15px; }
.footer ul a:hover { color: var(--on-dark); }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 13px; color: #8f9285; }
.footer-bottom a { color: var(--brass-2); }

/* Reveal */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }

/* Responsive */
@media (max-width: 1240px) {
    .nav-links { gap: 20px; font-size: 11px; letter-spacing: .12em; }
}
@media (max-width: 1140px) {
    .nav-links { display: none; }
    .menu-toggle { display: grid; }
    .mobile-menu { display: none; flex-direction: column; padding: 10px 24px 26px; background: var(--paper); color: var(--ink); border-top: 1px solid var(--line-2); max-height: calc(100vh - 88px); overflow: auto; }
    .mobile-menu.open { display: flex; }
    .mobile-menu a { padding: 14px 0; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; border-bottom: 1px solid var(--line-2); }
    .mobile-menu a.btn { margin-top: 18px; border: 0; justify-content: center; }
    body:has(.over) .header:has(.mobile-menu.open) { background: var(--forest-2); }
    .avail { grid-template-columns: 1fr 1fr; }
    .avail > div:nth-child(2) { border-right: 0; }
    .avail > div { border-bottom: 1px solid var(--line-2); }
    .avail .btn { grid-column: 1 / -1; padding: 22px; }
    .intro, .split, .split.rev, .venue, .contact-grid { grid-template-columns: 1fr; gap: 50px; }
    .split.rev > :first-child, .venue.rev > :first-child { order: 0; }
    .rooms-grid, .offers-grid, .exp-grid { grid-template-columns: 1fr 1fr; }
    .strip-cards { grid-template-columns: 1fr 1fr; }
    .journal { grid-template-columns: 1fr 1fr; }
    .journal a:first-child { grid-column: 1 / -1; }
    .room-layout, .book-layout { grid-template-columns: 1fr; gap: 50px; }
    .book-widget, .summary { position: static; }
    .room-layout > .book-widget { order: -1; }
    .filters { grid-template-columns: 1fr 1fr; }
    .filters > div { border-bottom: 1px solid var(--line-2); }
    .filters > div:first-child { grid-column: 1 / -1; }
    .room-row { grid-template-columns: 1fr; }
    .room-row:nth-child(even) .zoom { order: 0; }
    .facilities, .team, .awards { grid-template-columns: 1fr 1fr; }
    .history { grid-template-columns: 1fr 1fr; gap: 30px 0; }
    .feature-offer { grid-template-columns: 1fr; }
    .feature-offer .ph { min-height: 340px; }
    .routes { grid-template-columns: 1fr 1fr; }
    .route:nth-child(3) { padding-left: 0; border-left: 0; }
    .footer-top { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .reserve { grid-template-columns: 1fr 1fr; }
    .reserve .btn { grid-column: 1 / -1; padding: 20px; }
    .masonry { columns: 2; }
    .hero-meta { display: none; }
}
@media (max-width: 720px) {
    body { font-size: 15.5px; }
    .container, .narrow { width: calc(100% - 32px); }
    .section { padding: 80px 0; }
    .nav { height: 74px; }
    .btn-nav, .icon-btn { display: none; }
    .logo-text b { font-size: 24px; }
    .hero-inner { padding: 140px 0 36px; }
    .hero h1 { font-size: 50px; }
    .hero p { font-size: 17px; }
    .avail { grid-template-columns: 1fr; margin-top: 30px; }
    .avail > div { border-right: 0; padding: 14px 20px; }
    .guests-pop { width: 100%; }
    .banner, .banner.short { min-height: 480px; height: auto; }
    .banner .container { flex-direction: column; align-items: flex-start; padding: 150px 0 44px; gap: 20px; }
    .banner h1 { font-size: 48px; }
    .intro-art { padding: 0 0 50px 40px; }
    .intro-art .stamp { right: -6px; width: 100px; height: 100px; }
    .stats { grid-template-columns: 1fr 1fr; }
    .stats div:nth-child(2) { border-right: 0; }
    .stats div { border-bottom: 1px solid var(--line); padding: 26px 18px; }
    .stats b { font-size: 44px; }
    .rooms-grid, .offers-grid, .exp-grid, .strip-cards, .journal, .values, .team, .awards, .facilities, .treatments, .menu-cols, .itinerary, .routes, .history, .confirm .next { grid-template-columns: 1fr; }
    .route, .route + .route { padding: 26px 0 0; border-left: 0; }
    .strip-card { min-height: 380px; }
    .filters { grid-template-columns: 1fr; }
    .seg { flex-wrap: wrap; }
    .room-row .body { padding: 30px 24px; }
    .room-row h3 { font-size: 34px; }
    .gallery-main { grid-template-columns: 1fr; grid-template-rows: 300px; height: auto; }
    .gallery-main > .ph { display: none; }
    .gallery-main .big { grid-row: auto; height: 300px; }
    .thumbs { gap: 6px; }
    .facts { grid-template-columns: 1fr 1fr; }
    .facts div, .facts div + div { padding: 18px 12px; border-left: 0; }
    .amenity-list { grid-template-columns: 1fr 1fr; }
    .policy { grid-template-columns: 1fr; gap: 6px; }
    .panel { padding: 26px 20px; }
    .stay-edit { grid-template-columns: 1fr 1fr; }
    .stay-edit > div:nth-child(3) { border-left: 0; }
    .stay-edit > div:nth-child(n+3) { border-top: 1px solid var(--line); }
    .addon { grid-template-columns: 48px 1fr; gap: 14px; padding: 16px; }
    .addon .amt { grid-column: 2; text-align: left; }
    .form-grid { grid-template-columns: 1fr; }
    .steps li { font-size: 0; gap: 0; }
    .steps li i { font-size: 15px; }
    .slot { grid-template-columns: 80px 1fr; gap: 6px 16px; }
    .slot .lvl, .slot .btn { grid-column: 2; justify-self: start; }
    .footer-grid { grid-template-columns: 1fr; }
    .footer-form { grid-template-columns: 1fr; }
    .masonry { columns: 1; }
    .reserve { grid-template-columns: 1fr; }
    .reserve .field { border-right: 0; border-bottom: 1px solid var(--line-2); }
    .countdown div { min-width: 0; flex: 1; padding: 10px 6px; }
    .feature-offer .body { padding: 40px 24px; }
    .terms-list { columns: 1; }
    .lightbox { padding: 20px; }
    .lb-prev, .lb-next { top: auto; bottom: 80px; }
    .contact-list div { grid-template-columns: 1fr; gap: 2px; }
    .map-card { position: static; max-width: none; }
    .confirm { padding: 50px 20px; }
    .press { justify-content: center; }
    .cta-band { padding: 100px 0; }
    .dropcap::first-letter { font-size: 62px; }
}

/* ------------------------------------------------------------------
   Scene artwork: CSS/SVG placeholder photography. Replace a scene by
   swapping the class on a .ph element for your own background-image.
------------------------------------------------------------------- */
/* @scenes */
.ph-coast, .x-art[style*="--h:11"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='900' viewBox='0 0 1600 900' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%232f4340'/%3E%3Cstop offset='.42' stop-color='%238d8a74'/%3E%3Cstop offset='.78' stop-color='%23e3b98a'/%3E%3Cstop offset='1' stop-color='%23f6dcb2'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%239aa197'/%3E%3Cstop offset='.25' stop-color='%235e7571'/%3E%3Cstop offset='1' stop-color='%231b2a26'/%3E%3C/linearGradient%3E%3CradialGradient id='c' cx='.64' cy='.62' r='.42'%3E%3Cstop offset='0' stop-color='%23fff0d4' stop-opacity='.9'/%3E%3Cstop offset='1' stop-color='%23fff0d4' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='1600' height='580' fill='url(%23a)'/%3E%3Crect width='1600' height='900' fill='url(%23c)'/%3E%3Cg fill='%23fff' opacity='.12'%3E%3Cellipse cx='400' cy='300' rx='260' ry='14'/%3E%3Cellipse cx='620' cy='340' rx='200' ry='10'/%3E%3Cellipse cx='1200' cy='260' rx='240' ry='12'/%3E%3C/g%3E%3Ccircle cx='1020' cy='548' r='40' fill='%23fff1d6'/%3E%3Cpath d='M0 578 C140 530 280 512 400 534 C500 552 600 570 720 578 Z' fill='%2356665d' opacity='.85'/%3E%3Cpath d='M1080 578 C1150 566 1230 556 1300 562 L1360 578Z' fill='%236c776a' opacity='.7'/%3E%3Crect y='576' width='1600' height='324' fill='url(%23b)'/%3E%3Cg fill='%23ffe3b3' opacity='.55'%3E%3Crect x='990' y='588' width='60' height='3' rx='1.5'/%3E%3Crect x='962' y='604' width='116' height='3' rx='1.5'/%3E%3Crect x='978' y='624' width='84' height='3' rx='1.5'/%3E%3Crect x='940' y='650' width='160' height='3' rx='1.5'/%3E%3Crect x='996' y='682' width='48' height='3' rx='1.5'/%3E%3Crect x='924' y='716' width='190' height='4' rx='2'/%3E%3Crect x='970' y='760' width='100' height='4' rx='2'/%3E%3C/g%3E%3Cg stroke='%23c9d2cb' stroke-opacity='.18' stroke-width='2'%3E%3Cpath d='M80 640h140M300 700h220M620 660h120M180 780h260M1200 640h100'/%3E%3C/g%3E%3Cpath d='M1600 900 V356 C1540 358 1500 378 1468 408 C1428 448 1398 470 1358 500 C1308 540 1278 590 1250 640 C1220 700 1200 780 1190 900Z' fill='%2326352e'/%3E%3Cpath d='M1468 408 C1438 448 1410 478 1380 504 C1402 498 1444 468 1484 424Z' fill='%233a4b40'/%3E%3Cg%3E%3Crect x='1470' y='326' width='116' height='6' fill='%23ddd0ba'/%3E%3Crect x='1480' y='332' width='96' height='32' fill='%23ece0cc'/%3E%3Crect x='1496' y='342' width='14' height='14' fill='%23e7ae62'/%3E%3Crect x='1522' y='342' width='28' height='14' fill='%23e7ae62'/%3E%3Crect x='1556' y='342' width='12' height='14' fill='%23d19a55'/%3E%3C/g%3E%3Cpath d='M1330 526 C1328 486 1336 456 1352 432' stroke='%231a2722' stroke-width='7' fill='none'/%3E%3Cpath d='M1268 434 C1292 402 1392 396 1444 422 C1422 444 1300 450 1268 434Z' fill='%231a2722'/%3E%3Cpath d='M1412 470 C1410 440 1414 420 1424 404' stroke='%231a2722' stroke-width='5' fill='none'/%3E%3Cpath d='M0 900 V742 C160 702 340 714 520 772 C640 810 740 862 800 900Z' fill='%2318241f'/%3E%3Cg stroke='%2318241f' stroke-width='3' fill='none' stroke-linecap='round'%3E%3Cpath d='M120 722 C118 682 110 652 96 622'/%3E%3Cpath d='M140 720 C146 672 160 642 176 614'/%3E%3Cpath d='M160 724 C160 692 166 670 180 652'/%3E%3Cpath d='M300 718 C296 678 286 652 270 632'/%3E%3Cpath d='M320 716 C328 670 344 642 360 626'/%3E%3Cpath d='M60 742 C56 702 46 682 30 668'/%3E%3Cpath d='M420 740 C420 700 430 680 446 664'/%3E%3C/g%3E%3Cg stroke='%232b3834' stroke-width='2' fill='none'%3E%3Cpath d='M1140 250 q8 -8 16 0 q8 -8 16 0'/%3E%3Cpath d='M1200 222 q6 -6 12 0 q6 -6 12 0'/%3E%3Cpath d='M1096 276 q5 -5 10 0 q5 -5 10 0'/%3E%3C/g%3E%3C/svg%3E"); }
.ph-bed { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='600' viewBox='0 0 800 600' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='w' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23efe6d8'/%3E%3Cstop offset='1' stop-color='%23e2d4bf'/%3E%3C/linearGradient%3E%3ClinearGradient id='l' x1='1' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff8ea' stop-opacity='.6'/%3E%3Cstop offset='.7' stop-color='%23fff8ea' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='k' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23dfe8e4'/%3E%3Cstop offset='1' stop-color='%23f5e4c8'/%3E%3C/linearGradient%3E%3CclipPath id='c'%3E%3Crect x='540' y='90' width='200' height='270'/%3E%3C/clipPath%3E%3C/defs%3E%3Crect width='800' height='600' fill='url(%23w)'/%3E%3Crect y='455' width='800' height='145' fill='%23cdb99b'/%3E%3Cg stroke='%23000' stroke-opacity='.06'%3E%3Cpath d='M0 480H800M0 512H800M0 550H800'/%3E%3C/g%3E%3Cg clip-path='url(%23c)'%3E%3Crect x='540' y='90' width='200' height='270' fill='url(%23k)'/%3E%3Ccircle cx='690' cy='236' r='18' fill='%23fff4dc' opacity='.8'/%3E%3Crect x='540' y='250' width='200' height='110' fill='%2386a2a0'/%3E%3Crect x='540' y='250' width='200' height='5' fill='%23adc2bd'/%3E%3Cpath d='M540 250 C570 238 600 236 630 250Z' fill='%239aa593'/%3E%3C/g%3E%3Crect x='540' y='90' width='200' height='270' fill='none' stroke='%23fbf7ef' stroke-width='10'/%3E%3Cpath d='M640 90V360M540 225H740' stroke='%23fbf7ef' stroke-width='5'/%3E%3Crect x='528' y='360' width='224' height='10' fill='%23f4ede1'/%3E%3Crect x='500' y='64' width='300' height='4' fill='%23a88450'/%3E%3Cpath d='M748 68 C762 200 754 320 772 455 H800 V68Z' fill='%23f7f1e6' opacity='.92'/%3E%3Cpath d='M764 90 C774 220 766 330 782 455' stroke='%23e0d4c1' stroke-width='3' fill='none'/%3E%3Cpath d='M540 90 L740 90 L430 600 L90 600Z' fill='url(%23l)' opacity='.55'/%3E%3Crect x='175' y='112' width='150' height='96' fill='%23f4ecdf' stroke='%23a88450' stroke-width='4'/%3E%3Ccircle cx='228' cy='160' r='22' fill='%23c98f5d' opacity='.75'/%3E%3Cpath d='M186 190 C220 170 262 182 316 158' stroke='%235c6b4a' stroke-width='5' fill='none'/%3E%3Crect x='70' y='240' width='360' height='150' rx='6' fill='%235c6b4a'/%3E%3Cg stroke='%23000' stroke-opacity='.13' stroke-width='2'%3E%3Cpath d='M130 246V386M190 246V386M250 246V386M310 246V386M370 246V386'/%3E%3C/g%3E%3Crect x='96' y='330' width='124' height='52' rx='18' fill='%23fbfaf6'/%3E%3Crect x='280' y='330' width='124' height='52' rx='18' fill='%23fbfaf6'/%3E%3Crect x='205' y='346' width='92' height='38' rx='14' fill='%23b08d57'/%3E%3Cpath d='M50 380 H450 V470 H50Z' fill='%23f3eee4'/%3E%3Cpath d='M50 380 H450 V394 H50Z' fill='%23ffffff'/%3E%3Crect x='50' y='418' width='400' height='32' fill='%23b08d57'/%3E%3Crect x='50' y='418' width='400' height='4' fill='%23000' opacity='.08'/%3E%3Crect x='56' y='470' width='388' height='14' fill='%236d5b45'/%3E%3Crect x='462' y='402' width='56' height='68' fill='%238a6d4b'/%3E%3Crect x='462' y='428' width='56' height='2' fill='%236d5638'/%3E%3Crect x='484' y='374' width='10' height='28' fill='%23a88450'/%3E%3Cpath d='M470 350 H508 L516 376 H462Z' fill='%23efe4cf'/%3E%3Cellipse cx='489' cy='368' rx='40' ry='26' fill='%23fff1cf' opacity='.25'/%3E%3Cpath d='M20 520 L480 520 L530 596 L-30 596Z' fill='%23000' opacity='.07'/%3E%3C/svg%3E"); }
.ph-bed2 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='600' viewBox='0 0 800 600' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='w' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%238a977a'/%3E%3Cstop offset='1' stop-color='%2376846a'/%3E%3C/linearGradient%3E%3ClinearGradient id='l' x1='1' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff8ea' stop-opacity='.6'/%3E%3Cstop offset='.7' stop-color='%23fff8ea' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='k' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23dfe8e4'/%3E%3Cstop offset='1' stop-color='%23f5e4c8'/%3E%3C/linearGradient%3E%3CclipPath id='c'%3E%3Crect x='540' y='90' width='200' height='270'/%3E%3C/clipPath%3E%3C/defs%3E%3Crect width='800' height='600' fill='url(%23w)'/%3E%3Crect y='455' width='800' height='145' fill='%23b9a07c'/%3E%3Cg stroke='%23000' stroke-opacity='.06'%3E%3Cpath d='M0 480H800M0 512H800M0 550H800'/%3E%3C/g%3E%3Cg clip-path='url(%23c)'%3E%3Crect x='540' y='90' width='200' height='270' fill='%23e3e8df'/%3E%3Ccircle cx='570' cy='290' r='70' fill='%238a9a6c'/%3E%3Ccircle cx='660' cy='250' r='80' fill='%236f8158'/%3E%3Ccircle cx='740' cy='300' r='60' fill='%2398a67a'/%3E%3Crect x='540' y='320' width='200' height='40' fill='%235e7049'/%3E%3C/g%3E%3Crect x='540' y='90' width='200' height='270' fill='none' stroke='%23fbf7ef' stroke-width='10'/%3E%3Cpath d='M640 90V360M540 225H740' stroke='%23fbf7ef' stroke-width='5'/%3E%3Crect x='528' y='360' width='224' height='10' fill='%23f4ede1'/%3E%3Crect x='500' y='64' width='300' height='4' fill='%23a88450'/%3E%3Cpath d='M748 68 C762 200 754 320 772 455 H800 V68Z' fill='%23f7f1e6' opacity='.92'/%3E%3Cpath d='M764 90 C774 220 766 330 782 455' stroke='%23e0d4c1' stroke-width='3' fill='none'/%3E%3Cpath d='M540 90 L740 90 L430 600 L90 600Z' fill='url(%23l)' opacity='.55'/%3E%3Crect x='175' y='112' width='150' height='96' fill='%23f4ecdf' stroke='%23a88450' stroke-width='4'/%3E%3Cpath d='M190 196 C220 140 250 140 270 196Z' fill='%235c6b4a' opacity='.7'/%3E%3Cpath d='M240 196 C262 156 290 156 310 196Z' fill='%23b08d57' opacity='.7'/%3E%3Crect x='70' y='240' width='360' height='150' rx='6' fill='%23c9ab7c'/%3E%3Cg stroke='%23000' stroke-opacity='.13' stroke-width='2'%3E%3Cpath d='M130 246V386M190 246V386M250 246V386M310 246V386M370 246V386'/%3E%3C/g%3E%3Crect x='96' y='330' width='124' height='52' rx='18' fill='%23fbfaf6'/%3E%3Crect x='280' y='330' width='124' height='52' rx='18' fill='%23fbfaf6'/%3E%3Crect x='205' y='346' width='92' height='38' rx='14' fill='%23b8704c'/%3E%3Cpath d='M50 380 H450 V470 H50Z' fill='%23f3eee4'/%3E%3Cpath d='M50 380 H450 V394 H50Z' fill='%23ffffff'/%3E%3Crect x='50' y='418' width='400' height='32' fill='%23b8704c'/%3E%3Crect x='50' y='418' width='400' height='4' fill='%23000' opacity='.08'/%3E%3Crect x='56' y='470' width='388' height='14' fill='%236d5b45'/%3E%3Crect x='462' y='402' width='56' height='68' fill='%238a6d4b'/%3E%3Crect x='462' y='428' width='56' height='2' fill='%236d5638'/%3E%3Crect x='484' y='374' width='10' height='28' fill='%23a88450'/%3E%3Cpath d='M470 350 H508 L516 376 H462Z' fill='%23efe4cf'/%3E%3Cellipse cx='489' cy='368' rx='40' ry='26' fill='%23fff1cf' opacity='.25'/%3E%3Cpath d='M20 520 L480 520 L530 596 L-30 596Z' fill='%23000' opacity='.07'/%3E%3C/svg%3E"); }
.ph-bed3 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='600' viewBox='0 0 800 600' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='w' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23e9e0d3'/%3E%3Cstop offset='1' stop-color='%23d9ccb8'/%3E%3C/linearGradient%3E%3ClinearGradient id='l' x1='1' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff8ea' stop-opacity='.6'/%3E%3Cstop offset='.7' stop-color='%23fff8ea' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='k' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23dfe8e4'/%3E%3Cstop offset='1' stop-color='%23f5e4c8'/%3E%3C/linearGradient%3E%3CclipPath id='c'%3E%3Crect x='540' y='90' width='200' height='270'/%3E%3C/clipPath%3E%3C/defs%3E%3Crect width='800' height='600' fill='url(%23w)'/%3E%3Crect y='455' width='800' height='145' fill='%23c4ae8c'/%3E%3Cg stroke='%23000' stroke-opacity='.06'%3E%3Cpath d='M0 480H800M0 512H800M0 550H800'/%3E%3C/g%3E%3Cg clip-path='url(%23c)'%3E%3Crect x='540' y='90' width='200' height='270' fill='url(%23k)'/%3E%3Crect x='540' y='240' width='200' height='30' fill='%238da6a3'/%3E%3Cpath d='M540 290 C600 250 680 262 740 280 V360 H540Z' fill='%23dcc7a0'/%3E%3Cpath d='M540 320 C620 300 690 310 740 330 V360 H540Z' fill='%23cdb489'/%3E%3C/g%3E%3Crect x='540' y='90' width='200' height='270' fill='none' stroke='%23fbf7ef' stroke-width='10'/%3E%3Cpath d='M640 90V360M540 225H740' stroke='%23fbf7ef' stroke-width='5'/%3E%3Crect x='528' y='360' width='224' height='10' fill='%23f4ede1'/%3E%3Crect x='500' y='64' width='300' height='4' fill='%23a88450'/%3E%3Cpath d='M748 68 C762 200 754 320 772 455 H800 V68Z' fill='%23f7f1e6' opacity='.92'/%3E%3Cpath d='M764 90 C774 220 766 330 782 455' stroke='%23e0d4c1' stroke-width='3' fill='none'/%3E%3Cpath d='M540 90 L740 90 L430 600 L90 600Z' fill='url(%23l)' opacity='.55'/%3E%3Crect x='175' y='112' width='150' height='96' fill='%23f4ecdf' stroke='%23a88450' stroke-width='4'/%3E%3Cpath d='M184 170 H316' stroke='%2386a2a0' stroke-width='18'/%3E%3Ccircle cx='280' cy='145' r='14' fill='%23e0b27a'/%3E%3Crect x='70' y='240' width='360' height='150' rx='6' fill='%238a6d4b'/%3E%3Cg stroke='%23000' stroke-opacity='.13' stroke-width='2'%3E%3Cpath d='M130 246V386M190 246V386M250 246V386M310 246V386M370 246V386'/%3E%3C/g%3E%3Crect x='96' y='330' width='124' height='52' rx='18' fill='%23fbfaf6'/%3E%3Crect x='280' y='330' width='124' height='52' rx='18' fill='%23fbfaf6'/%3E%3Crect x='205' y='346' width='92' height='38' rx='14' fill='%235c6b4a'/%3E%3Cpath d='M50 380 H450 V470 H50Z' fill='%23f3eee4'/%3E%3Cpath d='M50 380 H450 V394 H50Z' fill='%23ffffff'/%3E%3Crect x='50' y='418' width='400' height='32' fill='%235c6b4a'/%3E%3Crect x='50' y='418' width='400' height='4' fill='%23000' opacity='.08'/%3E%3Crect x='56' y='470' width='388' height='14' fill='%236d5b45'/%3E%3Crect x='462' y='402' width='56' height='68' fill='%238a6d4b'/%3E%3Crect x='462' y='428' width='56' height='2' fill='%236d5638'/%3E%3Crect x='484' y='374' width='10' height='28' fill='%23a88450'/%3E%3Cpath d='M470 350 H508 L516 376 H462Z' fill='%23efe4cf'/%3E%3Cellipse cx='489' cy='368' rx='40' ry='26' fill='%23fff1cf' opacity='.25'/%3E%3Cpath d='M20 520 L480 520 L530 596 L-30 596Z' fill='%23000' opacity='.07'/%3E%3C/svg%3E"); }
.ph-bed4 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='600' viewBox='0 0 800 600' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='w' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23d8cbb7'/%3E%3Cstop offset='1' stop-color='%23c8b89f'/%3E%3C/linearGradient%3E%3ClinearGradient id='l' x1='1' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff8ea' stop-opacity='.6'/%3E%3Cstop offset='.7' stop-color='%23fff8ea' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='k' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23dfe8e4'/%3E%3Cstop offset='1' stop-color='%23f5e4c8'/%3E%3C/linearGradient%3E%3CclipPath id='c'%3E%3Crect x='540' y='90' width='200' height='270'/%3E%3C/clipPath%3E%3C/defs%3E%3Crect width='800' height='600' fill='url(%23w)'/%3E%3Crect y='455' width='800' height='145' fill='%23a98f6d'/%3E%3Cg stroke='%23000' stroke-opacity='.06'%3E%3Cpath d='M0 480H800M0 512H800M0 550H800'/%3E%3C/g%3E%3Cg clip-path='url(%23c)'%3E%3Crect x='540' y='90' width='200' height='270' fill='url(%23k)'/%3E%3Ccircle cx='690' cy='236' r='18' fill='%23fff4dc' opacity='.8'/%3E%3Crect x='540' y='250' width='200' height='110' fill='%2386a2a0'/%3E%3Crect x='540' y='250' width='200' height='5' fill='%23adc2bd'/%3E%3Cpath d='M540 250 C570 238 600 236 630 250Z' fill='%239aa593'/%3E%3C/g%3E%3Crect x='540' y='90' width='200' height='270' fill='none' stroke='%23fbf7ef' stroke-width='10'/%3E%3Cpath d='M640 90V360M540 225H740' stroke='%23fbf7ef' stroke-width='5'/%3E%3Crect x='528' y='360' width='224' height='10' fill='%23f4ede1'/%3E%3Crect x='500' y='64' width='300' height='4' fill='%23a88450'/%3E%3Cpath d='M748 68 C762 200 754 320 772 455 H800 V68Z' fill='%23f7f1e6' opacity='.92'/%3E%3Cpath d='M764 90 C774 220 766 330 782 455' stroke='%23e0d4c1' stroke-width='3' fill='none'/%3E%3Cpath d='M540 90 L740 90 L430 600 L90 600Z' fill='url(%23l)' opacity='.55'/%3E%3Crect x='175' y='112' width='150' height='96' fill='%23f4ecdf' stroke='%23a88450' stroke-width='4'/%3E%3Cpath d='M190 196 C220 140 250 140 270 196Z' fill='%235c6b4a' opacity='.7'/%3E%3Cpath d='M240 196 C262 156 290 156 310 196Z' fill='%23b08d57' opacity='.7'/%3E%3Crect x='70' y='240' width='360' height='150' rx='6' fill='%232f4538'/%3E%3Cg stroke='%23000' stroke-opacity='.13' stroke-width='2'%3E%3Cpath d='M130 246V386M190 246V386M250 246V386M310 246V386M370 246V386'/%3E%3C/g%3E%3Crect x='96' y='330' width='124' height='52' rx='18' fill='%23fbfaf6'/%3E%3Crect x='280' y='330' width='124' height='52' rx='18' fill='%23fbfaf6'/%3E%3Crect x='205' y='346' width='92' height='38' rx='14' fill='%23c4a472'/%3E%3Cpath d='M50 380 H450 V470 H50Z' fill='%23f3eee4'/%3E%3Cpath d='M50 380 H450 V394 H50Z' fill='%23ffffff'/%3E%3Crect x='50' y='418' width='400' height='32' fill='%23c4a472'/%3E%3Crect x='50' y='418' width='400' height='4' fill='%23000' opacity='.08'/%3E%3Crect x='56' y='470' width='388' height='14' fill='%236d5b45'/%3E%3Crect x='462' y='402' width='56' height='68' fill='%238a6d4b'/%3E%3Crect x='462' y='428' width='56' height='2' fill='%236d5638'/%3E%3Crect x='484' y='374' width='10' height='28' fill='%23a88450'/%3E%3Cpath d='M470 350 H508 L516 376 H462Z' fill='%23efe4cf'/%3E%3Cellipse cx='489' cy='368' rx='40' ry='26' fill='%23fff1cf' opacity='.25'/%3E%3Cpath d='M20 520 L480 520 L530 596 L-30 596Z' fill='%23000' opacity='.07'/%3E%3C/svg%3E"); }
.ph-arch, .x-art[style*="--h:22"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='600' viewBox='0 0 800 600' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='w' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ece2d2'/%3E%3Cstop offset='1' stop-color='%23ddcfb9'/%3E%3C/linearGradient%3E%3ClinearGradient id='k' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23d6e2df'/%3E%3Cstop offset='1' stop-color='%23f4e2c4'/%3E%3C/linearGradient%3E%3ClinearGradient id='l' x1='1' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff8ea' stop-opacity='.55'/%3E%3Cstop offset='.7' stop-color='%23fff8ea' stop-opacity='0'/%3E%3C/linearGradient%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23ffe8bd' stop-opacity='.7'/%3E%3Cstop offset='1' stop-color='%23ffe8bd' stop-opacity='0'/%3E%3C/radialGradient%3E%3CclipPath id='c'%3E%3Cpath d='M430 460 V220 A150 150 0 0 1 730 220 V460Z'/%3E%3C/clipPath%3E%3C/defs%3E%3Crect width='800' height='600' fill='url(%23w)'/%3E%3Crect y='470' width='800' height='130' fill='%23c9b393'/%3E%3Cg clip-path='url(%23c)'%3E%3Crect x='420' y='60' width='320' height='410' fill='url(%23k)'/%3E%3Cpath d='M430 330 C480 300 540 296 600 318 L600 330Z' fill='%239aa593'/%3E%3Crect x='420' y='326' width='320' height='140' fill='%237e9c9b'/%3E%3Cg stroke='%23fff' stroke-opacity='.3'%3E%3Cpath d='M460 360h60M560 390h90M480 420h120'/%3E%3C/g%3E%3C/g%3E%3Cpath d='M430 460 V220 A150 150 0 0 1 730 220 V460Z' fill='none' stroke='%23f7f2e9' stroke-width='12'/%3E%3Cpath d='M580 70 V460 M430 300 H730' stroke='%23f7f2e9' stroke-width='5'/%3E%3Crect x='418' y='460' width='324' height='12' fill='%23f3ebdd'/%3E%3Cpath d='M430 72 L730 72 L560 600 L120 600Z' fill='url(%23l)' opacity='.5'/%3E%3Cellipse cx='250' cy='560' rx='280' ry='34' fill='%23b89f7c' opacity='.55'/%3E%3Crect x='60' y='362' width='330' height='70' rx='20' fill='%23d8c5a5'/%3E%3Crect x='48' y='412' width='354' height='62' rx='16' fill='%23cbb592'/%3E%3Crect x='36' y='382' width='42' height='94' rx='16' fill='%23c2ab86'/%3E%3Crect x='372' y='382' width='42' height='94' rx='16' fill='%23c2ab86'/%3E%3Crect x='96' y='374' width='70' height='52' rx='14' fill='%235c6b4a'/%3E%3Crect x='176' y='380' width='64' height='46' rx='14' fill='%23efe7d8'/%3E%3Crect x='286' y='374' width='70' height='52' rx='14' fill='%23a88450'/%3E%3Crect x='60' y='474' width='8' height='18' fill='%236d5638'/%3E%3Crect x='382' y='474' width='8' height='18' fill='%236d5638'/%3E%3Cellipse cx='250' cy='520' rx='110' ry='18' fill='%238a6d4b'/%3E%3Crect x='242' y='520' width='16' height='44' fill='%236d5638'/%3E%3Cpath d='M236 516 C226 490 244 480 248 462 C252 480 270 490 260 516Z' fill='%23f1e9dc'/%3E%3Cpath d='M248 462 C244 420 256 392 280 360' stroke='%235c6b4a' stroke-width='2' fill='none'/%3E%3Cg fill='%236f8158'%3E%3Cellipse cx='262' cy='400' rx='9' ry='4' transform='rotate(-40 262 400)'/%3E%3Cellipse cx='272' cy='380' rx='9' ry='4' transform='rotate(-50 272 380)'/%3E%3Cellipse cx='252' cy='420' rx='9' ry='4' transform='rotate(-30 252 420)'/%3E%3C/g%3E%3Cpath d='M760 600 V190 C760 150 720 132 680 150' stroke='%23a88450' stroke-width='5' fill='none'/%3E%3Cellipse cx='670' cy='172' rx='70' ry='50' fill='url(%23g)'/%3E%3Cpath d='M646 164 A26 22 0 0 1 698 164Z' fill='%23a88450'/%3E%3C/svg%3E"); }
.ph-terrace, .x-art[style*="--h:99"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='600' viewBox='0 0 800 600' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23c6d6d3'/%3E%3Cstop offset='1' stop-color='%23f3e2c6'/%3E%3C/linearGradient%3E%3ClinearGradient id='m' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2386a09d'/%3E%3Cstop offset='1' stop-color='%235b7b79'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='800' height='340' fill='url(%23s)'/%3E%3Cpath d='M480 340 C540 312 620 300 700 318 C740 326 780 334 800 340Z' fill='%2398a291'/%3E%3Crect y='338' width='800' height='140' fill='url(%23m)'/%3E%3Cg stroke='%23fff' stroke-opacity='.3'%3E%3Cpath d='M60 360h90M300 372h140M560 356h80'/%3E%3C/g%3E%3Cpath d='M10 404h14v6c8 14 8 30 0 44v6h-14v-6c-8-14-8-30 0-44z' fill='%23e6dac6'/%3E%3Cpath d='M44 404h14v6c8 14 8 30 0 44v6h-14v-6c-8-14-8-30 0-44z' fill='%23e6dac6'/%3E%3Cpath d='M78 404h14v6c8 14 8 30 0 44v6h-14v-6c-8-14-8-30 0-44z' fill='%23e6dac6'/%3E%3Cpath d='M112 404h14v6c8 14 8 30 0 44v6h-14v-6c-8-14-8-30 0-44z' fill='%23e6dac6'/%3E%3Cpath d='M146 404h14v6c8 14 8 30 0 44v6h-14v-6c-8-14-8-30 0-44z' fill='%23e6dac6'/%3E%3Cpath d='M180 404h14v6c8 14 8 30 0 44v6h-14v-6c-8-14-8-30 0-44z' fill='%23e6dac6'/%3E%3Cpath d='M214 404h14v6c8 14 8 30 0 44v6h-14v-6c-8-14-8-30 0-44z' fill='%23e6dac6'/%3E%3Cpath d='M248 404h14v6c8 14 8 30 0 44v6h-14v-6c-8-14-8-30 0-44z' fill='%23e6dac6'/%3E%3Cpath d='M282 404h14v6c8 14 8 30 0 44v6h-14v-6c-8-14-8-30 0-44z' fill='%23e6dac6'/%3E%3Cpath d='M316 404h14v6c8 14 8 30 0 44v6h-14v-6c-8-14-8-30 0-44z' fill='%23e6dac6'/%3E%3Cpath d='M350 404h14v6c8 14 8 30 0 44v6h-14v-6c-8-14-8-30 0-44z' fill='%23e6dac6'/%3E%3Cpath d='M384 404h14v6c8 14 8 30 0 44v6h-14v-6c-8-14-8-30 0-44z' fill='%23e6dac6'/%3E%3Cpath d='M418 404h14v6c8 14 8 30 0 44v6h-14v-6c-8-14-8-30 0-44z' fill='%23e6dac6'/%3E%3Cpath d='M452 404h14v6c8 14 8 30 0 44v6h-14v-6c-8-14-8-30 0-44z' fill='%23e6dac6'/%3E%3Cpath d='M486 404h14v6c8 14 8 30 0 44v6h-14v-6c-8-14-8-30 0-44z' fill='%23e6dac6'/%3E%3Cpath d='M520 404h14v6c8 14 8 30 0 44v6h-14v-6c-8-14-8-30 0-44z' fill='%23e6dac6'/%3E%3Cpath d='M554 404h14v6c8 14 8 30 0 44v6h-14v-6c-8-14-8-30 0-44z' fill='%23e6dac6'/%3E%3Cpath d='M588 404h14v6c8 14 8 30 0 44v6h-14v-6c-8-14-8-30 0-44z' fill='%23e6dac6'/%3E%3Cpath d='M622 404h14v6c8 14 8 30 0 44v6h-14v-6c-8-14-8-30 0-44z' fill='%23e6dac6'/%3E%3Cpath d='M656 404h14v6c8 14 8 30 0 44v6h-14v-6c-8-14-8-30 0-44z' fill='%23e6dac6'/%3E%3Cpath d='M690 404h14v6c8 14 8 30 0 44v6h-14v-6c-8-14-8-30 0-44z' fill='%23e6dac6'/%3E%3Cpath d='M724 404h14v6c8 14 8 30 0 44v6h-14v-6c-8-14-8-30 0-44z' fill='%23e6dac6'/%3E%3Cpath d='M758 404h14v6c8 14 8 30 0 44v6h-14v-6c-8-14-8-30 0-44z' fill='%23e6dac6'/%3E%3Cpath d='M792 404h14v6c8 14 8 30 0 44v6h-14v-6c-8-14-8-30 0-44z' fill='%23e6dac6'/%3E%3Crect y='390' width='800' height='16' fill='%23f1e8d8'/%3E%3Crect y='458' width='800' height='10' fill='%23e0d3be'/%3E%3Crect y='468' width='800' height='132' fill='%23d9cab1'/%3E%3Cg stroke='%23c4b393' stroke-width='1.5'%3E%3Cpath d='M0 500H800M0 540H800M120 468 L60 600M320 468 L300 600M520 468 L540 600M720 468 L780 600'/%3E%3C/g%3E%3Cpath d='M380 530 V250' stroke='%236d5638' stroke-width='5'/%3E%3Cpath d='M220 282 Q380 196 540 282 Z' fill='%23f4ede2'/%3E%3Cpath d='M300 282 Q380 196 460 282 Z' fill='%235c6b4a' opacity='.85'/%3E%3Cpath d='M220 282 q20 12 40 0 q20 12 40 0 q20 12 40 0 q20 12 40 0 q20 12 40 0 q20 12 40 0 q20 12 40 0 q20 12 40 0Z' fill='%23e7dccb'/%3E%3Cg%3E%3Cpath d='M120 540 L112 566 M300 540 L308 566' stroke='%236d5638' stroke-width='4'/%3E%3Crect x='110' y='518' width='200' height='22' rx='6' fill='%23f7f2ea'/%3E%3Cpath d='M270 520 L312 476 L330 484 L292 522Z' fill='%23f7f2ea'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M440 552 L432 578 M620 552 L628 578' stroke='%236d5638' stroke-width='4'/%3E%3Crect x='430' y='530' width='200' height='22' rx='6' fill='%23f7f2ea'/%3E%3Cpath d='M590 532 L632 488 L650 496 L612 534Z' fill='%23f7f2ea'/%3E%3Crect x='480' y='522' width='60' height='10' rx='4' fill='%23a88450'/%3E%3C/g%3E%3Cpath d='M700 600 L690 520 H770 L760 600Z' fill='%23b8774f'/%3E%3Cpath d='M730 520 C728 480 732 460 740 440' stroke='%236d5a44' stroke-width='5' fill='none'/%3E%3Cg fill='%238d9a78'%3E%3Cellipse cx='720' cy='430' rx='44' ry='30'/%3E%3Cellipse cx='760' cy='410' rx='40' ry='28' fill='%23a3ad8d'/%3E%3Cellipse cx='740' cy='392' rx='36' ry='24'/%3E%3C/g%3E%3C/svg%3E"); }
.ph-villa { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='600' viewBox='0 0 800 600' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23cddcd9'/%3E%3Cstop offset='1' stop-color='%23f4e6cd'/%3E%3C/linearGradient%3E%3ClinearGradient id='p' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%239cc2bc'/%3E%3Cstop offset='1' stop-color='%236f9e98'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='800' height='600' fill='url(%23s)'/%3E%3Cpath d='M0 310 C120 280 260 276 380 300 L380 330 H0Z' fill='%23a8b09b'/%3E%3Crect y='318' width='800' height='30' fill='%2388a4a1'/%3E%3Crect x='340' y='158' width='420' height='14' fill='%23e6dccb'/%3E%3Crect x='360' y='172' width='380' height='176' fill='%23f6f0e6'/%3E%3Crect x='392' y='214' width='96' height='134' fill='%233b4a42'/%3E%3Crect x='512' y='214' width='196' height='134' fill='%234a5b51'/%3E%3Cg stroke='%23f6f0e6' stroke-width='3'%3E%3Cpath d='M577 214V348M643 214V348M440 214V348'/%3E%3C/g%3E%3Cpath d='M512 214 L560 214 L512 280Z' fill='%23fff' opacity='.12'/%3E%3Crect x='0' y='346' width='800' height='36' fill='%23cdb48f'/%3E%3Cg stroke='%23b89b72' stroke-width='1.5'%3E%3Cpath d='M0 356H800M0 368H800'/%3E%3C/g%3E%3Crect x='150' y='382' width='650' height='112' fill='url(%23p)'/%3E%3Crect x='150' y='378' width='650' height='6' fill='%23efe6d6'/%3E%3Cg stroke='%23e6f2ef' stroke-opacity='.6' stroke-width='2' fill='none'%3E%3Cpath d='M200 410 q20 -6 40 0 t40 0M400 440 q20 -6 40 0 t40 0 t40 0M260 470 q20 -6 40 0 t40 0M600 420 q20 -6 40 0 t40 0'/%3E%3C/g%3E%3Cpath d='M360 384 L740 384 L700 440 L400 440Z' fill='%23f6f0e6' opacity='.18'/%3E%3Crect y='494' width='800' height='106' fill='%23e4d7c1'/%3E%3Cg stroke='%23d1c1a5'%3E%3Cpath d='M0 520H800M0 556H800'/%3E%3C/g%3E%3Cg%3E%3Crect x='420' y='330' width='90' height='14' rx='4' fill='%23fbf8f2'/%3E%3Crect x='560' y='330' width='90' height='14' rx='4' fill='%23fbf8f2'/%3E%3C/g%3E%3Cpath d='M120 560 C110 420 130 300 170 190' stroke='%236d5a44' stroke-width='11' fill='none' stroke-linecap='round'/%3E%3Cg fill='%234d5e44'%3E%3Cpath d='M170 190 C120 170 80 186 50 220 C100 200 140 204 170 196Z'/%3E%3Cpath d='M170 190 C150 150 110 136 70 140 C110 156 140 170 168 194Z'/%3E%3Cpath d='M172 188 C190 146 230 134 270 142 C230 150 200 168 176 194Z'/%3E%3Cpath d='M172 192 C220 180 260 196 290 230 C250 210 210 204 174 198Z'/%3E%3Cpath d='M170 192 C176 150 170 120 150 96 C176 118 184 150 174 194Z'/%3E%3C/g%3E%3Cpath d='M60 580 C54 470 66 400 90 330' stroke='%235e4d3a' stroke-width='9' fill='none' stroke-linecap='round'/%3E%3Cg fill='%233e4e38'%3E%3Cpath d='M90 330 C50 318 20 330 0 356 C40 340 70 340 90 336Z'/%3E%3Cpath d='M90 330 C110 300 150 292 180 300 C150 306 120 320 94 336Z'/%3E%3Cpath d='M90 332 C80 296 60 280 30 276 C60 290 80 310 88 336Z'/%3E%3C/g%3E%3C/svg%3E"); }
.ph-cliff { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='600' viewBox='0 0 800 600' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23cfae86'/%3E%3Cstop offset='1' stop-color='%23f6dfb9'/%3E%3C/linearGradient%3E%3ClinearGradient id='m' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23a4aa98'/%3E%3Cstop offset='1' stop-color='%2344605f'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='800' height='340' fill='url(%23s)'/%3E%3Ccircle cx='190' cy='280' r='34' fill='%23fff1d2'/%3E%3Crect y='336' width='800' height='264' fill='url(%23m)'/%3E%3Cg fill='%23ffe6b8' opacity='.55'%3E%3Crect x='160' y='348' width='60' height='3'/%3E%3Crect x='146' y='366' width='90' height='3'/%3E%3Crect x='170' y='390' width='44' height='3'/%3E%3Crect x='136' y='420' width='110' height='3'/%3E%3C/g%3E%3Cpath d='M800 600 V228 C740 230 700 250 662 290 C622 332 602 380 560 420 C520 460 500 520 482 600Z' fill='%236b5a44'/%3E%3Cpath d='M800 600 V300 C760 330 720 380 690 440 C660 500 650 560 640 600Z' fill='%23574936'/%3E%3Cpath d='M662 290 C700 250 740 232 800 228 V244 C750 250 710 270 676 300Z' fill='%235c6b4a'/%3E%3Crect x='640' y='186' width='160' height='52' fill='%23f4ece0'/%3E%3Crect x='690' y='156' width='110' height='32' fill='%23ece2d2'/%3E%3Cg fill='%23e9b572'%3E%3Crect x='656' y='202' width='22' height='22'/%3E%3Crect x='692' y='202' width='44' height='22'/%3E%3Crect x='750' y='202' width='30' height='22'/%3E%3Crect x='712' y='166' width='30' height='14'/%3E%3C/g%3E%3Cellipse cx='622' cy='250' rx='9' ry='46' fill='%233d4d3a'/%3E%3Cellipse cx='606' cy='262' rx='8' ry='36' fill='%23445640'/%3E%3Cpath d='M0 600 V520 C80 500 180 510 260 540 C300 556 330 580 350 600Z' fill='%233b4a3c'/%3E%3Cpath d='M260 470 l30 -40 l6 40Z' fill='%23f8f2e8'/%3E%3Cpath d='M252 474 h54 l-8 10 h-40Z' fill='%236d5638'/%3E%3C/svg%3E"); }
.ph-pool, .x-art[style*="--h:88"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='600' viewBox='0 0 800 600' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23c6d7d5'/%3E%3Cstop offset='1' stop-color='%23f2e6d0'/%3E%3C/linearGradient%3E%3ClinearGradient id='p' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23a3c7c1'/%3E%3Cstop offset='1' stop-color='%2378a6a0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='800' height='300' fill='url(%23s)'/%3E%3Cpath d='M520 300 C580 280 660 272 740 284 L800 300Z' fill='%239fa996'/%3E%3Crect y='298' width='800' height='60' fill='%236f9391'/%3E%3Crect y='356' width='800' height='106' fill='url(%23p)'/%3E%3Crect y='356' width='800' height='3' fill='%23e8f0ec'/%3E%3Cg stroke='%23eef6f3' stroke-opacity='.55' stroke-width='2' fill='none'%3E%3Cpath d='M60 390 q20 -6 40 0 t40 0M300 420 q20 -6 40 0 t40 0 t40 0M560 400 q20 -6 40 0 t40 0M140 444 q20 -6 40 0 t40 0'/%3E%3C/g%3E%3Crect y='462' width='800' height='138' fill='%23e6dac6'/%3E%3Cg stroke='%23d4c4a8'%3E%3Cpath d='M0 490H800M0 530H800M0 575H800'/%3E%3C/g%3E%3Cpath d='M170 480 V300' stroke='%236d5638' stroke-width='4'/%3E%3Cpath d='M80 318 Q170 250 260 318Z' fill='%23f4ede2'/%3E%3Cpath d='M140 318 Q170 250 200 318Z' fill='%235c6b4a' opacity='.8'/%3E%3Cpath d='M80 318 h180 v8 h-180Z' fill='%23e2d6c2'/%3E%3Crect x='100' y='500' width='140' height='16' rx='5' fill='%23fbf8f2'/%3E%3Cpath d='M210 500 L240 470 L252 476 L226 502Z' fill='%23fbf8f2'/%3E%3Cpath d='M110 516 V534 M230 516 V534' stroke='%238a6d4b' stroke-width='3'/%3E%3Cpath d='M420 480 V300' stroke='%236d5638' stroke-width='4'/%3E%3Cpath d='M330 318 Q420 250 510 318Z' fill='%23f4ede2'/%3E%3Cpath d='M390 318 Q420 250 450 318Z' fill='%235c6b4a' opacity='.8'/%3E%3Cpath d='M330 318 h180 v8 h-180Z' fill='%23e2d6c2'/%3E%3Crect x='350' y='500' width='140' height='16' rx='5' fill='%23fbf8f2'/%3E%3Cpath d='M460 500 L490 470 L502 476 L476 502Z' fill='%23fbf8f2'/%3E%3Cpath d='M360 516 V534 M480 516 V534' stroke='%238a6d4b' stroke-width='3'/%3E%3Cpath d='M670 480 V300' stroke='%236d5638' stroke-width='4'/%3E%3Cpath d='M580 318 Q670 250 760 318Z' fill='%23f4ede2'/%3E%3Cpath d='M640 318 Q670 250 700 318Z' fill='%235c6b4a' opacity='.8'/%3E%3Cpath d='M580 318 h180 v8 h-180Z' fill='%23e2d6c2'/%3E%3Crect x='600' y='500' width='140' height='16' rx='5' fill='%23fbf8f2'/%3E%3Cpath d='M710 500 L740 470 L752 476 L726 502Z' fill='%23fbf8f2'/%3E%3Cpath d='M610 516 V534 M730 516 V534' stroke='%238a6d4b' stroke-width='3'/%3E%3C/svg%3E"); }
.ph-spa, .x-art[style*="--h:44"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='600' viewBox='0 0 800 600' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='w' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%235a4a3a'/%3E%3Cstop offset='1' stop-color='%233a3027'/%3E%3C/linearGradient%3E%3CradialGradient id='n' cx='.5' cy='.35' r='.7'%3E%3Cstop offset='0' stop-color='%23f0d3a6'/%3E%3Cstop offset='1' stop-color='%23a57d53'/%3E%3C/radialGradient%3E%3CradialGradient id='f'%3E%3Cstop offset='0' stop-color='%23ffd98f' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%23ffd98f' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='800' height='600' fill='url(%23w)'/%3E%3Cpath d='M250 470 V250 A150 150 0 0 1 550 250 V470Z' fill='url(%23n)'/%3E%3Crect x='270' y='390' width='260' height='8' fill='%238f6c47'/%3E%3Cg%3E%3Cellipse cx='400' cy='384' rx='56' ry='12' fill='%236b6259'/%3E%3Cellipse cx='400' cy='364' rx='42' ry='12' fill='%23857b70'/%3E%3Cellipse cx='402' cy='346' rx='30' ry='10' fill='%239d9386'/%3E%3Cellipse cx='400' cy='330' rx='18' ry='8' fill='%23b3a99b'/%3E%3C/g%3E%3Crect y='470' width='800' height='130' fill='%232c241d'/%3E%3Crect y='466' width='800' height='8' fill='%236b5847'/%3E%3Cg%3E%3Ccircle cx='160' cy='450' r='20' fill='%23efe7da'/%3E%3Ccircle cx='160' cy='450' r='12' fill='none' stroke='%23d8cdbb' stroke-width='2'/%3E%3Ccircle cx='205' cy='450' r='20' fill='%23efe7da'/%3E%3Ccircle cx='205' cy='450' r='12' fill='none' stroke='%23d8cdbb' stroke-width='2'/%3E%3Ccircle cx='182' cy='418' r='20' fill='%23e6dccb'/%3E%3Ccircle cx='182' cy='418' r='12' fill='none' stroke='%23d0c4b0' stroke-width='2'/%3E%3C/g%3E%3Cg%3E%3Cellipse cx='600' cy='420' rx='50' ry='50' fill='url(%23f)'/%3E%3Crect x='586' y='420' width='28' height='50' fill='%23f3eadb'/%3E%3Cellipse cx='600' cy='410' rx='5' ry='10' fill='%23ffd27a'/%3E%3Cellipse cx='660' cy='434' rx='40' ry='40' fill='url(%23f)'/%3E%3Crect x='648' y='436' width='24' height='34' fill='%23f3eadb'/%3E%3Cellipse cx='660' cy='426' rx='4' ry='8' fill='%23ffd27a'/%3E%3C/g%3E%3Cpath d='M60 470 C56 420 70 400 80 380' stroke='%237a8a66' stroke-width='2' fill='none'/%3E%3Cg fill='%238e9f7a'%3E%3Ccircle cx='72' cy='420' r='7'/%3E%3Ccircle cx='84' cy='404' r='7'/%3E%3Ccircle cx='66' cy='440' r='7'/%3E%3Ccircle cx='80' cy='388' r='6'/%3E%3C/g%3E%3Cpath d='M50 470 L56 440 H96 L102 470Z' fill='%23d8cdbb'/%3E%3Cellipse cx='400' cy='520' rx='300' ry='20' fill='%23000' opacity='.2'/%3E%3C/svg%3E"); }
.ph-dining { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='600' viewBox='0 0 800 600' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%237f928f'/%3E%3Cstop offset='1' stop-color='%23e6c49a'/%3E%3C/linearGradient%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23ffe2b0' stop-opacity='.75'/%3E%3Cstop offset='1' stop-color='%23ffe2b0' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='800' height='600' fill='url(%23s)'/%3E%3Crect y='330' width='800' height='120' fill='%235f7b79'/%3E%3Cpath d='M0 0H800V600H0Z M100 440V220A80 80 0 0 1 260 220V440Z M320 440V220A80 80 0 0 1 480 220V440Z M540 440V220A80 80 0 0 1 700 220V440Z' fill='%23e7dac6' fill-rule='evenodd'/%3E%3Crect y='520' width='800' height='80' fill='%23b98e6e'/%3E%3Cg stroke='%23fff' stroke-opacity='.2'%3E%3Cpath d='M0 540H800M0 566H800'/%3E%3C/g%3E%3Cg stroke='%236d5638' stroke-width='1.5'%3E%3Cpath d='M180 0V130M400 0V130M620 0V130'/%3E%3C/g%3E%3Cg%3E%3Cellipse cx='180' cy='160' rx='70' ry='50' fill='url(%23g)'/%3E%3Cellipse cx='400' cy='160' rx='70' ry='50' fill='url(%23g)'/%3E%3Cellipse cx='620' cy='160' rx='70' ry='50' fill='url(%23g)'/%3E%3C/g%3E%3Cg fill='%23a88450'%3E%3Cpath d='M156 150 A24 22 0 0 1 204 150Z'/%3E%3Cpath d='M376 150 A24 22 0 0 1 424 150Z'/%3E%3Cpath d='M596 150 A24 22 0 0 1 644 150Z'/%3E%3C/g%3E%3Crect x='40' y='446' width='720' height='16' fill='%23fbf8f2'/%3E%3Crect x='50' y='462' width='700' height='52' fill='%23f1eadf'/%3E%3Cg fill='%236d5638'%3E%3Crect x='80' y='400' width='56' height='60' rx='8'/%3E%3Crect x='250' y='400' width='56' height='60' rx='8'/%3E%3Crect x='494' y='400' width='56' height='60' rx='8'/%3E%3Crect x='664' y='400' width='56' height='60' rx='8'/%3E%3C/g%3E%3Cg fill='%23fbf8f2' opacity='.9'%3E%3Cpath d='M186 430 h10 l-2 16 h-6Z'/%3E%3Cpath d='M364 430 h10 l-2 16 h-6Z'/%3E%3Cpath d='M430 430 h10 l-2 16 h-6Z'/%3E%3Cpath d='M600 430 h10 l-2 16 h-6Z'/%3E%3C/g%3E%3Cg%3E%3Crect x='396' y='424' width='8' height='22' fill='%23f3eadb'/%3E%3Cellipse cx='400' cy='420' rx='3' ry='6' fill='%23ffd27a'/%3E%3C/g%3E%3Cpath d='M300 446 C310 420 330 416 340 446Z' fill='%235c6b4a'/%3E%3C/svg%3E"); }
.ph-bar { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='600' viewBox='0 0 800 600' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='w' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23223329'/%3E%3Cstop offset='1' stop-color='%2315201a'/%3E%3C/linearGradient%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23ffe0a8' stop-opacity='.6'/%3E%3Cstop offset='1' stop-color='%23ffe0a8' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='800' height='600' fill='url(%23w)'/%3E%3Crect x='110' y='40' width='580' height='330' fill='%232d3f34'/%3E%3Cellipse cx='400' cy='220' rx='300' ry='180' fill='url(%23g)' opacity='.5'/%3E%3Crect x='130' y='106' width='16' height='44' rx='3' fill='%23a88450'/%3E%3Crect x='135' y='94' width='6' height='14' fill='%23a88450'/%3E%3Crect x='166' y='99' width='16' height='51' rx='3' fill='%236f7f5f'/%3E%3Crect x='171' y='87' width='6' height='14' fill='%236f7f5f'/%3E%3Crect x='208' y='92' width='16' height='58' rx='3' fill='%23d9c9a8'/%3E%3Crect x='213' y='80' width='6' height='14' fill='%23d9c9a8'/%3E%3Crect x='238' y='85' width='16' height='65' rx='3' fill='%238b5a3c'/%3E%3Crect x='243' y='73' width='6' height='14' fill='%238b5a3c'/%3E%3Crect x='274' y='104' width='16' height='46' rx='3' fill='%23c2b28f'/%3E%3Crect x='279' y='92' width='6' height='14' fill='%23c2b28f'/%3E%3Crect x='316' y='97' width='16' height='53' rx='3' fill='%234f6b5c'/%3E%3Crect x='321' y='85' width='6' height='14' fill='%234f6b5c'/%3E%3Crect x='346' y='90' width='16' height='60' rx='3' fill='%23b98e6e'/%3E%3Crect x='351' y='78' width='6' height='14' fill='%23b98e6e'/%3E%3Crect x='382' y='83' width='16' height='67' rx='3' fill='%23a88450'/%3E%3Crect x='387' y='71' width='6' height='14' fill='%23a88450'/%3E%3Crect x='424' y='102' width='16' height='48' rx='3' fill='%236f7f5f'/%3E%3Crect x='429' y='90' width='6' height='14' fill='%236f7f5f'/%3E%3Crect x='454' y='95' width='16' height='55' rx='3' fill='%23d9c9a8'/%3E%3Crect x='459' y='83' width='6' height='14' fill='%23d9c9a8'/%3E%3Crect x='490' y='88' width='16' height='62' rx='3' fill='%238b5a3c'/%3E%3Crect x='495' y='76' width='6' height='14' fill='%238b5a3c'/%3E%3Crect x='532' y='81' width='16' height='69' rx='3' fill='%23c2b28f'/%3E%3Crect x='537' y='69' width='6' height='14' fill='%23c2b28f'/%3E%3Crect x='562' y='100' width='16' height='50' rx='3' fill='%234f6b5c'/%3E%3Crect x='567' y='88' width='6' height='14' fill='%234f6b5c'/%3E%3Crect x='598' y='93' width='16' height='57' rx='3' fill='%23b98e6e'/%3E%3Crect x='603' y='81' width='6' height='14' fill='%23b98e6e'/%3E%3Crect x='640' y='86' width='16' height='64' rx='3' fill='%23a88450'/%3E%3Crect x='645' y='74' width='6' height='14' fill='%23a88450'/%3E%3Crect x='130' y='195' width='16' height='45' rx='3' fill='%236f7f5f'/%3E%3Crect x='135' y='183' width='6' height='14' fill='%236f7f5f'/%3E%3Crect x='166' y='188' width='16' height='52' rx='3' fill='%23d9c9a8'/%3E%3Crect x='171' y='176' width='6' height='14' fill='%23d9c9a8'/%3E%3Crect x='208' y='181' width='16' height='59' rx='3' fill='%238b5a3c'/%3E%3Crect x='213' y='169' width='6' height='14' fill='%238b5a3c'/%3E%3Crect x='238' y='174' width='16' height='66' rx='3' fill='%23c2b28f'/%3E%3Crect x='243' y='162' width='6' height='14' fill='%23c2b28f'/%3E%3Crect x='274' y='193' width='16' height='47' rx='3' fill='%234f6b5c'/%3E%3Crect x='279' y='181' width='6' height='14' fill='%234f6b5c'/%3E%3Crect x='316' y='186' width='16' height='54' rx='3' fill='%23b98e6e'/%3E%3Crect x='321' y='174' width='6' height='14' fill='%23b98e6e'/%3E%3Crect x='346' y='179' width='16' height='61' rx='3' fill='%23a88450'/%3E%3Crect x='351' y='167' width='6' height='14' fill='%23a88450'/%3E%3Crect x='382' y='172' width='16' height='68' rx='3' fill='%236f7f5f'/%3E%3Crect x='387' y='160' width='6' height='14' fill='%236f7f5f'/%3E%3Crect x='424' y='191' width='16' height='49' rx='3' fill='%23d9c9a8'/%3E%3Crect x='429' y='179' width='6' height='14' fill='%23d9c9a8'/%3E%3Crect x='454' y='184' width='16' height='56' rx='3' fill='%238b5a3c'/%3E%3Crect x='459' y='172' width='6' height='14' fill='%238b5a3c'/%3E%3Crect x='490' y='177' width='16' height='63' rx='3' fill='%23c2b28f'/%3E%3Crect x='495' y='165' width='6' height='14' fill='%23c2b28f'/%3E%3Crect x='532' y='196' width='16' height='44' rx='3' fill='%234f6b5c'/%3E%3Crect x='537' y='184' width='6' height='14' fill='%234f6b5c'/%3E%3Crect x='562' y='189' width='16' height='51' rx='3' fill='%23b98e6e'/%3E%3Crect x='567' y='177' width='6' height='14' fill='%23b98e6e'/%3E%3Crect x='598' y='182' width='16' height='58' rx='3' fill='%23a88450'/%3E%3Crect x='603' y='170' width='6' height='14' fill='%23a88450'/%3E%3Crect x='640' y='175' width='16' height='65' rx='3' fill='%236f7f5f'/%3E%3Crect x='645' y='163' width='6' height='14' fill='%236f7f5f'/%3E%3Crect x='130' y='284' width='16' height='46' rx='3' fill='%23d9c9a8'/%3E%3Crect x='135' y='272' width='6' height='14' fill='%23d9c9a8'/%3E%3Crect x='166' y='277' width='16' height='53' rx='3' fill='%238b5a3c'/%3E%3Crect x='171' y='265' width='6' height='14' fill='%238b5a3c'/%3E%3Crect x='208' y='270' width='16' height='60' rx='3' fill='%23c2b28f'/%3E%3Crect x='213' y='258' width='6' height='14' fill='%23c2b28f'/%3E%3Crect x='238' y='263' width='16' height='67' rx='3' fill='%234f6b5c'/%3E%3Crect x='243' y='251' width='6' height='14' fill='%234f6b5c'/%3E%3Crect x='274' y='282' width='16' height='48' rx='3' fill='%23b98e6e'/%3E%3Crect x='279' y='270' width='6' height='14' fill='%23b98e6e'/%3E%3Crect x='316' y='275' width='16' height='55' rx='3' fill='%23a88450'/%3E%3Crect x='321' y='263' width='6' height='14' fill='%23a88450'/%3E%3Crect x='346' y='268' width='16' height='62' rx='3' fill='%236f7f5f'/%3E%3Crect x='351' y='256' width='6' height='14' fill='%236f7f5f'/%3E%3Crect x='382' y='261' width='16' height='69' rx='3' fill='%23d9c9a8'/%3E%3Crect x='387' y='249' width='6' height='14' fill='%23d9c9a8'/%3E%3Crect x='424' y='280' width='16' height='50' rx='3' fill='%238b5a3c'/%3E%3Crect x='429' y='268' width='6' height='14' fill='%238b5a3c'/%3E%3Crect x='454' y='273' width='16' height='57' rx='3' fill='%23c2b28f'/%3E%3Crect x='459' y='261' width='6' height='14' fill='%23c2b28f'/%3E%3Crect x='490' y='266' width='16' height='64' rx='3' fill='%234f6b5c'/%3E%3Crect x='495' y='254' width='6' height='14' fill='%234f6b5c'/%3E%3Crect x='532' y='285' width='16' height='45' rx='3' fill='%23b98e6e'/%3E%3Crect x='537' y='273' width='6' height='14' fill='%23b98e6e'/%3E%3Crect x='562' y='278' width='16' height='52' rx='3' fill='%23a88450'/%3E%3Crect x='567' y='266' width='6' height='14' fill='%23a88450'/%3E%3Crect x='598' y='271' width='16' height='59' rx='3' fill='%236f7f5f'/%3E%3Crect x='603' y='259' width='6' height='14' fill='%236f7f5f'/%3E%3Crect x='640' y='264' width='16' height='66' rx='3' fill='%23d9c9a8'/%3E%3Crect x='645' y='252' width='6' height='14' fill='%23d9c9a8'/%3E%3Cg fill='%23c4a472'%3E%3Crect x='110' y='150' width='580' height='4'/%3E%3Crect x='110' y='240' width='580' height='4'/%3E%3Crect x='110' y='330' width='580' height='4'/%3E%3C/g%3E%3Cg stroke='%23c4a472' stroke-width='1.2'%3E%3Cpath d='M200 0V70M400 0V70M600 0V70'/%3E%3C/g%3E%3Cg%3E%3Ccircle cx='200' cy='86' r='18' fill='%23ffe7bf'/%3E%3Ccircle cx='400' cy='86' r='18' fill='%23ffe7bf'/%3E%3Ccircle cx='600' cy='86' r='18' fill='%23ffe7bf'/%3E%3Ccircle cx='200' cy='86' r='60' fill='url(%23g)'/%3E%3Ccircle cx='400' cy='86' r='60' fill='url(%23g)'/%3E%3Ccircle cx='600' cy='86' r='60' fill='url(%23g)'/%3E%3C/g%3E%3Crect x='40' y='400' width='720' height='12' fill='%23c4a472'/%3E%3Crect x='50' y='412' width='700' height='130' fill='%232b2219'/%3E%3Cg stroke='%233c3024' stroke-width='6'%3E%3Cpath d='M90 420V540M130 420V540M170 420V540M210 420V540M250 420V540M290 420V540M330 420V540M370 420V540M410 420V540M450 420V540M490 420V540M530 420V540M570 420V540M610 420V540M650 420V540M690 420V540'/%3E%3C/g%3E%3Crect x='50' y='520' width='700' height='4' fill='%23a88450'/%3E%3Crect y='542' width='800' height='58' fill='%231a140f'/%3E%3Cg%3E%3Cellipse cx='180' cy='470' rx='36' ry='10' fill='%23a88450'/%3E%3Cpath d='M180 480V600' stroke='%238a6d4b' stroke-width='4'/%3E%3Cellipse cx='400' cy='470' rx='36' ry='10' fill='%23a88450'/%3E%3Cpath d='M400 480V600' stroke='%238a6d4b' stroke-width='4'/%3E%3Cellipse cx='620' cy='470' rx='36' ry='10' fill='%23a88450'/%3E%3Cpath d='M620 480V600' stroke='%238a6d4b' stroke-width='4'/%3E%3C/g%3E%3Cg fill='%23f1e6cf' opacity='.85'%3E%3Cpath d='M300 386 l14 0 l-7 10Z'/%3E%3Cpath d='M307 396 v8'/%3E%3Crect x='480' y='382' width='10' height='18'/%3E%3C/g%3E%3C/svg%3E"); }
.ph-olive, .x-art[style*="--h:33"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='600' viewBox='0 0 800 600' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23d9e0d8'/%3E%3Cstop offset='1' stop-color='%23f3e7d2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='800' height='600' fill='url(%23s)'/%3E%3Cpath d='M0 250 C140 200 300 210 420 240 C560 270 680 220 800 230 V600 H0Z' fill='%23bcc0a8'/%3E%3Cpath d='M0 300 C160 270 300 290 460 300 C600 310 700 280 800 290 V600 H0Z' fill='%23a1a78a'/%3E%3Cpath d='M0 390 C200 360 420 380 600 396 C700 404 760 390 800 386 V600 H0Z' fill='%23848f6c'/%3E%3Cpath d='M0 400 C200 372 420 392 600 406 C700 414 760 400 800 396' stroke='%23d9cdb4' stroke-width='6' fill='none' stroke-dasharray='10 4'/%3E%3Cpath d='M0 500 C200 470 460 490 800 480 V600 H0Z' fill='%236f7a58'/%3E%3Cpath d='M120 330 c-2 -12 3.6 -20.4 1.2 -30' stroke='%236d5a44' stroke-width='2.4' fill='none'/%3E%3Cg%3E%3Cellipse cx='111.6' cy='296.4' rx='18' ry='12' fill='%238e9a7a'/%3E%3Cellipse cx='129.6' cy='292.8' rx='16.8' ry='11.4' fill='%23a7b092'/%3E%3Cellipse cx='120' cy='284.4' rx='15.6' ry='10.2' fill='%2398a384'/%3E%3C/g%3E%3Cpath d='M250 322 c-2 -11 3.3 -18.7 1.1 -27.5' stroke='%236d5a44' stroke-width='2.2' fill='none'/%3E%3Cg%3E%3Cellipse cx='242.3' cy='291.2' rx='16.5' ry='11' fill='%238e9a7a'/%3E%3Cellipse cx='258.8' cy='287.9' rx='15.4' ry='10.45' fill='%23a7b092'/%3E%3Cellipse cx='250' cy='280.2' rx='14.3' ry='9.35' fill='%2398a384'/%3E%3C/g%3E%3Cpath d='M400 334 c-2 -12 3.6 -20.4 1.2 -30' stroke='%236d5a44' stroke-width='2.4' fill='none'/%3E%3Cg%3E%3Cellipse cx='391.6' cy='300.4' rx='18' ry='12' fill='%238e9a7a'/%3E%3Cellipse cx='409.6' cy='296.8' rx='16.8' ry='11.4' fill='%23a7b092'/%3E%3Cellipse cx='400' cy='288.4' rx='15.6' ry='10.2' fill='%2398a384'/%3E%3C/g%3E%3Cpath d='M560 318 c-2 -10 3 -17 1 -25' stroke='%236d5a44' stroke-width='2' fill='none'/%3E%3Cg%3E%3Cellipse cx='553' cy='290' rx='15' ry='10' fill='%238e9a7a'/%3E%3Cellipse cx='568' cy='287' rx='14' ry='9.5' fill='%23a7b092'/%3E%3Cellipse cx='560' cy='280' rx='13' ry='8.5' fill='%2398a384'/%3E%3C/g%3E%3Cpath d='M700 330 c-2 -12 3.6 -20.4 1.2 -30' stroke='%236d5a44' stroke-width='2.4' fill='none'/%3E%3Cg%3E%3Cellipse cx='691.6' cy='296.4' rx='18' ry='12' fill='%238e9a7a'/%3E%3Cellipse cx='709.6' cy='292.8' rx='16.8' ry='11.4' fill='%23a7b092'/%3E%3Cellipse cx='700' cy='284.4' rx='15.6' ry='10.2' fill='%2398a384'/%3E%3C/g%3E%3Cpath d='M60 450 c-2 -22 6.6 -37.4 2.2 -55' stroke='%236d5a44' stroke-width='4.4' fill='none'/%3E%3Cg%3E%3Cellipse cx='44.6' cy='388.4' rx='33' ry='22' fill='%238e9a7a'/%3E%3Cellipse cx='77.6' cy='381.8' rx='30.8' ry='20.9' fill='%23a7b092'/%3E%3Cellipse cx='60' cy='366.4' rx='28.6' ry='18.7' fill='%2398a384'/%3E%3C/g%3E%3Cpath d='M300 470 c-2 -24 7.2 -40.8 2.4 -60' stroke='%236d5a44' stroke-width='4.8' fill='none'/%3E%3Cg%3E%3Cellipse cx='283.2' cy='402.8' rx='36' ry='24' fill='%238e9a7a'/%3E%3Cellipse cx='319.2' cy='395.6' rx='33.6' ry='22.8' fill='%23a7b092'/%3E%3Cellipse cx='300' cy='378.8' rx='31.2' ry='20.4' fill='%2398a384'/%3E%3C/g%3E%3Cpath d='M560 460 c-2 -20 6 -34 2 -50' stroke='%236d5a44' stroke-width='4' fill='none'/%3E%3Cg%3E%3Cellipse cx='546' cy='404' rx='30' ry='20' fill='%238e9a7a'/%3E%3Cellipse cx='576' cy='398' rx='28' ry='19' fill='%23a7b092'/%3E%3Cellipse cx='560' cy='384' rx='26' ry='17' fill='%2398a384'/%3E%3C/g%3E%3Cpath d='M760 480 c-2 -26 7.8 -44.2 2.6 -65' stroke='%236d5a44' stroke-width='5.2' fill='none'/%3E%3Cg%3E%3Cellipse cx='741.8' cy='407.2' rx='39' ry='26' fill='%238e9a7a'/%3E%3Cellipse cx='780.8' cy='399.4' rx='36.4' ry='24.7' fill='%23a7b092'/%3E%3Cellipse cx='760' cy='381.2' rx='33.8' ry='22.1' fill='%2398a384'/%3E%3C/g%3E%3C/svg%3E"); }
.ph-boat, .x-art[style*="--h:55"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='600' viewBox='0 0 800 600' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23d3e0de'/%3E%3Cstop offset='1' stop-color='%23f4e7d2'/%3E%3C/linearGradient%3E%3ClinearGradient id='m' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2386a3a1'/%3E%3Cstop offset='1' stop-color='%233c5b5a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='800' height='340' fill='url(%23s)'/%3E%3Ccircle cx='600' cy='250' r='28' fill='%23fff4dc'/%3E%3Cpath d='M0 340 C60 318 140 310 220 322 C260 328 290 336 310 340Z' fill='%239aa79a'/%3E%3Cpath d='M640 340 C680 330 720 328 760 334 L780 340Z' fill='%23a9b3a4'/%3E%3Crect y='338' width='800' height='262' fill='url(%23m)'/%3E%3Cg stroke='%23fff' stroke-opacity='.25' stroke-width='2'%3E%3Cpath d='M60 380h80M500 370h120M200 450h160M560 480h140M80 540h120M380 560h180'/%3E%3C/g%3E%3Cpath d='M380 160 V420' stroke='%235a4a3a' stroke-width='3'/%3E%3Cpath d='M384 170 L384 400 L500 400Z' fill='%23fbf8f2'/%3E%3Cpath d='M376 190 L376 400 L300 400Z' fill='%23efe7da'/%3E%3Cpath d='M290 412 H520 L494 444 H318Z' fill='%23f5efe5'/%3E%3Crect x='318' y='440' width='176' height='4' fill='%23a88450'/%3E%3Cpath d='M320 452 H492' stroke='%23fff' stroke-opacity='.35' stroke-width='3'/%3E%3Cpath d='M330 468 H480 M350 484 H460' stroke='%23fff' stroke-opacity='.18' stroke-width='3'/%3E%3C/svg%3E"); }
.ph-bath { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='600' viewBox='0 0 800 600' preserveAspectRatio='xMidYMid slice'%3E%3Crect width='800' height='430' fill='%23eee6d9'/%3E%3Cpath d='M0 0V430M50 0V430M100 0V430M150 0V430M200 0V430M250 0V430M300 0V430M350 0V430M400 0V430M450 0V430M500 0V430M550 0V430M600 0V430M650 0V430M700 0V430M750 0V430M800 0V430M0 0H800M0 50H800M0 100H800M0 150H800M0 200H800M0 250H800M0 300H800M0 350H800M0 400H800' stroke='%23ddd2c1' stroke-width='1.5'/%3E%3Crect x='560' y='70' width='150' height='220' fill='%23dfe7e2'/%3E%3Crect x='560' y='70' width='150' height='220' fill='none' stroke='%23f8f3ea' stroke-width='8'/%3E%3Ccircle cx='640' cy='130' r='60' fill='%239aab85' opacity='.6'/%3E%3Crect y='430' width='800' height='170' fill='%23cdbba0'/%3E%3Cpath d='M180 400 C180 350 200 340 240 340 H560 C600 340 620 350 620 400 C620 470 580 492 520 492 H280 C220 492 180 470 180 400Z' fill='%23fbfaf7'/%3E%3Cpath d='M200 360 H600 C590 350 580 348 560 348 H240 C220 348 210 350 200 360Z' fill='%23e6ded2'/%3E%3Cpath d='M200 420 C220 470 260 480 300 480 H500 C540 480 580 470 600 420' stroke='%23ece5d9' stroke-width='6' fill='none'/%3E%3Cg fill='%23a88450'%3E%3Crect x='240' y='490' width='16' height='16'/%3E%3Crect x='544' y='490' width='16' height='16'/%3E%3C/g%3E%3Cpath d='M660 560 V300 C660 280 640 270 620 280' stroke='%23a88450' stroke-width='6' fill='none'/%3E%3Crect x='646' y='556' width='28' height='8' fill='%23a88450'/%3E%3Crect x='60' y='450' width='80' height='90' fill='%238a6d4b'/%3E%3Crect x='64' y='420' width='72' height='30' rx='4' fill='%23f3ece0'/%3E%3Crect x='64' y='434' width='72' height='4' fill='%23b08d57'/%3E%3Cpath d='M720 560 L714 500 H770 L764 560Z' fill='%23e6dccb'/%3E%3Cg fill='%236f8158'%3E%3Cpath d='M742 500 C720 460 700 440 690 400 C720 430 738 460 744 500Z'/%3E%3Cpath d='M742 500 C750 450 770 420 790 400 C780 440 760 470 746 500Z'/%3E%3Cpath d='M742 500 C740 450 744 420 740 380 C756 420 754 460 746 500Z'/%3E%3C/g%3E%3C/svg%3E"); }
.ph-dunes, .x-art[style*="--h:77"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='600' viewBox='0 0 800 600' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23dfe7e6'/%3E%3Cstop offset='1' stop-color='%23f5e9d6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='800' height='600' fill='url(%23s)'/%3E%3Crect y='290' width='800' height='40' fill='%2388a4a1'/%3E%3Cpath d='M0 330 C120 300 260 300 400 324 C520 344 660 316 800 320 V600 H0Z' fill='%23e7d4b0'/%3E%3Cpath d='M0 400 C160 360 320 370 460 396 C600 420 700 390 800 380 V600 H0Z' fill='%23d8c198'/%3E%3Cpath d='M0 480 C200 440 400 460 800 450 V600 H0Z' fill='%23c9ae80'/%3E%3Cpath d='M340 600 L392 340 H408 L520 600Z' fill='%23b89a70'/%3E%3Cg stroke='%239c7f58' stroke-width='2'%3E%3Cpath d='M388 360H412M384 380H416M378 410H424M370 450H436M360 500H452M346 560H474'/%3E%3C/g%3E%3Cpath d='M20 490 c-2 -20 -8 -34 -16 -46 M24 490 c2 -24 8 -38 18 -50 M43 491 c-2 -20 -8 -34 -16 -46 M47 491 c2 -24 8 -38 18 -50 M66 492 c-2 -20 -8 -34 -16 -46 M70 492 c2 -24 8 -38 18 -50 M89 493 c-2 -20 -8 -34 -16 -46 M93 493 c2 -24 8 -38 18 -50 M112 494 c-2 -20 -8 -34 -16 -46 M116 494 c2 -24 8 -38 18 -50 M135 495 c-2 -20 -8 -34 -16 -46 M139 495 c2 -24 8 -38 18 -50 M158 496 c-2 -20 -8 -34 -16 -46 M162 496 c2 -24 8 -38 18 -50 M181 497 c-2 -20 -8 -34 -16 -46 M185 497 c2 -24 8 -38 18 -50 M204 498 c-2 -20 -8 -34 -16 -46 M208 498 c2 -24 8 -38 18 -50 M227 499 c-2 -20 -8 -34 -16 -46 M231 499 c2 -24 8 -38 18 -50 M250 500 c-2 -20 -8 -34 -16 -46 M254 500 c2 -24 8 -38 18 -50 M273 501 c-2 -20 -8 -34 -16 -46 M277 501 c2 -24 8 -38 18 -50 M296 502 c-2 -20 -8 -34 -16 -46 M300 502 c2 -24 8 -38 18 -50 M319 503 c-2 -20 -8 -34 -16 -46 M323 503 c2 -24 8 -38 18 -50 M342 504 c-2 -20 -8 -34 -16 -46 M346 504 c2 -24 8 -38 18 -50 M365 505 c-2 -20 -8 -34 -16 -46 M369 505 c2 -24 8 -38 18 -50 M388 506 c-2 -20 -8 -34 -16 -46 M392 506 c2 -24 8 -38 18 -50 M411 507 c-2 -20 -8 -34 -16 -46 M415 507 c2 -24 8 -38 18 -50 M434 508 c-2 -20 -8 -34 -16 -46 M438 508 c2 -24 8 -38 18 -50 M457 509 c-2 -20 -8 -34 -16 -46 M461 509 c2 -24 8 -38 18 -50 M480 470 c-2 -20 -8 -34 -16 -46 M484 470 c2 -24 8 -38 18 -50 M503 471 c-2 -20 -8 -34 -16 -46 M507 471 c2 -24 8 -38 18 -50 M526 472 c-2 -20 -8 -34 -16 -46 M530 472 c2 -24 8 -38 18 -50 M549 473 c-2 -20 -8 -34 -16 -46 M553 473 c2 -24 8 -38 18 -50 M572 474 c-2 -20 -8 -34 -16 -46 M576 474 c2 -24 8 -38 18 -50 M595 475 c-2 -20 -8 -34 -16 -46 M599 475 c2 -24 8 -38 18 -50 M618 476 c-2 -20 -8 -34 -16 -46 M622 476 c2 -24 8 -38 18 -50 M641 477 c-2 -20 -8 -34 -16 -46 M645 477 c2 -24 8 -38 18 -50 M664 478 c-2 -20 -8 -34 -16 -46 M668 478 c2 -24 8 -38 18 -50 M687 479 c-2 -20 -8 -34 -16 -46 M691 479 c2 -24 8 -38 18 -50 M710 480 c-2 -20 -8 -34 -16 -46 M714 480 c2 -24 8 -38 18 -50 M733 481 c-2 -20 -8 -34 -16 -46 M737 481 c2 -24 8 -38 18 -50 M756 482 c-2 -20 -8 -34 -16 -46 M760 482 c2 -24 8 -38 18 -50 M779 483 c-2 -20 -8 -34 -16 -46 M783 483 c2 -24 8 -38 18 -50 ' stroke='%237d8a60' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); }
.ph-table, .x-art[style*="--h:66"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='600' viewBox='0 0 800 600' preserveAspectRatio='xMidYMid slice'%3E%3Crect width='800' height='600' fill='%23d9c7aa'/%3E%3Cg stroke='%23cbb896' stroke-width='2'%3E%3Cpath d='M0 120H800M0 250H800M0 380H800M0 510H800'/%3E%3C/g%3E%3Crect x='60' y='60' width='280' height='200' fill='%23efe7d9' transform='rotate(-6 200 160)'/%3E%3Ccircle cx='420' cy='300' r='130' fill='%23fbfaf6'/%3E%3Ccircle cx='420' cy='300' r='100' fill='none' stroke='%23e8e0d2' stroke-width='3'/%3E%3Cg%3E%3Ccircle cx='390' cy='280' r='34' fill='%23e3a05a'/%3E%3Ccircle cx='390' cy='280' r='27' fill='%23f0bf7a'/%3E%3Cpath d='M390 253V307M363 280H417M371 261L409 299M409 261L371 299' stroke='%23e3a05a' stroke-width='2'/%3E%3C/g%3E%3Cpath d='M420 330 C440 300 490 300 500 330 C480 350 440 350 420 330Z' fill='%23d7a063'/%3E%3Cg fill='%23a13b3b'%3E%3Ccircle cx='450' cy='260' r='7'/%3E%3Ccircle cx='462' cy='272' r='6'/%3E%3Ccircle cx='444' cy='276' r='6'/%3E%3C/g%3E%3Ccircle cx='660' cy='170' r='56' fill='%23fbfaf6'/%3E%3Ccircle cx='660' cy='170' r='40' fill='%236b4a31'/%3E%3Ccircle cx='660' cy='170' r='30' fill='%238a6a4a'/%3E%3Cpath d='M706 170 h28' stroke='%23fbfaf6' stroke-width='14' stroke-linecap='round'/%3E%3Ccircle cx='160' cy='440' r='70' fill='%23f6f1e6'/%3E%3Ccircle cx='160' cy='440' r='50' fill='%23e4d4b8'/%3E%3Crect x='560' y='380' width='160' height='120' fill='%235c6b4a' transform='rotate(12 640 440)'/%3E%3Cpath d='M560 300 L610 520' stroke='%23a88450' stroke-width='6' stroke-linecap='round'/%3E%3Cg fill='%23f3ede2'%3E%3Ccircle cx='250' cy='120' r='10'/%3E%3Ccircle cx='270' cy='110' r='10'/%3E%3Ccircle cx='262' cy='132' r='10'/%3E%3C/g%3E%3Ccircle cx='262' cy='120' r='6' fill='%23e0b24c'/%3E%3C/svg%3E"); }
.ph-lobby { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='600' viewBox='0 0 800 600' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='w' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23e8dcc8'/%3E%3Cstop offset='1' stop-color='%23d6c6ac'/%3E%3C/linearGradient%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23ffe8bd' stop-opacity='.7'/%3E%3Cstop offset='1' stop-color='%23ffe8bd' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='800' height='600' fill='url(%23w)'/%3E%3Cg stroke='%23c9b79a' stroke-width='2'%3E%3Cpath d='M100 0V440M220 0V440M580 0V440M700 0V440'/%3E%3C/g%3E%3Cpath d='M290 440 V200 A110 110 0 0 1 510 200 V440Z' fill='%2324392e'/%3E%3Cpath d='M310 440 V206 A90 90 0 0 1 490 206 V440Z' fill='%232f4538'/%3E%3Cpath d='M400 120 V440' stroke='%23c4a472' stroke-width='2'/%3E%3Crect y='440' width='800' height='160' fill='%23bfa987'/%3E%3Cg stroke='%23ad9570'%3E%3Cpath d='M0 480H800M0 530H800M0 590H800'/%3E%3C/g%3E%3Crect x='220' y='400' width='360' height='90' fill='%238a6d4b'/%3E%3Crect x='210' y='394' width='380' height='10' fill='%23c4a472'/%3E%3Cg stroke='%236d5638' stroke-width='4'%3E%3Cpath d='M240 410V484M280 410V484M320 410V484M360 410V484M400 410V484M440 410V484M480 410V484M520 410V484M560 410V484'/%3E%3C/g%3E%3Cellipse cx='400' cy='60' rx='120' ry='60' fill='url(%23g)'/%3E%3Cpath d='M340 60 H460 L440 40 H360Z' fill='%23c4a472'/%3E%3Cpath d='M400 0V40' stroke='%23a88450' stroke-width='2'/%3E%3Cpath d='M130 440 L120 380 H180 L170 440Z' fill='%23f1e9dc'/%3E%3Cg fill='%236f8158'%3E%3Cpath d='M150 380 C120 320 100 300 80 260 C120 290 140 320 154 380Z'/%3E%3Cpath d='M150 380 C160 310 180 280 210 250 C200 300 170 330 154 380Z'/%3E%3Cpath d='M150 380 C146 320 150 280 146 230 C166 280 162 330 154 380Z'/%3E%3C/g%3E%3Crect x='640' y='380' width='90' height='60' fill='%235c6b4a' rx='6'/%3E%3Crect x='630' y='360' width='110' height='30' rx='10' fill='%236f7f5c'/%3E%3C/svg%3E"); }
.ph-beach { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='600' viewBox='0 0 800 600' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23cfdedc'/%3E%3Cstop offset='1' stop-color='%23f4e8d2'/%3E%3C/linearGradient%3E%3ClinearGradient id='m' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%237c9c99'/%3E%3Cstop offset='1' stop-color='%23a7c2bd'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='800' height='600' fill='url(%23s)'/%3E%3Cpath d='M0 260 C80 240 180 236 260 252 L300 260Z' fill='%239eab9c'/%3E%3Cpath d='M0 258 H800 V380 C640 400 520 440 420 500 C320 560 200 580 0 600Z' fill='url(%23m)'/%3E%3Cpath d='M0 600 C200 580 320 560 420 500 C520 440 640 400 800 380 V600Z' fill='%23ecdcbd'/%3E%3Cpath d='M60 588 C220 566 330 544 424 490 C520 436 640 402 800 388' stroke='%23fbf8f2' stroke-width='6' fill='none' stroke-opacity='.9'/%3E%3Cpath d='M120 586 C260 562 360 536 440 494' stroke='%23fbf8f2' stroke-width='3' fill='none' stroke-opacity='.5'/%3E%3Cg%3E%3Cpath d='M560 500 V330' stroke='%236d5638' stroke-width='4'/%3E%3Cpath d='M470 344 Q560 280 650 344Z' fill='%23f4ede2'/%3E%3Cpath d='M530 344 Q560 280 590 344Z' fill='%23b08d57'/%3E%3Crect x='520' y='500' width='110' height='14' rx='5' fill='%23fbf8f2'/%3E%3Crect x='640' y='516' width='70' height='40' fill='%235c6b4a' transform='rotate(-8 675 536)'/%3E%3C/g%3E%3C/svg%3E"); }
/* @end-scenes */

/* ------------------------------------------------------------------
   Shared page components (blog, auth, FAQ, team, gallery, legal, 404…)
   Colours come from the --x-* variables mapped above for this template.
   Copyright (c) 2026 DesignVersa. All rights reserved.
------------------------------------------------------------------- */
.x-center { text-align: center; }
.x-narrow { max-width: 760px; margin-inline: auto; }
.x-mt { margin-top: 40px; }
.x-muted { color: var(--x-muted); }
.x-grid-2, .x-grid-3, .x-grid-4 { display: grid; gap: 24px; }
.x-grid-2 { grid-template-columns: repeat(2, 1fr); }
.x-grid-3 { grid-template-columns: repeat(3, 1fr); }
.x-grid-4 { grid-template-columns: repeat(4, 1fr); }
.x-card { background: var(--x-card); border: 1px solid var(--x-line); border-radius: var(--x-radius); padding: 28px; }
.x-card h3 { font-size: 22px; margin-bottom: 8px; }
.x-card p:last-child { margin-bottom: 0; }
.x-icon { width: 52px; height: 52px; border-radius: calc(var(--x-radius) * .7); display: grid; place-items: center; background: color-mix(in srgb, var(--x-accent) 16%, transparent); color: var(--x-accent); margin-bottom: 18px; font-size: 22px; font-weight: 800; }
.x-title { font-size: clamp(30px, 4vw, 48px); margin: 10px 0 14px; }
.x-lead { font-size: 18px; color: var(--x-muted); max-width: 640px; }
.x-center .x-lead { margin-inline: auto; }
.x-head { margin-bottom: 44px; }

/* Placeholder artwork (swap for your own images) */
.x-art { position: relative; border-radius: var(--x-radius); overflow: hidden; aspect-ratio: 16 / 10; background: linear-gradient(135deg, hsl(var(--h, 240) 80% 62%), hsl(calc(var(--h, 240) + 45) 75% 48%)); }
.x-art::before { content: ""; position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50%; right: -12%; top: -20%; border: 28px solid rgba(255, 255, 255, .18); }
.x-art::after { content: ""; position: absolute; width: 34%; aspect-ratio: 1; border-radius: 24%; left: 8%; bottom: -12%; background: rgba(255, 255, 255, .16); transform: rotate(14deg); }
.x-art.tall { aspect-ratio: 3 / 4; }
.x-art.wide { aspect-ratio: 21 / 9; }
.x-art.square { aspect-ratio: 1; }
.x-art span { position: absolute; left: 18px; bottom: 14px; z-index: 1; color: #fff; font-weight: 800; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; }

/* Blog */
.x-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.x-post { display: flex; flex-direction: column; gap: 12px; }
.x-post .x-meta { font-size: 13px; color: var(--x-muted); display: flex; gap: 10px; flex-wrap: wrap; }
.x-post h3 { font-size: 22px; line-height: 1.25; margin: 0; }
.x-post p { color: var(--x-muted); margin: 0; }
.x-post .x-more { color: var(--x-accent); font-weight: 700; }
.x-pill { display: inline-block; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--x-accent) 16%, transparent); color: var(--x-accent); }
.x-featured { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; margin-bottom: 60px; }
.x-featured h2 { font-size: clamp(28px, 3.4vw, 42px); }
.x-cats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 34px; }
.x-cats a, .x-cats button { border: 1px solid var(--x-line); border-radius: 999px; padding: 8px 16px; font: inherit; font-weight: 600; background: transparent; color: var(--x-text); cursor: pointer; }
.x-cats .active { background: var(--x-accent); border-color: var(--x-accent); color: var(--x-on-accent); }

/* Article / prose */
.x-article { max-width: 760px; margin: 0 auto; font-size: 18px; line-height: 1.8; }
.x-article h2 { font-size: 30px; margin: 44px 0 14px; }
.x-article h3 { font-size: 23px; margin: 32px 0 10px; }
.x-article p { margin: 0 0 1.2em; }
.x-article ul, .x-article ol { padding-left: 22px; margin: 0 0 1.2em; }
.x-article li { margin-bottom: 8px; }
.x-article blockquote { margin: 32px 0; padding: 20px 26px; border-left: 4px solid var(--x-accent); background: var(--x-soft); border-radius: 0 var(--x-radius) var(--x-radius) 0; font-size: 21px; color: var(--x-ink); }
.x-article .x-art { margin: 30px 0; }
.x-author { display: flex; gap: 14px; align-items: center; margin: 22px 0 34px; }
.x-avatar { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; flex: none; background: linear-gradient(135deg, hsl(var(--h, 240) 75% 55%), hsl(calc(var(--h, 240) + 50) 70% 42%)); }
.x-avatar.lg { width: 110px; height: 110px; font-size: 34px; }
.x-share { display: flex; gap: 10px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--x-line); align-items: center; flex-wrap: wrap; }
.x-share a { border: 1px solid var(--x-line); border-radius: 999px; padding: 8px 16px; font-weight: 600; }

/* FAQ (no JavaScript needed) */
.x-faq { display: grid; gap: 12px; max-width: 860px; margin: 0 auto; }
.x-faq details { background: var(--x-card); border: 1px solid var(--x-line); border-radius: var(--x-radius); padding: 20px 24px; }
.x-faq summary { cursor: pointer; list-style: none; font-weight: 700; font-size: 17px; color: var(--x-ink); display: flex; justify-content: space-between; gap: 16px; }
.x-faq summary::-webkit-details-marker { display: none; }
.x-faq summary::after { content: "+"; color: var(--x-accent); font-size: 24px; line-height: 1; }
.x-faq details[open] summary::after { content: "–"; }
.x-faq details p { margin: 12px 0 0; color: var(--x-muted); }
.x-faq-group { margin-bottom: 44px; }
.x-faq-group h2 { font-size: 26px; margin-bottom: 16px; max-width: 860px; margin-inline: auto; }

/* Auth pages */
.x-auth { min-height: 72vh; display: grid; place-items: center; padding: 60px 20px; }
.x-auth-card { width: min(460px, 100%); background: var(--x-card); border: 1px solid var(--x-line); border-radius: var(--x-radius); padding: 40px; box-shadow: 0 20px 50px rgba(0, 0, 0, .08); }
.x-auth-card h1 { font-size: 32px; margin: 0 0 6px; }
.x-auth-card form { display: grid; gap: 16px; margin-top: 26px; }
.x-field label { display: block; font-size: 14px; font-weight: 600; color: var(--x-ink); margin-bottom: 7px; }
.x-field input, .x-field select, .x-field textarea { width: 100%; border: 1px solid var(--x-line); background: var(--x-soft); color: var(--x-ink); border-radius: calc(var(--x-radius) * .6); padding: 13px 15px; font: inherit; }
.x-field input:focus, .x-field select:focus, .x-field textarea:focus { outline: none; border-color: var(--x-accent); }
.x-field .error { display: none; color: #dc2626; font-size: 13px; margin-top: 5px; }
.x-field.invalid input { border-color: #dc2626; }
.x-field.invalid .error { display: block; }
.x-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; flex-wrap: wrap; }
.x-row a, .x-link { color: var(--x-accent); font-weight: 600; }
.x-check { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.x-divider { display: flex; align-items: center; gap: 12px; color: var(--x-muted); font-size: 13px; margin: 6px 0; }
.x-divider::before, .x-divider::after { content: ""; flex: 1; height: 1px; background: var(--x-line); }
.x-social { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.x-social button { border: 1px solid var(--x-line); background: transparent; color: var(--x-ink); border-radius: calc(var(--x-radius) * .6); padding: 12px; font: inherit; font-weight: 600; cursor: pointer; }
.x-full { width: 100%; }
.form-success.x-success, .x-success { display: none; background: color-mix(in srgb, var(--x-accent) 16%, transparent); color: var(--x-ink); padding: 12px 14px; border-radius: calc(var(--x-radius) * .6); font-weight: 600; }

/* 404 */
.x-404 { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: 80px 20px; }
.x-404 .code { font-size: clamp(110px, 22vw, 240px); font-weight: 800; line-height: .9; color: var(--x-accent); letter-spacing: -.05em; font-family: var(--x-heading); }
.x-404 h1 { font-size: clamp(28px, 4vw, 42px); margin: 16px 0 10px; }
.x-404 .x-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }

/* Team / people */
.x-team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.x-member { text-align: center; }
.x-member .x-art { aspect-ratio: 4 / 5; margin-bottom: 16px; }
.x-member h3 { font-size: 20px; margin: 0 0 2px; }
.x-member p { color: var(--x-muted); margin: 0; font-size: 14px; }
.x-profile { display: grid; grid-template-columns: 320px 1fr; gap: 50px; align-items: start; }
.x-profile .x-art { aspect-ratio: 4 / 5; }
.x-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 26px 0; }
.x-stats div { background: var(--x-soft); border-radius: calc(var(--x-radius) * .8); padding: 18px; text-align: center; }
.x-stats b { display: block; font-size: 28px; color: var(--x-ink); font-family: var(--x-heading); }
.x-stats span { font-size: 13px; color: var(--x-muted); }

/* Lists, timeline, values */
.x-list { list-style: none; padding: 0; margin: 20px 0; display: grid; gap: 12px; }
.x-list li { display: flex; gap: 12px; align-items: flex-start; }
.x-list li::before { content: "✓"; width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 900; background: color-mix(in srgb, var(--x-accent) 18%, transparent); color: var(--x-accent); }
.x-timeline { position: relative; display: grid; gap: 28px; padding-left: 34px; max-width: 760px; }
.x-timeline::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: var(--x-line); }
.x-timeline div { position: relative; }
.x-timeline div::before { content: ""; position: absolute; left: -32px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--x-accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--x-accent) 20%, transparent); }
.x-timeline b { display: block; color: var(--x-accent); font-family: var(--x-heading); font-size: 20px; }
.x-timeline h3 { font-size: 20px; margin: 2px 0 4px; }
.x-timeline p { margin: 0; color: var(--x-muted); }
.x-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.x-kpi { text-align: center; padding: 26px; border: 1px solid var(--x-line); border-radius: var(--x-radius); background: var(--x-card); }
.x-kpi b { display: block; font-size: 40px; color: var(--x-ink); font-family: var(--x-heading); line-height: 1.1; }
.x-kpi span { color: var(--x-muted); font-size: 14px; }

/* Gallery */
.x-gallery { columns: 3; column-gap: 20px; }
.x-gallery .x-art { break-inside: avoid; margin-bottom: 20px; }

/* Jobs / list rows */
.x-rows { display: grid; gap: 12px; }
.x-rowcard { display: grid; grid-template-columns: 1fr auto auto; gap: 20px; align-items: center; padding: 22px 26px; border: 1px solid var(--x-line); border-radius: var(--x-radius); background: var(--x-card); transition: border-color .2s; }
.x-rowcard:hover { border-color: var(--x-accent); }
.x-rowcard h3 { font-size: 20px; margin: 0 0 2px; }
.x-rowcard small { color: var(--x-muted); }

/* Pricing packages */
.x-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.x-plan { background: var(--x-card); border: 1px solid var(--x-line); border-radius: var(--x-radius); padding: 32px; display: flex; flex-direction: column; }
.x-plan.hot { border: 2px solid var(--x-accent); }
.x-plan .x-price { font-size: 44px; font-weight: 800; color: var(--x-ink); font-family: var(--x-heading); margin: 12px 0; }
.x-plan .x-price small { font-size: 15px; color: var(--x-muted); font-weight: 500; }
.x-plan .x-list { flex: 1; }

/* Calculator */
.x-calc { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; }
.x-calc-out { background: var(--x-soft); border-radius: var(--x-radius); padding: 30px; text-align: center; }
.x-calc-out b { display: block; font-size: 52px; color: var(--x-accent); font-family: var(--x-heading); line-height: 1.1; margin: 8px 0; }
.x-range { width: 100%; accent-color: var(--x-accent); }

/* Legal */
.x-legal { display: grid; grid-template-columns: 240px 1fr; gap: 50px; align-items: start; }
.x-toc { position: sticky; top: 110px; display: grid; gap: 8px; font-size: 14px; }
.x-toc a { color: var(--x-muted); }
.x-toc a:hover { color: var(--x-accent); }
.x-legal .x-article { margin: 0; font-size: 16px; }

/* Logo / partner row */
.x-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.x-logos div { border: 1px solid var(--x-line); border-radius: var(--x-radius); padding: 18px 26px; font-weight: 800; font-size: 18px; color: var(--x-ink); background: var(--x-card); min-width: 150px; text-align: center; }

/* Call to action band */
.x-cta { border-radius: var(--x-radius); padding: 56px; text-align: center; background: var(--x-soft); border: 1px solid var(--x-line); }
.x-cta h2 { font-size: clamp(28px, 3.6vw, 42px); }

@media (max-width: 1024px) {
    .x-grid-4, .x-team, .x-kpis { grid-template-columns: repeat(2, 1fr); }
    .x-grid-3, .x-posts, .x-plans { grid-template-columns: repeat(2, 1fr); }
    .x-featured, .x-profile, .x-calc, .x-legal { grid-template-columns: 1fr; }
    .x-toc { position: static; }
    .x-gallery { columns: 2; }
}
@media (max-width: 640px) {
    .x-grid-2, .x-grid-3, .x-grid-4, .x-posts, .x-team, .x-plans, .x-kpis { grid-template-columns: 1fr; }
    .x-gallery { columns: 1; }
    .x-rowcard { grid-template-columns: 1fr; }
    .x-auth-card, .x-cta { padding: 28px 22px; }
    .x-stats { grid-template-columns: 1fr 1fr; }
}
.page-hero .x-lead { margin-inline: auto; }
.x-center .x-author { justify-content: center; }
.x-center .x-author > div { text-align: left; }

/* Shared component colours for Staya */
:root { --x-accent: var(--brass); --x-on-accent: #fff; --x-ink: var(--ink); --x-text: var(--text); --x-muted: var(--muted); --x-line: var(--line); --x-card: var(--paper); --x-soft: var(--stone); --x-radius: 0px; --x-heading: var(--serif); }
.x-art { background: linear-gradient(160deg, #c9bda6, #8f9a80); background-size: cover; background-position: center; }
.x-art::before, .x-art::after { display: none; }
.x-art span { font-weight: 500; letter-spacing: .22em; font-size: 11px; }
.x-avatar { background: var(--forest); color: var(--brass-2); font-family: var(--serif); font-weight: 500; font-size: 20px; }
.x-avatar.lg { font-size: 38px; }
.x-pill { border-radius: 0; background: transparent; border: 1px solid var(--brass); color: var(--brass); font-weight: 500; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; padding: 5px 12px; }
.x-post h3 { font-size: 28px; font-weight: 500; }
.x-post .x-more { font-weight: 500; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; }
.x-featured h2 { font-weight: 500; }
.x-cats { justify-content: center; }
.x-cats a, .x-cats button { border-radius: 0; font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; padding: 10px 20px; }
.x-cats .active { background: var(--forest); border-color: var(--forest); color: var(--on-dark); }
.x-article { font-size: 18px; }
.x-article h2 { font-size: 38px; font-weight: 500; }
.x-article h3 { font-size: 28px; font-weight: 500; }
.x-article blockquote { font-family: var(--serif); font-style: italic; font-size: 28px; line-height: 1.35; background: transparent; border-left: 1px solid var(--brass); padding: 6px 0 6px 30px; }
.x-share a { border-radius: 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; }
.x-faq details { padding: 24px 28px; }
.x-faq summary { font-family: var(--serif); font-size: 24px; font-weight: 500; }
.x-faq summary::after { font-family: var(--sans); font-weight: 300; }
.x-faq-group h2 { font-size: 36px; font-weight: 500; }
.x-cta { padding: 70px 40px; background: var(--forest); border: 0; color: #d6d0c3; }
.x-cta h2 { color: var(--on-dark); font-weight: 400; font-size: clamp(34px, 4vw, 52px); }
.x-cta .x-muted { color: #b9b6a8; }
.x-cta .btn-primary { background: var(--brass); }
.x-cta .x-field input { background: transparent; border-color: rgba(255, 255, 255, .3); color: #fff; }
.x-cta .x-success { color: var(--on-dark); }
.x-field input, .x-field select, .x-field textarea { border-radius: 0; background: var(--sand); }
.x-404 .code { font-weight: 400; font-style: italic; color: var(--brass); }
.x-404 h1 { font-weight: 500; }
.x-legal .x-article h2 { font-size: 34px; }
.x-toc { top: 120px; font-size: 13px; letter-spacing: .06em; }
.x-toc b { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--ink); font-weight: 500; margin-bottom: 6px; }
@media (max-width: 720px) { .x-cta { padding: 44px 22px; } .x-faq summary { font-size: 21px; } }