:root{
    --purple-deep:#3A2850;
    --purple-mid:#55406F;
    --gold:#C6A15B;
    --gold-light:#E4CB93;
    --cream:#FAF6EF;
    --cream-alt:#F1E9DA;
    --ink:#241C2E;
    --ink-soft:#5B5266;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Cairo',sans-serif;
    background:var(--cream);
    color:var(--ink);
    line-height:1.8;
    overflow-x:hidden;
  }
  h1,h2,h3,.brand-en{font-family:'Reem Kufi',sans-serif;}
  .brand-en{font-family:'Cormorant Garamond',serif; font-style:italic; letter-spacing:2px;}
  a{text-decoration:none; color:inherit;}
  img{max-width:100%; display:block;}
  .container{max-width:1140px; margin:0 auto; padding:0 28px;}
  .eyebrow{
    font-family:'Cormorant Garamond',serif; font-style:italic;
    color:var(--gold); font-size:18px; letter-spacing:3px; margin-bottom:10px; display:block;
  }
  .section-title{font-size:clamp(28px,4vw,40px); font-weight:700; color:var(--purple-deep); margin-bottom:18px;}
  .section-lede{color:var(--ink-soft); font-size:17px; max-width:620px;}
  .btn{
    display:inline-flex; align-items:center; gap:8px; padding:14px 32px;
    border-radius:2px; font-size:15px; font-weight:500; border:1.5px solid var(--gold);
    transition:all .25s ease; cursor:pointer;
  }
  .btn-solid{background:var(--gold); color:var(--purple-deep);}
  .btn-solid:hover{background:var(--gold-light); border-color:var(--gold-light);}
  .btn-line{background:transparent; color:var(--cream); border-color:rgba(228,203,147,.6);}
  .btn-line:hover{border-color:var(--gold); background:rgba(198,161,91,.1);}

  /* ---------- HEADER ---------- */
  header{
    position:fixed; top:0; right:0; left:0; z-index:100;
    background:rgba(58,40,80,0.92); backdrop-filter:blur(6px);
    border-bottom:1px solid rgba(198,161,91,.25);
  }
  .nav-wrap{display:flex; align-items:center; justify-content:space-between; padding:14px 28px; max-width:1140px; margin:0 auto;}
  .logo-group{display:flex; align-items:center; gap:12px; min-width:0;}
  .logo-group img{width:46px; height:46px; border-radius:50%; flex-shrink:0;}
  .logo-text{color:var(--cream); min-width:0; overflow:hidden;}
  .logo-text .ar{font-family:'Reem Kufi',sans-serif; font-size:17px; font-weight:700; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .logo-text .en{font-family:'Cormorant Garamond',serif; font-style:italic; font-size:12px; color:#FFFFFF; letter-spacing:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block;}
  nav ul{list-style:none; display:flex; gap:34px;}
  nav a{color:var(--cream); font-size:15px; position:relative; padding-bottom:4px;}
  nav a:hover{color:var(--gold-light);}
  .nav-toggle{display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; flex-shrink:0;}
  .nav-toggle span{width:24px; height:2px; background:var(--cream);}

  /* ---------- HERO ---------- */
  .hero{
    position:relative; min-height:100vh; display:flex; align-items:center;
    background:linear-gradient(180deg, var(--purple-deep) 0%, #2C1F3E 100%);
    color:var(--cream); overflow:hidden; padding-top:90px;
  }
  .hero-skyline{position:absolute; bottom:0; left:0; right:0; width:100%; opacity:.9;}
  .hero-inner{position:relative; z-index:2; text-align:center; width:100%;}
  .hero-mark{
    position:relative; display:inline-block;
    font-family:'Pinyon Script',cursive; color:#F5DFA0; font-size:clamp(64px,10vw,92px);
    line-height:1; margin-bottom:4px; direction:ltr;
    text-shadow:
      0 0 1.5px rgba(255,244,214,.58),
      0 0 4px rgba(255,210,140,.42),
      0 0 8px rgba(255,180,90,.3),
      0 0 14px rgba(255,150,50,.16);
    animation:heroMarkGlow 4.2s ease-in-out infinite;
  }
  .hero-mark::before{
    content:attr(data-text); position:absolute; inset:0; z-index:-1;
    color:#FFC46E; filter:blur(7px); opacity:.38;
  }
  .hero-mark::after{
    content:attr(data-text); position:absolute; inset:0; z-index:-2;
    color:#FF9D3D; filter:blur(15px); opacity:.22;
  }
  @keyframes heroMarkGlow{
    0%,100%{ filter:brightness(1); }
    50%{ filter:brightness(1.1); }
  }
  .mark-line{display:block; width:min(140px,44vw); height:22px; margin:0 auto 18px; overflow:visible;}
  .mark-line path{
    filter:drop-shadow(0 0 4px rgba(228,203,147,.6));
    stroke-dasharray:260; stroke-dashoffset:260;
    animation:markLineDraw 3.6s cubic-bezier(.65,0,.35,1) infinite;
  }
  .mark-line-tip{
    fill:#FFF4D6; filter:drop-shadow(0 0 6px rgba(255,244,214,.85));
    offset-path:path('M4,6 C40,18 90,18 115,10 C140,2 190,2 226,14');
    offset-distance:0%;
    animation:markLineTip 3.6s cubic-bezier(.65,0,.35,1) infinite;
  }
  @keyframes markLineDraw{
    0%{ stroke-dashoffset:260; }
    45%,55%{ stroke-dashoffset:0; }
    100%{ stroke-dashoffset:260; }
  }
  @keyframes markLineTip{
    0%{ offset-distance:0%; opacity:0; }
    4%{ opacity:1; }
    45%,55%{ offset-distance:100%; opacity:1; }
    96%{ opacity:1; }
    100%{ offset-distance:0%; opacity:0; }
  }
  @media (prefers-reduced-motion: reduce){
    .hero-mark{ animation:none; }
    .mark-line path, .mark-line-tip{ animation:none; }
  }
  .hero-inner .eyebrow{justify-content:center; display:flex;}
  .hero h1{font-size:clamp(40px,7vw,68px); font-weight:700; margin-bottom:14px;}
  .hero .en-name{font-family:'Cormorant Garamond',serif; font-style:italic; font-size:clamp(16px,2vw,22px); letter-spacing:5px; color:var(--gold-light); margin-bottom:26px;}
  .hero p.tag{font-size:18px; color:#D9CFE6; max-width:560px; margin:0 auto 40px;}
  .hero-stars{color:var(--gold); font-size:20px; letter-spacing:6px; margin-bottom:22px;}
  .hero-ctas{display:flex; gap:18px; justify-content:center; flex-wrap:wrap;}

  /* ---------- ABOUT ---------- */
  .about{padding:110px 0 90px; background:var(--cream);}
  .about-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:center;}
  .about-visual{
    aspect-ratio:4/5; background:var(--purple-deep); border-radius:2px; position:relative;
    overflow:hidden; border:1px solid rgba(198,161,91,.5);
  }
  .about-visual img{width:100%; height:100%; object-fit:cover; display:block;}
  .stat-row{display:grid; grid-template-columns:1fr 1fr; margin-top:44px; border-top:1px solid #DDD0B8; border-right:1px solid #DDD0B8;}
  .stat{display:flex; flex-direction:column; align-items:center; gap:8px; padding:26px 12px; border-left:1px solid #DDD0B8; border-bottom:1px solid #DDD0B8;}
  .stat svg{width:22px; height:22px; fill:none; stroke:var(--gold); stroke-width:1.6;}
  .stat b{font-family:'Reem Kufi',sans-serif; font-size:26px; color:var(--purple-deep); direction:ltr;}
  .stat span{font-size:12.5px; color:var(--ink-soft); text-align:center;}

  /* ---------- AMENITIES ---------- */
  .amenities{padding:90px 0; background:var(--purple-deep); color:var(--cream);}
  .amenities .section-title{color:var(--cream);}
  .amenities .section-lede{color:#CFC3DE;}
  .amen-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:50px; background:rgba(198,161,91,.25);}
  .amen-card{background:var(--purple-deep); padding:34px 20px; text-align:center;}
  .amen-card svg{width:30px; height:30px; margin:0 auto 16px; stroke:var(--gold);}
  .amen-card p{font-size:14.5px; color:#E7DFF0;}

  /* ---------- GALLERY ---------- */
  .gallery{padding:100px 0; background:var(--cream);}
  .gallery-grid{display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:180px 180px; gap:14px; margin-top:50px;}
  .gtile{position:relative; overflow:hidden; border-radius:2px;}
  .gtile:nth-child(1){grid-column:span 2; grid-row:span 2;}
  .gtile-fill{width:100%; height:100%; display:flex; align-items:flex-end; padding:16px;
    background:repeating-linear-gradient(135deg, var(--purple-mid), var(--purple-mid) 18px, var(--purple-deep) 18px, var(--purple-deep) 36px);}
  .gtile-photo{background-size:cover; background-position:center;}
  .gtile:nth-child(2) .gtile-fill{background:repeating-linear-gradient(135deg, var(--gold), var(--gold) 14px, var(--gold-light) 14px, var(--gold-light) 28px);}
  .gtile:nth-child(3) .gtile-fill{background:repeating-linear-gradient(45deg, var(--ink-soft), var(--ink-soft) 16px, var(--purple-deep) 16px, var(--purple-deep) 32px);}
  .gtile:nth-child(4) .gtile-fill{background:repeating-linear-gradient(45deg, var(--cream-alt), var(--cream-alt) 16px, #DDD0B8 16px, #DDD0B8 32px);}
  .gtile:nth-child(5) .gtile-fill{background:repeating-linear-gradient(135deg, var(--purple-deep), var(--purple-deep) 14px, var(--gold) 14px, var(--gold) 15px, var(--purple-deep) 15px);}
  .gtile-label{color:var(--cream); font-size:14px; font-weight:500; background:rgba(36,28,46,.55); padding:6px 12px; border-radius:2px;}
  .gtile:nth-child(4) .gtile-label{color:var(--ink); background:rgba(255,255,255,.6);}

  /* ---------- LOCATION ---------- */
  .location{padding:100px 0; background:var(--cream-alt);}
  .loc-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
  .loc-list{margin-top:30px; display:flex; flex-direction:column; gap:18px;}
  .loc-item{display:flex; gap:14px; align-items:flex-start;}
  .loc-item svg{width:22px; height:22px; flex-shrink:0; stroke:var(--gold); margin-top:3px;}
  .loc-item b{display:block; color:var(--purple-deep); font-size:15.5px;}
  .loc-item span{color:var(--ink-soft); font-size:14px;}
  .map-box{
    aspect-ratio:1/1; background:var(--purple-deep); border-radius:2px; position:relative;
    display:flex; align-items:center; justify-content:center; flex-direction:column; gap:14px; color:var(--gold-light);
  }
  .map-box svg{width:44px; height:44px; stroke:var(--gold);}
  .map-box p{font-size:14px; color:#CFC3DE;}

  /* ---------- CONTACT / FOOTER ---------- */
  footer{background:var(--ink); color:#D9CFE6; padding:80px 0 30px;}
  .foot-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:50px; padding-bottom:50px; border-bottom:1px solid rgba(198,161,91,.2);}
  .foot-brand .ar{font-family:'Reem Kufi',sans-serif; font-size:22px; color:var(--cream); font-weight:700;}
  .foot-brand .en{font-family:'Cormorant Garamond',serif; font-style:italic; color:var(--gold-light); letter-spacing:2px; display:block; margin-bottom:16px;}
  .foot-brand p{font-size:14px; color:#B7A9C7; max-width:280px;}
  footer h4{color:var(--cream); font-size:15px; margin-bottom:18px; font-weight:500;}
  .foot-links{list-style:none; display:flex; flex-direction:column; gap:12px; font-size:14px;}
  .foot-links a:hover{color:var(--gold-light);}
  .foot-contact{list-style:none; display:flex; flex-direction:column; gap:14px; font-size:14px;}
  .foot-contact li{display:flex; gap:10px; align-items:flex-start;}
  .foot-contact svg{width:17px; height:17px; stroke:var(--gold); flex-shrink:0; margin-top:2px;}
  .foot-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:26px; font-size:13px; color:#8B7E9C; flex-wrap:wrap; gap:12px;}
  .social{display:flex; gap:14px;}
  .social a{width:34px; height:34px; border:1px solid rgba(198,161,91,.4); border-radius:50%; display:flex; align-items:center; justify-content:center;}
  .social svg{width:15px; height:15px; stroke:var(--gold-light);}

  @media(max-width:860px){
    nav{position:fixed; top:76px; right:0; left:0; background:var(--purple-deep); flex-direction:column;
      max-height:0; overflow:hidden; transition:max-height .3s ease;}
    nav.open{max-height:400px;}
    nav ul{flex-direction:column; padding:20px 28px; gap:20px;}
    .nav-toggle{display:flex;}
    .about-grid, .loc-grid{grid-template-columns:1fr;}
    .amen-grid{grid-template-columns:repeat(2,1fr);}
    .gallery-grid{grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(3,160px);}
    .gtile:nth-child(1){grid-column:span 2; grid-row:span 1;}
    .foot-grid{grid-template-columns:1fr; gap:36px;}
  }
  @media(max-width:480px){
    .container{padding:0 18px;}
    .nav-wrap{padding:12px 16px;}
    .logo-group img{width:38px; height:38px;}
    .logo-text .ar{font-size:14px;}
    .logo-text .en{font-size:10px; letter-spacing:1px;}
    .hero{padding-top:80px;}
    .hero-ctas{gap:12px;}
    .btn{padding:12px 22px; font-size:14px; width:100%; justify-content:center;}
    .hero-ctas{flex-direction:column;}
    .about{padding:70px 0 60px;}
    .amenities, .gallery, .location{padding:60px 0;}
    .stat{padding:18px 10px;}
    .map-box iframe{min-height:260px;}
    footer{padding:56px 0 24px;}
  }