/* =========================================================================
   ARABIAN SHORE — Design System
   Palette drawn directly from the property: the indigo dusk sky and amber
   lantern-light of the infinity pool at night, the sandstone facade, shell-
   white walls, and the sea-teal of the palm groves against the Arabian Sea.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Jost:wght@300;400;500;600&display=swap');

:root{
  /* ---- Palette --------------------------------------------------- */
  --indigo-dusk:      #1b2a3d;
  --indigo-dusk-deep: #101a26;
  --charcoal-ink:     #221e19;
  --amber:            #d98f3f;
  --amber-deep:       #b06325;
  --amber-soft:       #f0c48c;
  --sandstone:        #c9b896;
  --sandstone-light:  #e9dfc8;
  --shell:            #f8f4ea;
  --shell-deep:       #efe7d6;
  --sea-teal:         #3c5a56;
  --sea-teal-deep:    #263e3b;
  --white:            #ffffff;
  --line:             rgba(34,30,25,0.1);
  --line-light:       rgba(255,255,255,0.18);

  /* ---- Type -------------------------------------------------------- */
  --font-display: 'Fraunces', ui-serif, Georgia, serif;
  --font-body:    'Jost', ui-sans-serif, system-ui, sans-serif;

  /* ---- Layout -------------------------------------------------------- */
  --container: 1280px;
  --container-narrow: 860px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;
  --shadow-soft: 0 30px 70px -30px rgba(16,26,38,0.35);
  --shadow-card: 0 18px 40px -18px rgba(34,30,25,0.22);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------------------------------------------------------------------
   Reset & base
   --------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: var(--font-body);
  color: var(--charcoal-ink);
  background: var(--shell);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4{ font-family: var(--font-display); font-weight: 500; line-height: 1.12; margin: 0 0 .5em; letter-spacing: -0.01em; }
p{ margin: 0 0 1em; }
button{ font-family: inherit; }

:focus-visible{
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

.container{ max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.container-narrow{ max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--gutter); }

section{ position: relative; }
.section{ padding: clamp(4rem, 8vw, 7.5rem) 0; }
.section--tight{ padding: clamp(2.5rem, 5vw, 4.5rem) 0; }
.bg-shell{ background: var(--shell); }
.bg-shell-deep{ background: var(--shell-deep); }
.bg-indigo{ background: var(--indigo-dusk); color: var(--shell); }
.bg-indigo *{ color: inherit; }
.bg-sandstone{ background: var(--sandstone-light); }
.bg-teal{ background: var(--sea-teal); color: var(--shell); }
.bg-teal *{ color: inherit; }

/* ---------------------------------------------------------------------
   Eyebrows, headings, wave signature
   --------------------------------------------------------------------- */
.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--amber-deep);
  margin-bottom: 1rem;
}
.bg-indigo .eyebrow, .bg-teal .eyebrow{ color: var(--amber-soft); }
.eyebrow::before{
  content: "";
  width: 30px; height: 1px;
  background: currentColor;
  display: inline-block;
}

.headline{ font-size: clamp(2.1rem, 4.2vw, 3.6rem); }
.headline em{ font-style: italic; color: var(--amber-deep); }
.bg-indigo .headline em, .bg-teal .headline em{ color: var(--amber-soft); }
.subhead{ font-size: clamp(1rem, 1.4vw, 1.2rem); color: rgba(34,30,25,.72); max-width: 640px; }
.bg-indigo .subhead, .bg-teal .subhead{ color: rgba(248,244,234,.78); }

.section-head{ max-width: 720px; margin: 0 0 3rem; }
.section-head.center{ margin-inline: auto; text-align: center; }
.section-head.center .eyebrow::before{ display:none; }

/* Signature wave divider — a single drawn line evoking the shoreline,
   used between sections instead of hard rules. */
.wave-divider{ display:block; width:100%; height:auto; line-height:0; }
.wave-divider svg{ display:block; width:100%; height:56px; }
.wave-divider path{ fill: none; }

/* Amber "lantern" glow dots — a quiet ambient motif echoed from the pool
   lighting; used sparingly (hero, section dividers). */
.lantern-glow{
  position:absolute; width: 10px; height:10px; border-radius:50%;
  background: radial-gradient(circle, var(--amber) 0%, rgba(217,143,63,0) 70%);
  filter: blur(1px);
  animation: glow-pulse 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes glow-pulse{
  0%, 100%{ opacity:.35; transform: scale(1); }
  50%{ opacity:.9; transform: scale(1.6); }
}

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .95rem 1.9rem;
  font-size: .92rem;
  font-weight: 500;
  letter-spacing: .03em;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .35s var(--ease), background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-2px); }
.btn-primary{ background: var(--amber); color: var(--indigo-dusk-deep); box-shadow: 0 14px 30px -12px rgba(217,143,63,.6); }
.btn-primary:hover{ background: var(--amber-deep); color: var(--shell); }
.btn-outline{ background: transparent; border-color: currentColor; color: inherit; }
.btn-outline:hover{ background: rgba(255,255,255,.12); }
.bg-shell .btn-outline, .bg-sandstone .btn-outline{ border-color: var(--indigo-dusk); }
.bg-shell .btn-outline:hover, .bg-sandstone .btn-outline:hover{ background: var(--indigo-dusk); color: var(--shell); }
.btn-ghost{ padding: .3rem 0; border-radius:0; border-bottom: 1px solid currentColor; }
.btn-ghost:hover{ transform:none; color: var(--amber-deep); }
.btn-sm{ padding: .7rem 1.4rem; font-size: .82rem; }
.btn svg{ width: 16px; height:16px; }

/* ---------------------------------------------------------------------
   Header / Navigation
   --------------------------------------------------------------------- */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 900;
  padding: 1.4rem 0;
  transition: background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap: 2rem; }
.site-header.is-scrolled{
  background: rgba(27,42,61,.92);
  backdrop-filter: blur(10px);
  padding: .8rem 0;
  box-shadow: 0 10px 30px -18px rgba(0,0,0,.5);
}
.brand{ display:flex; align-items:center; gap:.7rem; color: var(--shell); font-family: var(--font-display); }
.brand-mark{ width:38px; height:38px; flex-shrink:0; }
.brand-name{ font-size: 1.3rem; letter-spacing: .01em; }
.brand-name span{ display:block; font-family: var(--font-body); font-size:.58rem; letter-spacing:.32em; text-transform:uppercase; color: var(--amber-soft); font-weight:500; margin-top:2px;}

.nav-primary{ display:flex; align-items:center; gap: 2.1rem; }
.nav-primary > ul{ display:flex; align-items:center; gap: 2.1rem; }
.nav-primary a.nav-link{
  color: var(--shell);
  font-size: .92rem;
  font-weight: 500;
  letter-spacing:.02em;
  padding: .4rem 0;
  position:relative;
}
.nav-primary a.nav-link::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1px; background: var(--amber);
  transition: right .3s var(--ease);
}
.nav-primary a.nav-link:hover::after, .nav-primary li.is-active a.nav-link::after{ right:0; }
.nav-item-drop{ position: relative; }
.nav-item-drop > a::before{
  content:""; display:inline-block; width:6px;height:6px; margin-left:6px; margin-bottom:2px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform: rotate(45deg);
  transition: transform .25s ease;
}
.nav-item-drop:hover > a::before{ transform: rotate(225deg); }
.dropdown-panel{
  position:absolute; top: 100%; left: 50%; transform: translate(-50%, 8px);
  min-width: 250px; margin-top: .9rem;
  background: var(--shell);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: .6rem;
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .28s ease, transform .28s var(--ease);
}
.nav-item-drop:hover .dropdown-panel{ opacity:1; visibility:visible; pointer-events:auto; transform: translate(-50%, 0); }
.dropdown-panel a{
  display:flex; flex-direction:column; gap:.15rem;
  padding: .75rem 1rem; border-radius: var(--radius-sm);
  color: var(--charcoal-ink); font-size: .92rem; font-weight:500;
  transition: background .2s ease;
}
.dropdown-panel a small{ font-family: var(--font-body); font-weight: 400; font-size:.76rem; color: rgba(34,30,25,.6); }
.dropdown-panel a:hover{ background: var(--shell-deep); color: var(--amber-deep); }

.nav-cta{ display:flex; align-items:center; gap:1.1rem; }
.nav-cta .btn{ padding:.75rem 1.5rem; font-size:.82rem; }

.nav-toggle{
  display:none; width: 44px; height:44px; border-radius:50%;
  border: 1px solid var(--line-light); background: transparent;
  position: relative; flex-shrink:0;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; position:absolute; left:13px; right:13px; height:1.5px; background: var(--shell);
  transition: transform .3s ease, opacity .3s ease, top .3s ease;
}
.nav-toggle span{ top:21px; }
.nav-toggle span::before{ top:-7px; }
.nav-toggle span::after{ top:7px; }
.nav-toggle.is-active span{ background: transparent; }
.nav-toggle.is-active span::before{ transform: rotate(45deg); top:0; }
.nav-toggle.is-active span::after{ transform: rotate(-45deg); top:0; }

/* ---------------------------------------------------------------------
   Mobile nav
   --------------------------------------------------------------------- */
@media (max-width: 1024px){
  .nav-primary{ position: fixed; inset:0; top:0; background: var(--indigo-dusk-deep);
    flex-direction:column; justify-content:center; align-items:stretch; gap:0;
    padding: 6.5rem 1.75rem 3rem; transform: translateX(100%); transition: transform .45s var(--ease);
    overflow-y:auto;
  }
  .nav-primary.is-open{ transform: translateX(0); }
  .nav-primary > ul{ flex-direction:column; align-items:stretch; gap:0; width:100%; }
  .nav-primary > ul > li{ border-bottom:1px solid var(--line-light); }
  .nav-primary a.nav-link{ display:block; padding: 1.15rem .25rem; font-size:1.15rem; }
  .nav-item-drop > a::before{ float:right; margin-top:9px; }
  .dropdown-panel{ position:static; transform:none; opacity:1; visibility:visible; pointer-events:auto; max-height:0; overflow:hidden; padding:0; margin:0; box-shadow:none; background:transparent; transition: max-height .35s var(--ease); }
  .nav-item-drop.is-open .dropdown-panel{ max-height:300px; padding: .25rem 0 .75rem; }
  .dropdown-panel a{ color: var(--shell); padding: .6rem .25rem; }
  .dropdown-panel a small{ color: rgba(248,244,234,.6); }
  .dropdown-panel a:hover{ background:transparent; color: var(--amber-soft); }
  .nav-cta{ margin-top: 2rem; flex-direction:column; align-items:stretch; }
  .nav-toggle{ display:block; }
}

/* ---------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------- */
.hero{
  position:relative; min-height: 100svh; display:flex; align-items:flex-end;
  color: var(--shell); overflow:hidden;
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media img{ width:100%; height:100%; object-fit:cover; }
.hero-media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(16,26,38,.55) 0%, rgba(16,26,38,.25) 38%, rgba(16,26,38,.85) 100%);
}
.hero-content{ position:relative; z-index:1; padding-bottom: clamp(3rem, 8vw, 6rem); width:100%; }
.hero-content .eyebrow{ color: var(--amber-soft); }
.hero-title{ font-size: clamp(2.6rem, 7vw, 5.4rem); max-width: 16ch; }
.hero-sub{ max-width: 46ch; font-size: clamp(1rem, 1.6vw, 1.2rem); color: rgba(248,244,234,.85); margin-top:1rem; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.2rem; }
.hero-scroll{
  position:absolute; right: var(--gutter); bottom: 2.5rem; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  font-size:.7rem; letter-spacing:.3em; text-transform:uppercase; color: rgba(248,244,234,.75);
}
.hero-scroll .line{ width:1px; height:46px; background: rgba(248,244,234,.5); position:relative; overflow:hidden; }
.hero-scroll .line::after{ content:""; position:absolute; top:-100%; left:0; width:100%; height:100%; background: var(--amber); animation: scroll-line 2.2s ease-in-out infinite; }
@keyframes scroll-line{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } }

.page-hero{
  position:relative; min-height: 62vh; display:flex; align-items:flex-end; color:var(--shell);
  padding-top: 8rem;
}
.page-hero .hero-media::after{ background: linear-gradient(180deg, rgba(16,26,38,.45) 0%, rgba(16,26,38,.35) 45%, rgba(16,26,38,.9) 100%); }
.page-hero-content{ position:relative; z-index:1; padding-bottom: 3.5rem; }
.breadcrumb{ font-size:.8rem; letter-spacing:.05em; color: rgba(248,244,234,.7); margin-bottom:1rem; }
.breadcrumb a:hover{ color: var(--amber-soft); }

/* ---------------------------------------------------------------------
   Cards: rooms / amenities / heritage / attractions
   --------------------------------------------------------------------- */
.grid{ display:grid; gap: 2rem; }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px){ .grid-3{ grid-template-columns: repeat(2,1fr); } .grid-4{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .grid-3, .grid-2, .grid-4{ grid-template-columns: 1fr; } }

.card{
  background: var(--white);
  border-radius: var(--radius-md);
  overflow:hidden;
  box-shadow: var(--shadow-card);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.card:hover{ transform: translateY(-8px); box-shadow: 0 34px 60px -22px rgba(34,30,25,.3); }
.card-media{ position:relative; aspect-ratio: 4/3; overflow:hidden; }
.card-media img{ width:100%; height:100%; object-fit:cover; transition: transform .7s var(--ease); }
.card:hover .card-media img{ transform: scale(1.08); }
.card-tag{
  position:absolute; top:1rem; left:1rem; background: rgba(248,244,234,.92); color: var(--indigo-dusk);
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  padding:.4rem .8rem; border-radius:999px;
}
.card-body{ padding: 1.6rem 1.7rem 1.9rem; }
.card-body h3{ font-size:1.3rem; margin-bottom:.5rem; }
.card-body p{ color: rgba(34,30,25,.68); font-size:.94rem; }
.card-meta{ display:flex; flex-wrap:wrap; gap: .5rem 1rem; margin: .9rem 0 1.2rem; font-size:.8rem; color: var(--sea-teal); }
.card-meta span{ display:flex; align-items:center; gap:.4rem; }
.card-foot{ display:flex; align-items:center; justify-content:space-between; padding-top: 1rem; border-top:1px solid var(--line); }

.icon-card{ padding: 2.2rem 1.8rem; text-align:left; background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-card); transition: transform .4s var(--ease); }
.icon-card:hover{ transform: translateY(-6px); }
.icon-card .icon{ width:48px; height:48px; margin-bottom:1.2rem; color: var(--amber-deep); }
.icon-card h3{ font-size:1.12rem; margin-bottom:.5rem; }
.icon-card p{ font-size:.9rem; color: rgba(34,30,25,.65); margin:0; }

/* ---------------------------------------------------------------------
   Stats strip
   --------------------------------------------------------------------- */
.stats-strip{ display:grid; grid-template-columns: repeat(4,1fr); gap:2rem; text-align:center; }
@media (max-width: 760px){ .stats-strip{ grid-template-columns: repeat(2,1fr); } }
.stat h3{ font-size: clamp(2rem,4vw,3rem); color: var(--amber-soft); margin-bottom:.2rem; }
.stat p{ font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; color: rgba(248,244,234,.7); margin:0; }

/* ---------------------------------------------------------------------
   Reviews (Google) & Instagram
   --------------------------------------------------------------------- */
.reviews-rail{ display:flex; gap:1.6rem; overflow-x:auto; padding: .5rem .1rem 1.5rem; scroll-snap-type: x mandatory; -webkit-overflow-scrolling:touch; }
.reviews-rail::-webkit-scrollbar{ height:5px; }
.reviews-rail::-webkit-scrollbar-thumb{ background: var(--sandstone); border-radius:10px; }
.review-card{
  scroll-snap-align:start; flex: 0 0 min(360px, 84vw);
  background: var(--white); border-radius: var(--radius-md); padding: 1.8rem 1.9rem;
  box-shadow: var(--shadow-card);
}
.review-stars{ color: var(--amber); letter-spacing:.15em; margin-bottom:.9rem; font-size:.95rem; }
.review-text{ font-size:.94rem; color: rgba(34,30,25,.78); margin-bottom:1.2rem; min-height:80px; }
.review-author{ display:flex; align-items:center; gap:.8rem; }
.review-avatar{ width:38px;height:38px;border-radius:50%; background: var(--sea-teal); color:var(--shell); display:flex; align-items:center; justify-content:center; font-family: var(--font-display); font-size:.95rem; flex-shrink:0; }
.review-author strong{ font-size:.9rem; display:block; }
.review-author span{ font-size:.78rem; color: rgba(34,30,25,.55); }
.google-badge{ display:flex; align-items:center; gap:.7rem; margin-bottom: 2rem; }
.google-badge img{ width:26px; }
.google-badge .score{ font-family: var(--font-display); font-size:1.4rem; }
.google-badge small{ display:block; font-size:.78rem; color: rgba(34,30,25,.6); }
.bg-indigo .google-badge small, .bg-teal .google-badge small{ color: rgba(248,244,234,.7); }

.insta-grid{ display:grid; grid-template-columns: repeat(6,1fr); gap: .6rem; }
@media (max-width: 900px){ .insta-grid{ grid-template-columns: repeat(3,1fr); } }
.insta-tile{ position:relative; aspect-ratio:1/1; overflow:hidden; border-radius: var(--radius-sm); }
.insta-tile img{ width:100%; height:100%; object-fit:cover; transition: transform .5s var(--ease); }
.insta-tile:hover img{ transform: scale(1.1); }
.insta-tile::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(16,26,38,0) 55%, rgba(16,26,38,.55) 100%); opacity:0; transition:opacity .3s ease; }
.insta-tile:hover::after{ opacity:1; }
.insta-tile .insta-icon{ position:absolute; bottom:.7rem; right:.7rem; width:20px; height:20px; color:#fff; opacity:0; transition:opacity .3s ease; z-index:1; }
.insta-tile:hover .insta-icon{ opacity:1; }

/* ---------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------- */
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; }
@media (max-width: 700px){ .form-grid{ grid-template-columns: 1fr; } }
.field{ display:flex; flex-direction:column; gap:.5rem; }
.field.full{ grid-column: 1 / -1; }
.field label{ font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; font-weight:600; color: var(--sea-teal); }
.field input, .field select, .field textarea{
  border: 1px solid var(--line); background: var(--white); border-radius: var(--radius-sm);
  padding: .9rem 1rem; font-family: var(--font-body); font-size:.95rem; color: var(--charcoal-ink);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--amber); box-shadow: 0 0 0 3px rgba(217,143,63,.18); outline:none; }
.field textarea{ resize: vertical; min-height:120px; }
.form-note{ font-size:.82rem; color: rgba(34,30,25,.55); margin-top:1rem; }
.form-success, .form-error{ padding:1rem 1.2rem; border-radius: var(--radius-sm); font-size:.92rem; margin-bottom:1.5rem; }
.form-success{ background: #e4efe2; color: #2f5233; }
.form-error{ background: #f6e2df; color: #8a3a2f; }

/* ---------------------------------------------------------------------
   Gallery / lightbox
   --------------------------------------------------------------------- */
.gallery-grid{ display:grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 190px; gap: .7rem; }
.gallery-grid a{ position:relative; overflow:hidden; border-radius: var(--radius-sm); }
.gallery-grid a img{ width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease); }
.gallery-grid a:hover img{ transform: scale(1.08); }
.gallery-grid a.tall{ grid-row: span 2; }
.gallery-grid a.wide{ grid-column: span 2; }
@media (max-width: 900px){ .gallery-grid{ grid-template-columns: repeat(2,1fr); grid-auto-rows:150px; } .gallery-grid a.wide{ grid-column: span 2; } }

.lightbox{ position:fixed; inset:0; background: rgba(16,26,38,.94); z-index:1200; display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition: opacity .3s ease; }
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox img{ max-width:90vw; max-height:85vh; border-radius: var(--radius-sm); }
.lightbox-close{ position:absolute; top:2rem; right:2rem; width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.4); background:transparent; color:#fff; font-size:1.3rem; cursor:pointer; }
.lightbox-nav{ position:absolute; top:50%; transform:translateY(-50%); width:50px; height:50px; border-radius:50%; border:1px solid rgba(255,255,255,.4); background:rgba(255,255,255,.05); color:#fff; font-size:1.4rem; cursor:pointer; }
.lightbox-prev{ left:2rem; } .lightbox-next{ right:2rem; }

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
.site-footer{ background: var(--indigo-dusk-deep); color: var(--shell); padding-top: clamp(3.5rem,7vw,5.5rem); }
.footer-top{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 3rem; padding-bottom: 3rem; border-bottom: 1px solid var(--line-light); }
@media (max-width: 900px){ .footer-top{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer-top{ grid-template-columns: 1fr; } }
.footer-brand p{ color: rgba(248,244,234,.68); font-size:.92rem; max-width:32ch; }
.footer-social{ display:flex; gap:.8rem; margin-top:1.4rem; }
.footer-social a{ width:38px; height:38px; border-radius:50%; border:1px solid var(--line-light); display:flex; align-items:center; justify-content:center; transition: background .3s ease, border-color .3s ease; }
.footer-social a:hover{ background: var(--amber); border-color: var(--amber); }
.footer-social svg{ width:16px; height:16px; }
.footer-col h4{ font-family: var(--font-body); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color: var(--amber-soft); margin-bottom:1.3rem; }
.footer-col ul li{ margin-bottom:.8rem; }
.footer-col a{ color: rgba(248,244,234,.78); font-size:.92rem; transition: color .25s ease; }
.footer-col a:hover{ color: var(--amber-soft); }
.footer-bottom{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; padding: 1.7rem 0; font-size:.8rem; color: rgba(248,244,234,.5); }

/* ---------------------------------------------------------------------
   Floating actions
   --------------------------------------------------------------------- */
.floating-actions{ position:fixed; right: 1.5rem; bottom: 1.5rem; z-index: 850; display:flex; flex-direction:column; gap: .8rem; align-items:flex-end; }
.fab{ width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow: 0 14px 30px -10px rgba(16,26,38,.5); transition: transform .3s var(--ease); }
.fab:hover{ transform: translateY(-4px) scale(1.05); }
.fab-whatsapp{ background:#25D366; color:#fff; }
.fab-top{ background: var(--shell); color: var(--indigo-dusk); opacity:0; pointer-events:none; transform: translateY(10px); transition: opacity .3s ease, transform .3s ease; }
.fab-top.is-visible{ opacity:1; pointer-events:auto; transform:translateY(0); }
.fab svg{ width:24px; height:24px; }

/* ---------------------------------------------------------------------
   Reveal-on-scroll utility
   --------------------------------------------------------------------- */
[data-reveal]{ opacity:0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].is-visible{ opacity:1; transform:none; }
[data-reveal-delay="1"]{ transition-delay: .12s; }
[data-reveal-delay="2"]{ transition-delay: .24s; }
[data-reveal-delay="3"]{ transition-delay: .36s; }

/* ---------------------------------------------------------------------
   Split / two-column content blocks
   --------------------------------------------------------------------- */
.split{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items:center; }
@media (max-width: 900px){ .split{ grid-template-columns: 1fr; } }
.split.reverse .split-media{ order: 2; }
@media (max-width: 900px){ .split.reverse .split-media{ order:0; } }
.split-media{ position:relative; }
.split-media img{ border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); }
.split-media-accent{ position:absolute; bottom:-1.6rem; left:-1.6rem; width: 46%; border-radius: var(--radius-md); box-shadow: var(--shadow-soft); border: 6px solid var(--shell); }
@media (max-width: 700px){ .split-media-accent{ display:none; } }

.feature-list{ display:flex; flex-direction:column; gap:1.1rem; margin: 1.6rem 0 2rem; }
.feature-list li{ display:flex; gap:.9rem; align-items:flex-start; font-size:.95rem; }
.feature-list li svg{ width:20px; height:20px; color: var(--amber-deep); flex-shrink:0; margin-top:.15rem; }

/* Tables (heritage/attractions quick facts) */
.fact-list{ display:grid; grid-template-columns: 1fr 1fr; gap: .9rem 2rem; }
@media (max-width:600px){ .fact-list{ grid-template-columns:1fr; } }
.fact-list dt{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color: var(--sea-teal); margin-bottom:.2rem; }
.fact-list dd{ margin:0; font-size:.95rem; }

/* CTA banner */
.cta-banner{ position:relative; border-radius: var(--radius-lg); overflow:hidden; padding: clamp(3rem, 7vw, 5.5rem) clamp(1.6rem, 6vw, 4rem); text-align:center; color: var(--shell); }
.cta-banner .hero-media::after{ background: linear-gradient(160deg, rgba(16,26,38,.82), rgba(60,90,86,.75)); }
.cta-banner-content{ position:relative; z-index:1; max-width:640px; margin:0 auto; }
.cta-banner .btn-primary{ margin-top: 1.8rem; }

/* Anchor offset (fixed header) */
[id]{ scroll-margin-top: 110px; }

.tag-pill{ display:inline-block; padding:.35rem .9rem; border-radius:999px; background: var(--shell-deep); font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; font-weight:600; color: var(--sea-teal); margin: .25rem .35rem .25rem 0; }