/* ==========================================================
   Sand Bay Resort — style.css
   Font: Cabinet Grotesk + DM Sans | Accent: Deep Teal #0d9488
   ========================================================== */

/* =====================================================================
   1. CSS CUSTOM PROPERTIES
   ===================================================================== */
:root {
  --font-heading:      'Cabinet Grotesk', 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-body:         'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --accent:            #0d9488;
  --accent-hover:      #0f766e;
  --text:              #1a2e2c;
  --text-muted:        #5a7370;
  --bg:                #ffffff;
  --bg-alt:            #f4faf9;
  --border:            #ddecea;
  --navbar-height:     80px;
  --navbar-h:          80px;
  --max-w:             1280px;
  --section-pad:       72px;
  --section-pad-tight: 48px;
  --btn-radius:        8px;
  --img-radius:        12px;
  --container-px:      1rem;
  --footer-bg:         #011614;
  --footer-text:       rgba(255, 255, 255, 0.65);
  --footer-head:       #ffffff;
  --footer-line:       rgba(255, 255, 255, 0.10);
  --footer-chip:       rgba(255, 255, 255, 0.10);
  --footer-chip-h:     rgba(255, 255, 255, 0.18);
}

/* =====================================================================
   2. GLOBAL RESET & BASE
   ===================================================================== */
html {
  scroll-padding-top: calc(var(--navbar-height) + 1rem);
}

html,
body {
  width:      100%;
  max-width:  100vw;
  overflow-x: hidden;
  margin:     0;
  padding:    0;
}

*,
*::before,
*::after {
  box-sizing:  border-box;
  max-width:   100%;
}

img, video, iframe {
  max-width: 100%;
  height:    auto;
}

body {
  font-family: var(--font-body);
  font-size:   1.0625rem;
  line-height: 1.6;
  color:       var(--text);
  background:  var(--bg);
}

h1, h2, h3, h4, h5 {
  font-family:    var(--font-heading);
  line-height:    1.25;
  margin-top:     0;
  letter-spacing: -0.01em;
}

p {
  font-size:   1.0625rem;
  line-height: 1.6;
  margin-top:  0;
}

ul { padding-left: 1.25rem; }

a { color: var(--accent); }
a:hover { text-decoration: none; }

/* =====================================================================
   3. LAYOUT HELPERS
   ===================================================================== */
.container {
  width:         100%;
  max-width:     var(--max-w);
  margin-left:   auto !important;
  margin-right:  auto !important;
  padding-left:  var(--container-px);
  padding-right: var(--container-px);
}

@media (min-width: 768px) {
  :root { --container-px: 2rem; }
}
@media (min-width: 1200px) {
  :root { --container-px: 3rem; }
}

.section {
  padding-top:    var(--section-pad);
  padding-bottom: var(--section-pad);
}

.section--alt { background: var(--bg-alt); }

.section-eyebrow {
  display:        block;
  font-family:    var(--font-body);
  font-size:      1.0625rem;
  font-weight:    600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--accent);
  margin-bottom:  0.75rem;
}

.section-heading {
  font-size:     clamp(2rem, 4vw, 2.75rem);
  font-weight:   700;
  color:         var(--text);
  margin-bottom: 1rem;
}

.section-intro {
  font-size:   1.0625rem;
  line-height: 1.65;
  color:       var(--text-muted);
  max-width:   72ch;
  margin-bottom: 2.5rem;
}

/* =====================================================================
   4. TEXT DECORATION RESET
   ===================================================================== */
.navbar-logo,
.navbar-links a,
.mobile-menu a,
.btn,
.btn-room-cta,
.btn-submit,
.villa-view-link,
.maps-btn,
.footer-links a,
.footer-enquiry,
.footer-social a,
.hero-cta {
  text-decoration: none;
}

/* =====================================================================
   5. NAVBAR
   ===================================================================== */
.navbar {
  position:    fixed;
  top:         0;
  left:        0;
  right:       0;
  height:      var(--navbar-height);
  z-index:     1000;
  background:  transparent;
  transition:  background 0.25s, box-shadow 0.25s;
  display:     flex;
  align-items: center;
}

.navbar.scrolled {
  background:              rgba(255, 255, 255, 0.97);
  box-shadow:              0 2px 12px rgba(0, 0, 0, 0.08);
  backdrop-filter:         blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.navbar-inner {
  width:       100%;
  max-width:   var(--max-w);
  margin:      0 auto;
  padding-left:  max(75px, 5vw);
  padding-right: max(1.5rem, 3vw);
  display:     flex;
  align-items: center;
  gap:         1rem;
}

.navbar-logo {
  display:         flex;
  align-items:     center;
  gap:             0.625rem;
  text-decoration: none;
  margin-right:    auto;
}

.logo-navbar {
  height:     var(--navbar-height);
  width:      auto;
  object-fit: contain;
  filter:     brightness(0) invert(1);
  transition: filter 0.25s;
}

.navbar.scrolled .logo-navbar {
  filter: brightness(0) invert(0.5);
}

.navbar-links {
  display:     flex;
  align-items: center;
  gap:         0.25rem;
  list-style:  none;
  padding:     0;
  margin:      0;
}

.navbar-links a {
  color:       rgba(255, 255, 255, 0.9);
  font-size:   1.0625rem;
  font-weight: 600;
  padding:     0.4rem 0.75rem;
  border-radius: var(--btn-radius);
  transition:  color 0.2s;
}

.navbar-links a:hover {
  color: rgba(255, 255, 255, 0.7);
}

.navbar.scrolled .navbar-links a {
  color: var(--text-muted);
}

.navbar.scrolled .navbar-links a:hover {
  color: var(--accent);
}

.navbar-links .nav-cta a {
  background:    var(--accent);
  color:         #fff;
  padding:       0.4rem 1.125rem;
  border-radius: var(--btn-radius);
  font-size:     1rem;
  font-weight:   700;
  transition:    background 0.2s;
}

.navbar-links .nav-cta a:hover {
  background: var(--accent-hover);
  color:      #fff;
}

.navbar.scrolled .nav-cta a {
  color: #fff;
}

/* Nav sentinel */
.nav-sentinel {
  height:         var(--navbar-height);
  pointer-events: none;
  opacity:        0;
}

/* Mobile right group: lang switcher + hamburger, vertically centered */
.navbar-right-mobile {
  display:        none;
  flex-direction: column;
  align-items:    center;
  justify-content: center;
  gap:            2px;
}

@media (max-width: 1023px) {
  .navbar-right-mobile { display: flex; }
}

/* Hamburger */
.hamburger {
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  align-items:     center;
  gap:             5px;
  width:           44px;
  height:          44px;
  padding:         0;
  background:      transparent;
  border:          none;
  cursor:          pointer;
}

.hamburger-bar {
  display:       block;
  width:         22px;
  height:        2px;
  background:    #fff;
  border-radius: 2px;
  transition:    background 0.2s;
}

.navbar.scrolled .hamburger-bar {
  background: var(--text);
}

@media (max-width: 1023px) {
  .navbar-links { display: none; }
  .lang-switcher-desktop { display: none !important; }
}

@media (min-width: 1024px) {
  .lang-switcher-mobile { display: none !important; }
}

@media (max-width: 900px) {
  .navbar {
    background: rgba(255, 255, 255, 0.97) !important;
    box-shadow: 0 1px 0 var(--border);
  }
  .hamburger-bar { background: var(--text); }
  .logo-navbar { filter: brightness(0) invert(0.5); }
  .navbar-inner {
    padding-left:  var(--container-px);
    padding-right: var(--container-px);
  }
}

/* =====================================================================
   5b. LANGUAGE SWITCHER
   ===================================================================== */
/* Desktop x13: pill + accent border */
.lang-switcher-x13 {
  display:       flex;
  align-items:   center;
  gap:           0;
  margin-left:   18px;
  flex-shrink:   0;
  border:        1px solid rgba(37, 99, 235, 0.5);
  border-radius: 20px;
  overflow:      hidden;
}

.lang-switcher-x13 a {
  font-size:       0.875rem;
  padding:         0.25rem 0.75rem;
  color:           rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition:      color 0.2s, background 0.2s;
}

.lang-switcher-x13 a:hover { color: #fff; }

.lang-switcher-x13 .lang-active {
  color:      #fff;
  background: rgba(37, 99, 235, 0.15);
}

.navbar.scrolled .lang-switcher-x13 {
  border-color: rgba(37, 99, 235, 0.3);
}

.navbar.scrolled .lang-switcher-x13 a {
  color: var(--text-muted);
}

.navbar.scrolled .lang-switcher-x13 a:hover {
  color: var(--accent);
}

.navbar.scrolled .lang-switcher-x13 .lang-active {
  color:      var(--text);
  background: rgba(37, 99, 235, 0.08);
}

/* Desktop x21: thin divider */
.lang-switcher-x21 {
  display:     flex;
  align-items: center;
  gap:         0.5rem;
  margin-left: 18px;
  flex-shrink: 0;
  font-size:   0.9375rem;
}

.lang-switcher-x21 a {
  color:           rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition:      color 0.2s;
}

.lang-switcher-x21 .lang-active { color: #fff; }
.lang-switcher-x21 .lang-divider { color: rgba(255, 255, 255, 0.3); }

.navbar.scrolled .lang-switcher-x21 a { color: var(--text-muted); }
.navbar.scrolled .lang-switcher-x21 .lang-active { color: var(--text); }
.navbar.scrolled .lang-switcher-x21 .lang-divider { color: var(--border); }

/* Desktop x22: pill + bg */
.lang-switcher-x22 {
  display:       flex;
  align-items:   center;
  gap:           0;
  margin-left:   18px;
  flex-shrink:   0;
  background:    rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  overflow:      hidden;
}

.lang-switcher-x22 a {
  font-size:       0.875rem;
  padding:         0.25rem 0.75rem;
  color:           rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition:      color 0.2s, background 0.2s;
}

.lang-switcher-x22 .lang-active {
  color:      #fff;
  background: rgba(255, 255, 255, 0.15);
}

.navbar.scrolled .lang-switcher-x22 {
  background: rgba(0, 0, 0, 0.05);
}

.navbar.scrolled .lang-switcher-x22 a { color: var(--text-muted); }
.navbar.scrolled .lang-switcher-x22 .lang-active {
  color: var(--text);
  background: rgba(0, 0, 0, 0.08);
}

/* Mobile xm14: above hamburger */
.lang-switcher-xm14 {
  display:     flex;
  gap:         0.375rem;
  font-size:   0.6875rem;
}

.lang-switcher-xm14 a {
  color:           rgba(255, 255, 255, 0.6);
  text-decoration: none;
}

.lang-switcher-xm14 .lang-active { color: #fff; }

.navbar.scrolled .lang-switcher-xm14 a { color: var(--text-muted); }
.navbar.scrolled .lang-switcher-xm14 .lang-active { color: var(--text); }

@media (max-width: 900px) {
  .lang-switcher-xm14 a { color: var(--text-muted); }
  .lang-switcher-xm14 .lang-active { color: var(--text); }
}

/* Mobile xm12: left of hamburger */
.lang-switcher-xm12 {
  display:     flex;
  gap:         0.375rem;
  font-size:   0.6875rem;
  margin-right: 0.5rem;
}

.lang-switcher-xm12 a {
  color:           rgba(255, 255, 255, 0.6);
  text-decoration: none;
}

.lang-switcher-xm12 .lang-active { color: #fff; }

.navbar.scrolled .lang-switcher-xm12 a { color: var(--text-muted); }
.navbar.scrolled .lang-switcher-xm12 .lang-active { color: var(--text); }

/* Mobile xm11: below hamburger */
.lang-switcher-xm11 {
  display:   flex;
  gap:       0.375rem;
  font-size: 0.6875rem;
}

.lang-switcher-xm11 a {
  color:           rgba(255, 255, 255, 0.6);
  text-decoration: none;
}

.lang-switcher-xm11 .lang-active { color: #fff; }
.navbar.scrolled .lang-switcher-xm11 a { color: var(--text-muted); }
.navbar.scrolled .lang-switcher-xm11 .lang-active { color: var(--text); }

/* =====================================================================
   6. MOBILE MENU
   ===================================================================== */
.mobile-menu {
  position:       fixed;
  top:            var(--navbar-height);
  right:          0;
  width:          min(320px, 88vw);
  max-height:     calc(100vh - var(--navbar-height) - 2rem);
  height:         auto;
  overflow-y:     auto;
  background:     #fff;
  z-index:        950;
  transform:      translateX(100%);
  transition:     transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  padding:        0.375rem 28px 32px;
  display:        flex;
  flex-direction: column;
  border-bottom-left-radius: 12px;
  box-shadow:     -8px 12px 36px rgba(0, 0, 0, 0.15);
}

.mobile-menu.open { transform: translateX(0); }

.mobile-menu-close {
  align-self:      flex-end;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           36px;
  height:          36px;
  background:      transparent;
  border:          1px solid var(--border);
  border-radius:   50%;
  cursor:          pointer;
  font-size:       1.125rem;
  color:           var(--text-muted);
  margin-bottom:   0.5rem;
}

.mobile-nav-links {
  list-style: none;
  padding:    0;
  margin:     0;
}

.mobile-nav-links li { border-bottom: 1px solid var(--border); }

.mobile-nav-links a {
  display:     block;
  padding:     0.875rem 0;
  color:       var(--text);
  font-size:   1rem;
  font-weight: 500;
  transition:  color 0.2s;
}

.mobile-nav-links a:hover { color: var(--accent); }

.mobile-nav-links .mobile-cta a {
  display:       block;
  margin-top:    1.25rem;
  padding:       0.875rem;
  background:    var(--accent);
  color:         #fff;
  text-align:    center;
  border-radius: var(--btn-radius);
  font-weight:   600;
}

.menu-backdrop {
  position:                fixed;
  inset:                   var(--navbar-height) 0 0 0;
  background:              rgba(17, 24, 39, 0.30);
  backdrop-filter:         blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index:                 940;
  opacity:                 0;
  pointer-events:          none;
  transition:              opacity 0.25s;
}

.menu-backdrop.open {
  opacity:        1;
  pointer-events: auto;
}

/* =====================================================================
   7. HERO
   ===================================================================== */
.hero {
  position:   relative;
  min-height: 100vh;
  display:    flex;
  align-items: flex-start;
  overflow:   hidden;
  margin-top: calc(-1 * var(--navbar-height));
}

.hero-img {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  z-index:    0;
}

.hero-overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(to right, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0.15) 100%);
  z-index:    1;
}

@media (max-width: 900px) {
  .hero-overlay {
    background: linear-gradient(to bottom, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.45) 50%, rgba(0,0,0,0.60) 100%);
  }
}

.hero-content {
  position:      relative;
  z-index:       2;
  padding-top:   calc(33.33vh + var(--navbar-height));
  padding-bottom: 4rem;
  margin-left:   max(100px, 6vw);
  margin-right:  200px;
}

@media (max-width: 900px) {
  .hero-content {
    margin-left:  1.5rem;
    margin-right: 1.5rem;
    padding-top:  calc(33.33vh + var(--navbar-height));
  }
}

.hero-heading {
  font-family:   var(--font-heading);
  font-size:     clamp(2.5rem, 6vw, 4.25rem);
  font-weight:   800;
  color:         #fff;
  line-height:   1.15;
  margin-bottom: 1rem;
  max-width:     18ch;
}

@media (min-width: 901px) {
  .hero-heading { white-space: nowrap; }
}

.hero-sub {
  font-size:     clamp(1.0625rem, 1.5vw, 1.25rem);
  color:         rgba(255, 255, 255, 0.85);
  max-width:     52ch;
  margin-bottom: 2rem;
  line-height:   1.6;
}

.hero-btns {
  display:   flex;
  gap:       1rem;
  flex-wrap: wrap;
}

.hero-cta {
  display:       inline-flex;
  align-items:   center;
  gap:           0.5rem;
  padding:       0.875rem 2rem;
  border-radius: var(--btn-radius);
  font-size:     1.0625rem;
  font-weight:   600;
  transition:    background 0.2s, color 0.2s;
}

.hero-cta--primary {
  background: var(--accent);
  color:      #fff;
}

.hero-cta--primary:hover {
  background: var(--accent-hover);
  color:      #fff;
}

.hero-cta--outline {
  background: transparent;
  color:      #fff;
  border:     2px solid rgba(255, 255, 255, 0.6);
}

.hero-cta--outline:hover {
  background:   rgba(255, 255, 255, 0.1);
  border-color: #fff;
  color:        #fff;
}

/* =====================================================================
   8. ABOUT
   ===================================================================== */
.about-grid {
  display:     grid;
  gap:         3.5rem;
  align-items: start;
}

@media (min-width: 900px) {
  .about-grid { grid-template-columns: 1fr 1fr; }
}

.about-image-wrap {
  position:      relative;
  border-radius: var(--img-radius);
  overflow:      hidden;
}

.about-image-wrap img {
  width:         100%;
  height:        420px;
  object-fit:    cover;
  border-radius: var(--img-radius);
  display:       block;
}

.about-text .section-intro {
  margin-bottom: 1.75rem;
  max-width:     none;
}

.quick-facts {
  list-style: none;
  padding:    0;
  margin:     0;
  display:    grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap:        0.75rem;
}

.quick-facts li {
  display:       flex;
  align-items:   flex-start;
  gap:           0.625rem;
  font-size:     1rem;
  color:         var(--text-muted);
  padding:       0.75rem 1rem;
  background:    var(--bg-alt);
  border:        1px solid var(--border);
  border-radius: var(--btn-radius);
}

.quick-facts li i {
  color:       var(--accent);
  font-size:   1rem;
  margin-top:  0.15rem;
  flex-shrink: 0;
}

.quick-facts li strong {
  color:       var(--text);
  font-weight: 600;
  display:     block;
  font-size:   1rem;
}

/* =====================================================================
   9. ACTIVITIES
   ===================================================================== */
.activities-banner {
  margin-bottom: 2rem;
}

.activities-banner img {
  width:         auto;
  max-width:     100%;
  border-radius: var(--img-radius);
  display:       block;
}

.activities-intro {
  max-width:  100%;
  text-align: justify;
}

.activity-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap:                   1.5rem;
  margin-bottom:         3.5rem;
}

.activity-card {
  background:    var(--bg);
  border:        1px solid var(--border);
  border-radius: var(--img-radius);
  overflow:      hidden;
  transition:    transform 0.2s, box-shadow 0.2s;
}

.activity-card:hover {
  transform:  translateY(-3px);
  box-shadow: 0 8px 28px rgba(13, 148, 136, 0.12);
}

.activity-card-img img {
  width:      100%;
  height:     200px;
  object-fit: cover;
  display:    block;
  transition: transform 0.35s;
}

.activity-card:hover .activity-card-img img { transform: scale(1.04); }

.activity-card-body {
  padding: 1.25rem 1.25rem 1.5rem;
}

.activity-card-body h3 {
  font-size:     1.25rem;
  margin-bottom: 0.5rem;
  display:       flex;
  align-items:   center;
  gap:           0.5rem;
}

.activity-card-body h3 i {
  color:     var(--accent);
  font-size: 1.125rem;
}

.activity-card-body p {
  font-size: 1.0625rem;
  color:     var(--text-muted);
  margin:    0;
}

/* On-site Activities */
.onsite-section {
  margin-top:    3rem;
  margin-bottom: 3rem;
}

.onsite-heading {
  font-size:     1.5rem;
  margin-bottom: 1.25rem;
}

.onsite-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap:                   0.75rem;
  list-style:            none;
  padding:               0;
  margin:                0;
}

.onsite-item {
  display:       flex;
  align-items:   center;
  gap:           0.625rem;
  font-size:     1rem;
  color:         var(--text-muted);
  padding:       0.625rem 0.875rem;
  background:    var(--bg-alt);
  border:        1px solid var(--border);
  border-radius: var(--btn-radius);
}

.onsite-item i {
  color:       var(--accent);
  font-size:   1rem;
  width:       1.125rem;
  text-align:  center;
  flex-shrink: 0;
}

/* Tour Blocks */
.tour-blocks { margin-top: 1rem; }

.tour-blocks-heading {
  font-size:     1.625rem;
  margin-bottom: 2rem;
}

.tour-block {
  display:        grid;
  grid-template-columns: 1fr 1.4fr;
  gap:            2.5rem;
  align-items:    start;
  margin-bottom:  3.5rem;
  padding-bottom: 3.5rem;
  border-bottom:  1px solid var(--border);
}

.tour-block:last-child {
  border-bottom:  none;
  margin-bottom:  0;
  padding-bottom: 0;
}

.tour-block--img-right {
  grid-template-columns: 1.4fr 1fr;
}

.tour-block--img-right .tour-block-image { order: 2; }
.tour-block--img-right .tour-block-content { order: 1; }

.tour-block-image {
  min-width: 0;
  overflow:  hidden;
}

.tour-block-image--full-height img {
  width:         100%;
  height:        auto;
  object-fit:    cover;
  border-radius: var(--img-radius);
  display:       block;
}

.tour-block-content {
  min-width:     0;
  overflow-wrap: break-word;
  padding:       2rem;
}

.tour-block-content h3 {
  font-size:     1.375rem;
  margin-bottom: 0.875rem;
}

.tour-block-content p {
  font-size:     1.0625rem;
  color:         var(--text-muted);
  margin-bottom: 1.125rem;
}

.tour-highlights {
  list-style: none;
  padding:    0;
  margin:     0 0 1rem;
}

.tour-highlights li {
  display:       flex;
  align-items:   baseline;
  gap:           0.6rem;
  font-size:     1rem;
  line-height:   1.55;
  color:         var(--text-muted);
  margin-bottom: 0.4rem;
}

.tour-highlights li i {
  color:       var(--accent);
  font-size:   1rem;
  width:       1rem;
  flex-shrink: 0;
  transform:   translateY(0.15em);
}

.sipadan-resorts {
  width:           100%;
  border-collapse: collapse;
  font-size:       0.9375rem;
  margin-top:      0.75rem;
}

.sipadan-resorts th,
.sipadan-resorts td {
  padding:       0.5rem 0.75rem;
  text-align:    left;
  border-bottom: 1px solid var(--border);
  color:         var(--text-muted);
  font-size:     0.9375rem;
}

.sipadan-resorts th {
  font-weight: 600;
  color:       var(--text);
  background:  var(--bg-alt);
}

@media (max-width: 768px) {
  .tour-block,
  .tour-block--img-right {
    grid-template-columns: 1fr !important;
  }
  .tour-block--img-right .tour-block-image,
  .tour-block--img-right .tour-block-content {
    order: unset !important;
  }
}

/* =====================================================================
   10. ROOMS / SUITES
   ===================================================================== */
.villas-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   2rem;
  align-items:           start;
}

.villa-card {
  display:        flex;
  flex-direction: column;
  height:         100%;
  background:     var(--bg);
  border:         1px solid var(--border);
  border-radius:  var(--img-radius);
  overflow:       hidden;
}

.carousel {
  position: relative;
  overflow: hidden;
}

.carousel-track {
  display:    flex;
  transition: transform 0.35s ease;
}

.carousel-slide {
  flex:      0 0 100%;
  min-width: 100%;
}

.carousel-slide img {
  width:       100%;
  aspect-ratio: 4/3;
  object-fit:  cover;
  display:     block;
}

.carousel-btn {
  position:                    absolute;
  top:                         50%;
  transform:                   translateY(-50%);
  z-index:                     10;
  width:                       36px;
  height:                      36px;
  background:                  rgba(255, 255, 255, 0.85);
  border:                      none;
  border-radius:               50%;
  cursor:                      pointer;
  display:                     flex;
  align-items:                 center;
  justify-content:             center;
  color:                       var(--text);
  font-size:                   0.875rem;
  opacity:                     1;
  min-width:                   44px;
  min-height:                  44px;
  transition:                  background 0.2s;
}

.carousel-btn:hover { background: rgba(255, 255, 255, 1); }
.carousel-btn.prev { left: 0.5rem; }
.carousel-btn.next { right: 0.5rem; }

.carousel-dots {
  display:         flex;
  justify-content: center;
  gap:             6px;
  padding:         0.625rem 0;
}

.carousel-dot {
  width:         9px;
  height:        9px;
  border-radius: 50%;
  background:    var(--border);
  border:        none;
  padding:       0;
  cursor:        pointer;
  transition:    background 0.2s;
}

.carousel-dot.active { background: var(--accent); }

.villa-info {
  display:        flex;
  flex-direction: column;
  flex:           1;
  padding:        1rem;
}

.villa-name {
  font-size:     1.25rem;
  margin-bottom: 0.5rem;
}

.villa-desc {
  font-size:     1.0625rem;
  color:         var(--text-muted);
  margin-bottom: 0.875rem;
  flex:          1;
}

.villa-specs {
  list-style: none;
  padding:    0;
  margin:     0 0 1rem;
  display:    flex;
  flex-wrap:  wrap;
  gap:        0.4rem;
}

.villa-specs li {
  font-size:     0.9375rem;
  color:         var(--text-muted);
  background:    var(--bg-alt);
  border:        1px solid var(--border);
  border-radius: 4px;
  padding:       0.25rem 0.625rem;
}

.villa-actions {
  display:    flex;
  gap:        0.75rem;
  margin-top: auto;
}

.btn-room-cta {
  flex:          1;
  text-align:    center;
  padding:       0.75rem;
  background:    var(--accent);
  color:         #fff;
  border:        none;
  border-radius: var(--btn-radius);
  font-weight:   600;
  font-size:     1rem;
  cursor:        pointer;
  transition:    background 0.2s;
}

.btn-room-cta:hover { background: var(--accent-hover); }

.villa-view-link {
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  padding:       0.75rem 1rem;
  font-size:     1rem;
  font-weight:   600;
  color:         var(--accent);
  background:    transparent;
  border:        1px solid var(--accent);
  border-radius: var(--btn-radius);
  cursor:        pointer;
  transition:    background 0.2s, color 0.2s;
}

.villa-view-link:hover {
  background: var(--accent);
  color:      #fff;
}

@media (max-width: 1100px) {
  .villas-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .villas-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   11. MEALS / DINING
   ===================================================================== */
.meals-grid {
  display:     grid;
  gap:         3.5rem;
  align-items: start;
}

@media (min-width: 900px) {
  .meals-grid { grid-template-columns: 1fr 1fr; }
}

.meals-image img {
  width:         100%;
  height:        400px;
  object-fit:    cover;
  border-radius: var(--img-radius);
  display:       block;
}

.meals-intro { max-width: 100%; }

.meal-periods {
  display:    grid;
  gap:        1.25rem;
  margin-top: 1.75rem;
}

.meal-period {
  padding:       1.125rem 1.25rem;
  background:    var(--bg-alt);
  border:        1px solid var(--border);
  border-left:   4px solid var(--accent);
  border-radius: var(--btn-radius);
}

.meal-period h4 {
  font-size:     1.1875rem;
  margin-bottom: 0.375rem;
  color:         var(--text);
  display:       flex;
  align-items:   center;
  gap:           0.5rem;
}

.meal-period h4 i { color: var(--accent); }

.meal-period p {
  font-size: 1rem;
  color:     var(--text-muted);
  margin:    0;
}

/* =====================================================================
   12. GETTING HERE
   ===================================================================== */
.getting-here-layout {
  display:     grid;
  gap:         3.5rem;
  align-items: start;
}

@media (min-width: 900px) {
  .getting-here-layout { grid-template-columns: 1fr 380px; }
}

.getting-here-steps {
  display:        flex;
  flex-direction: column;
  gap:            1.75rem;
}

.getting-here-step {
  display:     flex;
  gap:         1.125rem;
  align-items: flex-start;
}

.step-icon {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           44px;
  height:          44px;
  background:      rgba(13, 148, 136, 0.1);
  border-radius:   50%;
  flex-shrink:     0;
}

.step-icon i {
  color:     var(--accent);
  font-size: 1.125rem;
}

.step-body h4 {
  font-size:     1.1875rem;
  margin-bottom: 0.375rem;
}

.step-body p {
  font-size: 1.0625rem;
  color:     var(--text-muted);
  margin:    0;
}

.getting-here-sidebar {
  display:        flex;
  flex-direction: column;
  gap:            1.125rem;
}

.location-image {
  width:         100%;
  height:        220px;
  object-fit:    cover;
  border-radius: var(--img-radius);
  display:       block;
}

.maps-btn {
  display:       flex;
  align-items:   center;
  justify-content: center;
  gap:           0.5rem;
  padding:       0.75rem 1.25rem;
  background:    var(--accent);
  color:         #fff;
  border-radius: var(--btn-radius);
  font-size:     1rem;
  font-weight:   600;
  transition:    background 0.2s;
}

.maps-btn:hover {
  background: var(--accent-hover);
  color:      #fff;
}

.map-embed {
  border-radius: var(--img-radius);
  overflow:      hidden;
  border:        1px solid var(--border);
}

.map-embed iframe { display: block; }

.travel-tips {
  background:    var(--bg-alt);
  border:        1px solid var(--border);
  border-radius: var(--img-radius);
  padding:       1.25rem;
}

.travel-tips h4 {
  font-size:     1.0625rem;
  margin-bottom: 0.875rem;
  display:       flex;
  align-items:   center;
  gap:           0.5rem;
}

.travel-tips h4 i { color: var(--accent); }

.travel-tips-list {
  list-style:     none;
  padding:        0;
  margin:         0;
  display:        flex;
  flex-direction: column;
  gap:            0.625rem;
}

.travel-tips-list li {
  display:     flex;
  align-items: flex-start;
  gap:         0.625rem;
  font-size:   1rem;
  color:       var(--text-muted);
}

.travel-tips-list li i {
  color:       var(--accent);
  font-size:   1rem;
  flex-shrink: 0;
  margin-top:  0.15rem;
}

/* =====================================================================
   13. CONTACT
   ===================================================================== */
.contact-layout {
  display:     grid;
  gap:         3.5rem;
  align-items: start;
}

@media (min-width: 900px) {
  .contact-layout { grid-template-columns: 1fr 340px; }
}

.booking-form {
  display:        flex;
  flex-direction: column;
  gap:            1.25rem;
}

.form-row { display: grid; gap: 1.25rem; }

@media (min-width: 600px) {
  .form-row--2 { grid-template-columns: 1fr 1fr; }
}

.form-field {
  display:        flex;
  flex-direction: column;
  gap:            0.4rem;
}

.form-field label {
  font-size:   1rem;
  font-weight: 600;
  color:       var(--text);
}

.required-asterisk {
  color:       var(--accent);
  margin-left: 0.2rem;
  font-weight: 700;
}

.optional-label {
  font-size:   0.9375rem;
  font-weight: 400;
  color:       var(--text-muted);
}

.form-field input,
.form-field select,
.form-field textarea {
  width:       100%;
  padding:     0.75rem 1rem;
  border:      1px solid var(--border);
  border-radius: var(--btn-radius);
  font-size:   1rem;
  color:       var(--text);
  background:  var(--bg);
  font-family: var(--font-body);
  transition:  border-color 0.2s, box-shadow 0.2s;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline:      none;
  border-color: var(--accent);
  box-shadow:   0 0 0 3px rgba(13, 148, 136, 0.12);
}

.form-field textarea {
  resize:     vertical;
  min-height: 110px;
}

.btn-submit {
  display:       inline-flex;
  width:         auto;
  align-self:    flex-start;
  padding:       0.875rem 2.25rem;
  background:    var(--accent);
  color:         #fff;
  border:        none;
  border-radius: var(--btn-radius);
  font-weight:   600;
  font-size:     1rem;
  cursor:        pointer;
  transition:    background 0.2s;
  font-family:   var(--font-body);
}

.btn-submit:hover { background: var(--accent-hover); }

.form-reassurance {
  font-size: 0.9375rem;
  color:     var(--text-muted);
  margin:    0;
}

.form-error {
  background:    #fef2f2;
  border-left:   4px solid #dc2626;
  color:         #7f1d1d;
  padding:       1rem 1.25rem;
  margin-bottom: 1.5rem;
  border-radius: var(--btn-radius);
}

.form-error strong { display: block; margin-bottom: 0.25rem; }
.form-error p { font-size: 1rem; margin: 0; }

.form-success {
  background:    #f0fdf4;
  border-left:   4px solid #16a34a;
  color:         #14532d;
  padding:       1rem 1.25rem;
  margin-bottom: 1.5rem;
  border-radius: var(--btn-radius);
}

/* Contact sidebar */
.contact-sidebar {
  display:        flex;
  flex-direction: column;
  gap:            1.125rem;
}

.contact-card {
  background:    var(--bg-alt);
  border:        1px solid var(--border);
  border-radius: var(--img-radius);
  padding:       1.25rem 1.375rem;
}

.contact-card h4 {
  font-size:     1.0625rem;
  margin-bottom: 0.625rem;
  display:       flex;
  align-items:   center;
  gap:           0.5rem;
}

.contact-card h4 i { color: var(--accent); }

.contact-card p,
.contact-card address {
  font-size:   1rem;
  color:       var(--text-muted);
  margin:      0;
  font-style:  normal;
  line-height: 1.55;
}

.quick-facts-sidebar {
  list-style: none;
  padding:    0;
  margin:     0;
  display:    flex;
  flex-direction: column;
  gap:        0.5rem;
}

.quick-facts-sidebar li {
  display:     flex;
  align-items: center;
  gap:         0.625rem;
  font-size:   1rem;
  color:       var(--text-muted);
}

.quick-facts-sidebar li i {
  color:       var(--accent);
  width:       1.25rem;
  text-align:  center;
  flex-shrink: 0;
}

/* =====================================================================
   14. REVIEWS
   ===================================================================== */
.reviews-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap:                   1.5rem;
}

.review-card {
  background:     var(--bg);
  border:         1px solid var(--border);
  border-radius:  var(--img-radius);
  padding:        1.5rem;
  display:        flex;
  flex-direction: column;
  gap:            0.875rem;
  opacity:        0;
  transform:      translateY(20px);
  transition:     opacity 0.5s ease, transform 0.5s ease;
}

.review-card.visible {
  opacity:   1;
  transform: translateY(0);
}

.review-stars {
  color:          #fbbf24;
  font-size:      1.125rem;
  letter-spacing: 2px;
  display:        flex;
  gap:            2px;
}

.review-body {
  font-size:   1.0625rem;
  color:       var(--text-muted);
  line-height: 1.65;
  flex:        1;
  margin:      0;
}

.review-author {
  display:     flex;
  align-items: baseline;
  gap:         0.5rem;
  padding-top: 0.75rem;
}

.review-name {
  font-size:   1rem;
  font-weight: 700;
  color:       var(--text);
}

.review-country {
  font-size:   1rem;
  font-weight: 400;
  color:       var(--text-muted);
}

/* =====================================================================
   15. MODALS
   ===================================================================== */
.modal {
  display:         none;
  position:        fixed;
  inset:           0;
  z-index:         2000;
  align-items:     center;
  justify-content: center;
  padding:         1.5rem;
}

.modal.open {
  display: flex;
}

.modal-backdrop {
  position:   absolute;
  inset:      0;
  background: rgba(0, 0, 0, 0.60);
}

.modal-dialog {
  position:      relative;
  background:    #fff;
  border-radius: var(--img-radius);
  padding:       2rem;
  max-width:     560px;
  width:         100%;
  max-height:    90vh;
  overflow-y:    auto;
  z-index:       1;
}

.modal-close {
  position:   absolute;
  top:        1rem;
  right:      1rem;
  background: none;
  border:     none;
  font-size:  1.5rem;
  cursor:     pointer;
  line-height: 1;
  color:      var(--text-muted);
}

.modal-dialog h3 {
  font-size:     1.5rem;
  margin-bottom: 0.875rem;
  margin-right:  2rem;
}

.modal-dialog p {
  font-size:     1.0625rem;
  color:         var(--text-muted);
  margin-bottom: 1.25rem;
}

.modal-specs {
  list-style: none;
  padding:    0;
  margin:     0 0 1.5rem;
  display:    flex;
  flex-wrap:  wrap;
  gap:        0.5rem;
}

.modal-specs li {
  font-size:     0.9375rem;
  color:         var(--text-muted);
  background:    var(--bg-alt);
  border:        1px solid var(--border);
  border-radius: 4px;
  padding:       0.25rem 0.625rem;
}

.modal .btn-room-cta {
  display:       block;
  width:         100%;
  text-align:    center;
  padding:       0.875rem 1.75rem;
  font-size:     1rem;
  font-weight:   600;
  border-radius: var(--btn-radius);
}

/* =====================================================================
   16. FOOTER
   ===================================================================== */
.footer {
  background: var(--footer-bg);
  color:      var(--footer-text);
  padding:    4rem 0 1.5rem;
  font-size:  1rem;
}

.footer-grid {
  display:               grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap:                   3rem;
  margin-bottom:         3rem;
  align-items:           start;
}

.footer-brand {
  font-family:   var(--font-heading);
  font-size:     2rem;
  font-weight:   700;
  color:         var(--footer-head);
  margin-bottom: 0.75rem;
}

.footer-description {
  color:       var(--footer-text);
  font-size:   1rem;
  line-height: 1.65;
  max-width:   42rem;
  margin:      0 0 0.75rem;
}

.footer-location {
  color:     var(--footer-text);
  font-size: 1rem;
  margin:    0;
  display:   flex;
  align-items: center;
  gap:       0.5rem;
}

.footer-location i { color: var(--footer-text); }

.footer-col-heading {
  font-size:      1.125rem;
  font-weight:    700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--footer-head);
  margin-bottom:  1.25rem;
  margin-top:     0;
}

.footer-links {
  list-style: none;
  padding:    0;
  margin:     0;
}

.footer-links li { margin-bottom: 0.75rem; }

.footer-links a {
  color:      var(--footer-head);
  font-size:  1rem;
  transition: opacity 0.15s;
}

.footer-links a:hover { opacity: 0.7; }

.footer-enquiry {
  color:         var(--footer-head);
  font-size:     1.0625rem;
  font-weight:   700;
  display:       inline-flex;
  align-items:   center;
  gap:           0.4rem;
  margin-bottom: 1.25rem;
}

.footer-enquiry:hover { opacity: 0.7; }

.footer-social {
  display:       flex;
  gap:           0.75rem;
  margin-bottom: 1.25rem;
}

.footer-social a {
  width:           36px;
  height:          36px;
  border-radius:   50%;
  background:      var(--footer-chip);
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  color:           var(--footer-head);
  font-size:       1rem;
  transition:      background 0.2s;
}

.footer-social a:hover { background: var(--footer-chip-h); }

.footer-lang {
  display: flex;
  gap:     0.75rem;
}

.footer-flag {
  display: inline-block;
  opacity: 0.75;
  transition: opacity 0.2s;
}

.footer-flag:hover,
.footer-flag.lang-active { opacity: 1; }

.flag-svg { display: block; }

.footer-divider {
  border:     none;
  height:     1px;
  background: var(--footer-line);
  margin:     1.5rem 0;
}

.footer-copyright {
  text-align: center;
  font-size:  0.9375rem;
  color:      var(--footer-text);
  margin:     0;
}

/* =====================================================================
   17. SR-ONLY
   ===================================================================== */
.sr-only {
  position: absolute;
  width:    1px;
  height:   1px;
  padding:  0;
  margin:   -1px;
  overflow: hidden;
  clip:     rect(0, 0, 0, 0);
  border:   0;
}

/* =====================================================================
   18. RESPONSIVE OVERRIDES
   ===================================================================== */
@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }
}

@media (max-width: 768px) {
  .section {
    padding-top:    var(--section-pad-tight);
    padding-bottom: var(--section-pad-tight);
  }

  .section-heading { font-size: 1.875rem; }
  .hero-heading { font-size: clamp(2rem, 8vw, 3rem); max-width: none; }
  .hero-sub { max-width: none; }
  .reviews-grid { grid-template-columns: 1fr; }
  .activity-grid { grid-template-columns: 1fr; }
  .quick-facts { grid-template-columns: 1fr; }
  .onsite-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

  .footer-flag .flag-svg { width: 32px; }
  .footer-flag { opacity: 0.9; }

  .form-reassurance { font-size: 0.9375rem; }

  /* Mobile font floor: bump 0.9375rem items to 1rem except allowed exceptions */
  .villa-specs li { font-size: 1rem; }
  .modal-specs li { font-size: 1rem; }
  .optional-label { font-size: 1rem; }
}

@media (max-width: 480px) {
  .hero-btns {
    flex-direction: column;
  }
  .hero-cta {
    width:           100%;
    justify-content: center;
  }
}