@font-face{font-family:'Amiri';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/Amiri-400-arabic.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family:'El Messiri';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/ElMessiri-500-arabic.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family:'El Messiri';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/ElMessiri-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'El Messiri';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/ElMessiri-600-arabic.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family:'El Messiri';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/ElMessiri-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/Tajawal-400-arabic.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/Tajawal-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/Tajawal-500-arabic.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/Tajawal-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/Tajawal-700-arabic.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/Tajawal-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
:root{
  --purple:#3f2e58; --purple-2:#57417a; --lav:#b9a6d6; --lav-soft:#efe8f7; --cream:#fbf8fd;
  --gold:#c9a25b; --gold-2:#e2c48a; --ink:#2b2238; --muted:#5f5470;
  --radius:22px; --shadow:0 18px 40px -22px rgba(63,46,88,.45);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:'Tajawal',system-ui,'Segoe UI',Tahoma,sans-serif;font-size:1.0625rem;line-height:1.9;color:var(--ink);background:var(--cream);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--purple-2)}
h1,h2,h3{font-family:'El Messiri','Tajawal',serif;line-height:1.35;color:var(--purple);margin:0 0 .5em}
h2{font-size:clamp(1.6rem,4.8vw,2.3rem);font-weight:600}
h3{font-size:1.3rem;font-weight:600}
p{margin:0 0 1em}
.wrap{width:min(1120px,100% - 2.5rem);margin-inline:auto}
.narrow{width:min(720px,100% - 2.5rem)}
.center{text-align:center}
.skip{position:absolute;inset-inline-start:1rem;top:-4rem;background:var(--purple);color:#fff;padding:.6rem 1rem;border-radius:10px;z-index:50}
.skip:focus{top:1rem}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:8px}

/* top bar */
.topbar{position:sticky;top:0;z-index:20;background:rgba(251,248,253,.88);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid rgba(63,46,88,.08)}
.topbar-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:62px}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--purple);font-family:'El Messiri',serif;font-weight:600;font-size:1.35rem}
.brand img{width:40px;height:40px;border-radius:12px}
nav ul{list-style:none;margin:0;padding:0;display:flex;gap:.25rem}
nav a{display:block;padding:.4rem .7rem;border-radius:999px;text-decoration:none;color:var(--muted);font-weight:500;font-size:.98rem}
nav a:hover{background:var(--lav-soft);color:var(--purple)}
@media (max-width:640px){ nav{display:none} }

/* hero */
.hero{position:relative;overflow:hidden;color:#fff;background:
  radial-gradient(120% 80% at 85% 0%, #6a5190 0%, transparent 60%),
  radial-gradient(90% 70% at 0% 100%, #2c1f40 0%, transparent 70%),
  linear-gradient(160deg,#4a3668,#3a2a52);}
.hero::after{content:"";position:absolute;inset:auto 0 -1px 0;height:56px;background:var(--cream);border-radius:50% 50% 0 0/100% 100% 0 0}
.hero-in{display:grid;gap:2rem;padding:2.5rem 0 5rem;align-items:center}
.hero-art{margin:0;justify-self:center;width:min(78vw,340px);position:relative}
.hero-art::before{content:"";position:absolute;inset:-14%;background:radial-gradient(circle,rgba(226,196,138,.35),transparent 65%);filter:blur(8px);z-index:0}
.hero-art img{position:relative;z-index:1;border-radius:50%;box-shadow:0 0 0 1px rgba(226,196,138,.55),0 0 0 10px rgba(255,255,255,.05),0 30px 60px -25px rgba(0,0,0,.6)}
.hero-text{text-align:center;order:2}
.eyebrow{display:inline-block;margin:0 0 .8rem;padding:.25rem .9rem;border:1px solid rgba(226,196,138,.5);border-radius:999px;color:var(--gold-2);font-size:.92rem}
.hero h1{color:#fff;margin:0 0 .7rem}
.hero h1 .name{display:block;font-size:clamp(3rem,13vw,4.8rem);color:var(--gold-2);line-height:1.15}
.hero h1 .tag{display:block;font-size:clamp(1.35rem,5.4vw,2rem);font-weight:500}
.lead{font-size:clamp(1.08rem,3.6vw,1.25rem);color:#ece4f7;max-width:34ch;margin-inline:auto}
.actions{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin-top:1.6rem}
@media (min-width:900px){
  .hero-in{grid-template-columns:1.1fr .9fr;padding:4.5rem 0 7rem}
  .hero-text{text-align:start;order:0}
  .lead{margin-inline:0}
  .actions{justify-content:flex-start}
  .hero-art{width:100%;max-width:420px}
}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:.7rem 1.5rem;border-radius:999px;font-weight:700;font-size:1.02rem;text-decoration:none;transition:transform .15s ease,box-shadow .15s ease,background .15s ease;font-family:inherit}
.btn:hover{transform:translateY(-1px)}
.btn-gold{background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#2c1f40;box-shadow:0 10px 24px -12px rgba(201,162,91,.9)}
.btn-ghost{color:#fff;border:1.5px solid rgba(255,255,255,.55)}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
.btn-purple{background:var(--purple);color:#fff}
.btn-purple:hover{background:var(--purple-2)}
.btn.big{min-height:56px;padding-inline:2rem;font-size:1.1rem}
@media (max-width:420px){ .hero .actions .btn{flex:1 1 100%} }

/* sections */
.section{padding:4rem 0}
.section.soft{background:linear-gradient(180deg,var(--lav-soft),#f6f1fb)}
.kicker{color:var(--gold);font-weight:700;letter-spacing:.02em;margin:0 0 .3rem;font-size:.98rem}
.kicker::before{content:"";display:inline-block;width:22px;height:2px;background:var(--gold);vertical-align:middle;margin-inline-end:.5rem;border-radius:2px}
.section-head{max-width:640px;margin-bottom:2rem}
.section-head p:last-child{color:var(--muted)}
#about p,#yasmin p{font-size:1.12rem}

.cards{display:grid;gap:1.1rem}
@media (min-width:700px){ .episodes{grid-template-columns:repeat(3,1fr)} .services{grid-template-columns:repeat(2,1fr)} }
.card{position:relative;background:#fff;border-radius:var(--radius);padding:1.6rem;box-shadow:var(--shadow);border:1px solid rgba(63,46,88,.07)}
.ep{text-align:center;padding-top:2rem}
.ep p{color:var(--muted);font-size:.97rem;margin:0}
.ep h3{color:var(--muted)}
.badge{position:absolute;top:1rem;inset-inline-start:1rem;background:var(--lav-soft);color:var(--purple-2);font-weight:700;font-size:.85rem;padding:.15rem .75rem;border-radius:999px}
.ep-wave{display:flex;gap:6px;justify-content:center;align-items:center;height:56px;margin:.5rem 0 1rem}
.ep-wave i{display:block;width:6px;border-radius:6px;background:linear-gradient(var(--lav),var(--purple-2));opacity:.55}
.ep-wave i:nth-child(1),.ep-wave i:nth-child(7){height:14px}
.ep-wave i:nth-child(2),.ep-wave i:nth-child(6){height:28px}
.ep-wave i:nth-child(3),.ep-wave i:nth-child(5){height:42px}
.ep-wave i:nth-child(4){height:54px}
.episodes + .center{margin-top:2rem}

.svc{display:flex;flex-direction:column;border-top:4px solid var(--gold)}
.svc p{color:var(--muted)}
.svc .btn{align-self:flex-start;margin-top:auto}
.facts{list-style:none;padding:0;margin:0 0 1rem;display:flex;flex-wrap:wrap;gap:.5rem}
.facts li{background:var(--lav-soft);color:var(--purple);border-radius:999px;padding:.1rem .8rem;font-size:.92rem;font-weight:500}
.price{font-weight:700;color:var(--purple)!important}

.note{margin-top:1.6rem;padding:1.1rem 1.3rem;border-radius:16px;background:#fbf5e9;border:1px solid #ecd9b2;color:#5b4826;font-size:.98rem}
.note p{margin:0}

.fill{background:#fff6e2;border:1.5px dashed var(--gold);color:#7a5a1d;border-radius:8px;padding:0 .4rem}
.fill.block{display:block;padding:1rem;text-align:center}

.contact{background:linear-gradient(160deg,#4a3668,#3a2a52);color:#ece4f7}
.contact h2{color:#fff}
.contact p{font-size:1.1rem}

.footer{background:#2a1f3a;color:#d9cfe8;padding:2.5rem 0 calc(2rem + env(safe-area-inset-bottom));font-size:.95rem}
.footer a{color:var(--gold-2)}
.footer .disc{border-inline-start:3px solid var(--gold);padding-inline-start:1rem;max-width:70ch}
.footer .small{opacity:.8;font-size:.88rem;margin:0}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .btn{transition:none} }

.pull{margin:2rem 0;padding:0;text-align:center}
.pull p{margin:0;font-family:'El Messiri',serif;font-weight:600;font-size:clamp(1.45rem,5.5vw,1.9rem);color:var(--purple-2);line-height:1.6}
.pull p::before,.pull p::after{content:"";display:block;width:48px;height:2px;margin:.8rem auto;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.verse{margin:2.2rem 0 0;padding:1.8rem 1.4rem;text-align:center;border-radius:var(--radius);background:linear-gradient(160deg,#4a3668,#3a2a52);color:#ece4f7;box-shadow:var(--shadow);position:relative;overflow:hidden}
.verse::before{content:"";position:absolute;inset:8px;border:1px solid rgba(226,196,138,.35);border-radius:16px;pointer-events:none}
.verse figcaption{font-size:.98rem;opacity:.9;margin-bottom:.6rem}
.verse .ayah{font-family:'Amiri','El Messiri',serif;font-size:clamp(1.35rem,5.2vw,1.75rem);color:var(--gold-2);line-height:2;margin:0}
.verse .ref{margin:.3rem 0 0;font-size:.9rem;opacity:.8}

html{background:#2a1f3a}
@media (max-width:699px){
  .ep{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:1rem;text-align:start;padding:1.1rem 1.2rem}
  .ep .ep-wave{grid-row:span 2;margin:0;height:44px;gap:4px}
  .ep .ep-wave i{width:5px}
  .ep h3{margin:0;font-size:1.1rem}
  .ep .badge{top:.9rem;inset-inline-start:auto;inset-inline-end:.9rem}
}

/* music button */
.music-btn{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:30;display:inline-flex;align-items:center;gap:8px;
  padding:9px 15px 9px 12px;border-radius:999px;border:1px solid rgba(201,162,91,.55);background:rgba(63,46,88,.92);color:#fbf8fd;
  font:inherit;font-size:.86rem;font-weight:600;line-height:1;cursor:pointer;box-shadow:0 10px 26px -12px rgba(43,34,56,.7);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .25s,transform .2s}
.music-btn:hover{background:rgba(87,65,122,.95);transform:translateY(-1px)}
.music-btn:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px}
.music-ico{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--gold-2),var(--gold));color:var(--purple)}
.ico-bars{display:none;align-items:flex-end;gap:2px;height:12px}
.ico-bars i{display:block;width:3px;height:100%;background:var(--purple);border-radius:2px;animation:mbar 1s ease-in-out infinite}
.ico-bars i:nth-child(2){animation-delay:.25s}.ico-bars i:nth-child(3){animation-delay:.5s}
.music-btn.playing .ico-play{display:none}.music-btn.playing .ico-bars{display:inline-flex}
@keyframes mbar{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.ico-bars i{animation:none;transform:scaleY(.7)}}
@media (max-width:420px){.music-btn{left:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));font-size:.8rem;padding:7px 12px 7px 9px}.music-ico{width:24px;height:24px}}
.footer{padding-bottom:84px}

/* lavender field */
.hero-in{position:relative;z-index:2}
.hero::after{z-index:3}
.lavender{position:absolute;left:0;right:0;bottom:26px;height:180px;z-index:1;pointer-events:none;overflow:hidden}
.stalk{position:absolute;bottom:0;display:block;transform-origin:50% 100%;animation:sway 5s ease-in-out infinite alternate;will-change:transform}
.stalk svg{display:block;width:100%;height:100%;overflow:visible}
.stalk.back{color:#9d86c6;--stem:#5f7a57;opacity:.45}
.stalk.mid{color:#b49ee0;--stem:#6f8d60;opacity:.7}
.stalk.front{color:#c9b5ee;--stem:#86a36d;opacity:.92}
@keyframes sway{from{transform:rotate(calc(var(--r,0deg) - 3.5deg))}to{transform:rotate(calc(var(--r,0deg) + 3.5deg))}}
.petals{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.petal{position:absolute;right:-20px;width:9px;height:9px;color:#d8c8f2;opacity:.55;animation:drift 22s linear infinite;will-change:transform}
.petal svg{display:block;width:100%;height:100%}
@keyframes drift{0%{transform:translate3d(0,0,0) rotate(0) scale(var(--s,1))}50%{transform:translate3d(-55vw,30px,0) rotate(200deg) scale(var(--s,1))}100%{transform:translate3d(-112vw,-10px,0) rotate(400deg) scale(var(--s,1))}}
.footer{position:relative}
.lavender-strip{position:relative;bottom:auto;height:70px;margin:-2.5rem 0 1.5rem}
.lavender-strip .stalk{opacity:.5}
@media (max-width:899px){.hero-in{padding-bottom:7.5rem}}
@media (min-width:900px){.hero-in{padding-bottom:9rem}.lavender{height:210px}}
@media (prefers-reduced-motion:reduce){.stalk,.petal{animation:none}.petals{display:none}}

/* music invite in hero */
.music-invite{margin:1.1rem 0 0}
.music-inline{display:inline-flex;align-items:center;gap:8px;background:transparent;border:0;color:#efe6fb;font:inherit;font-size:.95rem;cursor:pointer;padding:6px 4px;border-bottom:1px dashed rgba(226,196,138,.6)}
.music-inline:hover{color:#fff}.music-inline:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px;border-radius:6px}
.mi-ico{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--gold-2),var(--gold));color:var(--purple)}
.music-btn{transition:opacity .35s,transform .35s,background .25s}
.music-btn.away{opacity:0;transform:translateY(14px);pointer-events:none}
/* phoenix */
.hero-art .phoenix{position:absolute;left:-25%;top:-25%;width:150%;height:150%;z-index:0;overflow:visible;pointer-events:none;filter:drop-shadow(0 0 6px rgba(226,196,138,.35))}
.phoenix *{fill:none;stroke:url(#phg);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.phoenix .ph-leaf path{fill:#e2c48a;fill-opacity:.16}
.phoenix .ph-vein path{stroke-opacity:.55;stroke-width:.7}
.phoenix .ph-fill,.phoenix .ph-fill *{fill:url(#phg)}
.ph-float{animation:phfloat 9s ease-in-out infinite;transform-box:view-box;transform-origin:50% 50%}
.ph-wing{transform-box:view-box;animation:wingL 6.5s ease-in-out infinite}
.ph-wl{transform-origin:46% 45%}.ph-wr{transform-origin:54% 45%;animation-name:wingR}
.ph-tail{transform-box:view-box;transform-origin:50% 57%;animation:tail 7s ease-in-out infinite}
@keyframes phfloat{0%,100%{transform:translateY(3px)}50%{transform:translateY(-6px)}}
@keyframes wingL{0%,100%{transform:rotate(0)}50%{transform:rotate(2.5deg)}}
@keyframes wingR{0%,100%{transform:rotate(0)}50%{transform:rotate(-2.5deg)}}
@keyframes tail{0%,100%{transform:rotate(-1.2deg)}50%{transform:rotate(1.2deg)}}
.ember{position:absolute;bottom:40px;width:3px;height:3px;border-radius:50%;background:#f3d79a;box-shadow:0 0 6px 1px rgba(243,215,154,.7);opacity:0;animation:rise 12s linear infinite;will-change:transform,opacity}
@keyframes rise{0%{transform:translate3d(0,0,0);opacity:0}12%{opacity:.85}70%{opacity:.5}100%{transform:translate3d(var(--dx,0),-420px,0);opacity:0}}
@media (prefers-reduced-motion:reduce){.ph-float,.ph-wing,.ph-tail,.ember{animation:none}.ember{display:none}}
@media (max-width:899px){.hero-in{padding-top:3.4rem}}

.music-inline{background:rgba(42,31,58,.5);border:1px solid rgba(226,196,138,.45);border-radius:999px;padding:5px 14px 5px 6px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
@media (max-width:899px){.phoenix .ph-tail{display:none}}

@media (max-width:899px){.hero-art{width:min(68vw,300px)}.hero-in{padding-top:3rem;gap:1.6rem}}

/* link to the agreement page */
.ag-link{margin:1rem 0 0;text-align:center;font-size:1rem}
.ag-link a{display:inline-flex;align-items:center;gap:.45rem;color:var(--purple-2);font-weight:600;text-decoration:none;border-bottom:1px dashed var(--gold);padding:.3rem .1rem}
.ag-link a::before{content:"";width:7px;height:7px;border-radius:50% 0 50% 0;background:var(--gold);transform:rotate(45deg)}
.ag-link a:hover{color:var(--purple)}

/* second verse: the destination */
.verse-link{display:flex;align-items:center;justify-content:center;gap:.6rem;margin:1.1rem auto .2rem;color:var(--gold)}
.vl-line{display:block;width:2px;height:26px;background:linear-gradient(var(--gold),transparent);border-radius:2px}
.vl-line:first-child{background:linear-gradient(transparent,var(--gold))}
.verse-link{flex-direction:column;gap:.25rem}
.vl-spark{filter:drop-shadow(0 0 6px rgba(226,196,138,.8));animation:vlglow 4s ease-in-out infinite}
@keyframes vlglow{0%,100%{opacity:.75;transform:scale(.92)}50%{opacity:1;transform:scale(1.06)}}
.verse-bridge{text-align:center;font-family:'El Messiri',serif;font-weight:600;color:var(--purple-2);font-size:clamp(1.1rem,4.2vw,1.3rem);margin:.2rem 0 .9rem}
.verse-result{margin-top:0;background:linear-gradient(160deg,#5a427e,#3f2e58 60%,#4a3668);box-shadow:0 0 0 1px rgba(226,196,138,.55),0 22px 46px -22px rgba(201,162,91,.75)}
.verse-result::before{border-color:rgba(226,196,138,.6)}
.verse-result .ayah{font-size:clamp(1.45rem,5.6vw,1.95rem);color:#f6e2a8;text-shadow:0 0 18px rgba(226,196,138,.35)}
.verse-result .ref{color:var(--gold-2);opacity:.95}
.contact-actions{justify-content:center}
@media (prefers-reduced-motion:reduce){.vl-spark{animation:none}}
html{overflow-x:clip}

/* phoenix artwork (replaces the line-art svg) */
.hero-art .phoenix-img{position:absolute;left:50%;top:52%;width:150%;max-width:none;height:auto;z-index:0;pointer-events:none;
  transform:translate(-50%,-52%);animation:phimg 9s ease-in-out infinite;filter:drop-shadow(0 0 14px rgba(226,196,138,.35));border-radius:0;box-shadow:none}
@keyframes phimg{0%,100%{transform:translate(-50%,-51%)}50%{transform:translate(-50%,-53.5%)}}
.hero-art::before{inset:-22%}
@media (min-width:900px){ .hero-art .phoenix-img{width:165%} }
@media (prefers-reduced-motion:reduce){ .hero-art .phoenix-img{animation:none} }
.hero-text{position:relative;z-index:2}
@media (max-width:899px){.hero-in{padding-top:4.2rem;gap:2.4rem}}
@media (min-width:900px){.hero-in{padding-top:5.6rem}}

/* real lavender footage (replaces the drawn stalks) */
.lav-real{position:absolute;left:0;right:0;bottom:0;height:250px;z-index:1;pointer-events:none;overflow:hidden;
  background:url(assets/lavender-poster.jpg) center 72%/cover no-repeat;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.55) 30%,#000 58%);mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.55) 30%,#000 58%)}
.lav-video{display:block;width:100%;height:100%;object-fit:cover;object-position:center 72%}
.lav-real::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(58,42,82,.35),rgba(58,42,82,0) 55%)}
@media (min-width:900px){ .lav-real{height:330px} }
@media (prefers-reduced-motion:reduce){ .lav-video{display:none} }
.lav-strip{height:90px;margin:-2.5rem 0 1.5rem;background:url(assets/lavender-poster.jpg) center 70%/cover no-repeat;opacity:.55;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 60%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 60%,transparent)}
.lav-video{object-position:center 62%}.lav-real{background-position:center 62%}
/* v2 phoenix: lift so the head clears the logo circle */
.hero-art .phoenix-img{width:168%;transform:translate(-50%,-60%);animation-name:phimg2}
@keyframes phimg2{0%,100%{transform:translate(-50%,-59%)}50%{transform:translate(-50%,-61.5%)}}
@media (max-width:899px){.hero-in{padding-top:7.6rem}}
@media (min-width:900px){.hero-in{padding-top:8.5rem}.hero-art .phoenix-img{width:170%}}
@media (prefers-reduced-motion:reduce){.hero-art .phoenix-img{animation:none}}
@media (min-width:900px){.hero-in{padding-top:10rem}}

/* her verses block */
.verses{margin:2.2rem 0 0;padding:2rem 1.2rem 2.2rem;text-align:center;border-radius:var(--radius);background:linear-gradient(160deg,#4a3668,#3a2a52);color:#ece4f7;box-shadow:var(--shadow);position:relative;overflow:hidden}
.verses::before{content:"";position:absolute;inset:8px;border:1px solid rgba(226,196,138,.35);border-radius:16px;pointer-events:none}
.verses p{margin:0}
.v-trio{display:grid;gap:.55rem}
.ayah-s{font-family:'Amiri','El Messiri',serif;font-size:clamp(1.2rem,4.8vw,1.5rem);color:var(--gold-2);line-height:1.9}
.verses .ref{display:block;margin:.15rem 0 0;font-size:.88rem;color:#d9cfe8;opacity:.85}
.v-trio .ref{display:inline;margin:0 .25rem 0 0;font-size:.82rem}
.v-sep{display:block;width:46px;height:1px;margin:1.4rem auto;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.v-spark{width:auto;height:auto;background:none;color:var(--gold-2);filter:drop-shadow(0 0 6px rgba(226,196,138,.8))}
.v-line{font-size:clamp(1.08rem,4.2vw,1.2rem);line-height:2;color:#f1eaf9;margin-bottom:.7rem!important}
.v-faith{font-family:'El Messiri','Tajawal',serif;font-weight:600;color:#fff}
.verses .ayah{font-family:'Amiri','El Messiri',serif;font-size:clamp(1.3rem,5.2vw,1.7rem);color:var(--gold-2);line-height:2;max-width:30ch;margin-inline:auto}
.verses .ayah-big{font-size:clamp(1.45rem,5.8vw,1.95rem);color:#f6e2a8;text-shadow:0 0 18px rgba(226,196,138,.35)}
.verses .ayah-big + .ref{margin-bottom:1.3rem}

/* v3 phoenix (slightly taller crest): a little more top room on desktop so the crest clears the menu bar */
@media (min-width:900px){.hero-in{padding-top:13rem}}

/* lavender petals drifting across the whole page */
.petal-sky{position:fixed;inset:0;z-index:15;pointer-events:none;overflow:hidden}
.pf{position:absolute;top:-40px;left:var(--x);opacity:var(--o,.7);animation:pfall var(--d,22s) linear infinite;animation-delay:var(--dl,0s);will-change:transform}
.pf i{display:block;animation:psway var(--sd,3.5s) ease-in-out infinite alternate;will-change:transform;filter:drop-shadow(0 1px 2px rgba(63,46,88,.25))}
.pf svg{display:block;width:100%;height:100%}
@keyframes pfall{from{transform:translate3d(0,-6vh,0)}to{transform:translate3d(var(--dx,-20vw),112vh,0)}}
@keyframes psway{from{transform:translateX(calc(var(--sw,16px) * -1)) rotate(var(--r0,-30deg))}to{transform:translateX(var(--sw,16px)) rotate(var(--r1,90deg))}}
@media (prefers-reduced-motion:reduce){.petal-sky{display:none}}
/* footer lavender band: real moving footage (poster stays as first paint / fallback) */
.lav-band{position:relative;height:120px;opacity:.85;overflow:hidden}
.lav-band .lav-video{width:100%;height:100%;object-fit:cover;object-position:center 70%}
@media (min-width:900px){.lav-band{height:150px}}
.footer .nw{white-space:nowrap}

/* logo cut out from its baked background, floating over the moving lavender */
.hero-art .logo-disc{position:relative;z-index:1;aspect-ratio:1/1;border-radius:50%;overflow:hidden;isolation:isolate;
  background:#3f2e58 url(assets/lavender-poster.jpg) center 58%/cover no-repeat;
  box-shadow:0 0 0 1px rgba(226,196,138,.6),0 0 0 10px rgba(255,255,255,.05),0 30px 60px -25px rgba(0,0,0,.6)}
.logo-disc .lav-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 58%;z-index:0}
.logo-disc::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 62% 48% at 50% 47%,rgba(36,26,52,.55) 0,rgba(36,26,52,.25) 70%,rgba(36,26,52,.12) 100%)}
.hero-art .logo-disc img.logo-cut{position:absolute;left:50%;top:50%;width:80%;height:auto;transform:translate(-50%,-52%);z-index:2;
  border-radius:0;box-shadow:none;filter:drop-shadow(0 2px 5px rgba(20,12,32,.7)) drop-shadow(0 0 14px rgba(42,31,58,.5))}

/* v5: calmer petals — few, small, soft, at the page edges and behind the content */
.petal-sky{z-index:1}
main,.footer{position:relative;z-index:2}

/* v5: the logo's own scene, alive — the disc shows the original logo background (lettering removed) as a seamless loop,
   with the transparent lettering placed exactly where it sits in the original image */
.hero-art .logo-disc{background:#3f2e58 url(assets/logo-bg-sq.jpg) center/cover no-repeat}
.logo-disc .lav-video{object-position:center center}
.logo-disc::after{display:none}
.hero-art .logo-disc img.logo-cut{left:14.01%;top:36.43%;width:56.3%;transform:none;
  filter:drop-shadow(0 3px 4px rgba(22,12,34,.55))}
.lav-real,.lav-strip{background-image:url(assets/logo-bg-wide.jpg)}
/* v5: the mauve tail flows out beneath the circle — a slightly smaller circle, the phoenix set lower behind it */
.hero-art{width:min(58vw,236px)}
.hero-art .phoenix-img{width:196%;transform:translate(-50%,-48%);animation-name:phimg5}
@keyframes phimg5{0%,100%{transform:translate(-50%,-47.4%)}50%{transform:translate(-50%,-48.8%)}}
@media (min-width:900px){.hero-art{width:100%;max-width:340px}.hero-art .phoenix-img{width:196%}}
@media (prefers-reduced-motion:reduce){.hero-art .phoenix-img{animation:none;transform:translate(-50%,-48%)}}
@media (max-width:899px){.hero-art{margin-bottom:4.6rem}}
@media (min-width:900px){.hero-art{margin-bottom:5rem}}
/* v5 footer notice: two calm paragraphs, then the two numbers */
.footer .disc .disc-p{margin:0 0 .7rem;line-height:1.85}
.footer .disc-lines{list-style:none;margin:.2rem 0 1rem;padding:0;display:grid;gap:.45rem;line-height:1.75}
.footer .disc-lines li{position:relative;padding-inline-start:1.1rem}
.footer .disc-lines li::before{content:"";position:absolute;inset-inline-start:.15rem;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--gold);opacity:.85}
.footer .disc-lines a{font-weight:700;color:var(--gold-2);white-space:nowrap}

/* v6: front-facing phoenix (original art). Head + full neck rise above the circle, the mauve tail falls below it.
   The body sits behind the circle; a second copy of the same art, masked to the head and neck, sits in front of the rim
   so the neck is never hidden. Both copies share size, position and float so they stay perfectly aligned. */
.hero-art .phoenix-img{width:196%;top:52%;transform:translate(-50%,-45.4%);animation-name:phimg6}
@keyframes phimg6{0%,100%{transform:translate(-50%,-44.7%)}50%{transform:translate(-50%,-46.1%)}}
.hero-art .phoenix-img.phoenix-front{z-index:3;filter:none;
  -webkit-mask-image:radial-gradient(ellipse 10.5% 14.5% at 50% 14.5%,#000 70%,transparent 100%),linear-gradient(to bottom,transparent 58.5%,#000 63.5%);
          mask-image:radial-gradient(ellipse 10.5% 14.5% at 50% 14.5%,#000 70%,transparent 100%),linear-gradient(to bottom,transparent 58.5%,#000 63.5%)}
@media (min-width:900px){.hero-art .phoenix-img{width:196%}}
@media (prefers-reduced-motion:reduce){.hero-art .phoenix-img{animation:none;transform:translate(-50%,-45.4%)}}
@media (max-width:899px){.hero-art{margin-bottom:7rem}}
@media (min-width:900px){.hero-art{margin-bottom:8.5rem}}

/* v6: no flying lavender — only a few soft gold stars at the edges, slowly twinkling and drifting */
.petal{display:none}
.star-sky{z-index:1}
.gs{position:absolute;opacity:0;pointer-events:none;filter:drop-shadow(0 0 4px rgba(246,226,168,.85)) drop-shadow(0 0 9px rgba(226,196,138,.45));
  animation:gstw var(--tw,6s) ease-in-out infinite,gsfl var(--fl,18s) ease-in-out infinite alternate;animation-delay:var(--dl,0s);will-change:opacity,transform}
.gs svg{display:block;width:100%;height:100%}
@keyframes gstw{0%,100%{opacity:0}45%,60%{opacity:var(--mx,.7)}}
@keyframes gsfl{from{transform:translate3d(0,0,0) rotate(0deg) scale(.85)}to{transform:translate3d(6px,-22px,0) rotate(45deg) scale(1.05)}}
@media (prefers-reduced-motion:reduce){.star-sky{display:none}}

/* v6 bands */
.lav-real,.lav-strip{background-image:url(assets/lavender-poster.jpg)}

/* v7: no circle anywhere — the whole hero is the moving natural lavender field; the phoenix (front-facing) spreads
   its wings over it and the gold «براح» lettering floats on its chest, head and neck above, mauve tail below. */
.hero .lav-real{inset:0;height:auto;bottom:0;z-index:0;-webkit-mask-image:none;mask-image:none;background-position:center 60%}
.hero .lav-real .lav-video{object-position:center 60%}
.hero .lav-real::after{background:linear-gradient(to bottom,rgba(40,28,60,.78) 0,rgba(48,34,72,.5) 30%,rgba(48,34,72,.42) 60%,rgba(40,28,60,.6) 100%)}
.hero-in,.page-hero-in{position:relative;z-index:2}
.hero .hero-art{width:min(88vw,370px);aspect-ratio:1/1;margin:0 auto;justify-self:center}
.hero .hero-art::before{content:"";position:absolute;inset:auto;left:14%;right:14%;top:27%;height:46%;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(30,20,46,.9) 0,rgba(30,20,46,.62) 42%,rgba(30,20,46,0) 72%);filter:blur(8px);z-index:1}
.hero .hero-art .phoenix-img{left:0;top:0;width:100%;height:auto;transform:none;animation:phimg7 9s ease-in-out infinite;
  filter:drop-shadow(0 0 12px rgba(226,196,138,.3))}
@keyframes phimg7{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.4%)}}
.hero .hero-art .logo-float{position:absolute;left:21%;width:58%;top:30%;z-index:2;animation:lgfl 7s ease-in-out infinite}
@keyframes lgfl{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.hero .hero-art .logo-float img.logo-cut{position:static;display:block;width:100%;height:auto;transform:none;border-radius:0;box-shadow:none;
  filter:drop-shadow(0 1px 2px rgba(18,10,30,.95)) drop-shadow(0 0 6px rgba(18,10,30,.7)) drop-shadow(0 0 16px rgba(246,226,168,.25))}
@media (max-width:899px){.hero-in{padding-top:4.2rem}.hero .hero-art{margin-bottom:.4rem}}
@media (min-width:900px){.hero-in{padding-top:6.5rem}.hero .hero-art{width:100%;max-width:470px;margin-bottom:0}}
@media (prefers-reduced-motion:reduce){.hero .hero-art .phoenix-img,.hero .hero-art .logo-float{animation:none}}
/* inner pages: the same emblem, smaller, no circle */
.page-hero .hero-art.ag-art{width:min(62vw,250px);margin:1.4rem auto .6rem}
@media (min-width:900px){.page-hero .hero-art.ag-art{width:290px;margin-top:2.4rem}}
.hero.page-hero .lav-real{inset:0;height:auto}

/* v8: the whole page is the moving natural lavender field (fixed behind everything); no phoenix, no circles, no bands.
   The gold «براح» lettering floats in the hero; content sits on soft frosted panels so text stays easy to read. */
html{background:#3f2e58}
body{background:transparent}
.field-bg{position:fixed;inset:0;z-index:0;pointer-events:none;background:#4a3668 url(assets/lav-poster.jpg?v=10) center 60%/cover no-repeat}
@media (max-aspect-ratio:3/4){.field-bg{background-image:url(assets/lav-poster-portrait.jpg?v=10);background-position:center}.field-bg .field-video{object-position:center}}
.field-bg .field-video{display:block;width:100%;height:100%;object-fit:cover;object-position:center 60%}
.field-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(36,24,56,.10),rgba(36,24,56,.03) 45%,rgba(36,24,56,.08))}
@media (prefers-reduced-motion:reduce){.field-bg .field-video{display:none}}
.topbar{z-index:20}
main{position:relative;z-index:2;padding-bottom:1.5rem}

.hero::after{display:none}
.hero .hero-art{aspect-ratio:auto;width:min(80vw,330px)}
.hero .hero-art::before{left:4%;right:4%;top:6%;height:88%;
  background:radial-gradient(ellipse at center,rgba(30,20,46,.38) 0,rgba(30,20,46,.18) 45%,rgba(30,20,46,0) 72%)}
.hero .hero-art .logo-float{position:relative;left:auto;top:auto;width:100%}
@media (max-width:899px){.hero-in{padding-top:2.6rem;padding-bottom:4rem}}
@media (min-width:900px){.hero-in{padding-top:5rem;padding-bottom:6rem}.hero .hero-art{width:100%;max-width:440px}}
.page-hero .hero-art.ag-art{width:min(64vw,250px);margin:1.6rem auto 1rem}
@media (min-width:900px){.page-hero .hero-art.ag-art{width:300px}}
.page-hero-in{padding-bottom:4.6rem}
/* frosted panels */
main>.section{width:min(1120px,100% - 1.4rem);margin:0 auto 1.1rem;border-radius:26px;padding:3rem 0;
  background:rgba(251,248,253,.9);-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);
  box-shadow:0 24px 50px -30px rgba(20,10,34,.7)}
main>.section.soft{background:rgba(244,238,251,.9)}
main>.section.contact{background:rgba(42,28,64,.82);color:#ece4f7}
@media (min-width:900px){main>.section{padding:4rem 0;margin-bottom:1.6rem}}
.ag-consent{margin-top:-2.2rem}
.footer{background:rgba(28,16,44,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.hero{background:linear-gradient(to bottom,rgba(32,20,50,.22),rgba(32,20,50,.12) 75%,rgba(32,20,50,0))}
.hero h1,.hero .lead,.hero .eyebrow,.hero .music-invite,.page-hero h1,.page-hero .lead,.page-hero .eyebrow{text-shadow:0 1px 3px rgba(18,8,32,.95),0 0 14px rgba(18,8,32,.65)}
.hero .lead,.page-hero .lead{color:#fff}
.hero h1,.hero .lead,.hero .eyebrow,.hero .music-invite,.page-hero h1,.page-hero .lead,.page-hero .eyebrow{text-shadow:0 1px 3px rgba(18,8,32,.9),0 0 18px rgba(18,8,32,.55),0 0 2px rgba(18,8,32,.6)}

/* v10: the gold phoenix as a quiet brand mark — beside section labels, on the quote, above the closing line — and a small booking button */
.kicker{display:flex;align-items:center;gap:.45rem}
.kicker::before{width:24px;height:24px;flex:0 0 24px;margin:0;border-radius:0;vertical-align:middle;
  background:url(assets/phoenix-mark.webp?v=1) center/contain no-repeat;filter:drop-shadow(0 0 4px rgba(255,205,120,.45))}
.center .kicker,.kicker.center{justify-content:center}
.pull p::before{width:30px;height:30px;margin:.2rem auto .55rem;background:url(assets/phoenix-mark.webp?v=1) center/contain no-repeat;
  filter:drop-shadow(0 0 5px rgba(255,205,120,.5))}
.contact h2::before{content:"";display:block;width:34px;height:34px;margin:0 auto .5rem;
  background:url(assets/phoenix-mark.webp?v=1) center/contain no-repeat;filter:drop-shadow(0 0 6px rgba(255,205,120,.5))}

.phx-fab{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:31;width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;text-decoration:none;
  background:rgba(74,52,108,.62);-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);
  border:1px solid rgba(226,196,138,.55);box-shadow:0 4px 18px rgba(20,8,36,.35),0 0 14px rgba(255,205,120,.22);
  transition:opacity .35s,transform .35s,background .25s,box-shadow .25s}
.phx-fab img{width:34px;height:34px;display:block;filter:drop-shadow(0 0 4px rgba(255,210,130,.55))}
.phx-fab::after{content:"";position:absolute;inset:-1px;border-radius:50%;pointer-events:none;box-shadow:0 0 0 0 rgba(236,206,140,.55);animation:phx-pulse 6s ease-out 2s infinite}
@keyframes phx-pulse{0%{box-shadow:0 0 0 0 rgba(236,206,140,.5)}22%{box-shadow:0 0 0 12px rgba(236,206,140,0)}100%{box-shadow:0 0 0 12px rgba(236,206,140,0)}}
.phx-fab:hover{background:rgba(87,65,122,.9);transform:translateY(-2px);box-shadow:0 6px 22px rgba(20,8,36,.4),0 0 20px rgba(255,205,120,.38)}
.phx-fab:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px}
.phx-fab .phx-tip{position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%) translateX(6px);white-space:nowrap;
  padding:6px 12px;border-radius:999px;background:rgba(40,24,62,.92);color:#fff;font-size:.85rem;font-weight:600;
  border:1px solid rgba(226,196,138,.4);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.phx-fab:hover .phx-tip,.phx-fab:focus-visible .phx-tip{opacity:1;transform:translateY(-50%) translateX(0)}
.phx-fab.away{opacity:0;transform:translateY(14px);pointer-events:none}
@media (max-width:420px){.phx-fab{right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));width:48px;height:48px}.phx-fab img{width:31px;height:31px}}
@media (prefers-reduced-motion:reduce){.phx-fab::after{animation:none}.phx-fab,.phx-fab:hover{transition:none;transform:none}}

/* v10: gold stars along the whole page — fixed layer above the frosted panels (so they show beside the text as you scroll),
   below the top bar, music and booking buttons; stars live only in the side edges, never over the reading column */
.petal-sky.star-sky{z-index:4;position:fixed;inset:0;pointer-events:none;overflow:hidden}
.star-sky .gs{filter:drop-shadow(0 0 3px rgba(240,205,120,.9)) drop-shadow(0 0 8px rgba(214,170,80,.45))}
@keyframes gsfl{from{transform:translate3d(0,0,0) rotate(0deg) scale(.85)}to{transform:translate3d(0,-16px,0) rotate(45deg) scale(1.05)}}
@media (prefers-reduced-motion:reduce){.petal-sky.star-sky{display:none}}


/* v11: testimonials — «أصوات مرّت من هنا» */
#voices .section-head{margin-bottom:1.4rem}
.rv{position:relative}
.rv-track{display:flex;gap:1rem;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;padding:.4rem .2rem 1rem;align-items:flex-start;transition:height .35s ease;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none;outline:none}
.rv-track::-webkit-scrollbar{display:none}
.rv-card{flex:0 0 auto;width:calc(100% - 54px);max-width:340px;margin:0;padding:9px;scroll-snap-align:start;border-radius:20px;
  background:rgba(255,255,255,.58);-webkit-backdrop-filter:blur(8px) saturate(1.15);backdrop-filter:blur(8px) saturate(1.15);
  border:1px solid rgba(201,162,91,.5);box-shadow:0 14px 30px -20px rgba(63,46,88,.55),0 0 0 3px rgba(226,196,138,.08)}
.rv-card img{display:block;width:100%;height:auto;border-radius:13px;background:#fff}
.rv-arrow{display:none}
@media (min-width:760px){
  .rv-card{width:330px}
  .rv-arrow{display:grid;place-items:center;position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:44px;height:44px;border-radius:50%;
    border:1px solid rgba(201,162,91,.6);background:rgba(255,255,255,.82);color:var(--purple,#57417a);font-size:1.7rem;line-height:1;cursor:pointer;
    box-shadow:0 8px 20px -10px rgba(63,46,88,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:opacity .2s,transform .2s}
  .rv-arrow:hover{transform:translateY(-50%) scale(1.06)}
  .rv-arrow:disabled{opacity:0;pointer-events:none}
  .rv-prev{right:-10px}.rv-next{left:-10px}
  .rv-track{padding-inline:2.6rem;scroll-padding-inline:2.6rem}
}
.rv-dots{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;margin-top:.3rem}
.rv-dots button{width:6px;height:6px;padding:0;border:0;border-radius:50%;background:rgba(201,162,91,.35);cursor:pointer;transition:background .2s,transform .2s}
.rv-dots button.on{background:var(--gold);transform:scale(1.35)}
#voices .rv-title{display:flex;align-items:center;gap:.5rem}
#voices .rv-title::before{content:"";width:28px;height:28px;flex:0 0 28px;background:url(assets/phoenix-mark.webp?v=1) center/contain no-repeat;filter:drop-shadow(0 0 4px rgba(255,205,120,.45))}
#voices .rv-sub{font-size:.95rem;color:var(--muted);margin-top:.2rem}

/* v12: compact counter for the long testimonials strip */
.rv-dots.rv-count{display:block;text-align:center;font-size:.85rem;letter-spacing:.04em;color:var(--gold);opacity:.9;margin-top:.35rem;font-variant-numeric:tabular-nums}

/* justify body paragraphs like the articles (Yasmin 31 Oct) */
.wrap.narrow:not(.center) > p, .wrap.narrow:not(.center) p:not(.ayah):not([class*="center"]), .card.svc p, .pts li, .pts p, .doc p, .acc-b p, .acc-b li, .cin-card-x{text-align:justify;text-justify:inter-word}

.v-line p,.v-line,.consent-intro p,.consent-intro{text-align:center!important}

/* centre quotes and all Quran verses (Yasmin 31 Oct, 10:14 PM) */
.pull, .pull p, .verses p, .verse p, .v-trio p, p.ayah, .ayah, .ayah-s, .ref, .verse-bridge, .verse figcaption{text-align:center !important;text-justify:auto}

/* footer disclaimer justified (Yasmin 1 Nov) */
.footer .disc-p,.footer .disc-lines li{text-align:justify;text-justify:inter-word}