/* ===== Design tokens ===== */
:root{
  --navy:#0f3a6e;
  --navy-2:#0e3e7a;
  --navy-text:#1a3a5f;
  --gold:#e8a12a;
  --gold-2:#f3c46a;
  --gold-3:#e8b44a;
  --cream:#fdfaf5;
  --sky:#eaf4ff;
  --sky-border:#dbe9f6;
  --sky-dot:#c9dced;
  --sand-border:#e8e0d6;
  --sand-border-2:#e6ddd1;
  --sky-accent:#8ec0e8;
  --sky-icon:#7fb6de;
}

*{box-sizing:border-box}

body{
  font-family:'Roboto',sans-serif;
  background-color:var(--cream);
  color:var(--navy);
  margin:0;
}
.serif{font-family:'Arima',serif}
.hand{font-family:'Arima',serif;font-weight:500}

.container-limani{
  max-width:1220px;
  margin:0 auto;
  padding-left:1rem;
  padding-right:1rem;
}
@media (min-width:992px){
  .container-limani{padding-left:1.5rem;padding-right:1.5rem}
}

/* ===== Header / Nav ===== */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background-color:rgba(248,251,255,0.95);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--sky-border);
}
.header-inner{
  height:92px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.brand-logo{height:100px;width:auto}

.main-nav{
  display:none;
  align-items:center;
  gap:1.5rem;
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.03em;
}
@media (min-width:992px){
  .main-nav{display:flex}
}
.main-nav a{
  color:var(--navy);
  text-decoration:none;
}
.main-nav a:hover{color:var(--gold)}

.btn-reserve{
  display:none;
  align-items:center;
  gap:0.5rem;
  background-color:var(--gold-2);
  color:var(--navy);
  font-weight:700;
  font-size:12px;
  padding:0.6rem 1.25rem;
  border-radius:0.5rem;
  box-shadow:0 1px 2px rgba(0,0,0,0.06);
  text-decoration:none;
  border:none;
}
.btn-reserve:hover{background-color:var(--gold-3);color:var(--navy)}
@media (min-width:576px){
  .btn-reserve{display:inline-flex}
}

.btn-burger{
  width:36px;height:36px;
  border-radius:0.5rem;
  border:1px solid var(--sky-border);
  display:flex;align-items:center;justify-content:center;
  background:#fff;
}
@media (min-width:992px){
  .btn-burger{display:none}
}

/* ===== Hero ===== */
.hero{
  position:relative;
  overflow:hidden;
  background-color:var(--sky);
}
.hero-image-wrap{
  display:none;
  position:absolute;
  inset:0 0 0 auto;
  width:58%;
}
@media (min-width:992px){
  .hero-image-wrap{display:block}
}
.hero-image-wrap img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.hero-image-fade{
  position:absolute;inset:0;
  width:45%;
  background:linear-gradient(to right,
    var(--sky) 0%,
    rgba(234,244,255,0.96) 12%,
    rgba(234,244,255,0.82) 26%,
    rgba(234,244,255,0.55) 42%,
    rgba(234,244,255,0.28) 60%,
    rgba(234,244,255,0.08) 80%,
    transparent 100%);
}
.hero-content-row{
  position:relative;
  display:flex;
  align-items:center;
}
@media (min-width:992px){
  .hero-content-row{min-height:440px}
}
.hero-copy{
  max-width:480px;
  padding-top:2.5rem;
  padding-bottom:2.5rem;
}
@media (min-width:992px){
  .hero-copy{padding-top:3.5rem;padding-bottom:3.5rem}
}
.hero-eyebrow{
  font-size:12px;
  letter-spacing:0.22em;
  font-weight:700;
  color:rgba(15,58,110,0.7);
}
.hero-title{
  font-weight:700;
  font-size:32px;
  line-height:1.05;
  margin-top:0.5rem;
  color:var(--navy);
}
@media (min-width:992px){
  .hero-title{font-size:44px}
}
.hero-divider{
  width:40px;height:2px;
  background-color:var(--gold);
  margin-top:0.75rem;
}
.hero-text{
  font-size:13px;
  line-height:1.6;
  color:rgba(26,58,95,0.8);
  margin-top:1rem;
  max-width:420px;
}
.hero-mobile-image{
  display:block;
  height:220px;
}
@media (min-width:992px){
  .hero-mobile-image{display:none}
}
.hero-mobile-image img{width:100%;height:100%;object-fit:cover}

/* ===== Section shared ===== */
.section{
  position:relative;
  overflow:hidden;
  padding-top:2rem;
  padding-bottom:2rem;
}
@media (min-width:992px){
  .section{padding-top:2.5rem;padding-bottom:2.5rem}
}
.section-bg-image{
  position:absolute;inset:0;
  background-size:cover;
  background-position:center;
}
.section-bg-overlay{
  position:absolute;inset:0;
}
.overlay-cream{background-color:rgba(253,250,245,0.95)}
.overlay-cream-2{background-color:rgba(253,250,245,0.9)}
.overlay-sky{background-color:rgba(234,244,255,0.9)}

.eyebrow{
  font-size:12px;
  letter-spacing:0.25em;
  font-weight:700;
  color:var(--gold);
}
.section-title{
  font-weight:700;
}

/* ===== About ===== */
.about-image{
  border-radius:1rem;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,0.05);
  border:1px solid var(--sand-border);
  height:260px;
  clip-path:polygon(0 0, 100% 0, 78% 100%, 0 100%);
}
.about-image img{width:100%;height:100%;object-fit:cover}
@media (min-width:992px){
  .about-image{height:520px}
}
.about-features .col{
  position:relative;
}
.about-features .col:not(:first-child)::before{
  content:"";
  position:absolute;
  left:-0.5rem;
  top:0.1rem;
  bottom:0.1rem;
  width:1px;
  background-color:var(--sand-border);
}
.about-heading{
  font-size:30px;
  line-height:1;
  margin-top:0.25rem;
}
.about-text{
  font-size:15px;
  line-height:1.6;
  color:#334a6b;
  margin-top:0.75rem;
}
.feature-item{
  display:flex;
  align-items:center;
  gap:0.75rem;
}
.feature-item i{
  width:36px;height:36px;
  color:var(--navy);
}
.feature-item.sun i{color:#f5a623}
.feature-label{
  font-size:15px;
  font-weight:700;
  line-height:1.2;
}

/* ===== Menu carousel ===== */
.menu-carousel-viewport{overflow:hidden}
.menu-waves-deco{
  position:absolute;
  left:-5%;
  bottom:-4%;
  width:38%;
  max-width:560px;
  min-width:280px;
  height:auto;
  opacity:0.55;
  pointer-events:none;
  z-index:0;
  user-select:none;
}
@media (max-width:767px){
  .menu-waves-deco{width:60%;opacity:0.4;bottom:-2%}
}
.about-waves-deco{
  position:absolute;
  right:-15%;
  top:-4%;
  width:38%;
  max-width:560px;
  min-width:280px;
  opacity:0.55;
  pointer-events:none;
  z-index:0;
  user-select:none;
}
.about-waves-deco img{
  display:block;
  width:100%;
  height:auto;
  transform:scaleX(-1);
}
@media (max-width:767px){
  .about-waves-deco{width:60%;opacity:0.4;top:-2%}
}
.menu-track{
  display:flex;
  transition:transform 0.5s ease-out;
}
.menu-slide{
  width:100%;
  flex-shrink:0;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1rem;
  padding-left:0.25rem;
  padding-right:0.25rem;
}
@media (min-width:576px){
  .menu-slide{grid-template-columns:repeat(4,1fr)}
}
.menu-card{
  position:relative;
  border-radius:1rem;
  overflow:hidden;
  box-shadow:0 4px 10px rgba(0,0,0,0.08);
  transition:box-shadow 0.3s;
  height:280px;
  contain:layout paint style;
}
.menu-card:hover{box-shadow:0 10px 25px rgba(0,0,0,0.15)}
.menu-card img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  transition:transform 0.5s;
}
.menu-card:hover img{transform:scale(1.05)}
.menu-card-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.2), transparent);
}
.menu-card-caption{
  position:absolute;
  left:0;right:0;bottom:0;
  padding:1rem;
}
.menu-card-rule{
  width:24px;height:2px;
  background-color:var(--gold);
  margin-bottom:0.5rem;
}
.menu-card-title{
  font-weight:700;
  font-size:15px;
  color:#fff;
}
.menu-card-desc{
  font-size:11.5px;
  color:rgba(255,255,255,0.85);
  line-height:1.35;
  margin-top:0.25rem;
}

.menu-dots{
  display:flex;align-items:center;justify-content:center;gap:0.5rem;
  margin-top:1.75rem;
}
.menu-dot{
  height:8px;
  border-radius:999px;
  border:none;
  transition:all 0.3s;
  width:8px;
  background-color:var(--sky-dot);
}
.menu-dot.active{
  width:24px;
  background-color:var(--gold);
}

/* ===== Experience / gallery ===== */
/*
  Concept: "Tide line" mosaic.
  - Corners alternate between two asymmetric curves (like a shoreline edge, not a
    uniform SaaS-card radius on everything).
  - Every other tile sits on its own gentle offset, echoing a horizon of buoys.
  - Captions rest quietly under a soft duotone; on hover a single gold rule
    draws itself under the title, the one deliberate motion in the section.
*/
.gallery-subtitle{
  font-size:13px;
  color:rgba(26,58,95,0.75);
  max-width:480px;
  margin:0.5rem auto 0;
  line-height:1.6;
}
.gallery-bento{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:190px;
  gap:1.15rem;
  margin-top:3rem;
}
@media (min-width:768px){
  .gallery-bento{grid-auto-rows:210px;gap:1.5rem}
}
.gallery-tile{
  position:relative;
  overflow:hidden;
  grid-column:span 2;
  grid-row:span 1;
  box-shadow:0 10px 28px -12px rgba(15,58,110,0.28);
  contain:layout paint style;
  border-radius:2.5rem 0.6rem 2.5rem 0.6rem;
}
.gallery-tile.corner-b{border-radius:0.6rem 2.5rem 0.6rem 2.5rem}
.gallery-tile.big{
  grid-column:span 2;
  grid-row:span 2;
}
@media (min-width:768px){
  .gallery-tile.wide{grid-column:span 2}
  .gallery-tile.tide-down{transform:translateY(1.25rem)}
}
.gallery-tile img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  transition:transform 0.7s cubic-bezier(.22,.61,.36,1);
}
.gallery-tile-link{
  position:absolute;inset:0;
  z-index:1;
  cursor:zoom-in;
}
.gallery-tile:hover img{transform:scale(1.07)}
.gallery-tile-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top, rgba(14,62,122,0.85) 0%, rgba(14,62,122,0.15) 55%, transparent 75%);
  pointer-events:none;
  z-index:2;
}
.gallery-tile-caption{
  position:absolute;left:0;right:0;bottom:0;
  padding:1rem 1.1rem;
  color:#fff;
  pointer-events:none;
  z-index:2;
}
.gallery-tile-title{
  font-weight:700;
  font-size:14px;
}
.gallery-tile.big .gallery-tile-title{font-size:17px}
.title-rule{display:none}
.gallery-tile-desc{
  font-size:10.5px;
  color:rgba(255,255,255,0.85);
  margin-top:0.15rem;
}
.gallery-quote-card{
  grid-column:span 2;
  grid-row:span 1;
  border-radius:0.6rem 2.5rem 0.6rem 2.5rem;
  background:linear-gradient(155deg, var(--navy-2) 0%, var(--navy) 100%);
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:1.25rem;
  position:relative;
  overflow:hidden;
}
.gallery-quote-wave{
  position:absolute;
  left:0;right:0;bottom:14%;
  width:100%;height:28px;
  color:var(--sky-accent);
  opacity:0.35;
}
.gallery-quote-mark{
  font-family:'Arima',serif;
  font-size:2.75rem;
  line-height:0.5;
  color:var(--gold-2);
  opacity:0.85;
  margin-bottom:0.35rem;
}
.gallery-quote-text{
  font-family:'Arima',serif;
  font-size:16px;
  line-height:1.35;
  position:relative;
}
.gallery-quote-sub{
  font-size:9.5px;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:var(--gold-2);
  margin-top:0.65rem;
  font-weight:700;
  position:relative;
}

/* ===== CTA banner ===== */
.cta-banner{
  background-color:var(--navy-2);
  color:#fff;
  position:relative;
  overflow:hidden;
}
.cta-banner .section-bg-image{background-image:url('assets/img/reservation_bg.webp')}
.cta-inner{
  position:relative;
  padding-top:5rem;
  padding-bottom:5rem;
  text-align:center;
}
@media (min-width:992px){
  .cta-inner{padding-top:5rem;padding-bottom:5rem}
}
.cta-title{font-size:20px;font-weight:700}
.cta-text{font-size:11px;color:rgba(255,255,255,0.8);margin-top:0.25rem}

/* ===== Contact ===== */
.contact-heading{font-size:20px;font-weight:700;line-height:1.3}
.contact-card{
  margin-top:1rem;
  font-size:12px;
}
.contact-card > div{
  display:flex;align-items:center;gap:0.5rem;
  padding:0.25rem 0;
}
.contact-icon{
  width:20px;height:20px;
  display:flex;align-items:center;justify-content:center;
  color:var(--navy-2);
  flex-shrink:0;
}
.contact-icon i{width:16px;height:16px}

.map-box{
  border-radius:0.75rem;
  overflow:hidden;
  border:1px solid var(--sky-border);
  height:220px;
  position:relative;
  background-color:var(--sky-border);
}
.map-box img{width:100%;height:100%;object-fit:cover;opacity:0.8}
.map-pin-card{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  background:#fff;
  border-radius:0.75rem;
  box-shadow:0 4px 10px rgba(0,0,0,0.15);
  padding:0.75rem 1rem;
  display:flex;align-items:center;gap:0.5rem;
}
.map-pin-icon{
  width:32px;height:32px;
  border-radius:999px;
  background-color:var(--navy-2);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.map-pin-text{font-size:11px;line-height:1.3}
.map-pin-text .name{font-weight:700}
.map-pin-text .addr{color:#5a6d8a}
.map-zoom{
  position:absolute;right:0.75rem;bottom:0.75rem;
  background:#fff;
  border-radius:0.5rem;
  box-shadow:0 2px 6px rgba(0,0,0,0.15);
  display:flex;flex-direction:column;
  overflow:hidden;
}
.map-zoom button{
  width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  border:none;background:#fff;
}
.map-zoom button:first-child{border-bottom:1px solid #eee}

.contact-hand{
  display:none;
  flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;
  height:100%;
}
@media (min-width:992px){
  .contact-hand{display:flex}
}
.contact-hand img{
  max-width:100%;
  height:auto;
}

/* ===== Footer ===== */
.site-footer{
  background-color:var(--navy-2);
  color:#fff;
  position:relative;
  overflow:hidden;
}
.footer-inner{
  padding-top:1.5rem;padding-bottom:1.5rem;
  display:flex;flex-direction:column;
  align-items:center;justify-content:space-between;
  gap:1rem;
  position:relative;
}
@media (min-width:992px){
  .footer-inner{flex-direction:row}
}
.footer-logo{height:88px;width:auto;filter:brightness(0) invert(1)}
.footer-links-row{
  display:flex;align-items:center;gap:0.75rem;
  flex-wrap:wrap;
  justify-content:center;
}
.footer-copy{font-size:13px;opacity:0.7}
.footer-divider{font-size:13px;opacity:0.5}
.footer-nav{
  display:flex;align-items:center;gap:0.75rem;
  font-size:13px;opacity:0.85;
  flex-wrap:wrap;
  justify-content:center;
}
.footer-nav a{color:#fff;text-decoration:none}
.footer-social{
  display:flex;align-items:center;gap:0.65rem;
  justify-content:center;
}
.footer-social a{
  width:40px;height:40px;
  border-radius:999px;
  background-color:#fff;
  color:var(--navy-2);
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;
}
.footer-social a svg{width:19px;height:19px}

/* ===== Entrance animations ===== */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(22px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes fadeIn{
  from{opacity:0}
  to{opacity:1}
}

/* Hero: plays immediately on load, staggered */
.hero-eyebrow,.hero-title,.hero-divider,.hero-text,.hero-image-wrap,.hero-mobile-image{
  animation:fadeUp 0.8s cubic-bezier(.22,1,.36,1) both;
}
.hero-eyebrow{animation-delay:0.05s}
.hero-title{animation-delay:0.15s}
.hero-divider{animation-delay:0.3s}
.hero-text{animation-delay:0.4s}
.hero-image-wrap{animation:fadeIn 1s ease both;animation-delay:0.15s}
.hero-mobile-image{animation-delay:0.15s}

/* Scroll-triggered reveal, toggled by IntersectionObserver */
.reveal{
  opacity:0;
  transform:translateY(36px);
  transition:opacity 0.9s cubic-bezier(.16,.84,.32,1), transform 0.9s cubic-bezier(.16,.84,.32,1), filter 0.9s cubic-bezier(.16,.84,.32,1);
  transition-delay:var(--reveal-delay, 0s);
  filter:blur(6px);
  will-change:opacity, transform, filter;
}
.reveal.in-view{
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
}
.reveal-scale{
  opacity:0;
  transform:scale(0.92);
  transition:opacity 0.8s cubic-bezier(.16,.84,.32,1), transform 0.8s cubic-bezier(.16,.84,.32,1), filter 0.8s cubic-bezier(.16,.84,.32,1);
  transition-delay:var(--reveal-delay, 0s);
  filter:blur(4px);
  will-change:opacity, transform, filter;
  backface-visibility:hidden;
}
.reveal-scale.in-view{
  opacity:1;
  transform:scale(1);
  filter:blur(0);
}

/* Individual image "zoom-settle" entrance, applied via .reveal-img so it
   never fights the hover-zoom already defined for menu-card / gallery-tile images */
.reveal-img{
  transform:scale(1.12);
  transition:transform 1.1s cubic-bezier(.16,.84,.32,1);
  transition-delay:var(--reveal-delay, 0s);
  will-change:transform;
}
.reveal.in-view .reveal-img,
.reveal-scale.in-view .reveal-img,
.reveal-img.in-view{
  transform:scale(1);
}

/* Gentle lift + zoom on hover for static feature images */
.about-image img,
.map-box img{
  transition:transform 0.6s ease;
}
.about-image:hover img,
.map-box:hover img{
  transform:scale(1.05);
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce){
  .hero-eyebrow,.hero-title,.hero-divider,.hero-text,.hero-image-wrap,.hero-mobile-image,
  .reveal,.reveal-scale,.reveal-img{
    animation:none !important;
    transition:none !important;
    opacity:1 !important;
    transform:none !important;
  }
}

/* ===== Back to top ===== */
.back-to-top{
  position:fixed;
  right:1.25rem;
  bottom:1.25rem;
  z-index:60;
  width:44px;height:44px;
  border-radius:999px;
  border:none;
  background-color:var(--navy-2);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(15,58,110,0.3);
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(12px) scale(0.9);
  transition:opacity 0.3s ease, transform 0.3s ease, visibility 0.3s, background-color 0.2s;
}
.back-to-top i{width:20px;height:20px}
.back-to-top.visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
}
.back-to-top:hover{background-color:var(--gold-3);color:var(--navy)}
@media (prefers-reduced-motion: reduce){
  .back-to-top{transition:opacity 0.15s ease, visibility 0.15s}
}