/* ═══════════════════════════════════════════════
       TOKENS
    ═══════════════════════════════════════════════ */
    :root {
      --crimson:       #7B0D3A;
      --crimson-light: #9B1A50;
      --crimson-dark:  #3E0620;
      --mustard:       #C8960C;
      --mustard-light: #E8B420;
      --teal:          #146060;
      --teal-light:    #1E8080;
      --parchment:     #F4EDD8;
      --cream:         #FBF7EE;
      --ink:           #1A0E08;
      --stone:         #8B7355;
      --stone-light:   #C0A882;
      --nav-h:         62px;
    }

    /* ═══════════════════════════════════════════════
       RESET & BASE
    ═══════════════════════════════════════════════ */
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      background: var(--cream);
      color: var(--ink);
      font-family: 'Cormorant Garamond', Georgia, serif;
      overflow-x: hidden;
    }

    ::-webkit-scrollbar { width: 5px; }
    ::-webkit-scrollbar-track { background: var(--crimson-dark); }
    ::-webkit-scrollbar-thumb { background: var(--mustard); }


    /* ═══════════════════════════════════════════════
       HERO
    ═══════════════════════════════════════════════ */
    .hero {
      min-height: 100svh; min-height: 100vh; /* fallback */
      position: relative;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      overflow: hidden;
      background: var(--crimson-dark);
    }

    /* Parallax layer base */
    .p-layer {
      position: absolute; pointer-events: none; user-select: none;
      will-change: transform;
    }

    /* Layer 0 - Arabesque pattern (deepest) */
    #p-pattern {
      inset: -25% -5%;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpath d='M50 0 L100 50 L50 100 L0 50Z' fill='none' stroke='rgba(200,150,12,0.10)' stroke-width='0.8'/%3E%3Ccircle cx='50' cy='50' r='28' fill='none' stroke='rgba(200,150,12,0.07)' stroke-width='0.8'/%3E%3Cpath d='M50 22 L78 50 L50 78 L22 50Z' fill='none' stroke='rgba(200,150,12,0.06)' stroke-width='0.8'/%3E%3Cpath d='M50 0 L50 100 M0 50 L100 50' stroke='rgba(200,150,12,0.04)' stroke-width='0.5'/%3E%3C/svg%3E");
    }

    /* Layer 1 - Grain / texture */
    #p-texture {
      inset: -20% -5%;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
      opacity: 0.55;
    }

    /* Layer 2 - Gold orb top-left */
    #p-orb1 {
      width: min(70vw, 720px); height: min(70vw, 720px);
      border-radius: 50%;
      background: radial-gradient(circle, rgba(200,150,12,0.08) 0%, transparent 65%);
      top: -18%; left: -20%;
    }

    /* Layer 3 - Teal orb bottom-right */
    #p-orb2 {
      width: min(55vw, 560px); height: min(55vw, 560px);
      border-radius: 50%;
      background: radial-gradient(circle, rgba(26,128,128,0.10) 0%, transparent 65%);
      bottom: -15%; right: -18%;
    }

    /* Layer 4 - Huge floating Arabic letter (shallowest background) */
    #p-float-ar {
      font-family: 'Amiri', serif; font-weight: 700;
      font-size: min(68vw, 900px);
      color: rgba(200, 150, 12, 0.045);
      line-height: 1;
      top: -5%; right: -12%;
      transform-origin: top right;
    }

    /* Static vignette (no parallax - always covers) */
    .hero-vignette {
      position: absolute; inset: 0; pointer-events: none;
      background: radial-gradient(ellipse at center, transparent 30%, rgba(62,6,32,0.78) 100%);
      z-index: 5;
    }

    /* Layer 5 - Hero content (subtle parallax) */
    #p-content {
      position: relative; z-index: 10;
      text-align: center; padding: 0 24px;
      padding-top: var(--nav-h);
    }

    .hero-eyebrow {
      font-family: 'Cinzel Decorative', serif; font-size: 0.56rem;
      letter-spacing: 0.6em; text-transform: uppercase;
      color: var(--teal-light); margin-bottom: 18px;
      animation: fadeDown 1.4s 0.2s both;
    }
    .hero-ornament {
      color: var(--mustard); font-size: 0.9rem;
      letter-spacing: 0.8em; margin-bottom: 18px;
      animation: fadeDown 1.2s 0.3s both;
    }
    .hero-name-en {
      font-family: 'Cinzel Decorative', serif;
      font-size: clamp(0.9rem, 2.4vw, 1.5rem);
      color: var(--mustard-light); letter-spacing: 0.5em;
      margin-bottom: 4px; animation: fadeUp 1.2s 0.4s both;
    }
    .hero-name-ar {
      font-family: 'Amiri', serif; font-weight: 700;
      font-size: clamp(5rem, 13vw, 10.5rem);
      color: var(--parchment); line-height: 0.85;
      text-shadow: 0 6px 40px rgba(0,0,0,0.55);
      animation: fadeUp 1.2s 0.5s both;
    }
    .hero-rule {
      width: 210px; height: 1px;
      background: linear-gradient(to right, transparent, var(--mustard), transparent);
      margin: 26px auto; animation: fadeIn 1.8s 0.8s both;
    }
    .hero-tagline-ar {
      font-family: 'Amiri', serif; font-size: clamp(1.2rem, 2.4vw, 1.8rem);
      color: rgba(244,237,216,0.85); font-style: italic;
      margin-bottom: 6px; animation: fadeUp 1.2s 0.9s both;
    }
    .hero-tagline-en {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(0.78rem, 1.3vw, 0.95rem);
      color: var(--stone-light); letter-spacing: 0.3em; text-transform: uppercase;
      animation: fadeUp 1.2s 1s both;
    }
    .hero-meta {
      margin-top: 42px; display: flex; align-items: center;
      justify-content: center; flex-wrap: wrap; gap: 10px;
      animation: fadeIn 2s 1.3s both;
    }
    .hero-meta span {
      font-family: 'Cinzel Decorative', serif; font-size: 0.48rem;
      letter-spacing: 0.32em; color: var(--teal-light); text-transform: uppercase;
    }
    .hero-meta .pip { width: 4px; height: 4px; background: var(--mustard); border-radius: 50%; }
    .hero-scroll-cue {
      position: absolute; bottom: 38px; left: 50%;
      transform: translateX(-50%); z-index: 10;
      display: flex; flex-direction: column; align-items: center; gap: 8px;
      animation: fadeIn 2.5s 1.6s both;
    }
    .hero-scroll-cue span {
      font-family: 'Cinzel Decorative', serif; font-size: 0.4rem;
      letter-spacing: 0.5em; color: rgba(192,168,130,0.55);
    }
    .scroll-line {
      width: 1px; height: 50px;
      background: linear-gradient(to bottom, var(--mustard), transparent);
      animation: pulse-line 2.2s ease-in-out infinite;
    }

    /* ═══════════════════════════════════════════════
       SHARED LAYOUT
    ═══════════════════════════════════════════════ */
    section { padding: 96px 0; }
    .container { max-width: 1160px; margin: 0 auto; padding: 0 44px; }

    .sec-head { text-align: center; margin-bottom: 62px; }
    .sec-label {
      font-family: 'Cinzel Decorative', serif; font-size: 0.56rem;
      letter-spacing: 0.45em; text-transform: uppercase;
      color: var(--mustard); margin-bottom: 10px;
    }
    .sec-ar {
      font-family: 'Amiri', serif; font-size: clamp(2.2rem, 4.5vw, 3.6rem);
      color: var(--crimson); line-height: 1;
    }
    .sec-en {
      font-family: 'Cormorant Garamond', serif; font-weight: 300; font-style: italic;
      font-size: clamp(1.1rem, 2.2vw, 1.9rem); color: var(--ink); margin-top: 4px;
    }
    .orn-rule {
      display: flex; align-items: center; justify-content: center;
      gap: 14px; margin: 16px auto;
    }
    .orn-rule::before { content: ''; width: 80px; height: 1px;
      background: linear-gradient(to right, transparent, var(--mustard)); }
    .orn-rule::after  { content: ''; width: 80px; height: 1px;
      background: linear-gradient(to left,  transparent, var(--mustard)); }
    .orn-rule .diamond { color: var(--mustard); font-size: 0.65rem; }

    /* Scroll reveal */
    .reveal {
      opacity: 0; transform: translateY(22px);
      transition: opacity 0.75s ease, transform 0.75s ease;
    }
    .reveal.visible { opacity: 1; transform: translateY(0); }


    

    /* ═══════════════════════════════════════════════
       OFFER BAND
    ═══════════════════════════════════════════════ */
    .offer-band {
      background: linear-gradient(135deg, var(--teal) 0%, var(--crimson-dark) 100%);
      padding: 76px 0; position: relative; overflow: hidden;
    }
    .offer-band::before {
      content: ''; position: absolute; inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Ccircle cx='40' cy='40' r='36' fill='none' stroke='rgba(255,255,255,0.04)' stroke-width='1'/%3E%3C/svg%3E");
    }
    .offer-inner { position: relative; z-index: 1; text-align: center; padding: 0 24px; }
    .offer-sub {
      font-family: 'Cinzel Decorative', serif; font-size: 0.53rem;
      letter-spacing: 0.45em; text-transform: uppercase;
      color: rgba(255,255,255,0.48); margin-bottom: 12px;
    }
    .offer-title-ar {
      font-family: 'Amiri', serif; font-size: clamp(2rem, 5vw, 3.6rem);
      color: #fff; line-height: 1.2;
    }
    .offer-desc {
      font-family: 'Cormorant Garamond', serif; font-size: clamp(1rem, 1.5vw, 1.2rem);
      color: rgba(255,255,255,0.68); font-style: italic; margin: 12px 0 26px;
    }
    .offer-tag {
      display: inline-block; background: var(--mustard); color: var(--ink);
      font-family: 'Cinzel Decorative', serif; font-size: clamp(0.75rem, 1.5vw, 1rem);
      letter-spacing: 0.1em; padding: 15px 46px;
    }

    /* ═══════════════════════════════════════════════
       VIBES
    ═══════════════════════════════════════════════ */
    .vibes { background: var(--parchment); }
    .vibes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
    .vibe-card {
      background: var(--cream); padding: 38px 28px;
      border: 1px solid rgba(200,150,12,0.14); text-align: center;
      transition: transform 0.35s, box-shadow 0.35s;
    }
    .vibe-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 14px 40px rgba(123,13,58,0.14);
    }
    .vibe-icon { font-size: 2.2rem; margin-bottom: 14px; }
    .vibe-title {
      font-family: 'Cinzel Decorative', serif; font-size: 0.62rem;
      letter-spacing: 0.24em; text-transform: uppercase;
      color: var(--crimson); margin-bottom: 10px;
    }
    .vibe-text { font-size: clamp(0.9rem, 1.1vw, 1rem); line-height: 1.8; font-weight: 300; color: var(--stone); }

    /* ═══════════════════════════════════════════════
       LOCATION
    ═══════════════════════════════════════════════ */
    .location-sec { background: var(--cream); }
    .loc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 68px; align-items: start; }
    .loc-head {
      font-family: 'Amiri', serif; font-size: clamp(2rem, 3.5vw, 2.8rem);
      color: var(--crimson); margin-bottom: 28px;
    }
    .loc-row {
      display: flex; gap: 16px; align-items: flex-start;
      padding: 16px 0; border-bottom: 1px solid rgba(200,150,12,0.16);
    }
    .loc-row:last-of-type { border-bottom: none; }
    .loc-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 2px; }
    .loc-text-label {
      font-family: 'Cinzel Decorative', serif; font-size: 0.44rem;
      letter-spacing: 0.24em; text-transform: uppercase;
      color: var(--mustard); display: block; margin-bottom: 3px;
    }
    .loc-text-val { font-size: 1.02rem; color: var(--ink); line-height: 1.7; }
    .loc-text-val a { color: var(--crimson); text-decoration: none; }
    .loc-text-val a:hover { text-decoration: underline; }
    .socials { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
    .soc-btn {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 11px 20px; border: 1px solid var(--crimson);
      font-family: 'Cinzel Decorative', serif; font-size: 0.48rem;
      letter-spacing: 0.16em; text-transform: uppercase;
      color: var(--crimson); text-decoration: none; transition: all 0.3s;
      min-height: 44px;
    }
    .soc-btn:hover { background: var(--crimson); color: #fff; }
    .soc-btn.teal { border-color: var(--teal); color: var(--teal); }
    .soc-btn.teal:hover { background: var(--teal); color: #fff; }
    .map-box {
      border: 3px solid var(--mustard); overflow: hidden; height: 420px;
    }
    .map-box iframe { width: 100%; height: 100%; border: none; display: block; }

    /* ═══════════════════════════════════════════════
       FOOTER
    ═══════════════════════════════════════════════ */
    footer { background: var(--ink); padding: 66px 0 30px; text-align: center; }
    .foot-logo-ar { font-family: 'Amiri', serif; font-size: 3rem; color: var(--mustard-light); line-height: 1; }
    .foot-logo-en {
      font-family: 'Cinzel Decorative', serif; font-size: 0.44rem;
      letter-spacing: 0.52em; color: var(--stone-light); text-transform: uppercase; margin-top: 4px;
    }
    .foot-rule {
      width: 260px; height: 1px;
      background: linear-gradient(to right, transparent, var(--mustard), transparent);
      margin: 24px auto;
    }
    .foot-nav {
      list-style: none; display: flex;
      justify-content: center; flex-wrap: wrap; gap: 24px; margin-bottom: 24px;
    }
    .foot-nav a {
      font-family: 'Cinzel Decorative', serif; font-size: 0.44rem;
      letter-spacing: 0.2em; text-transform: uppercase;
      color: var(--stone-light); text-decoration: none; transition: color 0.3s;
    }
    .foot-nav a:hover { color: var(--mustard-light); }
    .foot-copy { font-family: 'Cormorant Garamond', serif; font-size: 0.82rem; color: var(--stone); line-height: 1.8; }
    .foot-tagline { font-family: 'Amiri', serif; font-size: 1.25rem; color: rgba(200,150,12,0.38); margin-top: 8px; }
    .foot-credit { margin-top: 0.9rem; font-family: 'Cormorant Garamond', serif; font-size: 0.72rem; color: rgba(244,237,216,0.25); letter-spacing: 0.06em; }
    .foot-credit a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(200,150,12,0.2); transition: color 0.2s, border-color 0.2s; }
    .foot-credit a:hover { color: rgba(244,237,216,0.55); border-bottom-color: rgba(200,150,12,0.5); }

    /* ═══════════════════════════════════════════════
       KEYFRAMES
    ═══════════════════════════════════════════════ */
    @keyframes fadeUp   { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:translateY(0); } }
    @keyframes fadeDown { from { opacity:0; transform:translateY(-18px);} to { opacity:1; transform:translateY(0); } }
    @keyframes fadeIn   { from { opacity:0; } to { opacity:1; } }
    @keyframes pulse-line {
      0%,100% { opacity:.35; transform:scaleY(1); }
      50%      { opacity:1;   transform:scaleY(1.15); }
    }

    /* ═══════════════════════════════════════════════
       PREFERS-REDUCED-MOTION - kill everything
    ═══════════════════════════════════════════════ */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0.01ms !important;
        transition-duration: 0.01ms !important;
      }
      .reveal { opacity:1; transform:none; }
      .hero-scroll-cue { display: none; }
    }