/* ============================================================
   Noa & Dan Apartment — Mediterranean coastal design system
   Palette pulled straight from the logo:
   teal ink #175753 / teal #1F7A73 / gold #E0A63E / terracotta #C9752E
   cream paper #F6EFDC / deep cream #EFE4C4 / warm ink #2B2118
   ============================================================ */

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

:root{
  --teal-deep:#14504C;
  --teal:#1F7A73;
  --teal-soft:#3F978F;
  --gold:#E0A63E;
  --gold-soft:#EFC275;
  --terracotta:#C9752E;
  --cream:#F6EFDC;
  --cream-deep:#EFE4C4;
  --cream-paper:#FBF6E9;
  --ink:#2B2118;
  --ink-soft:#5B4F40;
  --shadow: 0 18px 40px -18px rgba(23,20,10,.35);
  --radius: 6px;
  --wrap: 1180px;
  --gutter: clamp(20px, 5vw, 64px);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Cormorant Garamond', serif;
  font-size:19px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }

h1,h2,h3{
  font-family:'Fraunces', serif;
  color:var(--teal-deep);
  margin:0 0 .4em;
  font-weight:700;
  letter-spacing:.01em;
}

a{ color:inherit; }

.eyebrow{
  font-family:'Jost', sans-serif;
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:.78rem;
  font-weight:600;
  color:var(--terracotta);
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:.55em;
  font-family:'Jost', sans-serif;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.85rem;
  font-weight:600;
  text-decoration:none;
  padding:.95em 1.9em;
  border-radius:999px;
  border:2px solid transparent;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn-primary{
  background:var(--terracotta);
  color:var(--cream-paper);
  box-shadow:0 10px 24px -10px rgba(201,117,46,.65);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 28px -10px rgba(201,117,46,.75); }
.btn-ghost{
  background:transparent;
  border-color:rgba(246,239,220,.65);
  color:var(--cream-paper);
}
.btn-ghost:hover{ background:rgba(246,239,220,.15); transform:translateY(-2px); }
.btn svg{ width:18px; height:18px; flex:none; }

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

/* ---------- ornamental frame (echoes the logo border) ---------- */
.ornament-frame{ position:relative; }
.ornament-frame::before{
  content:"";
  position:absolute; inset:10px;
  border:2px solid rgba(246,239,220,.55);
  pointer-events:none;
}
.corner-flourish{
  position:absolute; width:64px; height:64px; opacity:.85; pointer-events:none;
}
.corner-flourish.tl{ top:22px; left:22px; }
.corner-flourish.tr{ top:22px; right:22px; transform:scaleX(-1); }
.corner-flourish.bl{ bottom:22px; left:22px; transform:scaleY(-1); }
.corner-flourish.br{ bottom:22px; right:22px; transform:scale(-1,-1); }

/* ---------- wave divider (signature motif, echoes the logo's sea) ---------- */
.wave-divider{ display:block; width:100%; line-height:0; }
.wave-divider svg{ width:100%; height:56px; display:block; }
.wave-flip svg{ transform:scaleY(-1); }

/* ============================================================
   Header
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(246,239,220,.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(23,87,83,.15);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding-top:12px; padding-bottom:12px;
}
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand img{ width:48px; height:48px; border-radius:50%; box-shadow:0 2px 8px rgba(0,0,0,.18); }
.brand-name{
  font-family:'Fraunces', serif; font-weight:700; color:var(--teal-deep);
  font-size:1.15rem; line-height:1.1;
}
.brand-name span{
  display:block; font-family:'Jost', sans-serif; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; font-size:.6rem; color:var(--terracotta); margin-top:2px;
}

.lang-switch{ display:flex; gap:6px; font-family:'Jost', sans-serif; }
.lang-switch a{
  text-decoration:none; font-size:.78rem; font-weight:600; letter-spacing:.05em;
  padding:.4em .65em; border-radius:5px; color:var(--teal-deep);
  border:1px solid transparent;
}
.lang-switch a.active{ background:var(--teal-deep); color:var(--cream-paper); }
.lang-switch a:not(.active):hover{ border-color:var(--teal-deep); }

.header-actions{ display:flex; align-items:center; gap:14px; }
.header-cta{ display:none; }
@media(min-width:760px){ .header-cta{ display:inline-flex; } }

/* ============================================================
   Hero
   ============================================================ */
.hero{
  position:relative;
  min-height:min(92vh, 820px);
  display:flex; align-items:center;
  color:var(--cream-paper);
  background:
    linear-gradient(180deg, rgba(20,80,76,.55) 0%, rgba(20,80,76,.72) 55%, rgba(20,80,76,.92) 100%),
    radial-gradient(120% 90% at 15% 10%, rgba(224,166,62,.35), transparent 55%),
    linear-gradient(135deg, #175753 0%, #123f3c 60%, #0f3230 100%);
  overflow:hidden;
}
.hero-pattern{
  position:absolute; inset:0; opacity:.16;
  background-image:radial-gradient(circle at 20% 20%, var(--gold) 0 2px, transparent 3px),
                    radial-gradient(circle at 60% 70%, var(--gold) 0 2px, transparent 3px),
                    radial-gradient(circle at 85% 30%, var(--gold) 0 2px, transparent 3px);
  background-size: 140px 140px;
}
.hero .container{ position:relative; z-index:2; padding-top:90px; padding-bottom:110px; }
.hero-sun{ width:74px; height:74px; margin-bottom:22px; }
.hero h1{
  color:var(--cream-paper);
  font-size:clamp(2.6rem, 7vw, 5.1rem);
  font-weight:900;
  line-height:1;
  margin-bottom:.28em;
}
.hero h1 em{ font-style:normal; color:var(--gold-soft); }
.hero-sub{
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:clamp(1.2rem, 2.6vw, 1.6rem);
  color:var(--cream-deep);
  max-width:34em;
  margin-bottom:1.5em;
}
.hero-ctas{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:2.6em; }
.hero-meta{
  display:flex; flex-wrap:wrap; gap:28px;
  font-family:'Jost', sans-serif; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--cream-deep); border-top:1px solid rgba(246,239,220,.25); padding-top:22px;
}
.hero-meta strong{ display:block; font-family:'Fraunces', serif; text-transform:none; letter-spacing:0; font-size:1.05rem; color:var(--cream-paper); font-weight:600; }

/* ============================================================
   Sections
   ============================================================ */
section{ padding:78px 0; position:relative; }
.section-head{ max-width:640px; margin-bottom:48px; }
.section-head h2{ font-size:clamp(2rem, 4vw, 2.8rem); }
.section-head p{ color:var(--ink-soft); font-size:1.15rem; }

.bg-cream{ background:var(--cream); }
.bg-deep{ background:var(--cream-deep); }
.bg-teal{ background:var(--teal-deep); color:var(--cream-paper); }
.bg-teal h2, .bg-teal h3{ color:var(--cream-paper); }

/* ---- About ---- */
.about-grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:start;
}
@media(max-width:860px){ .about-grid{ grid-template-columns:1fr; } }
.about-copy p{ margin:0 0 1.1em; font-size:1.18rem; color:var(--ink-soft); }
.about-copy p:first-of-type{ font-size:1.32rem; color:var(--ink); }

.amenities{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:14px 22px;
}
.amenities li{
  display:flex; align-items:center; gap:12px;
  font-family:'Jost', sans-serif; font-size:.88rem; font-weight:500;
  color:var(--teal-deep);
  background:var(--cream-paper);
  border:1px solid rgba(23,87,83,.15);
  border-radius:999px; padding:.7em 1em;
}
.amenities li svg{ width:20px; height:20px; flex:none; color:var(--terracotta); }

/* ---- Gallery ---- */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:12px;
}
@media(max-width:900px){ .gallery-grid{ grid-template-columns:repeat(3, 1fr); } }
@media(max-width:600px){ .gallery-grid{ grid-template-columns:repeat(2, 1fr); gap:8px; } }
.gallery-item{
  position:relative; border-radius:var(--radius); overflow:hidden; cursor:zoom-in;
  aspect-ratio:4/3; border:2px solid var(--cream-paper); box-shadow:var(--shadow);
}
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.gallery-item:hover img{ transform:scale(1.08); }
.gallery-item::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(20,60,58,.55));
  opacity:0; transition:opacity .3s ease;
}
.gallery-item:hover::after{ opacity:1; }
.gallery-item .zoom-icon{
  position:absolute; right:10px; bottom:10px; width:30px; height:30px;
  background:rgba(246,239,220,.92); border-radius:50%; display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateY(6px); transition:all .3s ease; color:var(--teal-deep);
}
.gallery-item:hover .zoom-icon{ opacity:1; transform:none; }
.gallery-item .zoom-icon svg{ width:16px; height:16px; }

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:200; display:none;
  background:rgba(15,40,38,.94);
  align-items:center; justify-content:center; padding:5vh 4vw;
}
.lightbox.open{ display:flex; }
.lightbox figure{ margin:0; max-width:min(92vw, 1000px); text-align:center; }
.lightbox img{ max-height:78vh; margin:0 auto; border-radius:6px; box-shadow:0 30px 60px rgba(0,0,0,.5); }
.lightbox figcaption{ color:var(--cream-deep); font-family:'Jost', sans-serif; font-size:.85rem; margin-top:14px; letter-spacing:.05em; }
.lightbox-close, .lightbox-prev, .lightbox-next{
  position:absolute; background:rgba(246,239,220,.12); border:1px solid rgba(246,239,220,.4);
  color:var(--cream-paper); border-radius:50%; width:46px; height:46px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .2s ease;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{ background:rgba(246,239,220,.28); }
.lightbox-close{ top:22px; right:22px; }
.lightbox-prev{ left:18px; top:50%; transform:translateY(-50%); }
.lightbox-next{ right:18px; top:50%; transform:translateY(-50%); }
@media(max-width:640px){ .lightbox-prev{ left:8px; } .lightbox-next{ right:8px; } }
.lightbox-close svg, .lightbox-prev svg, .lightbox-next svg{ width:20px; height:20px; }

/* ---- Reviews ---- */
.review-card{
  display:grid; grid-template-columns:auto 1fr; gap:36px; align-items:center;
  background:var(--cream-paper); border-radius:14px; padding:36px; box-shadow:var(--shadow);
  border:1px solid rgba(23,87,83,.12);
}
@media(max-width:680px){ .review-card{ grid-template-columns:1fr; text-align:center; } }
.review-score{
  width:120px; height:120px; border-radius:50%;
  background:var(--teal-deep); color:var(--cream-paper);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family:'Fraunces', serif; box-shadow:0 12px 26px -10px rgba(20,80,76,.55); margin:0 auto;
}
.review-score strong{ font-size:2.1rem; line-height:1; font-weight:800; }
.review-score span{ font-family:'Jost', sans-serif; font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; margin-top:4px; }
.review-stars{ color:var(--gold); font-size:1.3rem; letter-spacing:.12em; margin-bottom:.35em; }
.review-body p{ font-size:1.15rem; color:var(--ink-soft); margin:0 0 .6em; }
.review-source{ font-family:'Jost', sans-serif; font-size:.78rem; letter-spacing:.06em; color:var(--teal); text-decoration:none; font-weight:600; }
.review-photo-slot{
  margin-top:28px; border-radius:10px; overflow:hidden; border:1px dashed rgba(23,87,83,.35);
}

/* ---- Nearby ---- */
.nearby-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
@media(max-width:860px){ .nearby-list{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .nearby-list{ grid-template-columns:1fr; } }
.nearby-list li{
  background:rgba(246,239,220,.08); border:1px solid rgba(246,239,220,.22); border-radius:10px;
  padding:20px; color:var(--cream-paper);
}
.nearby-list .dist{ font-family:'Fraunces', serif; font-size:1.5rem; font-weight:700; color:var(--gold-soft); display:block; }
.nearby-list .name{ font-family:'Jost', sans-serif; font-size:.85rem; letter-spacing:.02em; color:var(--cream-deep); }

/* ---- Location & contact ---- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
@media(max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }
.map-frame{ border-radius:12px; overflow:hidden; box-shadow:var(--shadow); border:1px solid rgba(23,87,83,.15); }
.map-frame iframe{ width:100%; height:380px; border:0; display:block; }
.contact-list{ list-style:none; margin:0 0 28px; padding:0; }
.contact-list li{
  display:flex; gap:16px; padding:16px 0; border-bottom:1px solid rgba(23,87,83,.14);
}
.contact-list li:first-child{ padding-top:0; }
.contact-list .icon{
  width:44px; height:44px; border-radius:50%; background:var(--teal-deep); color:var(--cream-paper);
  display:flex; align-items:center; justify-content:center; flex:none;
}
.contact-list .icon svg{ width:20px; height:20px; }
.contact-list .label{ font-family:'Jost', sans-serif; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--terracotta); margin-bottom:2px; }
.contact-list a{ text-decoration:none; font-size:1.15rem; color:var(--teal-deep); font-weight:600; }
.contact-list a:hover{ text-decoration:underline; }
.contact-list p{ margin:0; font-size:1.1rem; color:var(--ink-soft); }

.cta-banner{
  text-align:center; border-radius:14px; padding:48px 30px;
  background:linear-gradient(135deg, var(--terracotta), #B0631F);
  color:var(--cream-paper); box-shadow:var(--shadow); margin-top:10px;
}
.cta-banner h3{ color:var(--cream-paper); font-size:1.7rem; }
.cta-banner p{ color:rgba(246,239,220,.9); margin-bottom:1.4em; font-size:1.1rem; }
.cta-banner .btn-primary{ background:var(--cream-paper); color:var(--terracotta); box-shadow:none; }
.cta-banner .btn-primary:hover{ background:#fff; }

/* Floating mobile CTA / whatsapp */
.float-actions{
  position:fixed; right:18px; bottom:18px; z-index:60;
  display:flex; flex-direction:column; gap:10px;
}
.float-btn{
  width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:#fff; text-decoration:none; box-shadow:0 10px 22px -6px rgba(0,0,0,.4);
  transition:transform .2s ease;
}
.float-btn:hover{ transform:translateY(-3px) scale(1.04); }
.float-btn.whatsapp{ background:#2FAE6D; }
.float-btn.mail{ background:var(--terracotta); }
.float-btn svg{ width:24px; height:24px; }

/* ---- Footer ---- */
.site-footer{ background:#0F3230; color:var(--cream-deep); padding:52px 0 28px; }
.footer-grid{ display:flex; flex-wrap:wrap; gap:32px; justify-content:space-between; align-items:flex-start; margin-bottom:32px; }
.footer-brand{ display:flex; align-items:center; gap:12px; }
.footer-brand img{ width:44px; height:44px; border-radius:50%; }
.footer-brand-name{ font-family:'Fraunces', serif; font-size:1.05rem; color:var(--cream-paper); }
.footer-langs{ font-family:'Jost', sans-serif; font-size:.85rem; display:flex; gap:14px; }
.footer-langs a{ color:var(--cream-deep); text-decoration:none; }
.footer-langs a:hover{ color:var(--gold-soft); }
.footer-bottom{
  border-top:1px solid rgba(246,239,220,.14); padding-top:20px;
  font-family:'Jost', sans-serif; font-size:.75rem; letter-spacing:.03em; color:rgba(246,239,220,.55);
  display:flex; flex-wrap:wrap; gap:8px; justify-content:space-between;
}

/* Utility: reveal-on-scroll */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .gallery-item img{ transition:none; }
}

/* Skip link / focus */
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--teal-deep); color:#fff; padding:10px 16px; z-index:999;
}
.skip-link:focus{ left:16px; top:16px; }
a:focus-visible, button:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }