:root{--paper:#faf8f2;--cream:#f5efe5;--green:#234438;--olive:#536333;--ink:#15221c;--gold:#b48c62;--line:#d9c8b3}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:18px/1.55 Arial,Helvetica,sans-serif}
a{color:inherit;text-underline-offset:6px}
a:focus-visible,summary:focus-visible{outline:3px solid #ae6237;outline-offset:5px}
img{display:block;width:100%;object-fit:cover}
h1,h2,h3{color:var(--green);font-family:Georgia,'Times New Roman',serif;font-weight:400;line-height:1.06;margin:0 0 20px}
h1{font-size:clamp(44px,4.4vw,70px);letter-spacing:-2px}
h2{font-size:clamp(34px,3.2vw,52px);letter-spacing:-1px}
h3{font-size:clamp(27px,2.2vw,36px)}
p{margin:0 0 20px}
.wrap{width:calc(100% - 6%);max-width:1440px;margin:auto}
.site-header{min-height:92px;display:flex;justify-content:space-between;align-items:center;padding:10px 3.4% 10px 5%;gap:24px}
.brand{font:clamp(26px,3vw,46px)/1 Georgia,serif;letter-spacing:1px;color:var(--green);text-decoration:none;white-space:nowrap}
.brand span{display:block;text-align:center;font:14px/1.5 Arial,sans-serif;letter-spacing:6px;margin-top:7px}
nav{display:flex;align-items:center;gap:clamp(18px,3.5vw,55px)}
nav a{text-decoration:none;font-size:18px;color:var(--green);white-space:nowrap}
nav a:hover{text-decoration:underline}
.button{display:inline-block;background:var(--green);color:white;text-decoration:none;padding:10px 24px;border-radius:5px;font-size:20px;line-height:1.5}
.button:hover{background:#355b49}
.olive{background:var(--olive)}
.hero{display:grid;grid-template-columns:39.2% 60.8%;background:var(--cream)}
.hero-copy{padding:50px 5% 45px 12%;align-self:center}
.eyebrow{font-size:14px;letter-spacing:3px;color:var(--green);font-weight:600;margin-bottom:22px}
.hero-copy>p:not(.eyebrow){font-size:22px;line-height:1.4;margin-bottom:26px}
.hero>img{height:100%;min-height:420px;max-height:490px;border-top-right-radius:55px}
.features{list-style:none;padding:22px 3%;margin:0;display:flex;justify-content:space-around;gap:16px;background:var(--cream);border-top:2px solid var(--paper);color:var(--green)}
.features li{padding:0 24px;border-right:1px solid var(--gold);font-size:17px;text-align:center}
.features li:last-child{border:0}
.stays{padding-top:36px}
.stays>h2{text-align:center;margin-bottom:36px}
.stay-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.stay-card{display:grid;grid-template-columns:58% 42%;overflow:hidden;border-radius:10px;background:var(--cream)}
.stay-card>img{height:100%;min-height:245px}
.stay-card>div{padding:30px;display:flex;flex-direction:column}
.stay-card h3{font-size:32px;font-weight:600}
.stay-card p{line-height:1.3;font-size:18px}
.text-link{color:var(--green);font-weight:600;text-decoration-color:#a36d3e}
.stay-card .text-link{margin-top:auto}
.address-line{text-align:center;margin:25px 0 0;padding:10px;border-bottom:1px solid var(--gold)}
.section{padding-top:80px;padding-bottom:80px;scroll-margin-top:20px}
.lead{max-width:850px}
.room-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:35px}
.room-grid article{padding:26px;border-top:1px solid var(--gold);background:var(--cream);display:flex;flex-direction:column}
.room-grid .text-link{margin-top:auto}
.whole,.location{background:#e9eddf}
.split{display:grid;grid-template-columns:1fr 1fr;gap:6%;align-items:center}
.split img{aspect-ratio:4/3;border-radius:8px}
.gallery{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:24px}
.gallery img{height:300px;border-radius:7px}
.practical{display:grid;grid-template-columns:1fr 1fr;gap:6%;border-top:1px solid var(--line)}
.practical ul{padding-left:22px;line-height:2}
details{border-bottom:1px solid var(--line);padding:15px 0}
summary{cursor:pointer;color:var(--green);font-weight:600}
details p{margin:16px 0 0}
address{font-style:normal}
footer{padding:35px 0;display:flex;align-items:center;justify-content:space-between;gap:25px}
footer .brand{font-size:28px}
footer p{font-size:15px;margin:0}
.skip{position:absolute;top:-100px;left:10px;z-index:10;background:white;padding:10px}
.skip:focus{top:10px}
@media(max-width:1000px){nav{gap:18px}nav a{font-size:16px}.site-header{flex-wrap:wrap;justify-content:center;padding:20px}.hero-copy{padding:30px 8%}.hero-copy>p:not(.eyebrow){font-size:18px}.stay-card{grid-template-columns:1fr}.stay-card>img{height:230px;min-height:0}.features li{padding:0 12px}.hero>img{min-height:400px}}
@media(max-width:650px){body{font-size:17px}.wrap{width:90%}nav{flex-wrap:wrap;justify-content:center;gap:14px}nav .button{font-size:16px;padding:7px 14px}.hero{grid-template-columns:1fr}.hero-copy{padding:35px 6%}.hero>img{min-height:0;max-height:320px;aspect-ratio:4/3;border-radius:0}.hero h1{font-size:48px}.features{display:grid;grid-template-columns:1fr 1fr;padding:20px;gap:20px}.features li{border:0;font-size:15px}.stay-grid,.room-grid,.split,.practical{grid-template-columns:1fr}.stay-grid{gap:22px}.stay-card>div{padding:25px}.section{padding-block:48px}.split{gap:30px}.gallery{grid-template-columns:1fr 1fr;gap:15px}.gallery>a:first-child{grid-column:1/-1}.gallery img{height:210px}.stays h2{font-size:34px}footer{flex-wrap:wrap}.desktop{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.location-map { margin-top: 36px; }
.location-map iframe { display: block; width: 100%; height: 420px; border: 0; border-radius: 10px; }
@media(max-width:650px) { .location-map iframe { height: 340px; } }

.reviews { text-align: center; }
.review-note, .reviews small { font-size: 15px; color: #536257; }
.review-slide { margin: 24px auto; max-width: 900px; min-height: 260px; padding: 35px 24px; background: var(--cream); border-radius: 10px; }
.review-slide[hidden] { display: none; }
.review-stars { color: #87631e; letter-spacing: 5px; }
.review-slide blockquote { margin: 15px 0 25px; font: clamp(25px,3vw,36px)/1.3 Georgia,serif; color: var(--green); }
.review-slide figcaption { font-weight: 600; }
.review-slide figcaption span { display: block; font-size: 14px; font-weight: 400; margin-top: 4px; }

.brand img { width: auto; height: 78px; }
footer .brand img { height: 68px; }

.page-photo { max-height: 420px; aspect-ratio: 2 / 1; border-radius: 8px; margin-bottom: 24px; }

.villa-gallery {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.villa-gallery figure {
  margin: 0;
}
.villa-gallery img {
  height: auto;
  aspect-ratio: 4 / 3;
}
.villa-gallery figcaption {
  margin-top: 8px;
}
@media (max-width: 650px) {
  .villa-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Tropical Retreat motion: quiet, short and responsive to accessibility preferences. */
.site-header {
  background: #fef8ed;
  border-bottom: 1px solid rgba(35,68,56,.08);
}
nav a:not(.button) { position: relative; padding-block: 7px; }
nav a:not(.button)::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
nav a:not(.button):hover { text-decoration: none; }
nav a:not(.button):hover::after, nav a[aria-current="page"]::after { transform: scaleX(1); }
.button { transition: background-color .2s ease, transform .25s ease, box-shadow .25s ease; }
.button:active:active { transform: translateY(1px); }
.stay-card, .room-grid article { transition: transform .35s ease, box-shadow .35s ease, opacity .65s ease; }
.gallery a { display: block; overflow: hidden; border-radius: 8px; }
.gallery img { transition: transform .6s cubic-bezier(.2,.7,.3,1); }
.text-link { transition: text-decoration-color .2s ease; }
.text-link:hover { text-decoration-color: var(--green); }
.reveal-item { transition: opacity .65s ease, transform .65s cubic-bezier(.2,.7,.3,1); }
.reveal-pending { opacity: 0; transform: translateY(22px); }
@media (hover:hover) and (pointer:fine) {
  .button:hover { transform: translateY(-2px); box-shadow: 0 7px 18px rgba(35,68,56,.16); }
  .stay-card:hover, .room-grid article:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(35,68,56,.09); }
  .gallery a:hover img { transform: scale(1.035); }
}
@media (prefers-reduced-motion:no-preference) {
  .hero-copy { animation: welcome-in .75s ease both; }
  .review-slide:not([hidden]) { animation: welcome-in .35s ease both; }
}
@keyframes welcome-in { from { opacity: .3; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal-pending { opacity: 1; transform: none; }
  .button:hover, .stay-card:hover, .room-grid article:hover, .gallery a:hover img { transform: none; }
}

.site-footer {
  display: block;
  padding: clamp(32px, 5vw, 72px) 0 0;
  background: var(--green);
  color: var(--paper);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: clamp(24px, 5vw, 72px);
}
.footer-intro .brand {
  display: inline-block;
  margin-bottom: 14px;
}
.footer-intro .brand img { border-radius: 5px; }
.footer-intro p { max-width: 32ch; }
.site-footer .footer-label {
  margin: 0 0 12px;
  font-weight: 700;
}
.site-footer a { color: inherit; }
.footer-nav {
  display: block;
}
.footer-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-nav a:not(.button) {
  display: inline-block;
  padding: 3px 0;
  white-space: normal;
  font-size: inherit;
}
.footer-nav a:not(.button)::after { background: currentColor; }
.footer-contact a {
  display: block;
  width: fit-content;
  margin-top: 8px;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 24px;
  border-top: 1px solid rgba(250, 248, 242, .3);
  margin-top: 32px;
  padding: 16px 0;
}
.footer-bottom a, .footer-bottom small { font-size: 14px; }
.site-footer a:focus-visible { outline-color: var(--paper); }
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-intro { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .footer-grid { grid-template-columns: 1fr; }
}

.photo-section { margin-top: clamp(36px, 6vw, 76px); scroll-margin-top: 24px; }
.gallery-jumps { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.gallery-more { margin-top: 20px; }
@media (max-width: 420px) {
  .photo-page .villa-gallery { grid-template-columns: 1fr; }
}

.review-slide .review-summary { margin: 15px 0 25px; font: clamp(25px,3vw,36px)/1.3 Georgia,serif; color: var(--green); }

.review-carousel { position: relative; max-width: 900px; margin-inline: auto; }
.review-carousel .review-slide { padding-inline: clamp(58px, 9vw, 88px); }
.review-arrow {
  position: absolute;
  top: 50%;
  z-index: 1;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--green);
  font: 38px/1 Georgia, serif;
  cursor: pointer;
}
.review-arrow:hover { background: var(--paper); }
.review-arrow:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.review-arrow-prev { left: clamp(5px, 2vw, 24px); }
.review-arrow-next { right: clamp(5px, 2vw, 24px); }

/* Shared page gutters and vertical spacing. */
:root {
  --page-gutter: clamp(16px, 4vw, 56px);
  --content-width: 1240px;
  --section-space: clamp(24px, 3.5vw, 48px);
  --grid-gap: clamp(14px, 2.5vw, 28px);
}
.wrap {
  width: min(var(--content-width), calc(100% - 2 * var(--page-gutter)));
  margin-inline: auto;
}
.site-header {
  min-height: auto;
  padding: 10px max(var(--page-gutter), calc((100% - var(--content-width)) / 2));
  gap: 12px 24px;
}
.section { padding-block: var(--section-space); }
.section.wrap + .section.wrap { padding-top: calc(var(--section-space) / 2); }
.section > :last-child, .section .split > div > :last-child { margin-bottom: 0; }
.hero-copy {
  padding: var(--section-space) var(--grid-gap) var(--section-space) max(var(--page-gutter), calc((100vw - var(--content-width)) / 2));
}
.hero > img { min-height: 0; height: clamp(310px, 36vw, 450px); }
.features { padding-block: 14px; }
.stays { padding-top: var(--section-space); }
.stays > h2 { margin-bottom: var(--grid-gap); }
.stay-grid, .room-grid, .split, .gallery, .practical { gap: var(--grid-gap); }
.room-grid { margin-top: var(--grid-gap); }
.split, .practical { align-items: start; }
.split > *, .practical > *, .gallery > * { min-width: 0; }
.gallery:not(.villa-gallery) img { height: clamp(150px, 22vw, 265px); }
.photo-section { margin-top: var(--section-space); }
.location-map { margin-top: var(--grid-gap); }
.location-map iframe { height: clamp(240px, 35vw, 365px); }
.review-slide { min-height: 0; margin-block: 16px; padding-block: 22px; }
.review-slide .review-summary { margin-block: 10px 16px; }
.site-footer { padding-top: var(--section-space); }
.footer-grid { gap: var(--grid-gap); }
.footer-bottom { margin-top: var(--grid-gap); }

@media (max-width: 650px) {
  .site-header { gap: 8px 16px; }
  .site-header .brand img { height: 62px; }
  .hero-copy { padding-inline: var(--page-gutter); }
  .hero > img { height: clamp(190px, 53vw, 300px); }
  .features { gap: 10px; }
  .review-carousel .review-slide { padding-inline: 52px; }
  .review-arrow-prev { left: 3px; }
  .review-arrow-next { right: 3px; }
  .review-slide figcaption { overflow-wrap: anywhere; }
}