/* Version A — "The Invitation": pages set like a Saudi invitation card on Mist Blue fields */

.num-ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; text-decoration: none; }
a.num-ltr:hover { text-decoration: underline; text-underline-offset: .3em; }

h2 { font-size: clamp(2rem, 4.2vw, 3.25rem); }
h3 { font-size: 1.375rem; }
:lang(en) h2 { font-size: clamp(2.1rem, 4.4vw, 3.5rem); }

section { padding-block: var(--section); }

.two-col { display: grid; gap: 2.5rem; }
@media (min-width: 64rem) {
  .two-col { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 5rem; align-items: start; }
  .col-head { position: sticky; top: 7rem; }
}
.col-head p { margin-top: 1rem; color: var(--stone); max-width: 36ch; font-size: 1.1875rem; }

/* ---------- hero: the invitation card ---------- */
.inv-hero { background: var(--mist); padding-block: 2.5rem 0; overflow: hidden; }
.hero-grid { display: grid; gap: 2.5rem; align-items: end; }
.card {
  background: var(--sand);
  border-radius: 999px 999px 0 0;
  padding: clamp(5.5rem, 11vw, 8.5rem) clamp(1.25rem, 5vw, 4.5rem) clamp(2.5rem, 5vw, 3.75rem);
  text-align: center;
}
.card .motif { margin-inline: auto; color: var(--navy); }
.card h1, .card h2 { margin-top: 1.5rem; font-size: clamp(2.4rem, 5.2vw, 4.25rem); }
.is-big .card h1 { font-size: clamp(2.6rem, 6vw, 5.25rem); }
.card-lede { margin: 1.25rem auto 0; max-width: 36ch; color: var(--stone); font-size: 1.1875rem; }
.card-action { margin-top: 2.25rem; }
.card-action .btn { width: min(100%, 26rem); }

.rows { margin: 1.75rem auto 0; width: 100%; max-width: 30rem; text-align: start; border-top: 1px solid var(--rule); }
.rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; padding: .8rem 0; border-bottom: 1px solid var(--rule); }
.rows dt { color: var(--palm); font-size: 1rem; }
.rows dd { font-weight: 700; text-align: end; }

.arch-photo { order: 2; padding-bottom: 2.5rem; }
.arch-photo .frame {
  border-radius: 999px 999px 0 0; overflow: hidden;
  border: .6rem solid var(--sand); border-bottom-width: .6rem;
  aspect-ratio: 4 / 5; background: var(--navy);
  max-width: 30rem; margin-inline: auto;
}
.arch-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.arch-photo figcaption { margin-top: .9rem; text-align: center; font-size: .9375rem; color: var(--navy); }

@media (min-width: 64rem) {
  .inv-hero { padding-top: 3.5rem; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5rem; }
  .is-big .hero-grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 4rem; }
  .inv-hero:not(.is-big) .card { min-height: 41.5rem; }
  .card { min-height: 34rem; display: flex; flex-direction: column; justify-content: center; padding-top: 6.5rem; }
  .card > * { align-self: stretch; }
  .card .motif { align-self: center; }
  .card-action { text-align: center; }
  .is-big .card { padding-top: 6rem; padding-bottom: 3rem; }
  .is-big .card h1 { font-size: clamp(2.6rem, 4.4vw, 4rem); margin-top: 1.25rem; }
  :lang(en) .is-big .card h1 { font-size: clamp(2.4rem, 3.9vw, 3.5rem); }
  :lang(en) .is-big .card { padding-top: 5.25rem; }
  .is-big .card-lede { margin-top: 1rem; max-width: 44ch; }
  .is-big .card-action { margin-top: 1.75rem; }
  .arch-photo { padding-bottom: 4.5rem; align-self: center; }
  .arch-photo .frame { max-width: 27rem; }
}

/* the card's rows are written in, one line after another */
[data-write].will-write > * { opacity: 0; clip-path: inset(0 0 0 100%); }
[dir="ltr"] [data-write].will-write > * { clip-path: inset(0 100% 0 0); }
[data-write].will-write.is-written > * {
  opacity: 1; clip-path: inset(0 0 0 0);
  transition: clip-path .9s var(--ease-out), opacity .5s var(--ease-out);
}
[data-write] > *:nth-child(2) { transition-delay: .14s !important; }
[data-write] > *:nth-child(3) { transition-delay: .28s !important; }
[data-write] > *:nth-child(4) { transition-delay: .42s !important; }
[data-write] > *:nth-child(5) { transition-delay: .56s !important; }

/* ---------- programme (what we take off your hands) ---------- */
.programme li { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: 1.25rem; padding: 1.75rem 0; border-bottom: 1px solid var(--rule); }
.programme li:first-child { border-top: 1px solid var(--rule); }
.programme p { margin-top: .4rem; color: var(--stone); max-width: 52ch; }
.dia { width: .7rem; height: .7rem; background: var(--navy); transform: rotate(45deg); margin-top: .85em; }
/* photo under the section head: an arch with a Mist arch set behind it, offset like a second doorway */
.prog-photo { position: relative; margin-top: 3rem; max-width: 22rem; padding-inline-start: 1.5rem; padding-bottom: 1.5rem; }
.prog-photo::before { content: ""; position: absolute; inset-inline-start: 0; bottom: 0; width: calc(100% - 1.5rem); height: calc(100% - 3.5rem); background: var(--mist); border-radius: 999px 999px 0 0; }
.prog-photo .frame { position: relative; aspect-ratio: 3 / 4; border-radius: 999px 999px 0 0; overflow: hidden; background: var(--navy); }
.prog-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.prog-photo figcaption { position: relative; margin-top: .9rem; font-size: .875rem; color: var(--navy); }
:lang(en) .programme h3 { font-size: 1.625rem; }

/* ---------- services menu: photo arch beside an index of services ---------- */
.inv-menu { background: var(--sand); color: var(--navy); }
.svc-grid { display: grid; gap: 3rem; align-items: center; }
/* the photo stands in front of an offset Desert Clay arch: the section's color break */
.svc-photo { position: relative; max-width: 26rem; padding-inline-start: 2rem; padding-bottom: 2rem; }
.svc-photo::before { content: ""; position: absolute; inset-inline-start: 0; bottom: 0; width: calc(100% - 2rem); height: calc(100% - 4rem); background: var(--clay); border-radius: 999px 999px 0 0; }
.svc-photo .frame { position: relative; aspect-ratio: 3 / 4; border-radius: 999px 999px 0 0; overflow: hidden; background: var(--navy); }
.svc-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 55%; }
.menu-head p { margin-top: 1rem; color: var(--stone); font-size: 1.1875rem; }
.menu-list { margin-top: 2.5rem; border-top: 1px solid var(--rule); }
.menu-list a { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: .25rem 1.25rem; align-items: center; padding: 1.4rem 0; border-bottom: 1px solid var(--rule); text-decoration: none; }
.menu-list .mark { grid-row: span 2; width: 2.75rem; height: 2.75rem; color: var(--clay); transition: transform .4s var(--ease-out); }
.menu-list .t { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1.3; }
:lang(en) .menu-list .t { font-weight: 400; font-size: 1.75rem; }
.menu-list .d { color: var(--stone); }
.menu-list a:hover .t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }
.menu-list a:hover .mark { transform: translateY(-3px); }
.menu-more { margin-top: 2rem; }
@media (min-width: 64rem) {
  .svc-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 5rem; }
}

/* ---------- steps: the booking told as a WhatsApp thread on a phone ---------- */
.inv-steps { background: var(--mist); color: var(--navy); }
.s-grid { display: grid; gap: 3rem; align-items: center; }
.s-copy p { margin-top: 1rem; font-size: 1.1875rem; max-width: 30ch; }
.s-copy .btn { margin-top: 2rem; }
.s-copy .more { margin-top: 1.5rem; font-size: 1.0625rem; max-width: 38ch; }
.s-copy .need { margin-top: 1rem; max-width: 26rem; border-top: 1px solid rgb(12 34 56 / .25); }
.s-copy .need li { position: relative; padding: .7rem 0; padding-inline-start: 1.4rem; border-bottom: 1px solid rgb(12 34 56 / .25); }
.s-copy .need li::before { content: ""; position: absolute; inset-inline-start: .1rem; top: 1.3rem; width: .45rem; height: .45rem; background: var(--navy); transform: rotate(45deg); }
.stage { position: relative; display: grid; place-items: center; }
.phone { width: min(100%, 26rem); margin-inline: auto; background: var(--sand); border: .7rem solid var(--navy); border-radius: 2.75rem; overflow: hidden; box-shadow: 0 30px 60px -24px rgb(12 34 56 / .45); rotate: -3deg; }
.phone .status { display: flex; justify-content: space-between; align-items: center; padding: .55rem 1.4rem .25rem; background: var(--navy); color: var(--sand); font: 700 .75rem/1 "Dubai", sans-serif; direction: ltr; }
.phone .notch { width: 5.5rem; height: 1.1rem; border-radius: 999px; background: color-mix(in srgb, var(--navy) 60%, black); }
.phone .bar { display: flex; align-items: center; gap: .75rem; padding: .75rem 1.1rem 1rem; background: var(--navy); color: var(--sand); font-weight: 700; }
.phone .av { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--sand); color: var(--navy); font-family: "DG Ghareeb", serif; font-size: .95rem; }
.phone .who { display: flex; flex-direction: column; line-height: 1.25; }
.phone .who small { font-weight: 400; font-size: .75rem; color: var(--mist); }
.phone .input { display: flex; align-items: center; gap: .6rem; margin: 0 .85rem 1rem; padding: .4rem; padding-inline-start: 1rem; border: 1.5px solid var(--rule); border-radius: 999px; color: var(--palm); font-size: .875rem; }
.phone .input span:first-child { flex: 1; }
.phone .send { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--navy); color: var(--sand); }
.phone .send svg { width: 1rem; height: 1rem; }
[dir="rtl"] .phone .send svg { transform: scaleX(-1); }
.toast { position: absolute; z-index: 3; inset-inline-end: max(0rem, calc(50% - 18rem)); top: 6%; display: flex; align-items: center; gap: .75rem; padding: .85rem 1.1rem; background: var(--sand); color: var(--navy); border-radius: 1rem; box-shadow: 0 18px 40px -16px rgb(12 34 56 / .5); rotate: 4deg; }
.toast .dot { width: .7rem; height: .7rem; flex: none; background: var(--clay); transform: rotate(45deg); }
.toast strong { display: block; font-size: .9375rem; }
.toast small { font-size: .8125rem; color: var(--palm); }
.chat { display: flex; flex-direction: column; gap: .85rem; padding: 1.4rem 1.1rem 1.25rem; }
.chat li { display: flex; align-items: flex-end; gap: .5rem; max-width: 88%; }
.chat li.you { align-self: flex-start; }
.chat li.qn { align-self: flex-end; flex-direction: row-reverse; }
.chat .n { flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--clay); color: var(--navy); font: 700 .8rem/1 "Dubai", sans-serif; }
.chat .b { position: relative; padding: .7rem .95rem 1.4rem; border-radius: 1.1rem; line-height: 1.6; }
.chat .meta { position: absolute; inset-inline-end: .75rem; bottom: .35rem; display: inline-flex; align-items: center; gap: .25rem; font: 400 .6875rem/1 "Dubai", sans-serif; opacity: .8; direction: ltr; }
.chat .ticks { width: 1rem; height: .65rem; color: var(--mist); }
.chat .step-title { font-family: var(--font-body); font-size: 1rem; font-weight: 700; line-height: 1.5; }
.chat .b p { font-size: .875rem; }
.chat li.you .b { background: var(--navy); color: var(--sand); border-end-start-radius: .3rem; }
.chat li.qn .b { background: var(--mist); color: var(--navy); border-end-end-radius: .3rem; }
@media (min-width: 64rem) { .s-grid { grid-template-columns: 1fr 1fr; gap: 6rem; } }
/* the thread plays once when it scrolls into view: messages arrive one by one */
.chat.will-play li { opacity: 0; }
.chat.is-playing li { animation: msg-in .55s var(--ease-out) both; }
.chat li.you { transform-origin: left bottom; }
.chat li.qn { transform-origin: right bottom; }
.chat.is-playing li:nth-child(1) { animation-delay: .3s; }
.chat.is-playing li:nth-child(2) { animation-delay: 1.2s; }
.chat.is-playing li:nth-child(3) { animation-delay: 2.1s; }
.chat.is-playing li:nth-child(4) { animation-delay: 3s; }
@keyframes msg-in { from { opacity: 0; transform: translateY(14px) scale(.94); } to { opacity: 1; transform: none; } }
.inv-steps:has(.chat.will-play) .toast { opacity: 0; }
.inv-steps:has(.chat.is-playing) .toast { animation: toast-in .6s var(--ease-out) 3.8s both; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-10px) scale(.9); } to { opacity: 1; transform: none; } }

/* ---------- RSVP close ---------- */
.inv-rsvp { background: var(--sand); padding-bottom: 0; }
.rsvp-card {
  max-width: 46rem; margin-inline: auto; text-align: center;
  background: var(--navy); color: var(--sand);
  border-radius: 999px 999px 0 0;
  padding: clamp(5.5rem, 12vw, 8.5rem) clamp(1.25rem, 6vw, 5rem) clamp(3rem, 6vw, 4.5rem);
}
.rsvp-card .motif { margin-inline: auto; color: var(--sand); }
.rsvp-card h2 { margin-top: 1.5rem; }
.rsvp-card > p { margin: 1rem auto 0; max-width: 34ch; color: var(--mist); font-size: 1.1875rem; }
.rsvp-card .rows { border-top-color: var(--rule-on-dark); margin-bottom: 2.25rem; }
.rsvp-card .rows > div { border-bottom-color: var(--rule-on-dark); }
.rsvp-card .rows dt { color: var(--mist); }
.rsvp-card .btn { width: min(100%, 26rem); }

/* ---------- about ---------- */
.heritage { margin: 0; }
.heritage .motif { color: var(--clay); margin-bottom: 1.5rem; }
.heritage p { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 3.4vw, 2.75rem); line-height: 1.35; max-width: 16ch; }
:lang(en) .heritage p { font-weight: 400; line-height: 1.2; }
.prose p { max-width: 60ch; font-size: 1.1875rem; color: var(--stone); }
.prose p + p { margin-top: 1.25rem; }

.inv-vm { background: var(--mist); }
.vm-grid { display: grid; gap: 2rem; }
.arch-panel {
  background: var(--sand); border-radius: 999px 999px 0 0;
  max-width: 28rem; width: 100%; margin-inline: auto;
  padding: 7.5rem 2rem 2.75rem; text-align: center;
}
.arch-panel h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); }
.arch-panel p { margin-top: 1rem; color: var(--stone); }
@media (min-width: 48rem) { .vm-grid { grid-template-columns: 1fr 1fr; } }

.values > div { padding: 1.5rem 0; border-bottom: 1px solid var(--rule); display: grid; gap: .25rem; }
.values > div:first-child { border-top: 1px solid var(--rule); }
.values dt { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; }
:lang(en) .values dt { font-weight: 400; font-size: 1.75rem; }
.values dd { margin: 0; color: var(--stone); }
@media (min-width: 48rem) { .values > div { grid-template-columns: 11rem minmax(0, 1fr); gap: 2rem; align-items: baseline; } }

/* ---------- services page ---------- */
.service { display: grid; gap: 2rem; padding-block: 3.5rem; border-bottom: 1px solid var(--rule); scroll-margin-top: 5rem; }
.service:first-child { padding-top: 0; }
.service:last-child { border-bottom: 0; }
.window {
  width: 4.75rem; aspect-ratio: 3 / 4; border: 1.5px solid var(--navy); border-radius: 999px 999px 0 0;
  display: grid; place-items: end center; padding-bottom: .85rem; color: var(--navy);
}
.window .mark { width: 2.5rem; height: 2.5rem; }
.service h2 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); }
.service-lede { margin-top: 1rem; font-size: 1.1875rem; color: var(--stone); max-width: 58ch; }
.service-facts { margin-top: 1.75rem; display: grid; gap: 1.25rem; }
.service-facts dt { color: var(--palm); font-size: .9375rem; }
.service-facts dd { margin: .25rem 0 0; }
.service-facts ul li { position: relative; padding-inline-start: 1.25rem; }
.service-facts ul li::before { content: ""; position: absolute; inset-inline-start: 0; top: .8em; width: .45rem; height: .45rem; background: var(--clay); transform: rotate(45deg); }
@media (min-width: 64rem) {
  .service { grid-template-columns: 4.75rem minmax(0, 1fr); gap: 3rem; }
  .service-facts { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

/* ---------- booking page ---------- */
.lists-grid { display: grid; gap: 3rem; }
.lists-grid h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.lists-grid .sub { margin-top: .75rem; color: var(--stone); }
.dia-list { margin-top: 1.5rem; border-top: 1px solid var(--rule); }
.dia-list li { position: relative; padding: .9rem 0; padding-inline-start: 1.6rem; border-bottom: 1px solid var(--rule); }
.dia-list li::before { content: ""; position: absolute; inset-inline-start: .1rem; top: 1.55rem; width: .5rem; height: .5rem; background: var(--clay); transform: rotate(45deg); }
@media (min-width: 64rem) { .lists-grid { grid-template-columns: 1fr 1fr; gap: 5rem; } }

.inv-faq { background: var(--sand); border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq details:first-child { border-top: 1px solid var(--rule); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.25rem 0; font-weight: 700; font-size: 1.1875rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: .65rem; height: .65rem; flex: none; border: 1.5px solid var(--navy); transform: rotate(45deg); transition: background-color .2s var(--ease-out); }
.faq details[open] summary::after { background: var(--navy); }
.faq details p { padding-bottom: 1.5rem; color: var(--stone); max-width: 60ch; }