/* DARANA Cultural — Visual Identity v1.0 “The Painted Room”, website scale (v3.1)
   Paper #F4EEE3 · Plaster #E8DCCB · Sand #D2BC97 · Unnab #72061D · Ink #231D1B · Sky #A9BAC4 · Dusk #4F616B
   Newsreader (display, reading) · Jost (labels, navigation, buttons) · Noto Naskh Arabic (all Arabic)

   Type scale (one hierarchy for the whole site):
   page title 38–64 · section title 28–42 · sub-heading 22–30 · card title 21–24 · lead 18–21 · body 17 · label 11 */

:root {
	--paper: #F4EEE3;
	--plaster: #E8DCCB;
	--sand: #D2BC97;
	--unnab: #72061D;
	--ink: #231D1B;
	--sky: #A9BAC4;
	--dusk: #4F616B;
	--muted: #62594F;
	--hair: #C9BDAC;
	--serif: "Newsreader", Georgia, "Times New Roman", serif;
	--sans: "Jost", "Helvetica Neue", Arial, sans-serif;
	--naskh: "Noto Naskh Arabic", "Geeza Pro", Tahoma, serif;
	--gut: clamp(20px, 4.5vw, 64px);
	--max: 1320px;
	--sp: clamp(64px, 8vw, 120px);
	--sp-s: clamp(40px, 5vw, 72px);
	--t-page: clamp(38px, 4.4vw, 64px);
	--t-sec: clamp(28px, 2.8vw, 42px);
	--t-sub: clamp(22px, 2vw, 30px);
	--t-card: clamp(21px, 1.6vw, 24px);
	--t-lead: clamp(18px, 1.45vw, 21px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--serif);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
main { overflow-x: clip; }
img, svg { max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 300; }
ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
em { font-style: italic; }
:focus-visible { outline: 2px solid var(--unnab); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

.skip { position: absolute; inset-inline-start: 12px; top: -60px; background: var(--ink); color: var(--paper); padding: 10px 14px; z-index: 100; font: 500 13px var(--sans); }
.skip:focus { top: 12px; }
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }

/* ---------- type ---------- */
.disp, .ptitle { font-weight: 300; font-size: var(--t-page); line-height: 1.06; letter-spacing: -.015em; }
.h1, .stitle, .shead__title { font-weight: 300; font-size: var(--t-sec); line-height: 1.12; letter-spacing: -.005em; }
.h2 { font-weight: 300; font-style: italic; font-size: var(--t-sub); line-height: 1.2; }
.lead { font-style: italic; font-size: var(--t-lead); line-height: 1.5; }
.lead-plain { font-size: var(--t-lead); line-height: 1.6; max-width: 36em; }
.body { font-size: 17px; line-height: 1.65; }
.small { font-size: 14px; line-height: 1.5; color: var(--muted); }
.note { font-style: italic; font-size: 16px; }
.cap { font-style: italic; font-size: 14px; color: var(--muted); margin-top: 10px; }
.lab {
	display: flex; align-items: center; gap: 10px;
	font: 500 11px/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase;
	margin: 0 0 16px;
}
.lab a { text-decoration: none; }
.mk { width: 11px; height: 11px; flex: none; }
.mk--lg { width: 22px; height: 22px; margin-bottom: 14px; }

/* ---------- links & buttons ---------- */
.btn {
	display: inline-block; background: var(--ink); color: var(--paper); text-decoration: none; border: 0; cursor: pointer;
	font: 500 11.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; padding: 16px 24px;
	transition: background .25s ease;
}
.btn:hover { background: var(--unnab); }
.btn--block { display: block; text-align: center; }
.tl {
	display: inline-block; font: 500 11.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase;
	text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 6px; transition: color .2s, border-color .2s;
}
.tl:hover { color: var(--unnab); border-color: var(--unnab); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 28px; margin-bottom: 0; }

/* ---------- identity elements ---------- */
.field { position: absolute; z-index: 0; pointer-events: none; user-select: none; height: auto; max-width: none; }
[dir="rtl"] .field { transform: scaleX(-1); }
.pattern { display: block; width: 100%; height: 100%; }
.divider { margin-top: 36px; max-width: 320px; }
.divider__svg { width: 100%; height: auto; display: block; }

.slot { position: relative; margin: 0; overflow: hidden; background: var(--plaster); z-index: 1; }
.slot--4-5 { aspect-ratio: 4 / 5; }
.slot--3-2 { aspect-ratio: 3 / 2; }
.slot--3-1 { aspect-ratio: 3 / 1; }
.slot__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.slot--empty { background: linear-gradient(160deg, #E3D7C5, #D8CBB7); }
.slot__hint { position: absolute; inset-inline-start: 14px; bottom: 12px; font: 500 10px var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--dusk); }

/* ---------- header (restored from the original DARANA site header) ---------- */
.hd { position: relative; z-index: 20; background: var(--paper); border-bottom: 1px solid #D6CABA; --lk: 24px; }
.hd__in { display: flex; align-items: center; gap: 32px; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); min-height: calc(var(--lk) * 2 + 48px); }
.sig { display: flex; align-items: center; gap: .83em; font-size: var(--lk); text-decoration: none; flex: none; color: var(--ink); }
.sig img { display: block; height: 2em; width: auto; flex: none; }
.sig span { font: 500 1em var(--sans); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; }
.ft .sig { font-size: 20px; }
.nav { flex: 1; display: flex; justify-content: center; }
.nav ul { display: flex; gap: 44px; }
.nav a { position: relative; display: block; padding-block: 8px; font: 500 14px var(--sans); letter-spacing: .06em; text-decoration: none; color: var(--ink); transition: color .25s ease; }
.nav a::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform .35s ease; }
[dir="rtl"] .nav a::after { transform-origin: right center; }
.nav a:hover { color: var(--dusk); }
.nav a:hover::after, .nav a:focus-visible::after, .nav a[aria-current]::after { transform: scaleX(1); }
.nav a[aria-current] { color: var(--dusk); }
.ft__nav a { position: relative; border-bottom: 0 !important; }
.ft__nav a::after { content: ""; position: absolute; inset-inline: 0; bottom: -3px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform .3s ease; }
[dir="rtl"] .ft__nav a::after { transform-origin: right center; }
.ft__nav a:hover::after { transform: scaleX(1); }
.lng { font: 500 15px var(--naskh); letter-spacing: 0; text-transform: none; text-decoration: none; color: var(--dusk); }
.hd .lng { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 8px; }
.btn--hd { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 24px; background: var(--unnab); border-radius: 2px; font: 500 15px/1 var(--sans); letter-spacing: .02em; text-transform: none; }
.btn--hd:hover { background: #5a0517; }
.menu-btn { display: none; margin-inline-start: auto; background: none; border: 1px solid var(--ink); color: var(--ink); font: 500 11px var(--sans); letter-spacing: .18em; text-transform: uppercase; padding: 9px 13px; cursor: pointer; }
.mnav { padding: 8px var(--gut) 40px; }
.mnav li a { display: block; font: 300 28px/1.3 var(--serif); text-decoration: none; border-top: 1px solid var(--hair); padding: 10px 0; }
.mnav ul { border-bottom: 1px solid var(--hair); margin-bottom: 24px; }
.mnav .lng { display: inline-block; margin-bottom: 24px; }
.mnav .btn { display: block; text-align: center; }

/* ---------- home: hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; padding-top: clamp(16px, 3vw, 40px); padding-bottom: var(--sp); }
.hero__title { margin: 0 0 24px; max-width: 13em; }
.hero__text .lead-plain { max-width: 32em; }
.hero__media { position: relative; padding: 8% 0 10% 12%; max-width: 520px; justify-self: end; width: 100%; }
[dir="rtl"] .hero__media { padding: 8% 12% 10% 0; }
.hero__field { top: 0; inset-inline-end: calc(var(--gut) * -1); width: calc(100% + var(--gut)); height: 100%; }
.hero__img { position: relative; }

/* ---------- home: who we are ---------- */
.intro { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: center; padding-bottom: var(--sp); }
.intro__media { max-width: 360px; }
.intro--split { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.intro--split .intro__media { justify-self: end; width: 100%; }
.intro__text .h1 { margin-bottom: 20px; }
.intro__text .lead-plain { max-width: 34em; }

/* ---------- section head (title + intro + link) ---------- */
.shead { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; border-bottom: 1px solid var(--ink); padding-bottom: 20px; margin-bottom: 32px; }
.shead__title { margin: 0; }
.shead__intro { font-size: 16px; line-height: 1.55; color: var(--muted); margin: 10px 0 0; max-width: 34em; }

/* ---------- experiences (cards) ---------- */
.selected { padding-bottom: var(--sp); }
.xgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 32px; }
.xcard { display: flex; flex-direction: column; }
.xcard__img { display: block; margin-bottom: 18px; overflow: hidden; }
.xcard__img .slot { aspect-ratio: 4 / 3; }
.xcard__img .slot__img { transition: transform .6s ease; }
.xcard:hover .slot__img { transform: scale(1.025); }
.xcard__body { display: flex; flex-direction: column; flex: 1; }
.xcard__body .lab { margin-bottom: 10px; color: var(--dusk); }
.xcard__title { font-size: var(--t-card); line-height: 1.2; margin: 0 0 8px; }
.xcard__title a { text-decoration: none; }
.xcard__title a:hover { color: var(--unnab); }
.xcard__intro { font-size: 16px; line-height: 1.55; margin: 0 0 12px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card__meta { font: 500 11px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 16px; }
.xcard__go { margin-top: auto; align-self: flex-start; }
.selected__empty { max-width: 40em; }
.selected__empty-t { font: 300 var(--t-sub)/1.25 var(--serif); margin-bottom: 12px; }

/* journal & generic cards */
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 40px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.card__img { display: block; margin-bottom: 18px; }
.card__img .slot__img { transition: transform .6s ease; }
.card__img:hover .slot__img { transform: scale(1.02); }
.card__title { font-size: var(--t-card); line-height: 1.2; margin: 0 0 8px; }
.card__title a { text-decoration: none; }
.card__title a:hover { color: var(--unnab); }
.card__intro { font-size: 16px; line-height: 1.55; }
.end { margin-top: 40px; text-align: end; }
.jlatest { padding-bottom: var(--sp); }
.jlatest .h2 { margin-bottom: 28px; }

/* ---------- home: design your experience ---------- */
.dye { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: center; padding-bottom: var(--sp); }
.dye__media { position: relative; padding: 0 10% 10% 0; max-width: 440px; }
[dir="rtl"] .dye__media { padding: 0 0 10% 10%; }
.dye__pattern { position: absolute; top: 12%; bottom: 0; inset-inline-end: 0; width: 70%; z-index: 0; }
.dye__img { position: relative; z-index: 1; }
.dye__text .shead__title { margin-bottom: 18px; }
.dye__cats { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 24px 0 0; padding: 18px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.dye__cats a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font: italic 300 18px/1.3 var(--serif); }
.dye__cats a:hover { color: var(--unnab); }
.dye__cats .mk { width: 9px; height: 9px; }

/* ---------- home: for business ---------- */
.biz { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: center; padding-bottom: var(--sp); }
.biz__panel { position: relative; padding: clamp(36px, 4.5vw, 64px) clamp(28px, 4vw, 56px); }
.biz__field { top: 0; left: 0; width: 100%; height: 100%; }
.biz__head { position: relative; z-index: 1; }
.biz__head .shead__title { margin-bottom: 16px; }
.biz__head .body { max-width: 30em; }
.biz__svcs { border-top: 1px solid var(--ink); }
.bsvc { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 22px; align-items: center; border-bottom: 1px solid var(--hair); padding: 18px 0; }
.bsvc__img { display: block; }
.bsvc__name { font-size: var(--t-card); line-height: 1.2; margin: 0 0 6px; }
.bsvc__name a { text-decoration: none; }
.bsvc__name a:hover { color: var(--unnab); }
.bsvc__line { font-size: 15.5px; line-height: 1.5; margin: 0; color: var(--muted); }

/* ---------- inquiry (home) ---------- */
.inquiry { position: relative; padding: var(--sp-s) 0 clamp(72px, 9vw, 130px); }
.inquiry__field { bottom: 0; inset-inline-end: 0; width: min(34vw, 460px); }
.inquiry__in { position: relative; z-index: 1; }
.inquiry__title { margin-bottom: 20px; max-width: 12em; }
.inquiry__in .lead-plain { max-width: 30em; }

/* ---------- page head / filters ---------- */
.phead { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 48px; align-items: end; padding-top: clamp(20px, 3.5vw, 48px); padding-bottom: 36px; }
.phead__title { margin: 0; }
.phead__intro { margin: 0; }
.filters ul { display: flex; flex-wrap: wrap; gap: 12px 32px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--hair); padding: 18px 0; }
.filters a { font: 500 11.5px var(--sans); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; padding-bottom: 5px; border-bottom: 1px solid transparent; }
.filters a[aria-current], .filters a:hover { border-color: var(--ink); }
.xlist { padding-top: 40px; padding-bottom: var(--sp); }
.empty { padding-top: 48px; padding-bottom: var(--sp); }
.empty .h1 { margin-bottom: 16px; }

.groupblock { position: relative; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); min-height: 300px; margin-bottom: var(--sp); }
.groupblock__pattern { background: var(--plaster); }
.groupblock__in { padding: 56px var(--gut) 56px clamp(28px, 5vw, 80px); align-self: center; }
[dir="rtl"] .groupblock__in { padding: 56px clamp(28px, 5vw, 80px) 56px var(--gut); }
.groupblock__in .h2 { margin-bottom: 14px; }

/* ---------- experience page ---------- */
.xtop { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); max-width: var(--max); margin: 0 auto; padding: clamp(12px, 2vw, 28px) var(--gut) var(--sp-s) 0; align-items: start; }
[dir="rtl"] .xtop { padding: clamp(12px, 2vw, 28px) 0 var(--sp-s) var(--gut); }
.xtop__media { position: relative; padding: 5% 5% 7% var(--gut); }
[dir="rtl"] .xtop__media { padding: 5% var(--gut) 7% 5%; }
.xtop__field { top: 0; inset-inline-start: 0; width: 100%; height: 100%; }
.xtop__title { font-size: clamp(34px, 3.6vw, 52px); line-height: 1.08; margin: 0 0 18px; }
.xtop__aside { padding-top: 8px; }
.facts { margin: 24px 0 4px; border-bottom: 1px solid var(--hair); }
.fact { display: grid; grid-template-columns: 26px 110px 1fr; gap: 12px; align-items: center; border-top: 1px solid var(--hair); padding: 11px 0; }
.fact__icon { width: 22px; height: 22px; }
.fact__icon--mark { width: 11px; height: 11px; justify-self: center; }
.fact dt { font: 500 11px var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.fact dd { font-size: 16px; }
.xsec { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 5vw, 80px); padding-bottom: clamp(40px, 5vw, 64px); align-items: start; }
.xsec__h { padding-top: 4px; }
.xsec__body { max-width: 680px; }
.prose { font-size: 17.5px; line-height: 1.7; }
.prose h2 { font-style: italic; font-size: var(--t-sub); margin: 1.5em 0 .5em; }
.prose h3 { font-size: 21px; margin: 1.3em 0 .4em; }
.prose img { height: auto; }
.prose blockquote { margin: 1.4em 0; padding: 22px 26px; background: var(--unnab); color: var(--paper); font: italic 300 clamp(20px, 1.8vw, 26px)/1.35 var(--serif); }
.prose blockquote p:last-child { margin: 0; }
.prose ul { list-style: none; }
.prose ul li { position: relative; padding-inline-start: 22px; margin-bottom: .4em; }
.prose ul li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .6em; width: 7px; height: 7px; background: var(--unnab); border-radius: 50% 0 50% 0; transform: rotate(23.5deg); }
.prose ol { list-style: decimal; padding-inline-start: 1.4em; }
.marks { border-bottom: 1px solid var(--hair); }
.marks li { display: flex; gap: 14px; align-items: center; border-top: 1px solid var(--hair); padding: 12px 0; font-size: 17px; }
.incl { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.lines li { border-top: 1px solid var(--hair); padding: 10px 0; font-size: 16.5px; }
.days li { display: grid; grid-template-columns: 90px 1fr; gap: 4px 20px; border-top: 1px solid var(--hair); padding: 14px 0; }
.days__n { grid-row: span 2; font: 500 11px var(--sans); letter-spacing: .16em; text-transform: uppercase; padding-top: 5px; }
.days strong { font-weight: 400; font-size: 19px; }
.gallery { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 20px; align-items: end; padding-bottom: var(--sp-s); }
.xinq { position: relative; padding: clamp(48px, 6vw, 88px) var(--gut); margin-bottom: var(--sp-s); }
.xinq__field { top: 0; left: 0; width: 100%; height: 100%; }
.xinq__in { position: relative; z-index: 1; max-width: 640px; margin-inline: auto; }
.xinq .h2 { font-size: var(--t-sec); margin-bottom: 12px; }
.more { padding-bottom: var(--sp); }
.more .h2 { margin-bottom: 28px; }

/* ---------- about ---------- */
.aopen { position: relative; padding-top: clamp(20px, 3.5vw, 48px); padding-bottom: var(--sp); }
.aopen__field { top: 0; inset-inline-end: 0; width: min(30vw, 400px); }
.aopen__in { position: relative; z-index: 1; }
.aopen__title { max-width: 14em; margin-bottom: 24px; }
.aopen__body { max-width: 36em; }
.aopen__media { margin-top: 48px; position: relative; z-index: 1; }
.create { padding-bottom: var(--sp); }
.rows { border-bottom: 1px solid var(--ink); }
.row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 24px; align-items: baseline; border-top: 1px solid var(--ink); padding: 20px 0 24px; text-decoration: none; }
.row__title { font-size: var(--t-sub); line-height: 1.2; }
.row__body { font-size: 17px; line-height: 1.6; max-width: 34em; }
.create__line { margin-top: 20px; }
.awork { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); margin-bottom: var(--sp); min-height: 340px; }
.awork__pattern { background: var(--plaster); }
.awork__in { padding: 56px var(--gut) 56px clamp(28px, 5vw, 80px); }
[dir="rtl"] .awork__in { padding: 56px clamp(28px, 5vw, 80px) 56px var(--gut); }
.awork .h2 { margin-bottom: 24px; }
.alist div { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); gap: 24px; border-top: 1px solid var(--ink); padding: 14px 0; align-items: baseline; }
.alist dt { font: italic 300 clamp(20px, 1.7vw, 24px)/1.2 var(--serif); }
.alist dd { font-size: 16.5px; line-height: 1.55; }
.how { position: relative; padding: clamp(48px, 6vw, 88px) 0; margin-bottom: var(--sp); }
.how__field { top: 0; left: 0; width: 100%; height: 100%; }
.how__in { position: relative; z-index: 1; padding-inline: calc(var(--gut) + 3vw); }
.how .h2 { margin-bottom: 6px; }
.how .lead { margin: 0; }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 32px; }
.steps__n { display: block; font: 300 clamp(28px, 2.4vw, 36px)/1 var(--serif); }
.steps .steps__t { font: italic 300 clamp(20px, 1.6vw, 23px)/1.2 var(--serif); margin: 10px 0 8px; }
.steps p { font-size: 16px; line-height: 1.55; margin: 0; }
.values { padding-bottom: var(--sp); }
.values .h2 { margin-bottom: 28px; }
.value { border-top: 1px solid var(--ink); padding-top: 16px; }
.value .lab { margin-bottom: 8px; }
.value__t { font: italic 300 var(--t-sub)/1.15 var(--serif); margin: 0 0 12px; }
.prev { padding-bottom: var(--sp); }
.prev__row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) minmax(0, 3fr); gap: 32px; align-items: center; border-top: 1px solid var(--ink); padding: 20px 0; }
.prev__row:last-child { border-bottom: 1px solid var(--ink); }
.prev__name { font: italic 300 var(--t-sub)/1.2 var(--serif); margin: 0; }
.prev__name .lab { display: inline; margin: 0; font-style: normal; color: var(--muted); }
.prev__row .body { margin: 0; }
.aclose { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; border-top: 1px solid var(--ink); padding-top: 32px; padding-bottom: var(--sp); }
.aclose .disp { font-size: var(--t-sec); }

/* ---------- contact ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 72px); max-width: var(--max); margin: 0 auto; padding: clamp(16px, 3vw, 40px) 0 var(--sp) var(--gut); align-items: start; }
[dir="rtl"] .contact { padding: clamp(16px, 3vw, 40px) var(--gut) var(--sp) 0; }
.contact__title { margin-bottom: 24px; }
.cdetails { margin-top: 36px; border-bottom: 1px solid var(--hair); max-width: 520px; }
.cdetails div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; border-top: 1px solid var(--hair); padding: 12px 0; align-items: baseline; }
.cdetails div:first-child { border-color: var(--ink); }
.cdetails .lab { margin: 0; }
.contact__form { position: relative; padding: 7% var(--gut) 9% 9%; }
[dir="rtl"] .contact__form { padding: 7% 9% 9% var(--gut); }
.contact__field { top: 0; inset-inline-start: 0; width: 100%; height: 100%; }
.contact__panel { position: relative; z-index: 1; max-width: 600px; }
.contact__panel .small { color: var(--ink); }

/* forms */
.form { display: flex; flex-direction: column; gap: 22px; }
.fl { display: flex; flex-direction: column; gap: 6px; }
.fl2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.fl label { font: 500 11px var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.fl input, .fl select, .fl textarea {
	width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0;
	font: 17px/1.4 var(--serif); color: var(--ink); padding: 7px 0 9px; appearance: none; -webkit-appearance: none;
}
.fl select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23231D1B' stroke-width='1.5'/%3E%3C/svg%3E"); background-position: right 4px center; background-size: 12px 8px; background-repeat: no-repeat; padding-inline-end: 28px; }
[dir="rtl"] .fl select { background-position: left 4px center; }
.fl textarea { min-height: 110px; resize: vertical; }
.fl input::placeholder, .fl textarea::placeholder { color: var(--muted); font-style: italic; }
.fl input:focus, .fl select:focus, .fl textarea:focus { outline: none; border-bottom: 2px solid var(--ink); }
.fl.has-error input, .fl.has-error textarea, .fl.has-error select { border-bottom-color: var(--unnab); }
.err { font: italic 14px var(--serif); color: var(--unnab); margin: 4px 0 0; }
.chk { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.5; }
.chk input { flex: none; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--ink); }
.chk.has-error label { color: var(--unnab); }
.hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.alert { background: var(--paper); border-inline-start: 3px solid var(--unnab); padding: 12px 16px; font-size: 16px; }
.done .h1 { margin-bottom: 18px; }
.form .actions { margin-top: 2px; }

/* ---------- design your experience page ---------- */
.dpage { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; padding-top: clamp(20px, 3.5vw, 48px); padding-bottom: var(--sp); }
.dpage__intro .ptitle { margin-bottom: 20px; }
.dpage__media { position: relative; padding: 0 10% 10% 0; max-width: 380px; margin-top: 36px; }
[dir="rtl"] .dpage__media { padding: 0 0 10% 10%; }
.dform__panel { border-top: 1px solid var(--ink); padding-top: 28px; scroll-margin-top: 16px; }
.picks { border: 0; margin: 0 0 4px; padding: 0; min-width: 0; }
.picks legend { font: 500 11px var(--sans); letter-spacing: .16em; text-transform: uppercase; padding: 0; margin-bottom: 14px; }
.picks__grid { display: flex; flex-wrap: wrap; gap: 10px; }
.pick { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; border: 1px solid var(--hair); padding: 9px 14px; transition: border-color .2s, background .2s; }
.fl label.pick { font: italic 300 17px/1.2 var(--serif); letter-spacing: 0; text-transform: none; }
.fl .pick input { appearance: auto; -webkit-appearance: checkbox; width: 15px; height: 15px; margin: 0; padding: 0; border: 0; accent-color: var(--unnab); flex: none; }
.pick:hover { border-color: var(--ink); }
.pick:has(input:checked) { border-color: var(--unnab); background: rgba(114, 6, 29, .04); }
.pick input:checked + .pick__name { color: var(--unnab); }
.picks.has-error legend { color: var(--unnab); }

/* ---------- for business page ---------- */
.bh { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; max-width: var(--max); margin: 0 auto; padding: clamp(16px, 3vw, 40px) 0 var(--sp) var(--gut); }
[dir="rtl"] .bh { padding: clamp(16px, 3vw, 40px) var(--gut) var(--sp) 0; }
.bh__title { margin: 0 0 14px; }
.bh__sub { font: italic 300 var(--t-lead)/1.45 var(--serif); margin: 0 0 24px; max-width: 26em; }
.bh__text .body { max-width: 34em; }
.bh__line { margin: 20px 0 0; color: var(--dusk); }
.bh__media { position: relative; padding: 9% 18% 11% 12%; }
[dir="rtl"] .bh__media { padding: 9% 12% 11% 18%; }
.bh__field { top: 0; inset-inline-end: 0; width: 100%; height: 100%; }
.bh__img { position: relative; max-width: 380px; }
.bsvcs { padding-bottom: var(--sp-s); }
.bs { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: center; border-top: 1px solid var(--ink); padding: 40px 0; scroll-margin-top: 16px; }
.bs--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.bs--flip .bs__media { order: 2; justify-self: end; }
.bs__media { position: relative; padding: 8% 10%; max-width: 420px; }
.bs__field { top: 0; left: 0; width: 100%; height: 100%; }
.bs__img { position: relative; }
.bs__text .lab { color: var(--unnab); }
.bs__name { margin: 0 0 10px; }
.bs__line { font: italic 300 var(--t-lead)/1.45 var(--serif); margin: 0 0 16px; max-width: 26em; }
.bs__text .body { max-width: 34em; }
.bsvcs__note { border-top: 1px solid var(--ink); padding-top: 22px; margin: 0; font: italic 300 var(--t-lead)/1.45 var(--serif); }
.bclose { position: relative; padding: var(--sp-s) 0 clamp(72px, 9vw, 130px); }
.bclose__field { bottom: 0; inset-inline-end: 0; width: min(34vw, 460px); }
.bclose__in { position: relative; z-index: 1; }
.bclose__title { max-width: 14em; margin: 0 0 16px; }
.bclose .lead-plain { max-width: 30em; }

/* ---------- journal ---------- */
.jfeature { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: end; padding-top: 40px; padding-bottom: 64px; }
.jfeature .h1 { margin-bottom: 14px; }
.jfeature .h1 a { text-decoration: none; }
.byline { font: 500 11px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 16px 0; }
.pager { padding-block: 40px var(--sp); }
.pager .nav-links { display: flex; gap: 24px; font: 500 11.5px var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.article__head { padding-top: clamp(20px, 3.5vw, 48px); padding-bottom: 32px; }
.article__title { max-width: 16em; margin: 6px 0 24px; }
.article__meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; }
.article__meta .lead { margin: 0; max-width: 32em; }
.article__meta .byline { margin: 0; }
.article__body { max-width: 680px; margin: 48px auto var(--sp); padding-inline: var(--gut); }
.endmark { margin-top: 28px; }

/* ---------- generic page ---------- */
.page { padding-top: clamp(20px, 3.5vw, 48px); padding-bottom: var(--sp); }
.page__title { margin-bottom: 32px; max-width: 18em; }
.page .prose { max-width: 720px; }
.e404 { padding-top: 48px; padding-bottom: var(--sp); }
.e404 .disp { margin-bottom: 20px; }

/* ---------- footer ---------- */
.ft { position: relative; background: var(--plaster); overflow: hidden; }
.ft__pattern { position: absolute; inset: 0; opacity: .85; }
.ft__in { position: relative; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 2fr) minmax(0, 3fr) minmax(0, 2fr) auto; gap: 28px; padding-top: 48px; padding-bottom: 28px; }
.ft__line { font: italic 18px/1.4 var(--serif); margin-top: 16px; max-width: 18em; }
.ft__col .lab { margin-bottom: 10px; }
.ft__col p { margin: 0 0 4px; font-size: 15.5px; }
.ft__col a { text-decoration: none; border-bottom: 1px solid transparent; }
.ft__col a:hover { border-color: var(--ink); }
.ft__small { font-size: 13px !important; color: var(--muted); }
.ft__social a { margin-inline-end: 12px; }
.ft__nav li { margin-bottom: 4px; }
.ft__nav a { font: 500 11px var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.ft__lang { justify-self: end; }
.ft__base { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 28px; border-top: 1px solid rgba(35, 29, 27, .18); padding-top: 18px; padding-bottom: 26px; }
.ft__legal { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.ft__legal a { font: 500 11px var(--sans); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }
.ft__legal a:hover { color: var(--unnab); }
.ft__copy { margin: 0; font-size: 14px; }

/* ---------- home: DARANA introduction (lens) ---------- */
.lens { position: relative; padding: clamp(40px, 5vw, 72px) 0; margin-bottom: var(--sp); }
.lens__pattern { position: absolute; top: 0; bottom: 0; inset-inline-end: 0; width: min(26%, 340px); }
.lens__in { position: relative; }
.lens__in .lab { color: var(--unnab); }
.lens__text { font: 300 var(--t-sub)/1.35 var(--serif); max-width: 30em; margin: 0 0 20px; }
.lens__line { font: 500 11.5px/1.6 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--dusk); margin: 0; max-width: 60em; }
[dir="rtl"] .lens__text { font-family: var(--naskh); font-weight: 400; line-height: 1.7; }
[dir="rtl"] .lens__line { font: 500 15px/1.7 var(--naskh); letter-spacing: 0; text-transform: none; }

/* ---------- experiences: tabs ---------- */
.tabs ul { display: flex; flex-wrap: wrap; gap: 8px 36px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--hair); padding: 0; }
.tabs a { display: block; padding: 16px 0 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; font: 300 clamp(18px, 1.5vw, 21px)/1.2 var(--serif); text-decoration: none; color: var(--muted); }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current] { color: var(--ink); border-bottom-color: var(--unnab); }
[dir="rtl"] .tabs a { font-family: var(--naskh); font-weight: 400; }
.xtab { padding-top: 40px; }
.dye.xtab { padding-top: 48px; }
.xtab__next { padding-bottom: var(--sp); margin-top: -40px; }
.ft__cr { margin-top: 8px !important; }
@media (max-width: 600px) { .tabs ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 24px; } .tabs li { flex: none; } }

/* ---------- interactions (v4.1) ---------- */
/* CTA arrow: the arrow moves slightly on hover (added by main.js; text-only without JavaScript). */
.btn { transition: background .25s ease, color .25s ease; }
.btn__arr { display: inline-block; margin-inline-start: .55em; transition: transform .3s ease; }
.btn:hover .btn__arr, .btn:focus-visible .btn__arr, .tl:hover .btn__arr, .tl:focus-visible .btn__arr { transform: translateX(4px); }
[dir="rtl"] .btn:hover .btn__arr, [dir="rtl"] .btn:focus-visible .btn__arr, [dir="rtl"] .tl:hover .btn__arr, [dir="rtl"] .tl:focus-visible .btn__arr { transform: translateX(-4px); }
.tl .btn__arr { margin-inline-start: .4em; }

/* Scroll reveal: sections fade in and rise slightly as they enter the screen. */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } .btn__arr, .nav a::after { transition: none; } }

/* Audience label on experience cards and pages */
.aud { margin: 0 0 12px; }
.aud span { display: inline-block; border: 1px solid var(--unnab); color: var(--unnab); padding: 5px 10px 4px; font: 500 10.5px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.xtop__aside .aud { margin: -4px 0 18px; }
[dir="rtl"] .aud span { font: 500 13.5px/1.3 var(--naskh); letter-spacing: 0; text-transform: none; padding: 4px 10px; }

/* ---------- Arabic ---------- */
[dir="rtl"] body, [dir="rtl"] .fl input, [dir="rtl"] .fl select, [dir="rtl"] .fl textarea { font-family: var(--naskh); }
[dir="rtl"] body { font-size: 17px; line-height: 1.9; }
[dir="rtl"] em, [dir="rtl"] .h2, [dir="rtl"] .lead, [dir="rtl"] .note, [dir="rtl"] .cap, [dir="rtl"] .ft__line,
[dir="rtl"] .alist dt, [dir="rtl"] .steps__t, [dir="rtl"] .value__t, [dir="rtl"] .prev__name, [dir="rtl"] .err,
[dir="rtl"] .fl input::placeholder, [dir="rtl"] .fl textarea::placeholder { font-style: normal; }
[dir="rtl"] .disp, [dir="rtl"] .ptitle, [dir="rtl"] .h1, [dir="rtl"] .stitle, [dir="rtl"] .shead__title, [dir="rtl"] .h2,
[dir="rtl"] .row__title, [dir="rtl"] .xcard__title, [dir="rtl"] .card__title, [dir="rtl"] .bsvc__name, [dir="rtl"] .xtop__title,
[dir="rtl"] .alist dt, [dir="rtl"] .steps .steps__t, [dir="rtl"] .value__t, [dir="rtl"] .prev__name, [dir="rtl"] .ft__line,
[dir="rtl"] .mnav li a, [dir="rtl"] .prose blockquote, [dir="rtl"] .dye__cats a, [dir="rtl"] .fl label.pick,
[dir="rtl"] .bh__sub, [dir="rtl"] .bs__line, [dir="rtl"] .bsvcs__note, [dir="rtl"] .selected__empty-t {
	font-family: var(--naskh); font-weight: 400; font-style: normal; letter-spacing: 0;
}
[dir="rtl"] .disp, [dir="rtl"] .ptitle { line-height: 1.35; font-size: clamp(34px, 3.9vw, 56px); }
[dir="rtl"] .h1, [dir="rtl"] .stitle, [dir="rtl"] .shead__title, [dir="rtl"] .xtop__title { line-height: 1.4; font-size: clamp(26px, 2.5vw, 38px); }
[dir="rtl"] .h2 { line-height: 1.5; }
[dir="rtl"] .xcard__title, [dir="rtl"] .card__title, [dir="rtl"] .bsvc__name { line-height: 1.45; }
[dir="rtl"] .lead-plain, [dir="rtl"] .body, [dir="rtl"] .prose, [dir="rtl"] .row__body, [dir="rtl"] .xcard__intro { line-height: 1.9; }
[dir="rtl"] .lab, [dir="rtl"] .tl, [dir="rtl"] .btn, [dir="rtl"] .filters a, [dir="rtl"] .fl label,
[dir="rtl"] .fact dt, [dir="rtl"] .card__meta, [dir="rtl"] .byline, [dir="rtl"] .days__n, [dir="rtl"] .ft__legal a,
[dir="rtl"] .menu-btn, [dir="rtl"] .slot__hint, [dir="rtl"] .picks legend, [dir="rtl"] .ft__nav a {
	font-family: var(--naskh); letter-spacing: 0; text-transform: none; font-size: 15px; font-weight: 500;
}
[dir="rtl"] .sig span { font: 600 1em var(--naskh); letter-spacing: 0; text-transform: none; }
[dir="rtl"] .nav a { font: 500 16px var(--naskh); letter-spacing: 0; }
[dir="rtl"] .btn--hd { font: 500 16px/1 var(--naskh); letter-spacing: 0; }
[dir="rtl"] .tl { padding-bottom: 8px; }
[dir="rtl"] .btn { font-size: 15.5px; padding: 14px 24px; }
[dir="rtl"] .lng { font: 500 14px var(--sans); letter-spacing: 0; text-transform: none; }
[dir="rtl"] .steps__n { font-family: var(--serif); }

/* ---------- responsive ---------- */
@media (max-width: 1119px) {
	.hd { --lk: 20px; }
	.hd__in { gap: 8px; }
	.sig { flex: 1; min-width: 0; }
	.sig span { overflow: hidden; text-overflow: ellipsis; }
	.nav, .hd__cta { display: none; }
	.menu-btn { display: inline-block; margin-inline-start: 8px; }
}
@media (max-width: 767px) {
	.hd { --lk: 15px; }
	.sig span { letter-spacing: .12em; }
}
@media (max-width: 400px) {
	.sig span { letter-spacing: .06em; }
}
@media (max-width: 1100px) {
	.steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.xgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.grid3 { grid-template-columns: 1fr; gap: 32px; }
	.ft__in { grid-template-columns: 1fr 1fr; }
	.ft__lang { justify-self: start; }
	.biz { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
	.hero, .intro, .phead, .xtop, .contact, .jfeature, .aclose, .groupblock, .awork, .dye, .bh, .bs, .bs--flip, .dpage { grid-template-columns: 1fr; }
	.bs--flip .bs__media { justify-self: start; }
	.hero { gap: 12px; }
	.hero__media { order: -1; padding: 5% 0 7% 24%; max-width: none; justify-self: stretch; }
	[dir="rtl"] .hero__media { padding: 5% 24% 7% 0; }
	.intro { gap: 24px; }
	.intro__media { max-width: 60%; }
	.intro--split { grid-template-columns: 1fr; }
	.intro--split .intro__media { justify-self: start; }
	.row { grid-template-columns: 1fr; gap: 6px; padding: 18px 0 20px; }
	.xtop, [dir="rtl"] .xtop { padding: 0 0 var(--sp-s); }
	.xtop__aside { padding-inline: var(--gut); }
	.xsec { grid-template-columns: 1fr; gap: 14px; }
	.xsec__h:empty { display: none; }
	.incl { grid-template-columns: 1fr; gap: 28px; }
	.gallery { grid-template-columns: 1fr 1fr; }
	.gallery .slot:first-child { grid-column: 1 / -1; }
	.groupblock__pattern, .awork__pattern { height: 80px; }
	.groupblock__in, .awork__in, [dir="rtl"] .groupblock__in, [dir="rtl"] .awork__in { padding: 36px var(--gut); }
	.alist div { grid-template-columns: 1fr; gap: 4px; }
	.contact, [dir="rtl"] .contact { padding: 0 0 var(--sp); }
	.contact__text { padding-inline: var(--gut); }
	.contact__form, [dir="rtl"] .contact__form { padding: 10% var(--gut) 12%; }
	.prev__row { grid-template-columns: 1fr; gap: 10px; }
	.article__meta { grid-template-columns: 1fr; gap: 16px; }
	.inquiry__field, .bclose__field { width: 56vw; opacity: .95; }
	.aopen__field { width: 46vw; top: -20px; }
	.dye { gap: 28px; }
	.dye__media { max-width: 70%; }
	.dpage__media { display: none; }
	.bh, [dir="rtl"] .bh { padding: 0 0 var(--sp-s); gap: 16px; }
	.bh__text { padding-inline: var(--gut); }
	.bh__media { order: -1; padding: 6% 22% 8% 18%; }
	[dir="rtl"] .bh__media { padding: 6% 18% 8% 22%; }
	.bs { gap: 20px; padding: 32px 0; }
	.bs--flip .bs__media { order: 0; }
	.bs__media { max-width: 72%; }
	.shead { align-items: flex-start; }
}
@media (max-width: 600px) {
	body { font-size: 16.5px; }
	.xgrid { grid-template-columns: 1fr; gap: 40px; }
	.grid2 { grid-template-columns: 1fr; gap: 40px; }
	.steps { grid-template-columns: 1fr; gap: 22px; }
	.fl2 { grid-template-columns: 1fr; }
	.fact { grid-template-columns: 24px 96px 1fr; }
	.ft__in { grid-template-columns: 1fr; gap: 22px; }
	.ft__base { flex-direction: column; align-items: flex-start; }
	.cdetails div { grid-template-columns: 1fr; gap: 2px; }
	.filters ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
	.filters li { flex: none; }
	.inquiry, .bclose { padding-bottom: 58vw; }
	.inquiry__field, .bclose__field { width: 72vw; }
	.days li { grid-template-columns: 1fr; }
	.actions .btn { display: block; width: 100%; text-align: center; }
	.bsvc { grid-template-columns: 110px minmax(0, 1fr); gap: 16px; }
	.intro__media { max-width: 75%; }
}