/* ===========================================================
   Stella Spa — Dubai Marina
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&display=swap');

:root{
  --ink:        #122E2C;
  --ink-soft:   #3C5654;
  --teal:       #1F6F69;
  --teal-dark:  #123A38;
  --clay:       #C17A4E;
  --clay-dark:  #A8623A;
  --cream:      #FAF6EF;
  --cream-2:    #F1E9DC;
  --paper:      #FFFFFF;
  --line:       rgba(18,46,44,0.12);
  --shadow:     0 20px 45px -25px rgba(18,46,44,0.35);
  --radius:     14px;
  --radius-sm:  8px;
  --ease:       cubic-bezier(.16,.8,.28,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Manrope', sans-serif;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{
  font-family:'Outfit', sans-serif;
  font-weight:600;
  line-height:1.12;
  margin:0 0 .5em;
  letter-spacing:-0.01em;
}
p{margin:0 0 1em;}
ul{margin:0;padding:0;list-style:none;}
.container{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
}
section{padding:88px 0;}
@media (max-width:768px){ section{padding:56px 0;} }

.eyebrow{
  display:inline-block;
  font-family:'Manrope',sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--clay-dark);
  margin-bottom:14px;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 28px;
  border-radius:999px;
  font-weight:600;
  font-size:15px;
  font-family:'Manrope',sans-serif;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .16s var(--ease), background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:active{transform:scale(.97);}
.btn-primary{ background:var(--clay); color:#fff; }
.btn-primary:hover{ background:var(--clay-dark); }
.btn-outline{ background:transparent; border-color:rgba(255,255,255,.5); color:inherit; }
.btn-outline:hover{ background:rgba(255,255,255,.12); }
.btn-line{ background:transparent; border-color:var(--line); color:var(--ink); }
.btn-line:hover{ border-color:var(--teal); color:var(--teal); }
.btn-sm{ padding:10px 20px; font-size:13.5px; }

/* ---------- Top utility bar ---------- */
.topbar{
  background:var(--teal-dark);
  color:#EDECE6;
  font-size:13px;
}
.topbar .container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:8px;
  padding-bottom:8px;
  gap:16px;
  flex-wrap:wrap;
}
.topbar a{opacity:.92;}
.topbar a:hover{opacity:1; text-decoration:underline;}
.topbar-links{display:flex; gap:20px; flex-wrap:wrap;}

/* ---------- Nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(250,246,239,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:76px;
}
.nav-logo img{height:34px; width:auto;}
.nav-links{
  display:flex;
  align-items:center;
  gap:34px;
  font-size:14.5px;
  font-weight:600;
}
.nav-links a{ position:relative; padding:6px 0; color:var(--ink-soft); transition:color .2s ease;}
.nav-links a:hover, .nav-links a.active{ color:var(--teal); }
.nav-links a.active::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-4px;
  height:2px; background:var(--clay); border-radius:2px;
}
.nav-cta{display:flex; align-items:center; gap:14px;}
.nav-toggle{
  display:none;
  width:40px; height:40px;
  border-radius:8px;
  border:1px solid var(--line);
  background:transparent;
  align-items:center; justify-content:center;
  cursor:pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; display:block; width:18px; height:2px; background:var(--ink); position:relative; transition:.2s;
}
.nav-toggle span::before{ position:absolute; top:-6px; }
.nav-toggle span::after{ position:absolute; top:6px; }

@media (max-width:900px){
  .nav-links{
    position:fixed; inset:76px 0 0 0; height:calc(100vh - 76px);
    background:var(--cream); flex-direction:column; justify-content:flex-start;
    padding:32px 24px; gap:22px; font-size:17px;
    transform:translateX(100%); transition:transform .3s var(--ease);
    overflow-y:auto;
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-toggle{ display:flex; }
  .nav-cta .btn-line{ display:none; }
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:86vh;
  display:flex; align-items:flex-end;
  color:#fff;
  overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
}
.hero-bg::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(18,46,44,.35) 0%, rgba(18,46,44,.35) 40%, rgba(11,26,25,.88) 100%);
}
.hero-inner{ position:relative; z-index:2; padding-bottom:72px; width:100%;}
.hero h1{
  font-size:clamp(34px,5.4vw,64px);
  max-width:15ch;
  letter-spacing:-0.02em;
}
.hero p.lead{
  max-width:46ch;
  font-size:17px;
  color:rgba(255,255,255,.86);
}
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:26px; }
.hero-badges{
  display:flex; flex-wrap:wrap; gap:28px;
  margin-top:56px; padding-top:26px;
  border-top:1px solid rgba(255,255,255,.22);
  font-size:13.5px; color:rgba(255,255,255,.85);
}
.hero-badges b{ display:block; font-family:'Outfit',sans-serif; font-size:20px; color:#fff; font-weight:600;}

/* page (inner) hero, shorter */
.page-hero{ min-height:46vh; }
.page-hero .hero-inner{ padding-bottom:48px; }
.breadcrumb{
  font-size:13px; color:rgba(255,255,255,.75); margin-bottom:18px;
}
.breadcrumb a{ color:rgba(255,255,255,.75); }
.breadcrumb a:hover{ color:#fff; }

/* ---------- Section headings ---------- */
.section-head{ max-width:640px; margin-bottom:48px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size:clamp(26px,3.4vw,40px); }
.section-head p{ color:var(--ink-soft); font-size:16px; }

/* ---------- About / split blocks ---------- */
.split{
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;
}
.split img{ border-radius:var(--radius); }
.split.reverse .split-media{ order:2; }
@media (max-width:860px){
  .split{ grid-template-columns:1fr; gap:32px; }
  .split.reverse .split-media{ order:0; }
}
.stat-row{ display:flex; gap:36px; margin-top:28px; flex-wrap:wrap; }
.stat-row .stat b{ display:block; font-family:'Outfit',sans-serif; font-size:28px; color:var(--teal); }
.stat-row .stat span{ font-size:13px; color:var(--ink-soft); }

.check-list li{
  position:relative; padding-left:28px; margin-bottom:12px; font-size:15px; color:var(--ink-soft);
}
.check-list li::before{
  content:"";
  position:absolute; left:0; top:6px; width:16px; height:16px;
  border-radius:50%;
  background:var(--teal);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M6.2 11.2 3.4 8.4l-1 1L6.2 13.2 13.6 5.8l-1-1z'/%3E%3C/svg%3E") center/10px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M6.2 11.2 3.4 8.4l-1 1L6.2 13.2 13.6 5.8l-1-1z'/%3E%3C/svg%3E") center/10px no-repeat;
}

/* ---------- Service cards (grid) ---------- */
.service-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:28px;
}
@media (max-width:900px){ .service-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .service-grid{ grid-template-columns:1fr; } }

.service-card{
  background:var(--paper);
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
  display:flex; flex-direction:column;
}
.service-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.service-card .thumb{ aspect-ratio:4/3; overflow:hidden; }
.service-card .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.service-card:hover .thumb img{ transform:scale(1.06); }
.service-card .body{ padding:22px 22px 24px; flex:1; display:flex; flex-direction:column; }
.service-card h3{ font-size:19px; margin-bottom:8px; }
.service-card p{ font-size:14px; color:var(--ink-soft); flex:1; }
.service-card .price-from{ font-size:13px; color:var(--clay-dark); font-weight:700; margin-bottom:10px; }
.service-card .more{ font-size:13.5px; font-weight:700; color:var(--teal); display:inline-flex; align-items:center; gap:6px; }
.service-card .more svg{ transition:transform .2s ease; }
.service-card:hover .more svg{ transform:translateX(3px); }

/* ---------- Feature strip (asymmetric) ---------- */
.feature-strip{
  background:var(--teal-dark);
  color:#EFEDE6;
}
.feature-strip .container{
  display:grid; grid-template-columns:1.1fr 1fr; gap:60px; align-items:center;
}
@media (max-width:860px){ .feature-strip .container{ grid-template-columns:1fr; gap:32px; } }
.feature-strip h2{ color:#fff; font-size:clamp(24px,3vw,34px); }
.feature-strip p{ color:rgba(239,237,230,.78); }
.feature-list{ display:flex; flex-direction:column; gap:0; }
.feature-list li{
  display:flex; gap:16px; padding:20px 0; border-top:1px solid rgba(255,255,255,.14);
}
.feature-list li:last-child{ border-bottom:1px solid rgba(255,255,255,.14); }
.feature-list .num{ font-family:'Outfit',sans-serif; font-size:14px; color:var(--clay); font-weight:600; padding-top:2px; }
.feature-list h4{ color:#fff; font-size:16px; margin-bottom:4px; }
.feature-list p{ font-size:14px; margin:0; }

/* ---------- Steps (how it works) ---------- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
@media (max-width:860px){ .steps{ grid-template-columns:1fr; } }
.step{ position:relative; padding-top:8px; }
.step .step-num{
  font-family:'Outfit',sans-serif; font-size:44px; font-weight:600;
  color:transparent; -webkit-text-stroke:1.4px var(--clay);
  margin-bottom:10px; display:block;
}
.step h3{ font-size:19px; }
.step p{ color:var(--ink-soft); font-size:14.5px; }

/* ---------- Price table ---------- */
.price-table{ width:100%; border-collapse:collapse; margin:18px 0 8px; }
.price-table th{
  text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--ink-soft); font-weight:700; padding:0 0 12px; border-bottom:1px solid var(--line);
}
.price-table td{ padding:14px 0; border-bottom:1px solid var(--line); font-size:15px; }
.price-table td.dur{ color:var(--ink-soft); }
.price-table td.price{ font-family:'Outfit',sans-serif; font-weight:600; color:var(--teal); text-align:right; }
.price-note{ font-size:12.5px; color:var(--ink-soft); margin-top:14px; }

/* ---------- Pricing overview (services.html) ---------- */
.price-block{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px 30px; margin-bottom:22px;
}
.price-block .head{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; flex-wrap:wrap; }
.price-block h3{ font-size:20px; margin:0; }
.price-block .head a{ font-size:13px; font-weight:700; color:var(--teal); }
.price-block p.desc{ color:var(--ink-soft); font-size:14.5px; margin:8px 0 0; max-width:70ch; }

/* ---------- Gallery ---------- */
.gallery-grid{
  columns:3 260px; column-gap:18px;
}
.gallery-grid img{ width:100%; border-radius:var(--radius-sm); margin-bottom:18px; break-inside:avoid; }
@media (max-width:700px){ .gallery-grid{ columns:2 200px; } }

/* ---------- Testimonial / quote block ---------- */
.quote-block{
  background:var(--cream-2); border-radius:var(--radius);
  padding:44px; text-align:center;
}
.quote-block p{
  font-family:'Outfit',sans-serif; font-size:clamp(19px,2.4vw,26px); font-weight:500;
  color:var(--teal-dark); max-width:56ch; margin:0 auto 16px; line-height:1.4;
}
.quote-block span{ font-size:13.5px; color:var(--ink-soft); font-weight:600; }

/* ---------- Contact / location ---------- */
.info-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 28px;
}
.info-card h3{ font-size:15px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin-bottom:10px; }
.info-card .value{ font-family:'Outfit',sans-serif; font-size:19px; font-weight:600; }
.map-frame{ border:0; width:100%; height:100%; min-height:340px; border-radius:var(--radius); }

/* ---------- CTA band ---------- */
.cta-band{
  background:var(--clay); color:#fff; border-radius:var(--radius);
  padding:52px 48px; display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;
}
.cta-band h2{ color:#fff; font-size:clamp(22px,3vw,30px); max-width:20ch; }
.cta-band .btn-primary{ background:#fff; color:var(--clay-dark); }
.cta-band .btn-primary:hover{ background:#fff; opacity:.92; }

/* ---------- Footer ---------- */
footer{ background:var(--teal-dark); color:rgba(239,237,230,.8); padding-top:64px; }
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:48px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
@media (max-width:860px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }
footer h4{ color:#fff; font-size:14px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:18px; }
footer .foot-logo img{ height:30px; margin-bottom:16px; filter:brightness(0) invert(1); }
footer p{ font-size:14px; }
.foot-links li{ margin-bottom:10px; font-size:14px; }
.foot-links a:hover{ color:#fff; }
.foot-bottom{
  display:flex; justify-content:space-between; padding:22px 0; font-size:12.5px; flex-wrap:wrap; gap:10px;
  color:rgba(239,237,230,.55);
}
.social-row{ display:flex; gap:12px; margin-top:16px; }
.social-row a{
  width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.25);
  display:flex; align-items:center; justify-content:center; transition:.2s;
}
.social-row a:hover{ background:var(--clay); border-color:var(--clay); }

/* ---------- WhatsApp floating button ---------- */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:60;
  width:58px; height:58px; border-radius:50%;
  background:#1F6F69; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 30px -10px rgba(18,46,44,.55);
  transition:transform .16s var(--ease);
}
.wa-float:hover{ transform:scale(1.06); }
.wa-float:active{ transform:scale(.97); }

/* ---------- misc ---------- */
.tag-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.tag{
  font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:6px 12px; border-radius:999px; background:var(--cream-2); color:var(--teal-dark);
}
.two-col{ display:grid; grid-template-columns:1.3fr .9fr; gap:56px; }
@media (max-width:900px){ .two-col{ grid-template-columns:1fr; } }
.divider{ height:1px; background:var(--line); margin:64px 0; border:0; }
.related-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:860px){ .related-grid{ grid-template-columns:1fr; } }

[data-reveal]{ opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
[data-reveal].in{ opacity:1; transform:none; }