:root{
  --bg:#f6f1e7; --bg2:#eee6d4; --ink:#1b3b38; --muted:#5b6b66; --card:#fffdf7; --line:#d6c9aa;
  --teal:#1f4d4a; --teal2:#2a615c; --deep:#12312e; --gold:#d9a441; --gold2:#d9b36c; --cream:#f6f1e7;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --bg:#0f2321; --bg2:#14302d; --ink:#f1ebdc; --muted:#a9bab5; --card:#183532; --line:#2f4d49; color-scheme:dark; }
}
:root[data-theme="dark"]{ --bg:#0f2321; --bg2:#14302d; --ink:#f1ebdc; --muted:#a9bab5; --card:#183532; --line:#2f4d49; color-scheme:dark; }
html{ scroll-padding-top:env(safe-area-inset-top,0px); background:var(--bg); }
*{ box-sizing:border-box; }
body{ margin:0; background:var(--bg); color:var(--ink); font:17px/1.65 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; padding-bottom:88px; }
@media (min-width:900px){ body{ padding-bottom:0; } .bar{ display:none !important; } }
h1,h2,h3{ font-family:Georgia, "Times New Roman", serif; font-weight:400; line-height:1.15; margin:0; }
a{ color:inherit; }
img{ max-width:100%; display:block; }
.wrap{ max-width:720px; margin:0 auto; padding:0 22px; }
.sec{ padding:52px 0; }
.alt{ background:var(--bg2); }
h2{ font-size:clamp(27px,6.5vw,34px); color:var(--ink); margin-bottom:16px; }
p{ margin:0 0 15px; }
.lead{ font-size:19px; }
.note{ font-size:15.5px; color:var(--muted); margin:16px 0 0; }
.kicker{ font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:#9a7a3a; margin-bottom:10px; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; text-decoration:none; font-weight:600; font-size:16px; padding:14px 22px; border-radius:10px; }
.btn svg{ width:20px; height:20px; flex:none; }
.btn.gold{ background:var(--gold); color:#1b3b38; }
.btn.cream{ background:var(--cream); color:#1f4d4a; }
.btn.line{ border:1px solid var(--gold2); color:var(--cream); }
.btn.teal{ background:var(--teal); color:var(--cream); }
.btn:focus-visible,.bar a:focus-visible,summary:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }

/* hero */
.hero{ position:relative; color:var(--cream); text-align:center; padding:52px 22px 100px; overflow:hidden;
  background:radial-gradient(ellipse 70% 36% at 50% 13%, rgba(217,164,65,.30), rgba(217,164,65,0) 70%),
             linear-gradient(180deg,#2e6f67 0%,#1f4d4a 44%,#12312e 100%); }
.hero .logo{ display:block; margin:0 auto 18px; }
.hero h1{ font-size:clamp(42px,12vw,70px); }
.place{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:12px; font-size:clamp(15px,4vw,19px); letter-spacing:.34em; text-transform:uppercase; color:#e3d5ae; }
.place:before,.place:after{ content:""; width:34px; height:1px; background:var(--gold2); }
.zh{ color:var(--gold2); letter-spacing:.24em; margin-top:14px; font-size:17px; }
.tag{ font-family:Georgia, serif; font-size:clamp(22px,5.6vw,30px); line-height:1.3; max-width:20ch; margin:26px auto 10px; }
.subline{ color:#d9e2df; font-size:16.5px; margin:0 auto 18px; max-width:34ch; }
.hours{ display:inline-block; background:rgba(255,255,255,.09); border:1px solid rgba(217,179,108,.45); border-radius:999px; padding:9px 18px; font-size:15px; margin-bottom:24px; }
.btns{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.textlink{ display:inline-block; margin-top:18px; color:#e3d5ae; font-size:15.5px; }
.wave{ position:absolute; left:0; bottom:-1px; width:100%; height:58px; display:block; }

/* massages */
.glance{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:22px 0 0; }
.glance div{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 14px; }
.glance dt{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#9a7a3a; }
.glance dd{ margin:3px 0 0; font-size:15.5px; line-height:1.4; }
.cards{ display:grid; grid-template-columns:1fr; gap:16px; margin-top:20px; }
@media (min-width:640px){ .cards{ grid-template-columns:1fr 1fr; } }
.card{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:24px 22px; }
.card h3{ font-size:25px; color:var(--ink); }
.card .how{ color:var(--muted); font-size:15.5px; margin:8px 0 16px; }
.card ul{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.card li{ display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--line); }
.card li:last-child{ border-bottom:0; padding-bottom:0; }
.card li b{ font-weight:600; }
.cta-row{ margin-top:22px; }

/* rooms */
.rooms{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:20px; }
.rooms img{ border-radius:14px; width:100%; aspect-ratio:4/5; object-fit:cover; }

/* about */
.about{ display:flex; gap:20px; align-items:flex-start; }
.about .mark{ flex:none; width:58px; height:58px; border-radius:50%; background:var(--teal); border:1px solid var(--gold2); display:flex; align-items:center; justify-content:center; color:var(--cream); font-family:Georgia, serif; font-size:24px; }

/* faq */
.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ list-style:none; cursor:pointer; padding:18px 40px 18px 0; position:relative; font-family:Georgia, serif; font-size:19.5px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:after{ content:"+"; position:absolute; right:4px; top:50%; transform:translateY(-50%); width:28px; height:28px; border-radius:50%; border:1px solid var(--gold2); color:#9a7a3a; display:flex; align-items:center; justify-content:center; font-family:sans-serif; font-size:18px; line-height:1; }
.faq details[open] summary:after{ content:"\2212"; }
.faq details p{ margin:0 0 18px; color:var(--ink); }

/* reviews */
.reviews{ text-align:center; }
.stars{ color:var(--gold); font-size:22px; letter-spacing:4px; margin-bottom:8px; }

/* footer */
.foot{ background:linear-gradient(180deg,#1f4d4a 0%,#12312e 100%); color:var(--cream); padding:44px 0 34px; }
.foot h2{ color:var(--cream); }
.foot a{ color:var(--cream); }
.addr{ font-size:18px; margin-bottom:16px; }
.mapbox{ border-radius:16px; overflow:hidden; background:#16403c; border:1px solid rgba(217,179,108,.35); }
.mapbox iframe{ display:block; width:100%; height:300px; border:0; }
.findgrid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:4px; }
.findgrid figure{ margin:0; }
.findgrid .frame{ aspect-ratio:1/1; border-radius:14px; overflow:hidden; border:1px solid rgba(217,179,108,.35); background:#16403c; }
.findgrid iframe{ display:block; width:100%; height:100%; border:0; }
.findgrid button.frame{ display:block; width:100%; padding:0; cursor:zoom-in; }
.findgrid button.frame img{ width:100%; height:100%; object-fit:cover; }
.findgrid figcaption{ font-size:13.5px; color:#b9c9c4; margin-top:7px; }
.lightbox{ position:fixed; inset:0; z-index:50; background:rgba(8,24,22,.92); display:none; align-items:center; justify-content:center; padding:calc(16px + env(safe-area-inset-top,0px)) 16px calc(16px + env(safe-area-inset-bottom,0px)); }
.lightbox.open{ display:flex; }
.lightbox img{ max-width:min(100%,900px); max-height:100%; border-radius:12px; }
.lightbox .close{ position:absolute; top:calc(12px + env(safe-area-inset-top,0px)); right:14px; background:var(--cream); color:#1f4d4a; border:0; border-radius:999px; padding:9px 16px; font-weight:600; font-size:15px; }
.chips{ list-style:none; margin:18px 0 0; padding:0; display:grid; grid-template-columns:1fr; gap:10px; }
@media (min-width:640px){ .chips{ grid-template-columns:1fr 1fr; } }
.chips li{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:13px 16px 13px 44px; position:relative; }
.chips li:before{ content:""; position:absolute; left:16px; top:50%; width:14px; height:14px; margin-top:-7px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px rgba(217,164,65,.18); }
.dirline{ color:#d9e2df; margin:14px 0 16px; font-size:16px; }
.foot .btns{ justify-content:flex-start; }
.contact{ margin-top:28px; padding-top:22px; border-top:1px solid rgba(217,179,108,.3); display:grid; grid-template-columns:1fr; gap:4px 28px; }
@media (min-width:640px){ .contact{ grid-template-columns:1fr 1fr; } }
.contact div{ padding:8px 0; }
.contact dt{ color:var(--gold2); font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; }
.contact dd{ margin:3px 0 0; font-size:17.5px; word-break:break-word; }
.fine{ font-size:13px; color:#b9c9c4; margin-top:30px; }

/* sticky bar */
.bar{ position:fixed; left:0; right:0; bottom:0; z-index:20; display:flex; gap:8px; padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px)); background:#12312e; border-top:1px solid var(--teal2); }
.bar a{ flex:1; display:flex; align-items:center; justify-content:center; gap:6px; text-decoration:none; font-weight:600; padding:13px 6px; border-radius:10px; font-size:15px; }
.bar svg{ width:18px; height:18px; }
.bar .call{ background:var(--gold); color:#1b3b38; }
.bar .wa{ background:var(--cream); color:#1f4d4a; }
.bar .dir{ border:1px solid var(--gold2); color:var(--cream); }

/* v4: site nav, page hero, prose, links */
.topnav{ background:#12312e; border-bottom:1px solid var(--teal2); }
.topnav .in{ max-width:960px; margin:0 auto; padding:10px 22px; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--cream); font-family:Georgia, serif; font-size:18px; }
.brand svg{ width:34px; height:34px; }
.topnav ul{ list-style:none; margin:0; padding:0; display:flex; gap:4px 18px; flex-wrap:wrap; }
.topnav a{ color:#e3d5ae; font-size:15px; text-decoration:none; padding:6px 0; }
.topnav a:hover,.topnav a[aria-current="page"]{ color:var(--cream); text-decoration:underline; text-underline-offset:5px; text-decoration-color:var(--gold2); }
.topnav a:focus-visible,.brand:focus-visible,.crumbs a:focus-visible,.more a:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }
.phero{ position:relative; color:var(--cream); padding:34px 0 84px; overflow:hidden;
  background:radial-gradient(ellipse 60% 50% at 85% 0%, rgba(217,164,65,.24), rgba(217,164,65,0) 70%), linear-gradient(180deg,#2a615c 0%,#1f4d4a 55%,#12312e 100%); }
.phero .in{ max-width:720px; margin:0 auto; padding:0 22px; }
.crumbs{ font-size:14px; color:#b9c9c4; margin-bottom:16px; }
.crumbs ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.crumbs li+li:before{ content:"/"; margin-right:6px; color:#7f9a94; }
.crumbs a{ color:#e3d5ae; }
.phero h1{ font-size:clamp(34px,9vw,52px); }
.phero .intro{ color:#d9e2df; font-size:18px; margin:14px 0 22px; max-width:46ch; }
.phero .btns{ justify-content:flex-start; }
.prose h2{ margin-top:6px; }
.prose h3{ font-size:22px; margin:26px 0 8px; }
.prose ul.list{ margin:0 0 15px; padding-left:22px; }
.prose ul.list li{ margin-bottom:8px; }
.pricecard{ max-width:420px; }
.steps{ list-style:none; counter-reset:st; margin:20px 0 0; padding:0; }
.steps li{ counter-increment:st; position:relative; padding:0 0 22px 52px; }
.steps li:before{ content:counter(st); position:absolute; left:0; top:0; width:34px; height:34px; border-radius:50%; background:var(--teal); color:var(--cream); border:1px solid var(--gold2); display:flex; align-items:center; justify-content:center; font-family:Georgia, serif; font-size:17px; }
.steps h3{ font-size:21px; margin:3px 0 6px; }
.steps p{ margin:0; }
.photo2{ display:grid; grid-template-columns:1fr; gap:12px; margin:20px 0 6px; }
@media (min-width:640px){ .photo2{ grid-template-columns:1fr 1fr; } }
.photo2 figure{ margin:0; }
.photo2 img{ border-radius:14px; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }
.photo2 figcaption{ font-size:14px; color:var(--muted); margin-top:7px; }
.more{ display:grid; grid-template-columns:1fr; gap:12px; margin-top:18px; }
@media (min-width:640px){ .more{ grid-template-columns:1fr 1fr; } }
.more a{ display:block; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px 20px; text-decoration:none; }
.more a b{ display:block; font-family:Georgia, serif; font-weight:400; font-size:21px; margin-bottom:4px; }
.more a span{ color:var(--muted); font-size:15.5px; }
.more a:hover{ border-color:var(--gold2); }
.cardlink{ display:inline-block; margin-top:14px; font-weight:600; color:var(--teal); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .cardlink{ color:var(--gold2); } }
:root[data-theme="dark"] .cardlink{ color:var(--gold2); }
.footlinks{ list-style:none; margin:22px 0 0; padding:18px 0 0; border-top:1px solid rgba(217,179,108,.3); display:flex; flex-wrap:wrap; gap:8px 22px; }
.footlinks a{ color:#e3d5ae; font-size:15.5px; }