/* ===========================================================
   TEAM SALON — Al Nakheel Branch
   Design tokens
   =========================================================== */
:root{
  --bg:            #04201F;   /* deep teal-black page background */
  --bg-panel:      #16454B;   /* logo teal — headers, footer, panels */
  --bg-panel-2:    #0C2E30;   /* mid tone between bg and panel */
  --accent:        #E67C0F;   /* brand orange */
  --accent-light:  #FFA64D;
  --text:          #F5EFE4;   /* warm off-white */
  --text-muted:    #A9C2C0;
  --line:          rgba(245,239,228,0.14);
  --line-strong:   rgba(245,239,228,0.28);
  --radius:        2px;
  --shadow:        0 20px 60px rgba(0,0,0,0.35);
  --maxw:          1180px;
}

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

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Cairo', 'Segoe UI', sans-serif;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,.display{
  font-family:'Cairo', sans-serif;
  font-weight:800;
  line-height:1.25;
  letter-spacing:0.2px;
  margin:0 0 .5em;
}

h1{ font-size:clamp(2.1rem, 5vw, 3.6rem); }
h2{ font-size:clamp(1.6rem, 3.4vw, 2.4rem); }
h3{ font-size:1.25rem; }

p{ margin:0 0 1em; color:var(--text); }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

.container{
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:24px;
}

.muted{ color:var(--text-muted); }

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  color:var(--accent);
  font-family:'Cairo', sans-serif;
  font-size:.85rem;
  letter-spacing:1px;
  margin-bottom:.9em;
}
.eyebrow::before{
  content:"";
  width:26px; height:2px;
  background:var(--accent);
  display:inline-block;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6em;
  padding:1em 2em;
  border-radius:100px;
  font-family:'Cairo',sans-serif;
  font-weight:700;
  font-size:1rem;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease, background .22s ease, border-color .22s ease, color .22s ease;
}
.btn:active{ transform:translateY(0) scale(.98); }
.btn-primary{
  background:linear-gradient(135deg, var(--accent-light), var(--accent));
  color:#1a1006;
  box-shadow:0 8px 22px rgba(230,124,15,0.32);
}
.btn-primary:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(230,124,15,0.45);
}
.btn-outline{
  background:rgba(245,239,228,0.04);
  border-color:var(--line-strong);
  color:var(--text);
}
.btn-outline:hover{
  transform:translateY(-3px);
  border-color:var(--accent);
  color:var(--accent-light);
  background:rgba(230,124,15,0.08);
  box-shadow:0 10px 24px rgba(0,0,0,0.25);
}
.btn-row{ display:flex; flex-wrap:wrap; gap:14px; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(4,32,31,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.site-header .bar{
  display:flex; align-items:center; justify-content:space-between;
  padding-block:14px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height:44px; width:auto; border-radius:3px; }
.brand-name{ font-family:'Cairo',sans-serif; font-size:1.15rem; }
.brand-name span{ display:block; font-family:'Cairo',sans-serif; font-size:.72rem; color:var(--text-muted); font-weight:400; }

.main-nav{ display:flex; align-items:center; gap:28px; }
.main-nav a{
  font-size:.98rem; color:var(--text-muted);
  position:relative; padding-bottom:4px;
}
.main-nav a:hover, .main-nav a.active{ color:var(--text); }
.main-nav a.active::after{
  content:""; position:absolute; right:0; left:0; bottom:-2px;
  height:2px; background:var(--accent);
}
.header-cta{ display:flex; gap:10px; }
.nav-toggle{ display:none; }

/* ---------- Nav dropdown (خدماتنا) ---------- */
.nav-item{ position:relative; display:flex; align-items:center; }
.nav-item > a{ display:inline-flex; align-items:center; gap:5px; }
.dropdown-arrow{
  background:none; border:none; cursor:pointer; color:inherit;
  display:inline-flex; align-items:center; padding:2px; line-height:0;
}
.dropdown-arrow svg{ width:10px; height:10px; transition:transform .2s ease; }
.dropdown-menu{ list-style:none; margin:0; padding:0; }

@media (min-width:881px){
  .dropdown-menu{
    position:absolute; top:100%; inset-inline-start:0; margin-top:14px;
    background:var(--bg-panel-2); border:1px solid var(--line); border-radius:var(--radius);
    min-width:250px; box-shadow:var(--shadow); padding:8px 0;
    opacity:0; visibility:hidden; transform:translateY(6px);
    transition:opacity .18s ease, transform .18s ease, visibility .18s;
    z-index:60;
  }
  .nav-item:hover .dropdown-menu{ opacity:1; visibility:visible; transform:translateY(0); }
  .dropdown-menu li a{ display:block; padding:.6em 1.2em; font-size:.92rem; color:var(--text-muted); white-space:nowrap; }
  .dropdown-menu li a:hover{ background:rgba(230,124,15,0.08); color:var(--accent-light); }
  .dropdown-arrow{ display:none; }
}

@media (max-width: 880px){
  /* Header uses backdrop-filter, which creates a new containing block for
     any fixed-position descendant. That was making the fixed mobile menu
     size/position itself against the ~70px header box instead of the
     viewport, letting page content show through around it. Dropping the
     blur while the menu is open (see body.nav-open rule below) removes
     that containing block so the menu positions against the viewport
     as intended. */
  .main-nav{
    position:fixed; inset:70px 0 0 0;
    background:var(--bg); /* solid — no transparency */
    flex-direction:column; align-items:flex-start; padding:28px 24px;
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .25s ease, transform .25s ease, visibility .25s;
    visibility:hidden;
    border-top:1px solid var(--line);
    box-shadow:var(--shadow);
    z-index:10000; /* above floating call/WhatsApp buttons (z-index:9999) */
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .main-nav.open{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); }
  .main-nav a{
    font-size:1.2rem; padding:10px 0; width:100%; border-bottom:1px solid var(--line);
    color:var(--text); /* high-contrast against the solid dark background */
  }
  .main-nav a:hover, .main-nav a.active{ color:var(--accent-light); }
  .header-cta{ display:none; }
  .nav-toggle{
    display:flex; flex-direction:column; gap:5px;
    background:none; border:none; cursor:pointer; padding:6px;
  }
  .nav-toggle span{ width:24px; height:2px; background:var(--text); display:block; }

  .nav-item{ width:100%; flex-direction:column; align-items:flex-start; }
  .nav-item > a{ border-bottom:none; }
  .dropdown-arrow{ position:absolute; inset-inline-end:0; top:8px; padding:8px; }
  .dropdown-arrow svg{ width:12px; height:12px; }
  .dropdown-menu{
    width:100%; max-height:0; overflow:hidden;
    transition:max-height .25s ease;
  }
  .nav-item.open .dropdown-menu{ max-height:600px; }
  .nav-item.open .dropdown-arrow svg{ transform:rotate(180deg); }
  .dropdown-menu li a{
    display:block; padding:10px 0 10px 18px; font-size:1.05rem;
    color:var(--text-muted); border-bottom:1px solid var(--line); width:100%;
  }
  .dropdown-menu li a:hover{ color:var(--accent-light); }

  /* While the mobile menu is open: drop the header's blur so the fixed
     menu sizes against the viewport (not the header box), lock page
     scroll, and hide the floating call/WhatsApp buttons so nothing
     floats above the menu. */
  body.nav-open{ overflow:hidden; }
  body.nav-open .site-header{
    backdrop-filter:none;
    background:var(--bg);
  }
  body.nav-open .wa-float,
  body.nav-open .floating-whatsapp,
  body.nav-open .floating-call{ display:none; }
}

/* ---------- Scissors divider (signature motif) ---------- */
.divider{
  display:flex; align-items:center; justify-content:center;
  gap:18px; margin:0 auto 2.2em; max-width:340px;
}
.divider .line{ flex:1; height:1px; background:var(--line-strong); }
.divider svg{ width:34px; height:34px; flex-shrink:0; }

/* ---------- Hero ----------
   Authoritative homepage hero rules live in the consolidated
   HERO section at the bottom of this file (hero hero-premium). */

/* ---------- Section ---------- */
.section{ padding:88px 0; }
.section.alt{ background:var(--bg-panel-2); }
.section-head{ text-align:center; max-width:640px; margin:0 auto 3em; }

/* ---------- Services grid ---------- */
.services-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.service-card{
  background:var(--bg); padding:34px 26px; min-height:200px;
  display:flex; flex-direction:column; gap:.6em;
  transition:background .2s ease;
}
.service-card:hover{ background:var(--bg-panel-2); }
.service-card .num{
  font-family:'Cairo',sans-serif; color:var(--accent); font-size:.85rem; letter-spacing:1px;
}
.service-card h3{ margin-bottom:.15em; }
.service-card p{ color:var(--text-muted); font-size:.93rem; margin:0; }

@media (max-width: 980px){ .services-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 560px){ .services-grid{ grid-template-columns:1fr; } }

/* ---------- Ticket / offer cards (signature element) ---------- */
.ticket-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:28px;
}
@media (max-width: 980px){ .ticket-grid{ grid-template-columns:1fr; max-width:440px; margin-inline:auto; } }

.ticket{
  position:relative;
  background:var(--bg-panel);
  border-radius:var(--radius);
  padding:30px 28px;
  box-shadow:var(--shadow);
  display:flex; align-items:center; gap:22px;
}
.ticket::before,.ticket::after{
  content:""; position:absolute; top:50%; transform:translateY(-50%);
  width:26px; height:26px; background:var(--bg); border-radius:50%;
}
.ticket::before{ left:-13px; }
.ticket::after{ right:-13px; }
.ticket .price{
  font-family:'Cairo',sans-serif; color:var(--accent);
  font-size:2.5rem; line-height:1; white-space:nowrap; flex-shrink:0;
  border-left:1px dashed var(--line-strong); padding-left:22px;
}
[dir="rtl"] .ticket .price{ border-left:none; border-right:1px dashed var(--line-strong); padding-left:0; padding-right:22px; }
.ticket .price small{ display:block; font-size:.85rem; color:var(--text-muted); margin-top:.3em; font-family:'Cairo',sans-serif;}
.ticket .desc{ font-size:.96rem; color:var(--text); }
.ticket-group h3{ margin-bottom:1.2em; display:flex; align-items:center; gap:10px; }
.ticket-group h3 .accent-dot{ width:9px; height:9px; border-radius:50%; background:var(--accent); }
.ticket-group{ margin-bottom:56px; }
.ticket-group:last-child{ margin-bottom:0; }

/* ---------- Trust / info strip ---------- */
.trust-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.trust-item{ background:var(--bg); padding:36px 28px; text-align:center; }
.trust-item h3{ font-size:1.05rem; margin-bottom:.4em; }
.trust-item p{ color:var(--text-muted); font-size:.9rem; margin:0; }
@media (max-width:760px){ .trust-grid{ grid-template-columns:1fr; } }

/* ---------- Location / map ---------- */
.location{ display:grid; grid-template-columns:1.05fr 1fr; gap:44px; align-items:center; }
.location .map-frame{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.location iframe{ width:100%; height:380px; border:0; filter:grayscale(.15) contrast(1.05); display:block; }
.info-list{ list-style:none; padding:0; margin:1.6em 0 2em; display:flex; flex-direction:column; gap:16px; }
.info-list li{ display:flex; gap:14px; align-items:flex-start; }
.info-list .ic{ color:var(--accent); flex-shrink:0; margin-top:3px; }
@media (max-width:920px){ .location{ grid-template-columns:1fr; } }

/* ---------- Articles ---------- */
.article-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px; }
@media (max-width:820px){ .article-grid{ grid-template-columns:1fr; } }
.article-card{
  background:var(--bg-panel-2); border:1px solid var(--line);
  padding:30px; display:flex; flex-direction:column; gap:.8em;
  transition:border-color .2s ease;
}
.article-card:hover{ border-color:var(--accent); }
.article-card .tag{ color:var(--accent); font-size:.8rem; font-family:'Cairo',sans-serif; letter-spacing:1px; }
.article-card p{ color:var(--text-muted); margin:0; }
.read-more{ color:var(--accent-light); font-weight:700; font-size:.92rem; margin-top:.4em; display:inline-flex; align-items:center; gap:6px; }

/* article single page */
.article-body{ max-width:720px; margin:0 auto; }
.article-body h2{ margin-top:1.4em; }
.article-body ul{ color:var(--text); padding-inline-start:1.3em; }
.article-body li{ margin-bottom:.5em; }
.article-meta{ color:var(--text-muted); font-size:.9rem; margin-bottom:2em; display:flex; gap:16px; flex-wrap:wrap;}

/* ---------- CTA band ---------- */
.cta-band{
  background:var(--bg-panel);
  padding:70px 0; text-align:center;
}
.cta-band h2{ margin-bottom:.3em; }
.cta-band p{ color:var(--text-muted); margin-bottom:1.6em; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--bg-panel); border-top:1px solid var(--line); padding:60px 0 26px; margin-top:0; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; margin-bottom:40px; }
.footer-grid h4{ font-family:'Cairo',sans-serif; font-size:1rem; margin-bottom:1em; }
.footer-grid ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.footer-grid a{ color:var(--text-muted); font-size:.94rem; }
.footer-grid a:hover{ color:var(--accent-light); }
.footer-bottom{
  border-top:1px solid var(--line); padding-top:22px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  color:var(--text-muted); font-size:.85rem;
}
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr; } }

/* ---------- WhatsApp floating button ---------- */
.wa-float{
  position:fixed; bottom:22px; inset-inline-end:22px; z-index:60;
  background:var(--accent); color:#1a1006; border-radius:50%;
  width:58px; height:58px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px rgba(230,124,15,0.45);
  transition:transform .2s ease;
}
.wa-float:hover{ transform:scale(1.08); }

/* ---------- Page hero (inner pages) ---------- */
.page-hero{
  padding:70px 0 50px; text-align:center;
  background:linear-gradient(180deg, var(--bg-panel-2), var(--bg));
  border-bottom:1px solid var(--line);
}
.page-hero p{ color:var(--text-muted); max-width:560px; margin-inline:auto; }
.breadcrumb{ font-size:.85rem; color:var(--text-muted); margin-bottom:1em; }
.breadcrumb a:hover{ color:var(--accent-light); }

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .btn, .wa-float, .service-card, .article-card{ transition:none; }
}

/* focus visibility */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--accent-light); outline-offset:3px;
}
/* Floating WhatsApp */
.floating-whatsapp{
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 60px;
    height: 60px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(37,211,102,.35);
    z-index: 9999;
    transition: all .3s ease;
    animation: whatsappPulse 2s infinite;
}

.floating-whatsapp:hover{
    transform: scale(1.08);
    box-shadow: 0 12px 35px rgba(37,211,102,.55);
}

.floating-whatsapp img{
    width: 30px;
    height: 30px;
}

@keyframes whatsappPulse{
    0%{transform:scale(1);}
    50%{transform:scale(1.08);}
    100%{transform:scale(1);}
}

@media (max-width:768px){
    .floating-whatsapp{
        width:56px;
        height:56px;
        right:18px;
        bottom:18px;
    }
}
.floating-call{
    position:fixed;
    bottom:96px;
    right:24px;
    width:60px;
    height:60px;
    background:#007AFF;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 10px 30px rgba(0,122,255,.35);
    z-index:9999;
    transition:.3s;
}

.floating-call:hover{
    transform:scale(1.08);
}

.floating-call svg{
    width:28px;
    height:28px;
}


/* ===========================================================
   Brand refresh — supplied Al Nakheel identity
   =========================================================== */
:root{
  --bg:#0A3B25;
  --bg-panel:#2A6151;
  --bg-panel-2:#174A3C;
  --accent:#D8C2A4;
  --accent-light:#FCF7F0;
  --text:#FCF7F0;
  --text-muted:#B2B7AA;
  --line:rgba(216,194,164,.18);
  --line-strong:rgba(216,194,164,.38);
  --radius:12px;
  --shadow:0 20px 60px rgba(4,28,18,.32);
}
.site-header{background:rgba(10,59,37,.94)}
.brand img{height:50px;width:50px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.btn-primary{color:#0A3B25;box-shadow:0 10px 28px rgba(216,194,164,.24)}
.btn-primary:hover{box-shadow:0 16px 38px rgba(216,194,164,.36)}
.btn-outline{background:rgba(252,247,240,.04)}
.btn-outline:hover{background:rgba(216,194,164,.1)}
.service-card,.article-card,.ticket,.offer-poster{border-radius:var(--radius)}
.service-card{border:1px solid transparent;transition:transform .22s ease,border-color .22s ease,background .22s ease}
.service-card:hover{transform:translateY(-5px);border-color:var(--line-strong)}
.article-card{transition:transform .22s ease,border-color .22s ease,background .22s ease}
.article-card:hover{transform:translateY(-5px);background:var(--bg-panel);border-color:var(--accent)}
.ticket{border:1px solid var(--line);transition:transform .22s ease,border-color .22s ease}
.ticket:hover{transform:translateY(-5px);border-color:var(--accent)}
.offer-copy{display:flex;flex-direction:column;gap:7px;min-width:0}
.ticket-title{font-size:1.05rem;color:var(--accent-light);margin:0}
.ticket .desc{color:var(--text-muted);line-height:1.75}
.offers-posters-section{background:linear-gradient(180deg,var(--bg),var(--bg-panel-2))}
.offers-posters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;align-items:start;max-width:1100px;margin-inline:auto}
.offer-poster{margin:0;overflow:hidden;border:1px solid var(--line);background:var(--bg-panel-2);box-shadow:var(--shadow)}
.offer-poster img{width:100%;height:auto;display:block;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.offer-poster:hover img{transform:scale(1.018)}
@media(max-width:720px){
  .offers-posters{grid-template-columns:1fr;gap:20px}
  .ticket{align-items:flex-start;padding:26px 22px;gap:16px}
  .ticket .price{font-size:2.15rem}
}
@media(prefers-reduced-motion:reduce){
  .offer-poster img,.service-card,.article-card,.ticket{transition:none}
}

/* BRAND_REFRESH_V2 */
:root{--bg:#0A3B25;--bg-panel:#2A6151;--bg-panel-2:#174A3C;--accent:#D8C2A4;--accent-light:#FCF7F0;--text:#FCF7F0;--text-muted:#B2B7AA;--line:rgba(216,194,164,.18);--line-strong:rgba(216,194,164,.38);--radius:12px;--shadow:0 20px 60px rgba(4,28,18,.32)}
.site-header{background:rgba(10,59,37,.94)}
.brand img{height:50px;width:50px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.btn-primary{color:#0A3B25;box-shadow:0 10px 28px rgba(216,194,164,.24)}
.btn-primary:hover{box-shadow:0 16px 38px rgba(216,194,164,.36)}
.btn-outline{background:rgba(252,247,240,.04)}.btn-outline:hover{background:rgba(216,194,164,.1)}
.service-card,.article-card,.ticket,.offer-poster{border-radius:var(--radius)}
.offers-posters-section{background:linear-gradient(180deg,var(--bg),var(--bg-panel-2))}.offers-posters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;align-items:start;max-width:1100px;margin-inline:auto}.offer-poster{margin:0;overflow:hidden;border:1px solid var(--line);background:var(--bg-panel-2);box-shadow:var(--shadow)}.offer-poster img{width:100%;height:auto;display:block;transition:transform .45s cubic-bezier(.2,.8,.2,1)}.offer-poster:hover img{transform:scale(1.018)}
@media(max-width:720px){.offers-posters{grid-template-columns:1fr;gap:20px}.ticket{align-items:flex-start;padding:26px 22px;gap:16px}.ticket .price{font-size:2.15rem}}
@media(prefers-reduced-motion:reduce){.offer-poster img,.service-card,.article-card,.ticket{transition:none}}




/* SERVICES_PREMIUM_V4 */
.home-services-section{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 40%,rgba(42,97,81,.24),transparent 38%),
    linear-gradient(180deg,#073824 0%,#052f20 100%);
}
.home-services-section::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.22;
  background-image:linear-gradient(rgba(216,194,164,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(216,194,164,.025) 1px,transparent 1px);
  background-size:36px 36px;
}
.home-services-section .container{position:relative;z-index:1;max-width:1120px}
.home-services-section .section-head{margin-bottom:38px}
.home-services-section .section-head h2{font-size:clamp(2rem,4vw,3rem);max-width:760px;margin-inline:auto;text-shadow:0 2px 20px rgba(0,0,0,.34)}
.home-services-section .section-head .muted{max-width:650px;margin-inline:auto}
.services-grid--premium{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;background:transparent;border:0}
.service-card--premium{
  position:relative;min-height:285px;padding:30px 22px 26px;text-align:center;align-items:center;justify-content:flex-start;gap:9px;
  background:linear-gradient(145deg,rgba(42,97,81,.34),rgba(5,42,28,.78));
  border:1px solid rgba(216,194,164,.26);border-radius:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 12px 34px rgba(0,0,0,.18);
}
.service-card--premium::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at 50% 18%,rgba(216,194,164,.09),transparent 34%)}
.service-card--premium:hover{transform:translateY(-7px);border-color:rgba(216,194,164,.72);background:linear-gradient(145deg,rgba(42,97,81,.5),rgba(5,42,28,.9));box-shadow:0 18px 42px rgba(0,0,0,.28),0 0 24px rgba(216,194,164,.08)}
.service-card--premium .num{position:absolute;inset-inline-end:20px;top:18px;color:#E5C66D;font-size:.95rem;font-weight:800;z-index:2}
.service-icon{width:66px;height:66px;margin:3px auto 10px;border:1px solid #D8B84D;border-radius:50%;display:grid;place-items:center;color:#E5C66D;box-shadow:0 0 0 5px rgba(216,184,77,.06),0 0 22px rgba(216,184,77,.18);z-index:2}
.service-icon svg{width:37px;height:37px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.service-card--premium h3{font-size:1.08rem;line-height:1.55;margin:0;z-index:2}
.service-title-line{width:28px;height:2px;background:#D8B84D;margin:1px auto 4px;z-index:2}
.service-card--premium p{font-size:.88rem;line-height:1.8;z-index:2;margin:0 0 16px}
.service-benefits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:24px;padding-top:20px;border-top:1px solid rgba(216,194,164,.14)}
.service-benefit{display:flex;align-items:center;justify-content:center;gap:11px;padding:5px 18px;border-inline-start:1px solid rgba(216,194,164,.28)}
.service-benefit:first-child{border-inline-start:0}
.benefit-icon{width:35px;height:35px;color:#E5C66D;flex:0 0 auto}.benefit-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.service-benefit span:last-child{display:flex;flex-direction:column;line-height:1.45}.service-benefit strong{font-size:.86rem;color:#E5C66D}.service-benefit small{font-size:.75rem;color:var(--text-muted)}
@media(max-width:980px){.services-grid--premium{grid-template-columns:repeat(2,minmax(0,1fr))}.service-benefits{grid-template-columns:repeat(2,1fr);gap:18px}.service-benefit:nth-child(3){border-inline-start:0}}
@media(max-width:560px){.services-grid--premium{grid-template-columns:1fr}.service-card--premium{min-height:250px}.service-benefits{grid-template-columns:1fr}.service-benefit{justify-content:flex-start;border-inline-start:0;border-bottom:1px solid rgba(216,194,164,.14);padding:14px 8px}.service-benefit:last-child{border-bottom:0}}
@media(prefers-reduced-motion:reduce){.service-card--premium{transition:none}}
.service-card--premium .service-read-more{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  padding:10px 22px;
  border-radius:10px;
  background:linear-gradient(135deg,#2A6151,#123F2B);
  border:1px solid rgba(216,184,77,.45);
  color:#E5C66D;
  font-family:'Cairo',sans-serif;
  font-size:.88rem;
  font-weight:700;
  line-height:1.4;
  text-decoration:none;
  transition:background .25s ease,border-color .25s ease,transform .25s ease;
}
.service-card--premium .service-read-more:hover{
  background:linear-gradient(135deg,#316F5D,#173E2D);
  border-color:#D8B84D;
}
.service-card--premium .service-read-more:focus-visible{
  outline:2px solid #E5C66D;
  outline-offset:3px;
}
@media(prefers-reduced-motion:reduce){.service-card--premium .service-read-more{transition:none}}

/* ===========================================================
   HERO — homepage (section class="hero hero-premium")
    Image: assets/images/hero.webp (optimized 2944×1408, ~2.1:1) with hero.png fallback.
   Height follows the wide image: clamp(600px, 50vw, 680px)
   keeps the 2:1 composition at typical desktop sizes; at very
   wide screens the hero switches to the image's own 2:1 aspect
   ratio so nothing is cropped. Content sits on the right half,
   the barber chair stays fully visible on the left.
   =========================================================== */
.site-header{background:rgba(3,25,18,.94);border-bottom:1px solid rgba(216,194,164,.22)}
.brand-name{color:#D8C2A4}
.site-header .btn{padding:.8em 1.65em}
.main-nav a.active::after{background:#D8C2A4}
.hero{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  isolation:isolate;
  overflow:visible; /* benefits panel overlaps the bottom edge */
  text-align:center;
  background-image:
    linear-gradient(90deg,rgba(1,13,9,.08) 0%,rgba(2,18,13,.22) 46%,rgba(2,18,13,.5) 100%),
    image-set(
      url('../images/hero.webp') type('image/webp') 1x,
      url('../images/hero.png') type('image/png') 1x
    );
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  height:clamp(480px,40vw,544px); /* 20% shorter */
  padding:56px 0 120px; /* bottom padding clears the overlapping benefits panel */
}
.hero-shell{ width:100%; }

.hero-content{
  width:min(680px,58%);
  margin-left:auto; /* RTL: pushes content to the physical right half */
  text-align:center;
  text-shadow:0 3px 24px rgba(0,0,0,.62);
}
.hero .kicker{
  font-family:'Cairo',sans-serif;
  font-size:.83rem;
  letter-spacing:1.3px;
  color:#D8C2A4;
  margin-bottom:7px;
}
.hero-ornament,.hero-title-mark{
  display:flex; align-items:center; justify-content:center; gap:10px;
  color:#D8B84D; margin:2px auto 10px;
}
.hero-ornament span{ width:86px; height:1px; background:linear-gradient(90deg,transparent,#D8B84D); }
.hero-ornament span:last-child{ background:linear-gradient(90deg,#D8B84D,transparent); }
.hero-ornament svg{ width:25px; height:20px; fill:none; stroke:currentColor; stroke-width:1.4; }
.hero h1{
  font-size:clamp(2.4rem,3.5vw,3.1rem);
  line-height:1.2;
  max-width:680px;
  margin-inline:auto;
}
.hero h1 strong{ display:block; color:#E4C57D; font-weight:800; }
.hero-title-mark{ gap:0; margin:-4px auto 14px; }
.hero-title-mark span{ width:80px; height:1px; background:#D8B84D; }
.hero-title-mark i{ width:7px; height:7px; border:1px solid #D8B84D; transform:rotate(45deg); margin:0 7px; }
.hero .lead{
  max-width:650px;
  font-size:1.02rem;
  line-height:2;
  margin:0 auto 18px;
  color:#F8F3EA;
}
.hero-actions{ justify-content:center; margin-bottom:14px; }
.hero-actions .btn{ min-width:205px; gap:10px; }
.hero-actions svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.hero .address-chip{
  display:inline-flex; padding:.62em 1.6em;
  background:rgba(4,38,25,.62);
  border-color:rgba(216,194,164,.55);
  color:#E9D9B9;
}
.hero .address-chip svg{ width:18px; height:18px; fill:none; stroke:#D8B84D; stroke-width:1.7; }

/* Entry animation */
.hero .kicker,.hero h1,.hero .lead,.hero .btn-row,.hero .address-chip{ animation:hero-enter .7s both cubic-bezier(.2,.8,.2,1); }
.hero h1{ animation-delay:.08s; }
.hero .lead{ animation-delay:.14s; }
.hero .btn-row{ animation-delay:.2s; }
.hero .address-chip{ animation-delay:.26s; }
@keyframes hero-enter{ from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }

/* Benefits panel — overlaps the hero's bottom edge, absolute (out of flow) */
.hero-benefits{
  position:absolute;
  z-index:3;
  bottom:0;
  left:50%;
  right:auto;
  margin:0;
  transform:translate(-50%,-170px); /* raised high; caps below keep it clear of the CTA buttons */
  width:min(1080px,calc(100% - 48px));
  max-width:1080px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  background:rgba(4,37,25,.94);
  border:1px solid rgba(216,194,164,.4);
  border-radius:18px;
  box-shadow:0 18px 50px rgba(0,0,0,.38);
  backdrop-filter:blur(14px);
  overflow:hidden;
}
.hero-benefit{
  display:flex; align-items:center; justify-content:center; gap:13px;
  padding:24px 18px;
  border-inline-start:1px solid rgba(216,194,164,.22);
  text-align:right;
}
.hero-benefit:first-child{ border-inline-start:0; }
.hero-benefit>svg{ width:39px; height:39px; flex:0 0 auto; fill:none; stroke:#E0BE62; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.hero-benefit span{ display:flex; flex-direction:column; line-height:1.5; }
.hero-benefit strong{ font-size:.9rem; color:#E6C96F; }
.hero-benefit small{ font-size:.76rem; color:#D9D7CB; }

/* The section after the hero must clear the overlapping benefits panel */
.hero+section{ padding-top:100px; }

/* Wide screens: match the image's natural 2:1 ratio, no cropping */
@media(min-width:1500px){
  .hero{
    height:auto;
    aspect-ratio:2.5/1; /* 20% shorter too */
    background-position:center center;
  }
}

/* Raise caps: the panel can only float high where the hero is tall enough.
   Below 1700px it stays overlapping the hero's bottom edge so it never
   covers the heading / CTA buttons / address chip. */
@media(max-width:1699px){ .hero-benefits{ transform:translate(-50%,25%); } }
@media(min-width:1700px) and (max-width:1899px){ .hero-benefits{ transform:translate(-50%,0); } }
@media(min-width:1900px){
  .hero-benefits{ transform:translate(-50%,-80px); }
}

/* Small desktops / tablets: slightly more compact content */
@media(max-width:1150px){
  .hero h1{ font-size:clamp(2.3rem,4vw,3.2rem); }
  .hero .lead{ font-size:.96rem; line-height:1.9; }
}
@media(max-width:900px){
  .hero-content{ width:min(640px,82%); }
}

/* Mobile (authoritative block — stacked CTAs, centered chip, 2×2 benefits panel).
   Desktop hero rules above are untouched; nothing below may re-declare these
   selectors outside this block and the hover/360 helpers that follow. */
@media(max-width:620px){
  .hero{
    position:relative;
    min-height:0;
    height:auto;
    padding:80px 20px 235px;
    overflow:visible;
    z-index:2;
    background-position:28% center; /* keeps the chair / interior */
  }
  .hero-shell{
    width:100%;
    max-width:100%;
    margin-inline:auto;
    padding-inline:0;
  }
  .hero-content{
    position:relative;
    z-index:4;
    width:100%;
    max-width:100%;
    margin-inline:auto;
    text-align:center;
  }
  .hero h1{
    max-width:100%;
    margin-inline:auto;
    font-size:clamp(2rem,9vw,2.45rem);
    line-height:1.35;
    overflow-wrap:normal;
    word-break:normal;
  }
  .hero .lead{
    width:100%;
    max-width:350px;
    margin:0 auto 22px;
    font-size:.92rem;
    line-height:1.95;
  }
  .hero-actions,
  .hero .btn-row{
    position:relative;
    z-index:5;
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    align-items:center;
    justify-content:center;
    width:100%;
    max-width:100%;
    gap:14px;
    margin:24px auto 18px;
    padding:0;
  }
  .hero-actions .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:min(100%,280px);
    min-width:0;
    max-width:280px;
    min-height:60px;
    margin:0;
    padding:14px 20px;
    box-sizing:border-box;
    border-radius:999px;
    white-space:normal;
    text-align:center;
    line-height:1.45;
    transform:none;
  }
  .hero-actions svg{
    width:20px;
    height:20px;
    flex:0 0 auto;
  }
  .hero .address-chip{
    position:relative;
    z-index:5;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:min(100%,260px);
    max-width:260px;
    min-height:48px;
    margin:0 auto;
    padding:10px 16px;
    box-sizing:border-box;
    white-space:normal;
    text-align:center;
    line-height:1.5;
  }
  .hero .address-chip svg{
    width:18px;
    height:18px;
    flex:0 0 auto;
  }
  .hero-benefits{
    position:absolute;
    z-index:20;
    right:auto;
    left:50%;
    bottom:0;
    width:calc(100% - 28px);
    max-width:430px;
    margin:0;
    padding:0;
    transform:translate(-50%,50%);
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    overflow:hidden;
    border-radius:18px;
  }
  .hero-benefit{
    min-width:0;
    min-height:105px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:14px 8px;
  }
  .hero-benefit>svg{
    width:30px;
    height:30px;
    flex:0 0 auto;
  }
  .hero-benefit span{ min-width:0; }
  .hero-benefit strong{
    display:block;
    font-size:.72rem;
    line-height:1.55;
    white-space:normal;
  }
  .hero-benefit small{
    display:block;
    font-size:.64rem;
    line-height:1.5;
    white-space:normal;
  }
  /* The next section must reserve space for the panel that overlaps the hero's bottom edge */
  .hero+section{
    position:relative;
    z-index:1;
    padding-top:190px;
  }
}
@media(max-width:360px){
  .hero{ padding-inline:14px; }
  .hero-actions .btn,
  .hero .address-chip{
    width:100%;
    max-width:270px;
  }
  .hero-benefits{ width:calc(100% - 20px); }
}
@media(hover:none){
  .hero-actions .btn:hover,
  .hero .address-chip:hover{ transform:none; }
  .hero-actions .btn:active{ transform:scale(.97); }
}

@media(prefers-reduced-motion:reduce){
  .hero .kicker,.hero h1,.hero .lead,.hero .btn-row,.hero .address-chip{ animation:none; }
}


/* PACKAGE_CARDS_REFERENCE_DESIGN_V3 */
.packages-showcase-section{
  background:#FCF7F0;
  color:#102f24;
}
.packages-showcase-section .section-head h2,
.packages-showcase-section .package-category-title{color:#102f24}
.packages-showcase-section .muted{color:#617068}
.packages-showcase-section .eyebrow{color:#9B783F}
.packages-showcase-section .eyebrow::before{background:#B99655}
.package-category-group + .package-category-group{margin-top:72px}
.package-category-title{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 24px;
  font-size:1.3rem;
}
.package-category-line{
  display:inline-block;
  width:34px;
  height:2px;
  flex:0 0 34px;
  background:#C39C52;
}
.package-category-label{
  display:inline-flex;
  align-items:baseline;
  flex-wrap:wrap;
  direction:rtl;
}
.package-category-label .reveal-word + .reveal-word{
  margin-inline-start:.28em;
}
.packages-design-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:34px 28px;
  align-items:stretch;
}
.packages-design-grid--four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1150px){.packages-design-grid--four{grid-template-columns:repeat(2,minmax(0,1fr))}}
.package-card{
  --notch-bg:#FCF7F0;
  --circle-bg:#D8C2A4;
  min-width:0;
  color:#15392b;
  display:flex;
  flex-direction:column;
  height:100%;
}
.home-packages-grid .package-card{
  --notch-bg:var(--bg-panel-2);
  color:var(--text);
}
.package-card--vip{--circle-bg:#B99655}
.package-card-inner{
  position:relative;
  height:300px;
  background:var(--notch-bg);
  border-radius:22px;
  border-bottom-right-radius:0;
  overflow:hidden;
  box-shadow:0 16px 38px rgba(5,35,24,.14);
}
.package-image-box{
  position:absolute;
  inset:0;
  border-radius:22px;
  overflow:hidden;
  background:#143b2d;
}
.package-image-box::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 48%,rgba(3,20,13,.28));
  pointer-events:none;
}
.package-image-box img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .45s cubic-bezier(.2,.8,.2,1);
}
.package-card:nth-child(2n) .package-image-box img{object-position:65% center}
.package-card:nth-child(3n) .package-image-box img{object-position:35% center}
.package-card.package-card--diamond .package-image-box img{object-position:70% center}
.package-card:hover .package-image-box img{transform:scale(1.045)}
.package-icon-wrap{
  position:absolute;
  bottom:0;
  right:0;
  width:96px;
  height:96px;
  background:var(--notch-bg);
  border-top-left-radius:50%;
}
.package-icon-wrap::before{
  content:"";
  position:absolute;
  bottom:0;
  left:-20px;
  width:20px;
  height:20px;
  background:transparent;
  border-bottom-right-radius:20px;
  box-shadow:5px 5px 0 5px var(--notch-bg);
}
.package-icon-wrap::after{
  content:"";
  position:absolute;
  top:-20px;
  right:0;
  width:20px;
  height:20px;
  background:transparent;
  border-bottom-right-radius:20px;
  box-shadow:5px 5px 0 5px var(--notch-bg);
}
.package-icon-box{
  position:absolute;
  inset:10px;
  z-index:1;
  display:flex;
  justify-content:center;
  align-items:center;
  border-radius:50%;
  background:var(--circle-bg);
  color:#0A3B25;
  border:1px solid rgba(10,59,37,.16);
  box-shadow:0 8px 20px rgba(0,0,0,.18);
  transition:transform .25s ease,background .25s ease;
}
.package-icon-box svg{width:29px;height:29px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.package-card:hover .package-icon-box{transform:scale(1.08) rotate(-4deg);background:#E7D4B8}
.package-card-content{display:flex;flex-direction:column;flex:1;min-width:0;padding:18px 7px 0}
.package-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.package-title-row h3{font-size:clamp(1.2rem,1.5vw,1.55rem);margin:0;color:inherit}
.package-price{display:flex;align-items:baseline;gap:5px;color:#98723A;white-space:nowrap}
.home-packages-grid .package-price{color:#E4C57D}
.package-price b{font-size:1.55rem;line-height:1}.package-price small{font-size:.72rem}
.package-card-content p{margin:9px 0 17px;color:#5B665F;font-size:.9rem;line-height:1.8;min-height:58px}
.home-packages-grid .package-card-content p{color:var(--text-muted)}
.package-card-actions{margin-top:auto;padding-top:20px}
.package-tags{list-style:none;margin:0;padding:0;display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.package-tag{font-size:.7rem;font-weight:700;padding:6px 10px;border-radius:5px;color:#17382c;background:#D8C2A4}
.package-tag--booking{background:#A9C9B8}.package-card--vip .package-tag--category{background:#D6B76C}
.home-packages-grid .package-tag{color:#0A3B25}
.home-packages-section .packages-design-grid{margin-top:12px}
.home-packages-section .package-card-inner{height:270px}
@media(max-width:980px){
  .packages-design-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  /* Grid: one card per row, balanced margins */
  .packages-design-grid{grid-template-columns:1fr;gap:42px;width:100%;max-width:430px;margin-inline:auto}
  /* Image: proportional, responsive, no distortion */
  .package-card-inner,.home-packages-section .package-card-inner{width:100%;height:auto;aspect-ratio:16/11;min-height:230px;max-height:280px}
  .package-image-box img{width:100%;height:100%;object-fit:cover;object-position:center}
  /* Circular arrow: smaller but still easy to tap (64px target) */
  .package-icon-wrap{width:82px;height:82px}
  .package-icon-box{inset:9px;min-width:64px;min-height:64px}
  .package-icon-box svg{width:25px;height:25px}
  /* Content: title + price on one row when they fit, wrap below when not */
  .package-card-content{padding:16px 4px 0}
  .package-title-row{flex-wrap:wrap;gap:12px}
  .package-title-row h3{font-size:clamp(1.08rem,5vw,1.3rem);line-height:1.45;margin:0;max-width:68%}
  .package-price{margin-inline-start:auto}
  .package-price b{font-size:1.4rem}
  .package-card-content p{min-height:0;margin:10px 0 14px;font-size:.86rem;line-height:1.85}
  /* Tags: compact, no overflow */
  .package-tags{flex-wrap:wrap;gap:7px}
  .package-tag{padding:6px 9px;font-size:.68rem;line-height:1.4}
  /* Mobile: natural card heights, no stretched empty gaps */
  .package-card{height:auto}
  .package-card-actions{margin-top:20px;padding-top:0}
  /* Section spacing */
  .packages-showcase-section{padding-block:70px}
  .package-category-group + .package-category-group{margin-top:58px}
  .package-category-title{margin-bottom:22px;font-size:1.2rem}
  .package-category-label .reveal-word + .reveal-word{margin-inline-start:.24em}
  .home-packages-section .section-head{margin-bottom:34px}
  /* Posters: full width, never cropped */
  .offers-posters{grid-template-columns:1fr;gap:18px}
  .offer-poster img{width:100%;height:auto;object-fit:contain}
}
@media(prefers-reduced-motion:reduce){
  .package-image-box img,.package-icon-box{transition:none}
}
/* Touch devices: no hover zoom, subtle tap feedback */
@media(hover:none){
  .package-card:hover .package-image-box img{transform:none}
  .package-icon-box:active{transform:scale(.94)}
}


/* SCROLL_TEXT_REVEAL_V1 */
.scroll-text-reveal{
  position:relative;
}
.scroll-text-reveal .reveal-word{
  display:inline-block;
  transform-origin:50% 100%;
}
.text-reveal-ready .reveal-word{
  opacity:0;
  filter:blur(4px);
  transform:translateY(.95em) scale(.3) rotate(3deg);
  will-change:transform,opacity,filter;
}
.text-reveal-ready.is-revealed .reveal-word{
  animation:text-reveal-bounce 1.3s both cubic-bezier(.18,.82,.25,1.08);
  animation-delay:calc(var(--word-index) * 90ms);
}
.hero h1.text-reveal-ready{
  animation:none;
}
@keyframes text-reveal-bounce{
  0%{opacity:0;filter:blur(6px);transform:translateY(.95em) scale(.3) rotate(3deg)}
  58%{opacity:1;filter:blur(0);transform:translateY(-.08em) scale(1.07) rotate(-.4deg)}
  78%{opacity:1;filter:blur(0);transform:translateY(.025em) scale(.98) rotate(0)}
  100%{opacity:1;filter:blur(0);transform:translateY(0) scale(1) rotate(0)}
}
@media(max-width:620px){
  .text-reveal-ready.is-revealed .reveal-word{
    animation-duration:1.1s;
    animation-delay:calc(var(--word-index) * 70ms);
  }
}
@media(prefers-reduced-motion:reduce){
  .text-reveal-ready .reveal-word,
  .text-reveal-ready.is-revealed .reveal-word{
    opacity:1;
    filter:none;
    transform:none;
    animation:none;
    will-change:auto;
  }
}