/* Azor Wave — for beauty. Demo site. */
:root{
  --navy:#1E4A78;
  --navy-deep:#163A5E;
  --navy-ink:#12304E;
  --blue:#6E93BE;
  --blue-soft:#C9D9EA;
  --blue-mist:#EAF1F8;
  --cream:#FBF4F1;
  --cream-2:#F5EEEA;
  --paper:#FFFFFF;
  --ink:#1B2A3A;
  --muted:#6B7C8E;
  --line:#E3DAD5;
  --wa:#25D366;
  --r:18px;
  --shadow:0 1px 2px rgba(30,74,120,.05), 0 20px 44px -26px rgba(30,74,120,.45);
  --shadow-sm:0 1px 2px rgba(30,74,120,.06), 0 10px 24px -18px rgba(30,74,120,.5);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:"Jost","Segoe UI",system-ui,sans-serif;
  font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3{margin:0; font-family:"Cormorant Garamond",Georgia,serif; font-weight:500; color:var(--navy-ink); line-height:1.12; text-wrap:balance}
p{margin:0}
:focus-visible{outline:2px solid var(--navy); outline-offset:3px; border-radius:8px}

.wrap{width:min(1120px,92vw); margin-inline:auto}
.eyebrow{
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--blue); font-weight:500;
}
.muted{color:var(--muted)}
.center{text-align:center}

/* ---------- logo lockup ---------- */
.logo{display:inline-grid; justify-items:center; line-height:1; color:var(--navy)}
.logo .script{font-family:"Parisienne",cursive; font-size:var(--logo-size,34px); letter-spacing:.01em}
.logo .script .w{display:block; margin-top:-.34em; margin-left:.9em}
.logo .rule{
  display:flex; align-items:center; gap:8px; margin-top:.5em;
  font-size:calc(var(--logo-size,34px) * .2); letter-spacing:.34em; text-transform:uppercase; color:var(--navy);
  font-family:"Jost",sans-serif; font-weight:400;
}
.logo .rule::before,.logo .rule::after{content:""; height:1px; width:clamp(22px,7vw,52px); background:var(--blue-soft)}
/* real logo file, when present, replaces the type lockup */
.logo-img{width:var(--logo-img-w,140px); mix-blend-mode:multiply}
.logo:has(.logo-img) .script,.logo:has(.logo-img) .rule{display:none}
.bfly{width:1.05em; height:1.05em; vertical-align:-.1em}

/* ---------- header ---------- */
header{
  position:sticky; top:0; z-index:40;
  background:rgba(251,244,241,.86); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0}
.nav .logo{--logo-size:24px}
.nav .logo-img{height:44px; width:auto}
.nav nav{display:flex; align-items:center; gap:22px; font-size:14px; letter-spacing:.04em}
.nav nav a{color:var(--navy-ink); padding:4px 0; border-bottom:1px solid transparent}
.nav nav a:hover{border-color:var(--blue)}
@media (max-width:760px){ .nav .links{display:none} }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 24px; border-radius:999px; border:1px solid transparent;
  font-size:14px; letter-spacing:.1em; text-transform:uppercase; font-weight:500;
  transition:transform .15s ease, background .15s ease, color .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--navy); color:#fff}
.btn-primary:hover{background:var(--navy-deep)}
.btn-ghost{border-color:var(--blue-soft); color:var(--navy-ink); background:transparent}
.btn-ghost:hover{background:var(--blue-mist)}
.btn-wa{background:var(--wa); color:#04310f}
.btn-wa:hover{filter:brightness(.95)}
.btn svg{width:18px; height:18px; flex:none}

/* floating whatsapp */
.fab{
  position:fixed; right:16px; bottom:16px; z-index:60;
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 18px; border-radius:999px; background:var(--wa); color:#04310f;
  font-size:14px; font-weight:500; letter-spacing:.06em;
  box-shadow:0 10px 30px -10px rgba(4,49,15,.6);
}
.fab svg{width:22px; height:22px}
@media (max-width:520px){ .fab span{display:none} .fab{padding:15px} }

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; background:var(--cream); padding-top:0}
.hero-grid{display:grid; gap:0; align-items:stretch}
@media (min-width:900px){ .hero-grid{grid-template-columns:1fr 1fr} }
.hero-copy{padding:10px 0 44px; display:grid; align-content:center; gap:18px; justify-items:start}
.hero-copy .logo{--logo-size:clamp(46px,9vw,74px); --logo-img-w:min(260px,68%)}
.hero-copy .logo-img{margin-left:-6%}
.hero h1{font-size:clamp(34px,6vw,58px); font-weight:400}
.hero h1 em{font-style:italic; color:var(--navy)}
.hero p.lead{font-size:17px; color:var(--muted); max-width:44ch}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px}
.hero-art{
  position:relative; min-height:340px;
  background:linear-gradient(160deg,#DDE7F3 0%,#C7D8EA 45%,#B7CCE3 100%);
  border-radius:var(--r);
  margin:0 0 56px;
}
@media (min-width:900px){
  .hero-art{border-radius:220px 220px var(--r) var(--r); margin:56px 0 56px 40px; min-height:520px}
}
.hero-art img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit}

/* ---------- sections ---------- */
section{padding:64px 0}
.sec-head{display:grid; gap:10px; justify-items:center; text-align:center; margin-bottom:34px}
.sec-head h2{font-size:clamp(28px,4.6vw,40px)}
.sec-head p{color:var(--muted); max-width:56ch}

.grid{display:grid; gap:18px}
.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}

.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:26px; box-shadow:var(--shadow-sm);
}
.card h3{font-size:24px; margin-bottom:6px}
.card .from{font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--blue); margin-top:14px}
.card ul{margin:10px 0 0; padding-left:18px; color:var(--muted); font-size:15px}
.card li{margin:3px 0}
.icon-round{
  width:46px; height:46px; border-radius:999px; background:var(--blue-mist); color:var(--navy);
  display:grid; place-items:center; margin-bottom:14px;
}
.icon-round svg{width:24px; height:24px}

/* gallery */
.tiles{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.tile{
  position:relative; aspect-ratio:3/4; border-radius:var(--r); overflow:hidden;
  display:grid; align-content:end; padding:18px; color:#fff;
  box-shadow:var(--shadow-sm); background-size:cover; background-position:center;
}
.tile span{position:relative; z-index:1; font-size:13px; letter-spacing:.18em; text-transform:uppercase}
.tile::after{content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(18,48,78,.6),transparent 55%)}

/* testimonials */
#reviews{background:linear-gradient(rgba(18,48,78,.84),rgba(18,48,78,.84)),url("img/ig1.jpg") center/cover}
#reviews .sec-head h2{color:#fff}
#reviews .sec-head .eyebrow{color:var(--blue-soft)}
.quotes{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.quote{background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:26px; box-shadow:var(--shadow-sm)}
.stars{color:#C9A227; letter-spacing:3px; font-size:14px}
.quote p{margin:12px 0 16px; font-family:"Cormorant Garamond",Georgia,serif; font-size:20px; line-height:1.45; color:var(--navy-ink)}
.quote cite{font-style:normal; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--blue)}

/* contact */
.contact{background:var(--blue-mist)}
.info{display:grid; gap:16px}
.info .row{display:flex; gap:14px; align-items:flex-start}
.info .row svg{width:20px; height:20px; color:var(--navy); flex:none; margin-top:3px}
.info .row b{display:block; font-weight:500; letter-spacing:.06em}
.hours{width:100%; border-collapse:collapse; font-size:15px}
.hours td{padding:7px 0; border-bottom:1px solid var(--line)}
.hours td:last-child{text-align:right; color:var(--muted); font-variant-numeric:tabular-nums}

/* ---------- price list page ---------- */
.menu-hero{background:linear-gradient(180deg,#E7EFF8,var(--cream)); padding:56px 0 40px; text-align:center}
.menu-hero .logo{--logo-size:44px; --logo-img-w:min(240px,70%); margin-bottom:18px}
.menu-hero h1{font-size:clamp(32px,6vw,52px)}
.chips{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:24px}
.chips a{
  padding:8px 16px; border-radius:999px; background:var(--paper); border:1px solid var(--line);
  font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--navy-ink);
}
.chips a:hover{background:var(--navy); color:#fff; border-color:var(--navy)}

.menu-sec{margin-bottom:34px; scroll-margin-top:80px}
.menu-sec > h2{
  display:flex; align-items:center; gap:12px; font-size:15px; letter-spacing:.24em; text-transform:uppercase;
  font-family:"Jost",sans-serif; color:#fff; background:var(--navy);
  padding:12px 22px; border-radius:999px; margin-bottom:8px;
}
.menu-sec > h2 svg{width:20px; height:20px; flex:none}
.menu-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:12px 22px; box-shadow:var(--shadow-sm)}
.menu-card h3{
  font-family:"Jost",sans-serif; font-size:13px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--blue); margin:18px 0 4px;
}
.item{display:flex; align-items:baseline; gap:10px; padding:11px 0; border-bottom:1px solid var(--cream-2)}
.item:last-child{border-bottom:0}
.item .name{flex:none; max-width:72%}
.item .dots{flex:1; border-bottom:1px dotted var(--blue-soft); transform:translateY(-4px)}
.item .price{font-variant-numeric:tabular-nums; color:var(--navy); font-weight:500; white-space:nowrap}
.item .price small{font-size:11px; letter-spacing:.1em; color:var(--muted); margin-left:4px}
.note{font-size:13px; color:var(--muted); margin-top:10px}

/* ---------- footer ---------- */
footer{background:var(--navy-ink); color:#D6E2EF; padding:48px 0 28px; text-align:center}
footer .logo{--logo-size:34px; --logo-img-w:200px; color:#fff}
/* footer uses the supplied reversed artwork, no blend or filter */
footer .logo-img{mix-blend-mode:normal}
footer .logo .rule{color:#C9D9EA}
footer .logo .rule::before,footer .logo .rule::after{background:rgba(201,217,234,.4)}
footer .flinks{display:flex; flex-wrap:wrap; gap:20px; justify-content:center; margin:24px 0 18px; font-size:14px}
footer small{display:block; color:#8FA6BE; font-size:12px; letter-spacing:.06em}