/* Global UI/UX polish — loaded on every page after the inline header styles. */
:root { --focus-ring: #e8bd55; --ease: cubic-bezier(.2,.7,.2,1); --smooth: cubic-bezier(.65,0,.35,1); }

html { scroll-padding-top: 6rem; -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: #d8d0c6; color: #1b1410; }
img { max-width: 100%; height: auto; }

/* Accessible focus */
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; border-radius: 6px; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; }

/* Skip link */
.skip-link { position: fixed; left: 1rem; top: -4rem; z-index: 100; background: #e8bd55; color: #1b1410; padding: .75rem 1.25rem; border-radius: 999px; font-weight: 600; transition: top .2s var(--ease); }
.skip-link:focus { top: 1rem; }

/* Dynamic-island navbar: floating glass pill that contracts on scroll */
:root { --nav-h: 6rem; --island-w: 1120px; --island-w-small: 900px; }
header > nav.site-nav { position: fixed; top: .75rem; left: 50%; right: auto; width: min(var(--island-w), calc(100% - 1.5rem)); transform: translateX(-50%); z-index: 50; border-radius: 999px; background: rgba(22,17,13,.62); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1px solid rgba(232,189,85,.28); box-shadow: 0 10px 40px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08); will-change: width, top; transition: width .7s var(--smooth), top .7s var(--smooth), background-color .5s var(--smooth), box-shadow .5s var(--smooth); }
header > nav.site-nav.is-scrolled { width: min(var(--island-w-small), calc(100% - 1.5rem)); top: .5rem; background: rgba(22,17,13,.82); box-shadow: 0 14px 44px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08); }
header:has(> nav.site-nav) { padding-top: var(--nav-h); }
header.site-header-home:has(> nav.site-nav) { padding-top: 0; }
header > nav.site-nav > div:first-child { height: 4.5rem; max-width: none; padding-left: 1.5rem; padding-right: .75rem; transition: height .7s var(--smooth); }
@media (min-width: 1024px) { header > nav.site-nav > div:first-child { padding-right: .6rem; } }
header > nav.site-nav.is-scrolled > div:first-child { height: 3.9rem; }
header > nav.site-nav img { height: 3.6rem; width: auto; max-width: 220px; transition: height .7s var(--smooth); }
header > nav.site-nav.is-scrolled img { height: 3rem; }
header > nav.site-nav .nav-link { transition: color .3s var(--ease), letter-spacing .7s var(--smooth); }
header > nav.site-nav .lg\:flex.gap-9 { transition: gap .7s var(--smooth); }
header > nav.site-nav.is-scrolled .nav-link { letter-spacing: .12em; }
header > nav.site-nav.is-scrolled .lg\:flex.gap-9 { gap: 1.6rem; }

/* Links: small caps, wide tracking, gold underline */
header > nav.site-nav .nav-link { font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.82); padding-bottom: 4px; }
header > nav.site-nav .nav-link:hover, header > nav.site-nav .nav-link[aria-current="page"] { color: #e8bd55; }
header > nav.site-nav .nav-link::after { background-color: #e8bd55; height: 1px; }
header > nav.site-nav .lg\:flex.gap-9 { gap: 2.25rem; }

/* Book Now: slim outlined gold pill that fills on hover */
header > nav.site-nav a[href$="/contact"] { padding: .5rem 1.35rem; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; background: #e8bd55; color: #1b1410; border: 1px solid #e8bd55; box-shadow: none; }
header > nav.site-nav a[href$="/contact"]:hover { background: #f3d078; color: #1b1410; transform: none; box-shadow: 0 6px 18px rgba(232,189,85,.28); }

/* Hamburger menu on phones and tablets (< 1024px) */
#menuBtn { width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; border-radius: .75rem; }
#menuBtn:hover { background: rgba(255,255,255,.1); }
@media (max-width: 1023px) {
  #menuBtn { display: inline-flex; }
  #mobileMenu { background: transparent !important; border-top: 1px solid rgba(255,255,255,.1) !important; padding-left: 1.5rem !important; padding-right: 1.5rem !important; border-radius: 0 0 1.75rem 1.75rem; max-height: calc(100vh - 6rem); overflow-y: auto; }
  #mobileMenu a { padding: .65rem 0; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,.08); }
  #mobileMenu a:last-child { border-bottom: 0; text-align: center; }
}

/* Buttons / links: consistent tactile feedback */
a[class*="rounded-full"], button[class*="rounded-full"] { transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease); }
a[class*="rounded-full"]:active, button[class*="rounded-full"]:active { transform: translateY(0) scale(.98); }

/* Cards */
.reserve-card, .blog-card, .team-card, .review-card { transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
@media (hover: hover) { .reserve-card:hover, .blog-card:hover { transform: translateY(-4px); box-shadow: 0 18px 45px rgba(42,31,23,.16); } }

/* Forms */
input, textarea, select { font-size: 16px; } /* prevents iOS zoom on focus */
input, textarea, select { transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
input:focus, textarea:focus, select:focus { border-color: #77614d; }

/* Photo texture: fine film grain + soft vignette */
.tx-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background:
    radial-gradient(120% 120% at 50% 45%, transparent 55%, rgba(27,20,16,.28) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 100% 100%, 240px 240px;
  mix-blend-mode: overlay; opacity: .7; }

/* Reveal on scroll */
.reveal-ready [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-ready [data-reveal].is-in { opacity: 1; transform: none; }

/* Footer polish */
.site-footer .footer-link { transition: color .2s var(--ease), transform .2s var(--ease); display: inline-block; }
.site-footer .footer-link:hover { transform: translateX(3px); }
.site-footer .social-link { transition: all .25s var(--ease); }
.site-footer .social-link:hover { background: #e8bd55; color: #1b1410; border-color: #e8bd55; transform: translateY(-2px); }

/* Back to top + mobile call/WhatsApp bar */
#backToTop { position: fixed; right: 1rem; bottom: 5.25rem; z-index: 40; width: 2.75rem; height: 2.75rem; border-radius: 999px; background: #4a3a2f; color: #fff; border: 1px solid rgba(255,255,255,.2); box-shadow: 0 10px 25px rgba(0,0,0,.25); opacity: 0; visibility: hidden; transform: translateY(10px); transition: all .3s var(--ease); }
#backToTop.is-visible { opacity: 1; visibility: visible; transform: none; }
#backToTop:hover { background: #5e483a; }
.mobile-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom)); background: rgba(27,20,16,.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid rgba(255,255,255,.1); }
.mobile-cta a { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .75rem 1rem; border-radius: 999px; font-weight: 600; font-size: .9rem; }
.mobile-cta .cta-call { background: rgba(255,255,255,.1); color: #fff; }
.mobile-cta .cta-book { background: #dfc590; color: #1b1410; }
@media (min-width: 1024px) { .mobile-cta { display: none; } #backToTop { bottom: 1.5rem; right: 1.5rem; } }

/* Floating sticky quick-contact (WhatsApp + Call) — every page */
.ns-float { position: fixed; right: .7rem; bottom: 8.2rem; z-index: 48; display: flex; flex-direction: column; gap: .6rem; }
.ns-float__btn { position: relative; width: 3rem; height: 3rem; border-radius: 999px; display: grid; place-items: center; color: #fff; box-shadow: 0 10px 24px rgba(0,0,0,.28); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.ns-float__btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,.34); }
.ns-float__btn i { font-size: 1.3rem; line-height: 1; }
.ns-float__btn--wa { background: #25D366; }
.ns-float__btn--call { background: #34241b; }
.ns-float__btn--wa::after { content: ""; position: absolute; width: 3rem; height: 3rem; border-radius: 999px; box-shadow: 0 0 0 0 rgba(37,211,102,.5); animation: ns-float-pulse 2.4s ease-out infinite; }
@keyframes ns-float-pulse { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,.45); } 70% { box-shadow: 0 0 0 14px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } }
@media (prefers-reduced-motion: reduce) { .ns-float__btn--wa::after { animation: none; } }
@media (min-width: 1024px) { .ns-float { right: 1.5rem; bottom: 5.5rem; } .ns-float__btn { width: 3.2rem; height: 3.2rem; } }
@media (max-width: 1023px) { footer.site-footer { padding-bottom: 4.5rem; } }

@media (max-width: 640px) { h1 { overflow-wrap: anywhere; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Photo grain texture (applied by JS to frames whose image fills them; see about.php) */
.has-tex { position: relative; }
.has-tex::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .22  0 0 0 0 .18  0 0 0 0 .1  0 0 0 1.4 -.15'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(32,24,18,.28) 100%);
  background-size: 220px 220px, 100% 100%;
  mix-blend-mode: multiply; opacity: .75;
}

/* Brush texture: ribbon-style fine lines on every textured photo */
.has-tex::before { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.09) 0 1px, transparent 1px 5px); mix-blend-mode: soft-light; }
/* Organic brush-edge frames on the Mission & Vision photos: clean photo, no grain */
#mission-vision .mv-img { border-radius: 0; box-shadow: none; }
#mission-vision .mv-img::before, #mission-vision .mv-img::after { display: none; }
#mission-vision .mv-img--m { clip-path: polygon(0.0% 6.6%,2.9% 3.3%,5.7% 3.1%,8.6% 2.7%,11.4% 0.7%,14.3% 1.6%,17.1% 1.3%,20.0% 3.6%,22.9% 1.9%,25.7% 3.3%,28.6% 3.7%,31.4% 3.4%,34.3% 3.5%,37.1% 4.5%,40.0% 3.3%,42.9% 3.8%,45.7% 3.5%,48.6% 3.2%,51.4% 5.3%,54.3% 4.4%,57.1% 5.4%,60.0% 4.9%,62.9% 6.9%,65.7% 4.5%,68.6% 6.6%,71.4% 4.4%,74.3% 3.7%,77.1% 5.5%,80.0% 4.0%,82.9% 2.9%,85.7% 3.2%,88.6% 3.2%,91.4% 5.5%,94.3% 6.2%,97.1% 8.7%,87.7% 0.0%,89.9% 2.9%,91.1% 5.7%,92.5% 8.6%,93.9% 11.4%,93.3% 14.3%,94.0% 17.1%,94.6% 20.0%,95.5% 22.9%,95.6% 25.7%,98.1% 28.6%,96.4% 31.4%,97.7% 34.3%,97.6% 37.1%,99.4% 40.0%,99.2% 42.9%,98.2% 45.7%,98.3% 48.6%,99.1% 51.4%,99.2% 54.3%,99.0% 57.1%,98.9% 60.0%,99.6% 62.9%,99.8% 65.7%,99.5% 68.6%,99.9% 71.4%,98.9% 74.3%,98.5% 77.1%,98.2% 80.0%,97.4% 82.9%,95.5% 85.7%,94.8% 88.6%,92.4% 91.4%,91.2% 94.3%,88.5% 97.1%,100.0% 85.6%,97.1% 87.6%,94.3% 90.1%,91.4% 91.4%,88.6% 93.4%,85.7% 93.7%,82.9% 94.2%,80.0% 95.3%,77.1% 96.2%,74.3% 95.3%,71.4% 95.8%,68.6% 94.7%,65.7% 96.0%,62.9% 96.3%,60.0% 95.9%,57.1% 95.9%,54.3% 96.8%,51.4% 97.5%,48.6% 96.7%,45.7% 98.1%,42.9% 98.3%,40.0% 99.2%,37.1% 98.8%,34.3% 97.1%,31.4% 99.0%,28.6% 98.2%,25.7% 98.0%,22.9% 96.4%,20.0% 97.3%,17.1% 96.7%,14.3% 95.6%,11.4% 96.1%,8.6% 95.1%,5.7% 94.9%,2.9% 93.0%,9.3% 100.0%,5.6% 97.1%,3.7% 94.3%,3.1% 91.4%,1.8% 88.6%,1.3% 85.7%,2.1% 82.9%,2.7% 80.0%,2.8% 77.1%,4.1% 74.3%,4.0% 71.4%,5.4% 68.6%,4.8% 65.7%,4.8% 62.9%,5.5% 60.0%,6.0% 57.1%,4.9% 54.3%,5.4% 51.4%,6.6% 48.6%,5.4% 45.7%,5.8% 42.9%,6.3% 40.0%,6.6% 37.1%,6.0% 34.3%,6.3% 31.4%,6.2% 28.6%,6.1% 25.7%,5.3% 22.9%,5.2% 20.0%,3.7% 17.1%,3.4% 14.3%,1.6% 11.4%,2.2% 8.6%,3.3% 5.7%,4.2% 2.9%); }
#mission-vision .mv-img--v { clip-path: polygon(0.0% 7.8%,2.9% 5.3%,5.7% 3.7%,8.6% 2.0%,11.4% 0.6%,14.3% 0.4%,17.1% 0.5%,20.0% 0.9%,22.9% 1.7%,25.7% 2.8%,28.6% 3.0%,31.4% 1.8%,34.3% 3.6%,37.1% 1.7%,40.0% 3.3%,42.9% 2.5%,45.7% 1.8%,48.6% 2.2%,51.4% 3.1%,54.3% 3.3%,57.1% 3.2%,60.0% 3.1%,62.9% 4.2%,65.7% 3.7%,68.6% 4.5%,71.4% 3.3%,74.3% 3.7%,77.1% 3.1%,80.0% 3.1%,82.9% 2.3%,85.7% 2.3%,88.6% 2.5%,91.4% 4.0%,94.3% 5.2%,97.1% 7.8%,88.9% 0.0%,90.5% 2.9%,92.0% 5.7%,91.4% 8.6%,91.7% 11.4%,92.4% 14.3%,93.2% 17.1%,92.8% 20.0%,92.6% 22.9%,94.6% 25.7%,94.1% 28.6%,94.3% 31.4%,96.0% 34.3%,96.9% 37.1%,96.0% 40.0%,96.8% 42.9%,97.0% 45.7%,97.6% 48.6%,98.5% 51.4%,98.7% 54.3%,97.1% 57.1%,98.4% 60.0%,98.6% 62.9%,99.6% 65.7%,99.5% 68.6%,100.0% 71.4%,100.0% 74.3%,100.0% 77.1%,100.0% 80.0%,98.9% 82.9%,98.7% 85.7%,97.3% 88.6%,96.0% 91.4%,93.3% 94.3%,91.2% 97.1%,100.0% 87.5%,97.1% 88.6%,94.3% 90.7%,91.4% 92.6%,88.6% 93.5%,85.7% 94.1%,82.9% 94.2%,80.0% 94.6%,77.1% 94.8%,74.3% 94.7%,71.4% 95.5%,68.6% 94.6%,65.7% 95.4%,62.9% 96.0%,60.0% 95.4%,57.1% 95.8%,54.3% 95.1%,51.4% 95.7%,48.6% 95.0%,45.7% 96.3%,42.9% 95.8%,40.0% 96.3%,37.1% 96.2%,34.3% 96.9%,31.4% 97.0%,28.6% 97.3%,25.7% 97.1%,22.9% 96.8%,20.0% 97.2%,17.1% 96.5%,14.3% 95.8%,11.4% 94.8%,8.6% 93.9%,5.7% 92.9%,2.9% 91.6%,9.8% 100.0%,6.5% 97.1%,3.9% 94.3%,2.7% 91.4%,0.2% 88.6%,0.9% 85.7%,0.1% 82.9%,0.0% 80.0%,1.0% 77.1%,2.3% 74.3%,0.5% 71.4%,1.4% 68.6%,2.9% 65.7%,3.2% 62.9%,4.2% 60.0%,3.5% 57.1%,4.4% 54.3%,4.6% 51.4%,5.2% 48.6%,5.2% 45.7%,5.5% 42.9%,5.5% 40.0%,6.3% 37.1%,7.1% 34.3%,7.4% 31.4%,7.9% 28.6%,7.3% 25.7%,7.6% 22.9%,7.8% 20.0%,6.2% 17.1%,5.6% 14.3%,6.1% 11.4%,6.5% 8.6%,6.5% 5.7%,7.7% 2.9%); }

/* Frosted-glass chip: small uppercase label that sits on photos */
.glass-chip { display: inline-flex; align-items: center; gap: .6rem; padding: .6rem 1.35rem; border-radius: 999px; color: #fff; font-size: .72rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; line-height: 1;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.34); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 8px 24px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.25); text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.glass-chip i { font-size: .95em; opacity: .95; }
.hero-chip { position: absolute; left: 1.25rem; bottom: 1.75rem; z-index: 25; }
@media (min-width: 1024px) { .hero-chip { left: 2rem; bottom: 2.5rem; } .glass-chip { font-size: .8rem; padding: .7rem 1.5rem; } }

/* Pages with no banner image: the floating nav sits on the page background */
header.site-header-plain { background: transparent !important; }
header.site-header-plain:has(> nav.site-nav) { padding-top: 5.75rem; }

/* Nav over light backgrounds: more solid so it never turns muddy grey; logo stays crisp */
header.site-header-plain > nav.site-nav,
header > nav.site-nav.is-scrolled { background: rgba(36,26,19,.93); }
header.site-header-plain > nav.site-nav { border-color: rgba(232,189,85,.45); box-shadow: 0 14px 36px -12px rgba(36,26,19,.55), inset 0 1px 0 rgba(255,255,255,.08); }

/* Smoothness: image fade-in, eased reveal, softer anchor jumps */
.img-fade { opacity: 0; transition: opacity .7s cubic-bezier(.2,.7,.2,1); }
.img-fade.img-in { opacity: 1; }
.reveal-ready [data-reveal] { transition: opacity .9s cubic-bezier(.2,.7,.2,1) var(--rv, 0ms), transform .9s cubic-bezier(.2,.7,.2,1) var(--rv, 0ms); }
body { animation: page-in .6s cubic-bezier(.2,.7,.2,1) both; }
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }
a, button, summary { -webkit-tap-highlight-color: transparent; }
details > summary { transition: background-color .25s ease; }
details[open] > div, details[open] > ul { animation: details-in .45s cubic-bezier(.2,.7,.2,1); }
@keyframes details-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { body { animation: none; } .img-fade { opacity: 1; transition: none; } }

/* ===== Mobile polish ===== */
@media (max-width: 639px) {
  #backToTop { width: 2.4rem; height: 2.4rem; right: .7rem; bottom: 5rem; opacity: 0; font-size: .8rem; }
  #backToTop.is-visible { opacity: .88; }
  .site-footer .border-t.pt-5 > .flex.flex-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem 1rem; text-align: center; }
  .site-footer .border-t.pt-5 > .flex.flex-wrap > span { display: none; }
  .site-footer .border-t.pt-5 > p { line-height: 1.8; }
  .site-footer .border-t.pt-5 > p > span.mx-2 { display: block; height: .35rem; font-size: 0; overflow: hidden; }
}

/* ===== Mobile-first spacing: tighter sections, compact cards ===== */
@media (max-width: 767px) {
  html body .rp-sec, html body .tr-sec, html body .rs-section { padding-top: 2.25rem; padding-bottom: 2.25rem; }
  html body section[class*="py-1"]:not(footer *), html body section[class*="py-2"]:not(footer *) { padding-top: 2.25rem !important; padding-bottom: 2.25rem !important; }
}

/* ===== Section heading → content gaps: compact and consistent ===== */
html body section .text-center.mb-10, html body section .text-center.mb-12, html body section .text-center.mb-14 { margin-bottom: 1.5rem; }
html body section .text-center.mx-auto > p.mt-4 { margin-top: .625rem; }
html body #stays .st-filter-row { margin-bottom: 14px; }
html body #stays .st-count { margin-bottom: 14px; }
@media (max-width: 767px) {
  html body section .text-center.mb-10, html body section .text-center.mb-12, html body section .text-center.mb-14 { margin-bottom: 1.125rem; }
  html body #stays .st-filter-row { margin-bottom: 10px; }
  html body #stays .st-count { margin-bottom: 12px; }
}

/* Desktop: Tailwind-padded sections follow the same 40px rhythm as the rest of the site */
@media (min-width: 768px) {
  html body section[class*="py-"]:not(footer *):not(#_) { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
}

/* smaller floating buttons on phones so they cover less of the page text */
@media (max-width: 640px) { .ns-float { right: .55rem; gap: .5rem; } .ns-float__btn { width: 2.6rem; height: 2.6rem; } .ns-float__btn i { font-size: 1.1rem; } }