/* ==========================================================================
   JUMANA BEAUTY — Core Design System
   Editorial Luxury Beauty · West Amman, Jordan
   Built by Joe Design Group — joedesigngroup.com
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=El+Messiri:wght@400;500;600;700&family=Tajawal:wght@300;400;500;700;800&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,700&display=swap');

/* -------------------------------------------------------------------------
   1. DESIGN TOKENS
   ------------------------------------------------------------------------- */
:root{
  /* Palette — warm ivory / champagne / deep espresso (from Jumana Beauty mark) */
  --ivory:        #FAF5EE;
  --ivory-deep:   #F1E4D6;
  --blush:        #F2DCD2;
  --blush-soft:   #F7E9E1;
  --paper:        #FFFEFC;
  --espresso:     #2B1D15;
  --espresso-70:  rgba(43,29,21,.72);
  --espresso-45:  rgba(43,29,21,.45);
  --ink-soft:     #5C4A3D;
  --gold:         #C9A876;
  --gold-deep:    #A67C4E;
  --gold-pale:    #E7D3B4;
  --line:         rgba(43,29,21,.13);
  --line-soft:    rgba(43,29,21,.07);
  --white:        #FFFFFF;

  /* Type stacks */
  --font-ar-display: 'El Messiri', 'Cormorant Garamond', serif;
  --font-ar-body:     'Tajawal', 'DM Sans', sans-serif;
  --font-en-display:  'Cormorant Garamond', 'El Messiri', serif;
  --font-en-body:     'DM Sans', 'Tajawal', sans-serif;

  /* Rhythm */
  --section-y: clamp(5rem, 9vw, 9rem);
  --section-y-lg: clamp(6rem, 12vw, 12rem);
  --container: 1280px;
  --container-narrow: 860px;
  --radius-lg: 2.25rem;
  --radius-md: 1.25rem;
  --radius-sm: .65rem;
  --ease-lux: cubic-bezier(.22,.72,0,1);
  --ease-soft: cubic-bezier(.32,.72,0,1);
}

/* -------------------------------------------------------------------------
   2. RESET / BASE
   ------------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}
body{
  margin:0;
  background:var(--ivory);
  color:var(--espresso);
  font-family:var(--font-ar-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}
html[lang="en"] body{ font-family:var(--font-en-body); }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; cursor:pointer; }
input, textarea, select{ font:inherit; }
h1,h2,h3,h4,p,figure{ margin:0; }

/* Logical-property base so RTL/LTR share one stylesheet */
[dir="rtl"] body{ font-family:var(--font-ar-body); }
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] .disp{ font-family:var(--font-ar-display); }
[dir="ltr"] h1,[dir="ltr"] h2,[dir="ltr"] h3,[dir="ltr"] .disp{ font-family:var(--font-en-display); font-style:italic; font-weight:500; }
[dir="ltr"] h1 em,[dir="ltr"] h2 em,[dir="ltr"] .disp em{ font-style:italic; color:var(--gold-deep); }

/* film-grain ambience, fixed so it never repaints on scroll */
body::before{
  content:"";
  position:fixed; inset:0; z-index:60; pointer-events:none;
  opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------------------------
   3. TYPOGRAPHY
   ------------------------------------------------------------------------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--font-en-body);
  font-size:.72rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold-deep);
}
[dir="rtl"] .eyebrow{ font-family:var(--font-ar-body); letter-spacing:.06em; }
.eyebrow::before{ content:""; width:2rem; height:1px; background:var(--gold-deep); display:inline-block; }

h1{ font-size:clamp(2.6rem, 5.2vw, 5rem); line-height:1.08; font-weight:600; letter-spacing:-.01em; }
h2{ font-size:clamp(2.1rem, 3.4vw, 3.4rem); line-height:1.14; font-weight:600; letter-spacing:-.01em; }
h3{ font-size:clamp(1.4rem, 2vw, 1.9rem); line-height:1.25; font-weight:600; }
h4{ font-size:1.15rem; font-weight:700; }
p{ color:var(--espresso-70); font-size:1.03rem; }
.lead{ font-size:clamp(1.1rem,1.6vw,1.35rem); color:var(--ink-soft); line-height:1.7; }
.max-measure{ max-width:62ch; }

/* -------------------------------------------------------------------------
   4. LAYOUT
   ------------------------------------------------------------------------- */
.wrap{ max-width:var(--container); margin-inline:auto; padding-inline:clamp(1.25rem, 4vw, 3rem); }
.wrap-narrow{ max-width:var(--container-narrow); margin-inline:auto; padding-inline:clamp(1.25rem, 4vw, 3rem); }
main{ overflow-x:clip; }
section{ position:relative; }
.section-pad{ padding-block:var(--section-y); }
.section-pad-lg{ padding-block:var(--section-y-lg); }
.bg-deep{ background:var(--espresso); color:var(--ivory); }
.bg-deep p{ color:rgba(250,245,238,.72); }
.bg-alt{ background:var(--ivory-deep); }
.bg-blush{ background:var(--blush-soft); }

.grid{ display:grid; gap:clamp(1.25rem, 2.4vw, 2.25rem); }
.g2{ grid-template-columns:repeat(2,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
.g4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:980px){ .g3,.g4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .g2,.g3,.g4{ grid-template-columns:1fr; } }

.divider{ height:1px; background:var(--line); border:0; margin:0; }

/* -------------------------------------------------------------------------
   5. NAVIGATION — floating glass pill
   ------------------------------------------------------------------------- */
.site-header{ position:fixed; inset-inline:0; top:0; z-index:50; display:flex; justify-content:center; padding-top:1.1rem; pointer-events:none; }
.nav-pill{
  pointer-events:auto;
  width:min(94vw, 1180px);
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:nowrap;
  overflow:hidden;
  gap:1.5rem;
  padding:.55rem .6rem .55rem 1.4rem;
  background:rgba(250,245,238,.72);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid rgba(43,29,21,.09);
  border-radius:100px;
  box-shadow:0 1px 1px rgba(43,29,21,.04), 0 18px 40px -22px rgba(43,29,21,.35);
  transition:box-shadow .5s var(--ease-soft), background .5s var(--ease-soft), transform .5s var(--ease-soft);
}
[dir="rtl"] .nav-pill{ padding:.55rem 1.4rem .55rem .6rem; }
.site-header.is-scrolled .nav-pill{ box-shadow:0 1px 1px rgba(43,29,21,.06), 0 22px 46px -20px rgba(43,29,21,.42); background:rgba(250,245,238,.92); }

.brand{ display:flex; align-items:center; gap:.65rem; }
.brand img{ height:34px; width:auto; }
.brand span{ font-family:var(--font-ar-display); font-size:1rem; letter-spacing:.02em; color:var(--espresso); }
[dir="ltr"] .brand span{ font-family:var(--font-en-display); font-style:italic; }

.nav-links{ display:flex; align-items:center; gap:clamp(1rem,2vw,2rem); flex-wrap:nowrap; }
.nav-links a{ font-size:.9rem; font-weight:500; color:var(--espresso-70); position:relative; padding-block:.3rem; white-space:nowrap; }
.nav-links a::after{ content:""; position:absolute; inset-inline-start:0; bottom:0; height:1px; width:0; background:var(--gold-deep); transition:width .4s var(--ease-soft); }
.nav-links a:hover{ color:var(--espresso); }
.nav-links a:hover::after{ width:100%; }

.nav-actions{ display:flex; align-items:center; gap:.6rem; }
.lang-switch{ display:flex; align-items:center; gap:.35rem; font-size:.78rem; font-weight:700; letter-spacing:.03em; color:var(--ink-soft); border:1px solid var(--line); border-radius:100px; padding:.4rem .85rem; }
.lang-switch a{ opacity:.5; transition:opacity .3s; }
.lang-switch a.active{ opacity:1; color:var(--espresso); }
.lang-switch span{ opacity:.35; }

.nav-toggle{ display:none; }

/* Mobile drawer — hidden by default at every viewport; media query below only
   handles the toggle button and in-drawer stagger animation, not visibility. */
.mobile-menu{
  position:fixed; inset:0; z-index:45;
  background:rgba(43,29,21,.97);
  backdrop-filter:blur(30px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.6rem;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .55s var(--ease-lux), visibility 0s linear .55s;
}
.mobile-menu.is-open{ opacity:1; visibility:visible; pointer-events:auto; transition:opacity .55s var(--ease-lux); }
.mobile-menu a{ font-family:var(--font-ar-display); font-size:1.9rem; color:var(--ivory); opacity:0; transform:translateY(28px); transition:transform .6s var(--ease-lux), opacity .6s var(--ease-lux); }
[dir="ltr"] .mobile-menu a{ font-family:var(--font-en-display); font-style:italic; }
.mobile-menu.is-open a{ opacity:1; transform:translateY(0); }
.mobile-menu a:nth-child(1){ transition-delay:.08s; }
.mobile-menu a:nth-child(2){ transition-delay:.14s; }
.mobile-menu a:nth-child(3){ transition-delay:.2s; }
.mobile-menu a:nth-child(4){ transition-delay:.26s; }
.mobile-menu a:nth-child(5){ transition-delay:.32s; }
.mobile-menu a:nth-child(6){ transition-delay:.38s; }
.mobile-menu a:nth-child(7){ transition-delay:.44s; }
.mobile-menu .mm-cta{ margin-top:.5rem; }

@media (max-width:1120px){
  .nav-links{ display:none; }
  .nav-toggle{
    display:flex; align-items:center; justify-content:center;
    width:2.6rem; height:2.6rem; border-radius:50%;
    background:var(--espresso); position:relative; z-index:2;
  }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
    content:""; position:absolute; width:16px; height:1.5px; background:var(--ivory);
    transition:transform .45s var(--ease-lux), opacity .3s;
  }
  .nav-toggle span::before{ transform:translateY(-6px); }
  .nav-toggle span::after{ transform:translateY(6px); }
  .nav-toggle.is-open span{ background:transparent; }
  .nav-toggle.is-open span::before{ transform:rotate(45deg); }
  .nav-toggle.is-open span::after{ transform:rotate(-45deg); }
}

/* -------------------------------------------------------------------------
   6. BUTTONS — pill + button-in-button trailing icon
   ------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:.85rem;
  padding:.5rem .5rem .5rem 1.5rem;
  border-radius:100px; font-size:.92rem; font-weight:700;
  transition:transform .5s var(--ease-lux), background .4s, box-shadow .4s;
  white-space:nowrap;
}
[dir="rtl"] .btn{ padding:.5rem 1.5rem .5rem .5rem; }
.btn .btn-icon{
  width:2.6rem; height:2.6rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition:transform .5s var(--ease-lux);
}
.btn-icon svg{ width:1.05rem; height:1.05rem; flex-shrink:0; display:block; }
.btn-sm .btn-icon svg{ width:.85rem; height:.85rem; }
.btn:active{ transform:scale(.97); }
.btn:hover .btn-icon{ transform:translateX(3px) rotate(0deg); }
[dir="rtl"] .btn:hover .btn-icon{ transform:translateX(-3px); }
[dir="rtl"] .btn-icon svg.i-fwd{ transform:scaleX(-1); }

.btn-gold{ background:var(--espresso); color:var(--ivory); }
.btn-gold .btn-icon{ background:var(--gold); color:var(--espresso); }
.btn-gold:hover{ box-shadow:0 18px 34px -14px rgba(43,29,21,.5); }

.btn-ghost{ background:transparent; color:var(--espresso); border:1px solid var(--line); padding-inline-end:1.5rem; }
.btn-ghost .btn-icon{ background:var(--espresso-45); background:rgba(43,29,21,.06); color:var(--espresso); }
.btn-ghost:hover{ border-color:var(--gold-deep); }

.btn-light{ background:var(--ivory); color:var(--espresso); }
.btn-light .btn-icon{ background:var(--gold); color:var(--espresso); }

.btn-sm{ padding:.35rem .35rem .35rem 1.1rem; font-size:.82rem; }
[dir="rtl"] .btn-sm{ padding:.35rem 1.1rem .35rem .35rem; }
.btn-sm .btn-icon{ width:2.1rem; height:2.1rem; }

.btn-row{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem; }

/* -------------------------------------------------------------------------
   7. HERO
   ------------------------------------------------------------------------- */
.hero{ position:relative; min-height:100dvh; display:flex; align-items:center; padding-top:8rem; padding-bottom:4rem; overflow:hidden; }
.hero-full-bg{
  justify-content:center; text-align:center;
  background-image:url('/assets/images/hero-desktop.webp');
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
@media (max-width:767px){
  .hero-full-bg{ background-image:url('/assets/images/hero-mobile.webp'); }
}
.hero-full-bg .hero-content{ position:relative; z-index:2; }
.hero-bg-video{
  display:block; position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover; object-position:center;
}
.hero-full-bg .eyebrow,
.hero-full-bg h1,
.hero-full-bg .lead,
.hero-full-bg .hero-trust div,
.hero-full-bg .breadcrumbs{
  text-shadow:
    0 0 4px rgba(250,245,238,.95),
    0 0 14px rgba(250,245,238,.9),
    0 0 30px rgba(250,245,238,.8),
    0 0 54px rgba(250,245,238,.6),
    0 2px 5px rgba(250,245,238,.95);
}
.hero-content{ max-width:40rem; margin-inline:auto; display:flex; flex-direction:column; align-items:center; }
.hero-content .btn-row, .hero-content .hero-trust{ justify-content:center; }
.hero-logo{ width:min(230px, 48vw); height:auto; margin-block:1.3rem 1.5rem; filter:drop-shadow(0 16px 32px rgba(43,29,21,.16)); }
.hero-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,5rem); align-items:center;
  width:100%;
}
[dir="rtl"] .hero-grid{ direction:rtl; }
.hero-copy{ max-width:34rem; }
.hero-copy h1{ margin-block:1.1rem 1.4rem; }
.hero-copy h1 .accent{ color:var(--gold-deep); }
.hero-trust{ display:flex; flex-wrap:wrap; gap:1.6rem; margin-top:2.6rem; padding-top:2rem; border-top:1px solid var(--line); }
.hero-trust div{ display:flex; align-items:center; gap:.6rem; font-size:.83rem; font-weight:600; color:var(--ink-soft); }
.hero-trust svg{ width:1.15rem; height:1.15rem; color:var(--gold-deep); flex-shrink:0; }

.hero-visual{ position:relative; }
.hero-frame{
  position:relative; border-radius:var(--radius-lg);
  background:linear-gradient(160deg,var(--blush) 0%, var(--gold-pale) 100%);
  padding:.6rem;
  box-shadow:0 40px 80px -30px rgba(43,29,21,.35);
}
.hero-frame-inner{
  border-radius:calc(var(--radius-lg) - .5rem);
  aspect-ratio:4/5; overflow:hidden; position:relative;
  background:
    radial-gradient(120% 90% at 30% 0%, rgba(255,255,255,.55), transparent 55%),
    linear-gradient(150deg,#E9D3BE 0%, #D9B98F 45%, #C79E71 100%);
}
.hero-frame-inner .mono-mark{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:.9; }
.hero-frame-inner .mono-mark svg{ width:46%; height:46%; color:rgba(43,29,21,.28); }
.hero-badge{
  position:absolute; bottom:-1.6rem; inset-inline-start:-1.6rem;
  background:var(--espresso); color:var(--ivory);
  border-radius:var(--radius-md); padding:1.15rem 1.4rem;
  box-shadow:0 22px 44px -20px rgba(43,29,21,.5);
  display:flex; align-items:center; gap:.9rem; max-width:15rem;
}
.hero-badge svg{ width:1.9rem; height:1.9rem; color:var(--gold); flex-shrink:0; }
.hero-badge b{ display:block; font-family:var(--font-ar-display); font-size:1rem; }
[dir="ltr"] .hero-badge b{ font-family:var(--font-en-display); font-style:italic; }
.hero-badge small{ display:block; font-size:.72rem; color:rgba(250,245,238,.6); margin-top:.15rem; }

@media (max-width:940px){
  .hero{ padding-top:7rem; }
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; max-width:22rem; margin-inline:auto; }
  .hero-copy{ max-width:none; text-align:center; margin-inline:auto; }
  .hero-trust{ justify-content:center; }
  .btn-row{ justify-content:center; }
  .hero-badge{ inset-inline-start:50%; transform:translateX(-50%); bottom:-1.4rem; }
  [dir="rtl"] .hero-badge{ transform:translateX(50%); }
}

/* -------------------------------------------------------------------------
   8. DOUBLE-BEZEL CARDS
   ------------------------------------------------------------------------- */
.bezel{
  background:rgba(43,29,21,.045);
  border:1px solid var(--line-soft);
  border-radius:var(--radius-lg);
  padding:.55rem;
}
.bezel-inner{
  background:var(--paper);
  border-radius:calc(var(--radius-lg) - .45rem);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
  height:100%;
}

/* Service card */
.svc-card{ display:block; position:relative; height:100%; }
.svc-card .bezel{ transition:transform .6s var(--ease-lux), box-shadow .6s var(--ease-lux); }
.svc-card:hover .bezel{ transform:translateY(-6px); box-shadow:0 26px 48px -26px rgba(43,29,21,.35); }
.svc-media{
  aspect-ratio:5/4; border-radius:calc(var(--radius-lg) - .45rem) calc(var(--radius-lg) - .45rem) 0 0;
  overflow:hidden; position:relative;
  background:linear-gradient(155deg,#EFE0CE, #DEC29B);
}
.svc-media .mono-mark svg{ width:38%; height:38%; color:rgba(43,29,21,.22); }
.svc-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(43,29,21,.28), transparent 55%); }
.svc-card:hover .svc-media img{ transform:scale(1.06); }
.svc-media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-lux); }
.svc-body{ padding:1.5rem 1.6rem 1.7rem; }
.svc-body h3{ margin-bottom:.5rem; }
.svc-body p{ font-size:.92rem; margin-bottom:1.1rem; }
.svc-link{ display:inline-flex; align-items:center; gap:.45rem; font-size:.82rem; font-weight:700; color:var(--gold-deep); }
.svc-link svg{ width:1rem; height:1rem; transition:transform .4s var(--ease-soft); }
.svc-card:hover .svc-link svg{ transform:translateX(4px); }
[dir="rtl"] .svc-card:hover .svc-link svg{ transform:translateX(-4px) scaleX(-1); }
[dir="rtl"] .svc-link svg{ transform:scaleX(-1); }

/* Bento services grid — gapless, mathematically interlocked */
.svc-bento{ display:grid; grid-template-columns:repeat(6,1fr); gap:1.5rem; }
.svc-bento .svc-card{ grid-column:span 2; }
.svc-bento .svc-card.wide{ grid-column:span 3; }
.svc-bento .svc-card.wide .svc-media{ aspect-ratio:16/10; }
@media (max-width:980px){
  .svc-bento{ grid-template-columns:repeat(2,1fr); }
  .svc-bento .svc-card, .svc-bento .svc-card.wide{ grid-column:span 1; }
}
@media (max-width:640px){
  .svc-bento{ grid-template-columns:1fr; }
}

/* -------------------------------------------------------------------------
   9. SECTION HEAD
   ------------------------------------------------------------------------- */
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; margin-bottom:clamp(2.5rem,5vw,4rem); }
.sec-head .eyebrow{ margin-bottom:.9rem; }
.sec-head .sh-text{ max-width:42rem; }
.sec-head p{ margin-top:1rem; }
@media (max-width:760px){ .sec-head{ flex-direction:column; align-items:flex-start; } }

/* -------------------------------------------------------------------------
   10. WHY / FEATURE LIST
   ------------------------------------------------------------------------- */
.feat-row{ display:flex; gap:1.25rem; padding-block:1.75rem; border-top:1px solid var(--line); }
.feat-row:last-child{ border-bottom:1px solid var(--line); }
.feat-num{ font-family:var(--font-en-display); font-style:italic; font-size:1.4rem; color:var(--gold-deep); flex-shrink:0; width:2.5rem; }
.feat-row h4{ margin-bottom:.35rem; }
.feat-row p{ font-size:.94rem; margin:0; }

/* -------------------------------------------------------------------------
   11. PROCESS STEPS
   ------------------------------------------------------------------------- */
.process-track{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:1.75rem; }
.process-track::before{ content:""; position:absolute; top:1.35rem; inset-inline:2rem; height:1px; background:var(--line); }
@media (max-width:860px){ .process-track{ grid-template-columns:1fr; gap:2.25rem; } .process-track::before{ display:none; } }
.process-step{ position:relative; }
.process-mark{ width:2.7rem; height:2.7rem; border-radius:50%; background:var(--espresso); color:var(--ivory); display:flex; align-items:center; justify-content:center; font-family:var(--font-en-display); font-style:italic; font-size:1.05rem; margin-bottom:1.3rem; position:relative; z-index:1; }
.process-step h4{ margin-bottom:.5rem; }
.process-step p{ font-size:.92rem; }

/* -------------------------------------------------------------------------
   12. FAQ ACCORDION
   ------------------------------------------------------------------------- */
.faq-item{ border-top:1px solid var(--line); }
.faq-item:last-child{ border-bottom:1px solid var(--line); }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding-block:1.6rem; background:transparent; border:0; text-align:start; color:var(--espresso);
}
.faq-q h4{ font-weight:600; font-size:1.05rem; }
.faq-plus{ width:2.1rem; height:2.1rem; border-radius:50%; border:1px solid var(--line); flex-shrink:0; position:relative; }
.faq-plus::before, .faq-plus::after{ content:""; position:absolute; background:var(--espresso); top:50%; left:50%; transform:translate(-50%,-50%); transition:transform .45s var(--ease-lux), opacity .3s; }
.faq-plus::before{ width:.7rem; height:1px; }
.faq-plus::after{ width:1px; height:.7rem; }
.faq-item.is-open .faq-plus::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.faq-item.is-open .faq-plus{ border-color:var(--gold-deep); background:var(--gold); }
.faq-item.is-open .faq-plus::before{ background:var(--espresso); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .5s var(--ease-soft); }
.faq-a p{ padding-bottom:1.6rem; padding-inline-end:3.5rem; font-size:.96rem; }

/* -------------------------------------------------------------------------
   13. BLOG PREVIEW CARDS
   ------------------------------------------------------------------------- */
.blog-card{ display:block; }
.blog-media{ aspect-ratio:16/11; border-radius:var(--radius-md); overflow:hidden; margin-bottom:1.2rem; position:relative; background:linear-gradient(150deg,#F0E1CE,#D8B78E); }
.blog-media .mono-mark svg{ width:30%; height:30%; color:rgba(43,29,21,.2); }
.blog-cat{ font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-deep); }
.blog-card h4{ margin-block:.55rem .5rem; font-size:1.12rem; }
.blog-card p{ font-size:.9rem; }

/* -------------------------------------------------------------------------
   14. FINAL CTA
   ------------------------------------------------------------------------- */
.cta-band{ position:relative; border-radius:var(--radius-lg); overflow:hidden; background:var(--espresso); color:var(--ivory); padding:clamp(3rem,7vw,6rem) clamp(1.5rem,6vw,5rem); }
.cta-band::before{ content:""; position:absolute; inset:0; background:radial-gradient(70% 90% at 85% 15%, rgba(201,168,118,.28), transparent 60%); }
.cta-band-grid{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:2.5rem; flex-wrap:wrap; }
.cta-band h2{ max-width:26rem; }
.cta-contacts{ display:flex; flex-wrap:wrap; gap:.9rem; }

/* -------------------------------------------------------------------------
   15. FOOTER
   ------------------------------------------------------------------------- */
.site-footer{ background:var(--ivory-deep); padding-top:var(--section-y); }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:3rem; padding-bottom:3.5rem; }
@media (max-width:860px){ .footer-top{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-top{ grid-template-columns:1fr; } }
.footer-brand img{ height:40px; margin-bottom:1.1rem; }
.footer-brand p{ font-size:.92rem; max-width:24rem; }
.footer-col h5{ font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:1.1rem; font-weight:700; }
.footer-col a, .footer-col li{ display:block; font-size:.92rem; color:var(--espresso-70); margin-bottom:.7rem; }
.footer-col a:hover{ color:var(--gold-deep); }
.footer-social{ display:flex; gap:.7rem; margin-top:1.3rem; }
.footer-social a{ width:2.4rem; height:2.4rem; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; }
.footer-social svg{ width:1rem; height:1rem; }
.footer-bottom{ border-top:1px solid var(--line); padding-block:1.6rem; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; font-size:.82rem; color:var(--ink-soft); }
.footer-bottom a{ text-decoration:underline; text-underline-offset:3px; }
.footer-credit{ color:var(--ink-soft); }
.footer-credit a{ color:var(--gold-deep); font-weight:700; text-decoration:none; }

/* -------------------------------------------------------------------------
   16. FORMS
   ------------------------------------------------------------------------- */
.field{ margin-bottom:1.1rem; }
.field label{ display:block; font-size:.82rem; font-weight:700; margin-bottom:.5rem; color:var(--ink-soft); }
.field input, .field select, .field textarea{
  width:100%; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:.85rem 1.1rem; color:var(--espresso); transition:border-color .3s;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--gold-deep); }
.field textarea{ min-height:7rem; resize:vertical; }
.form-note{ font-size:.78rem; color:var(--ink-soft); margin-top:.9rem; }
.form-status{ font-size:.85rem; margin-top:1rem; font-weight:600; }
.form-status.ok{ color:#5C7A54; }
.form-status.err{ color:#A6493B; }

/* Sticky mobile book bar */
.mobile-book-bar{ position:fixed; inset-inline:0; bottom:0; z-index:44; display:none; gap:.7rem; padding:.75rem 1rem calc(.75rem + env(safe-area-inset-bottom)); background:rgba(250,245,238,.94); backdrop-filter:blur(18px); border-top:1px solid var(--line); }
@media (max-width:640px){ .mobile-book-bar{ display:flex; } body{ padding-bottom:4.5rem; } }
.mobile-book-bar .btn{ flex:1; justify-content:center; }

/* -------------------------------------------------------------------------
   17. SCROLL-REVEAL UTILITIES (paired with main.js / GSAP)
   ------------------------------------------------------------------------- */
.reveal{ opacity:0; transform:translateY(30px); filter:blur(6px); }
.reveal-line{ overflow:hidden; }

/* Decorative mono-mark (signature motif echoing the Jumana emblem) */
.mono-mark{ display:flex; align-items:center; justify-content:center; }

/* Misc */
.tag-row{ display:flex; flex-wrap:wrap; gap:.6rem; }
.tag{ font-size:.78rem; font-weight:600; padding:.4rem .95rem; border:1px solid var(--line); border-radius:100px; color:var(--ink-soft); }
.tag.is-gold{ background:var(--gold); border-color:var(--gold); color:var(--espresso); }

.rule-num{ display:flex; align-items:baseline; gap:.9rem; }
.rule-num .n{ font-family:var(--font-en-display); font-style:italic; color:var(--gold-deep); font-size:1.2rem; }

.pricing-row{ display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem; padding-block:1.2rem; border-top:1px solid var(--line); }
.pricing-row:last-child{ border-bottom:1px solid var(--line); }
.pricing-row .pname{ font-weight:700; }
.pricing-row .pnote{ display:block; font-size:.82rem; color:var(--ink-soft); font-weight:400; margin-top:.2rem; }
.pricing-row .pval{ font-family:var(--font-en-display); font-style:italic; font-size:1.15rem; color:var(--gold-deep); white-space:nowrap; }

.related-card{ display:flex; align-items:center; gap:1rem; padding:1.1rem; border:1px solid var(--line); border-radius:var(--radius-md); transition:border-color .3s, transform .5s var(--ease-lux); }
.related-card:hover{ border-color:var(--gold-deep); transform:translateY(-3px); }
.related-thumb{ width:3.2rem; height:3.2rem; border-radius:50%; flex-shrink:0; background:linear-gradient(150deg,#EFE0CE,#D8B78E); display:flex; align-items:center; justify-content:center; }
.related-thumb svg{ width:1.4rem; height:1.4rem; color:rgba(43,29,21,.4); }

.breadcrumbs{ display:flex; align-items:center; gap:.5rem; font-size:.82rem; color:var(--ink-soft); flex-wrap:wrap; }
.breadcrumbs a:hover{ color:var(--gold-deep); }
.breadcrumbs svg{ width:.7rem; height:.7rem; opacity:.5; }
[dir="rtl"] .breadcrumbs svg{ transform:scaleX(-1); }

.whatsapp-fab{
  position:fixed; bottom:1.5rem; inset-inline-end:1.5rem; z-index:44;
  width:3.6rem; height:3.6rem; border-radius:50%;
  background:var(--espresso); color:var(--gold);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 16px 32px -14px rgba(43,29,21,.55);
  transition:transform .5s var(--ease-lux);
}
.whatsapp-fab:hover{ transform:scale(1.08); }
.whatsapp-fab svg{ width:1.6rem; height:1.6rem; }
@media (max-width:640px){ .whatsapp-fab{ bottom:5.2rem; } }

.svc-type-card{ padding:1.6rem; border:1px solid var(--line); border-radius:var(--radius-md); height:100%; }
.svc-type-card h4{ margin-bottom:.5rem; }
.svc-type-card p{ font-size:.9rem; margin:0; }

.aftercare-list li{ display:flex; gap:.85rem; padding-block:.85rem; border-top:1px solid var(--line); font-size:.94rem; color:var(--espresso-70); }
.aftercare-list li:last-child{ border-bottom:1px solid var(--line); }
.aftercare-list svg{ width:1.15rem; height:1.15rem; flex-shrink:0; margin-top:.15rem; color:var(--gold-deep); }

/* -------------------------------------------------------------------------
   20. ARTICLE / BLOG PROSE
   ------------------------------------------------------------------------- */
.article-body h2{ margin-block:2.4rem 1.1rem; font-size:clamp(1.4rem,2.2vw,1.8rem); }
.article-body p{ margin-bottom:1.15rem; line-height:1.75; }
.article-body ul{ margin:1.3rem 0; padding-inline-start:1.4rem; }
.article-body li{ margin-bottom:.65rem; color:var(--espresso-70); line-height:1.65; }
.article-body li::marker{ color:var(--gold-deep); }
.blog-listing-card{ display:block; }
.blog-listing-media{ aspect-ratio:16/10; border-radius:var(--radius-md); overflow:hidden; margin-bottom:1.2rem; }
.blog-listing-media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-lux); }
.blog-listing-card:hover .blog-listing-media img{ transform:scale(1.05); }

/* -------------------------------------------------------------------------
   18. INSTAGRAM EMBED GRID
   ------------------------------------------------------------------------- */
.ig-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:1.75rem; }
.ig-item{ display:flex; justify-content:center; }
.ig-item iframe{ border-radius:var(--radius-sm) !important; }
.ig-teaser-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1.75rem; }
@media (max-width:860px){ .ig-teaser-grid{ grid-template-columns:1fr; max-width:360px; margin-inline:auto; } }
.ig-load-more{ display:flex; justify-content:center; margin-top:2.75rem; }

/* -------------------------------------------------------------------------
   19. SPLASH INTRO
   ------------------------------------------------------------------------- */
#splash{
  position:fixed; inset:0; z-index:200;
  background:var(--ivory);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.5rem;
}
#splash::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(55% 48% at 50% 44%, rgba(201,168,118,.22), transparent 72%);
}
#splash .splash-mark{ width:min(210px, 46vw); height:auto; position:relative; filter:drop-shadow(0 14px 28px rgba(43,29,21,.18)); }
#splash .splash-line{ width:0; height:1px; background:var(--gold-deep); position:relative; }
#splash .splash-tagline{
  position:relative; font-family:var(--font-ar-display); font-size:1.05rem;
  letter-spacing:.05em; color:var(--ink-soft); text-align:center; margin:0;
}
html[dir="ltr"] #splash .splash-tagline{ font-family:var(--font-en-display); font-style:italic; }