/* The luxe layer: night-green and gold, a fashion serif, hairlines and foil. */
:root {
  --bg: #0B1C19; --bg2: #11272300; --card: rgba(241, 221, 168, .035); --ink: #EFE6D2; --mute: #A9A291; --line: rgba(212, 178, 106, .2);
  --deep: #12302B; --deep2: #173B35; --gold: #D4B26A; --gold2: #F1DDA8; --sage: #7FA393; --on-deep: #EFE6D2;
  --disp: "Bodoni Moda", "Didot", Georgia, serif; --body: "Jost", system-ui, sans-serif;
  --foil: linear-gradient(100deg, #9C7A3C 0%, #F1DDA8 28%, #C29A52 46%, #F8EBC5 64%, #A9823F 82%, #EAD39A 100%);
}
html[lang=ar] { --disp: "Amiri", serif; --body: "IBM Plex Sans Arabic", sans-serif; }
body[data-season=ramadan] { --bg: #0C1024; --deep: #161C3A; --deep2: #1D2548; --gold: #DDBB6A; --gold2: #F4E0A6; }
body[data-season=eid] { --bg: #170E1E; --deep: #2A1834; --deep2: #351F42; --gold: #DDB46E; --gold2: #F3DCA8; }
body[data-season=summer] { --bg: #08201F; --deep: #0E3634; --deep2: #134240; --gold: #E2BA66; --gold2: #F6E1A6; }

body { background: var(--bg); color: var(--ink); font-weight: 300; letter-spacing: .01em; }
html[lang=ar] body { font-weight: 400; letter-spacing: 0; }
body::before { content: ""; position: fixed; inset: 0; z-index: 200; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); }
::selection { background: var(--gold); color: #0B1C19; }

h1, h2, h3 { font-weight: 400; letter-spacing: -.015em; color: var(--ink); }
html[lang=ar] h1, html[lang=ar] h2, html[lang=ar] h3 { font-weight: 700; }
.foil, .hero h1 em, .sh h2 em { background: var(--foil); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; animation: sheen 9s linear infinite; }
@keyframes sheen { to { background-position: -220% 0; } }
.eyebrow { font: 500 11px/1 var(--body); letter-spacing: .38em; color: var(--gold); display: flex; align-items: center; gap: 14px; }
.eyebrow::before { content: ""; width: 34px; height: 1px; background: var(--gold); }
html[lang=ar] .eyebrow { letter-spacing: 0; font-size: 14px; }

/* buttons: gold hairline that fills with gold */
.btn { position: relative; overflow: hidden; isolation: isolate; background: transparent; color: var(--gold2); border: 1px solid var(--gold); border-radius: 0; padding: 16px 30px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; font-size: 12px; }
html[lang=ar] .btn { letter-spacing: 0; font-size: 15px; text-transform: none; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--foil); background-size: 200% 100%; transform: scaleX(0); transform-origin: right; transition: transform .6s var(--ease); }
.btn:hover { transform: none; color: #0B1C19; }
.btn:hover::before { transform: scaleX(1); transform-origin: left; }
.btn--gold { color: #0B1C19; }
.btn--gold::before { transform: scaleX(1); }
.btn--ghost { border-color: rgba(212, 178, 106, .45); color: var(--ink); }
.btn--sm { padding: 11px 20px; }
.chip { background: transparent; border-color: var(--line); color: var(--ink); border-radius: 0; letter-spacing: .1em; font-size: 12px; }
.x { background: transparent; border-color: var(--line); color: var(--ink); }

.sample-bar { background: #050D0C; color: var(--gold); letter-spacing: .04em; border-bottom: 1px solid var(--line); }
.sample-bar a { color: var(--gold2); }

/* header */
.top { background: color-mix(in srgb, var(--bg) 78%, transparent); border-bottom: 1px solid var(--line); padding-block: 16px; }
.brand svg { stroke: var(--gold); }
.brand b { color: var(--gold2); font: 400 28px/1 "Bodoni Moda", serif; font-style: italic; }
.brand small { color: var(--gold); letter-spacing: .34em; font-size: 9px; }
.nav a { color: var(--mute); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
html[lang=ar] .nav a { letter-spacing: 0; font-size: 15px; text-transform: none; }
.nav a:hover, .nav a.on { color: var(--gold2); }
.nav a.on::after { height: 1px; background: var(--gold); }
.burger { background: transparent; border-color: var(--line); } .burger i { background: var(--gold2); }

/* intro */
.intro { background: radial-gradient(80% 60% at 50% 45%, var(--deep2), #050D0C); }
.intro-word span { font: italic 400 58px/1 "Bodoni Moda", serif; background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* hero: editorial, with an ornamented arch */
.hero { min-height: calc(100svh - 120px); padding-block: clamp(30px, 5vw, 60px); }
.hero h1 { font-size: clamp(3.4rem, 1.8rem + 6.6vw, 7.6rem); line-height: .95; color: var(--ink); font-weight: 400; }
html[lang=ar] .hero h1 { line-height: 1.3; }
.hero h1 em { font-weight: 400; }
.hero .lead { color: var(--mute); font-size: 1.12rem; line-height: 1.75; }
.season-note { background: transparent; border: 1px solid var(--gold); color: var(--gold2); border-radius: 0; letter-spacing: .1em; font-weight: 400; }
.arch { border-radius: 999px 999px 0 0; background: radial-gradient(110% 70% at 50% 108%, rgba(241, 221, 168, .55), transparent 62%), linear-gradient(180deg, var(--deep2), #081412); box-shadow: 0 0 0 1px var(--gold), 0 0 0 10px var(--bg), 0 0 0 11px rgba(212, 178, 106, .45), 0 60px 120px -40px rgba(0, 0, 0, .8); }
.arch::before { border-color: rgba(241, 221, 168, .35); inset: 22px; }
.arch .tiles { opacity: .16; }
.arch::after { content: "✦"; position: absolute; left: 50%; top: 9%; translate: -50% 0; color: var(--gold2); font-size: 22px; text-shadow: 0 0 18px var(--gold); animation: twinkle 4s ease-in-out infinite; }
body[data-season=ramadan] .arch::after, body[data-season=summer] .arch::after { display: none; }
@keyframes twinkle { 50% { opacity: .35; } }
.arch .basin { background: var(--foil); background-size: 200% 100%; animation: sheen 12s linear infinite; }
.hero-ornament { position: absolute; inset-inline-end: -10px; top: 10%; width: 120px; height: 120px; opacity: .5; animation: spin-slow 60s linear infinite; pointer-events: none; }
@keyframes spin-slow { to { transform: rotate(360deg); } }

/* marquee of ingredients */
.marquee { overflow: hidden; border-block: 1px solid var(--line); padding: 18px 0; margin-bottom: 20px; -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-in { display: flex; gap: 48px; width: max-content; animation: marquee 40s linear infinite; direction: ltr; }
.marquee span { font: italic 400 clamp(1.4rem, 1rem + 1.4vw, 2.2rem) "Bodoni Moda", serif; color: var(--gold2); white-space: nowrap; display: flex; align-items: center; gap: 48px; }
html[lang=ar] .marquee span { font-family: "Amiri", serif; font-style: normal; }
.marquee span::after { content: "✦"; font-size: .6em; color: var(--gold); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* section heads with an ornament */
.sh h2 { font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.4rem); line-height: 1; }
html[lang=ar] .sh h2 { line-height: 1.3; }
.sh p { color: var(--mute); }
.orn { display: flex; align-items: center; gap: 16px; color: var(--gold); margin: 0 0 26px; }
.orn::before, .orn::after { content: ""; flex: 1; max-width: 120px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.orn::after { background: linear-gradient(90deg, var(--gold), transparent); }

/* rituals as an editorial menu */
.menu-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.menu-row { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto auto 40px; gap: 24px; align-items: center; padding: 26px 8px; border-bottom: 1px solid var(--line); text-decoration: none; position: relative; transition: background .4s, padding .4s var(--ease); }
.menu-row::before { content: ""; position: absolute; inset-inline-start: 0; bottom: -1px; width: 100%; height: 1px; background: var(--foil); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
html[dir=rtl] .menu-row::before { transform-origin: right; }
.menu-row:hover { background: rgba(241, 221, 168, .03); padding-inline-start: 22px; }
.menu-row:hover::before { transform: scaleX(1); }
.menu-row .n { font: italic 400 1.1rem "Bodoni Moda", serif; color: var(--gold); }
.menu-row h3 { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.6rem); }
.menu-row small { display: block; color: var(--mute); font-size: .95rem; margin-top: 4px; }
.menu-row .len { color: var(--mute); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.menu-row .pr { font: 400 1.5rem "Bodoni Moda", serif; color: var(--gold2); }
.menu-row .go { color: var(--gold); font-size: 20px; transition: transform .4s var(--ease); }
.menu-row:hover .go { transform: translateX(6px); }
html[dir=rtl] .menu-row:hover .go { transform: translateX(-6px) scaleX(-1); }
html[dir=rtl] .menu-row .go { transform: scaleX(-1); }

/* surfaces: dark glass with gold hairlines */
.ritual, .value, .member, .offer, .step, .list-card, .kpi, .panel, .day, .pill, .time, .who input, .rows li, .fb li { background: var(--card); border-color: var(--line); border-radius: 2px; color: var(--ink); }
.offer, .value, .member, .panel, .kpi, .list-card, .step { border: 1px solid var(--line); }
.offer:hover, .member:hover, .value:hover { border-color: var(--gold); transform: translateY(-4px); }
.offer, .member, .value { transition: transform .5s var(--ease), border-color .4s; }
.offer.hot { background: linear-gradient(150deg, var(--deep2), var(--deep)); }
.offer h3, .value h3, .member h3, .list-card h3, .panel h3 { color: var(--gold2); }
.offer .big { color: var(--gold); opacity: .18; font-style: italic; }
.offer .tag { border-radius: 0; background: transparent; border: 1px solid var(--gold); color: var(--gold2); letter-spacing: .12em; }
.band { border-radius: 0; background: linear-gradient(120deg, var(--deep2), var(--deep)); border: 1px solid var(--line); position: relative; overflow: hidden; }
.band::after { content: "✦"; position: absolute; inset-inline-end: 30%; top: -40px; font-size: 220px; color: var(--gold); opacity: .06; }
.band h2 { background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent; }
.member .face { background: radial-gradient(90% 80% at 30% 20%, var(--deep2), #081412); }
.member .face span { font-style: italic; background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 96px; }
.member .next { color: var(--gold); }
.timeline { border-color: var(--line); }
.timeline b { color: var(--gold); font-family: "Bodoni Moda", serif; font-style: italic; font-size: 1.3rem; }
.story p { color: var(--mute); font-size: 1.15rem; line-height: 1.85; }
.story p:first-child::first-letter { float: left; font: 400 4.4rem/.8 "Bodoni Moda", serif; color: var(--gold); margin: 8px 12px 0 0; }
html[lang=ar] .story p:first-child::first-letter { float: none; font: inherit; color: inherit; margin: 0; }
.gtile { border-radius: 2px; box-shadow: 0 0 0 1px var(--line); }
.gtile .cap { border-radius: 0; background: rgba(5, 13, 12, .7); color: var(--gold2); letter-spacing: .08em; font-size: 12px; }

/* booking */
.step-q { color: var(--ink); font-weight: 400; font-size: 1.15rem; }
.step-q b { color: var(--gold); font-family: "Bodoni Moda", serif; font-style: italic; font-size: 1.1rem; }
.pill, .day, .time { border-radius: 0; }
.pill[aria-pressed=true], .day[aria-pressed=true] { background: var(--gold); color: #0B1C19; border-color: var(--gold); }
.day[aria-pressed=true] small { color: #0B1C19; }
.time[aria-pressed=true] { background: var(--gold2); border-color: var(--gold2); }
.who input { color: var(--ink); }
.full { border-radius: 0; }
.sum { border-radius: 0; background: linear-gradient(160deg, var(--deep2), #081412); border: 1px solid var(--gold); }
.sum h3, .sum .tot b { background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sum .perk { border-radius: 0; border: 1px solid var(--line); background: transparent; }

/* my visits */
.loyal { border-radius: 0; border: 1px solid var(--gold); background: radial-gradient(120% 90% at 0% 0%, var(--deep2), #081412); }
.loyal h3 { background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stamp.on { background: var(--foil); background-size: 200% 100%; animation: sheen 9s linear infinite; }
.badge { border-radius: 0; background: transparent; border: 1px solid var(--line); color: var(--gold2); }
.badge.gold { background: var(--gold); color: #0B1C19; }

/* owner */
.kpi b { color: var(--gold2); font-weight: 400; }
.kpi i { color: #9FD0AE; }
.bars span { background: rgba(241, 221, 168, .25); border-radius: 0; }
.bars div.top span { background: var(--foil); }
.heat i { background: var(--gold); border-radius: 0; }
.toplist .track { background: rgba(241, 221, 168, .08); border-radius: 0; } .toplist .track i { border-radius: 0; background: var(--foil); }
.fb .low { border-inline-start-color: #C77A64; }
.vip { border-radius: 0; background: linear-gradient(150deg, var(--deep2), #081412); border: 1px solid var(--gold); }
.vip textarea { background: rgba(255, 255, 255, .04); color: var(--ink); border: 1px solid var(--line); border-radius: 0; }

/* tour + modal */
.tour-btn { border-radius: 0; background: var(--foil); background-size: 200% 100%; animation: sheen 9s linear infinite; color: #0B1C19; letter-spacing: .1em; text-transform: uppercase; font-size: 12px; }
html[lang=ar] .tour-btn { letter-spacing: 0; font-size: 15px; text-transform: none; }
.tour { background: #0E221F; border-color: var(--gold); border-radius: 0; color: var(--ink); }
.tour-h b { color: var(--gold2); font-style: italic; }
.tour-list button { background: rgba(241, 221, 168, .03); border-color: var(--line); border-radius: 0; }
.tour-list button::before { background: transparent; border: 1px solid var(--gold); color: var(--gold2); }
.tour-list small { color: var(--mute); }
.seasons span { background: transparent; border-color: var(--line); border-radius: 0; }
.seasons span.on { background: var(--gold); color: #0B1C19; }
.modal { background: #0E221F; border: 1px solid var(--gold); border-radius: 0; color: var(--ink); }
.modal h3 { color: var(--gold2); font-style: italic; }
.stars button { border-radius: 0; background: transparent; color: rgba(241, 221, 168, .25); }
.modal textarea { background: rgba(255, 255, 255, .04); color: var(--ink); border-radius: 0; }
.mail-hero { background: linear-gradient(150deg, #12302B, #081412); }
.mail-hero h4 { font-family: "Bodoni Moda", serif; font-style: italic; color: #F1DDA8; }
html[lang=ar] .mail-hero h4 { font-family: "Amiri", serif; font-style: normal; }
.mail-body .btn { color: #12302B; border-color: #12302B; }
.mail-body .btn:hover { color: #0B1C19; }

.foot { background: #050D0C; border-top: 1px solid var(--line); }
.foot-brand b { font-style: italic; background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* reveals */
[data-reveal] { will-change: transform, opacity; }

@media (max-width: 980px) {
  .nav { background: #081412; }
  .nav a { color: var(--ink); border-color: var(--line); font-size: 1.1rem; }
  .hero { min-height: 0; }
}
@media (max-width: 640px) {
  .menu-row { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 6px 14px; padding: 20px 4px; }
  .menu-row .len { grid-column: 2; grid-row: 2; }
  .menu-row .go { display: none; }
  .menu-row .pr { grid-row: 1 / span 2; grid-column: 3; }
  .hero-ornament { display: none; }
}
.hero { padding-inline: clamp(16px, 4vw, 40px); }
.hero h1 em { display: inline-block; padding: 0 .12em .08em .06em; margin: 0 -.12em -.08em -.06em; }
:root { --foil: linear-gradient(100deg, #C9A35A 0%, #F1DDA8 28%, #CFA75D 46%, #F8EBC5 64%, #C29A52 82%, #EAD39A 100%); }
.toast { background: var(--gold2); color: #0B1C19; border-radius: 0; font-weight: 500; }