/* Qamra site styles.
   Radius system: 14px (--r) for every surface and photo, full pill (--pill) for every button and chip,
   and --r + 10px (24px) only for the framed hero inset so its frame stays concentric with the photo inside.
   Palette chosen by the owner: the previous site's ivory cream + espresso ink + one warm gold accent.
   --accent is decorative gold (icons, rules); --accent-ink is the deeper gold used for text (AA on cream).
   Logical properties throughout so RTL (Arabic) and LTR (English) mirror for free.
   Touch: every interactive element is at least 44px tall on phones. */

@font-face { font-family: "Thmanyah Sans"; src: url("/assets/fonts/thmanyahsans-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Thmanyah Sans"; src: url("/assets/fonts/thmanyahsans-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Thmanyah Serif Display"; src: url("/assets/fonts/thmanyahserifdisplay-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  --bg: #F2EDE3;
  --surface: #E8E1D2;
  --card: #FAF6EC;
  --ink: #1A1612;
  --ink-2: #4A413A;
  --accent: oklch(0.62 0.11 65);
  --accent-ink: oklch(0.48 0.10 60);
  --accent-soft: oklch(0.80 0.07 70);
  --line: rgba(26, 22, 18, 0.14);
  --on-ink: #F2EDE3;
  --tint: color-mix(in oklch, var(--accent) 12%, var(--card));
  --logo-filter: none;

  --r: 14px;
  --pill: 999px;
  --gutter: 16px;
  --nav-h: 64px;
  --section: clamp(4rem, 3rem + 5vw, 7.5rem);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --f-body: "Thmanyah Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-display: "Thmanyah Serif Display", "Thmanyah Sans", Georgia, serif;
  color-scheme: light; /* light only: owner does not want a dark mode */
}



@media (min-width: 720px) { :root { --gutter: 32px; --nav-h: 72px; } }
/* English: Thmanyah Sans carries full Latin, so it sets English display type too (bold). */
html:lang(en) { --f-display: var(--f-body); --display-w: 700; }
:root { --display-w: 500; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 12px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
  font-variant-numeric: lining-nums;
}
:lang(en) body, html:lang(en) body { line-height: 1.55; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ol, ul, figure { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
a { color: inherit; }
::selection { background: var(--accent-soft); color: var(--ink); }

.wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.logo { filter: var(--logo-filter); }
.ico { width: 1.2em; height: 1.2em; flex: none; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.btn:focus-visible { border-radius: var(--pill); }

.skip {
  position: absolute; inset-inline-start: var(--gutter); top: 8px; z-index: 100;
  background: var(--ink); color: var(--on-ink); padding: .6rem 1rem; border-radius: var(--pill);
  transform: translateY(-160%); text-decoration: none; font-weight: 700;
}
.skip:focus { transform: none; }

/* ---------- Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 48px; padding: .7rem 1.35rem;
  border-radius: var(--pill); border: 1.5px solid transparent;
  font: 700 1rem/1.2 var(--f-body); text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: background-color .2s, color .2s, border-color .2s, transform .12s;
}
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--ink); color: var(--on-ink); }
.btn--primary:hover { background: color-mix(in oklch, var(--ink) 84%, var(--accent)); }
.btn--ghost { border-color: var(--ink); color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--on-ink); }
.btn--line { border-color: var(--line); color: var(--ink); background: var(--card); }
.btn--line:hover { border-color: var(--ink); }
.btn--invert { background: var(--on-ink); color: var(--ink); }
.btn--invert:hover { background: color-mix(in oklch, var(--on-ink) 86%, var(--accent)); }
.btn--invert:focus-visible { outline-color: var(--on-ink); }
.btn--sm { min-height: 44px; padding: .45rem 1rem; font-size: .9375rem; }
.btn--lg { min-height: 56px; padding: .8rem 1.75rem; font-size: 1.0625rem; }

/* ---------- Nav */
.nav-sentinel { position: absolute; top: 0; height: 1px; width: 1px; }
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: saturate(1.2) blur(10px); backdrop-filter: saturate(1.2) blur(10px);
  transition: box-shadow .25s;
}
.nav.is-stuck { box-shadow: 0 1px 0 var(--line); }
.nav__in.wrap { max-width: 1480px; } /* the nav shares the hero's wider band so their edges line up */
.nav__in { height: var(--nav-h); display: flex; align-items: center; gap: 1.5rem; }
.nav__logo { display: flex; align-items: center; min-height: 44px; flex: none; }
.nav__logo img { height: 32px; width: auto; }
.nav__links { display: none; gap: 1.5rem; margin-inline-start: auto; }
.nav__links a, .nav__lang {
  display: inline-flex; align-items: center; min-height: 44px;
  text-decoration: none; font-size: 1rem; color: var(--ink-2);
}
.nav__lang { padding-inline: .35rem; }
.nav__links a:hover, .nav__lang:hover { color: var(--ink); }
.nav__end { display: flex; align-items: center; gap: .75rem; margin-inline-start: auto; }
@media (min-width: 960px) {
  .nav__links { display: flex; }
  .nav__end { margin-inline-start: 0; }
  .nav__logo img { height: 36px; }
}
@media (max-width: 380px) { .nav__end .btn--sm { padding-inline: .8rem; } .nav__end { gap: .5rem; } }

/* ---------- Hero: slogan beside two real photos. Phones: photos first, side by side. */
.hero { padding-block: .5rem 2.5rem; }
.hero__in { display: grid; gap: 1.25rem; width: 100%; max-width: 1480px; margin-inline: auto; padding-inline: var(--gutter); }
.hero__media {
  order: -1; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 6px;
  height: clamp(260px, 41svh, 430px);
}
.hero__media figure { min-height: 0; }
.hero__main img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; border-radius: var(--r); }
.hero__kiosk { display: flex; flex-direction: column; gap: .45rem; }
.hero__kiosk img { flex: 1; min-height: 0; width: 100%; object-fit: cover; object-position: 54% 55%; border-radius: var(--r); }
.hero__kiosk figcaption { font-size: 1rem; line-height: 1.4; color: var(--ink-2); font-weight: 700; }
.hero__title {
  font-family: var(--f-display); font-weight: var(--display-w);
  font-size: clamp(2rem, 1.1rem + 3.4vw, 4.25rem); line-height: 1.28;
  text-wrap: balance;
}
html:lang(en) .hero__title { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.6rem); line-height: 1.1; letter-spacing: -.015em; }
.hero__sub { margin-top: .9rem; font-size: clamp(1.0625rem, 1rem + .4vw, 1.3rem); color: var(--ink-2); max-width: 34rem; }
.hero__ctas { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .75rem; }
@media (max-width: 420px) { .hero__ctas { gap: .55rem; } .hero__ctas .btn { padding-inline: .95rem; font-size: .975rem; } }
/* Phones: the ardah photo runs edge to edge and the headline rises onto its faded foot.
   The hall-screen inset is dropped here; that photo leads the hall-screen card in #live. */
@media (max-width: 719px) {
  /* The hero fills the whole first screen: the photo grows to take up any spare height, so no strip of
     the next section peeks in under the buttons (owner request). */
  .hero { padding-block: 0 1.75rem; min-height: calc(100svh - var(--nav-h)); display: flex; flex-direction: column; }
  .hero__in { padding-inline: 0; gap: 0; flex: 1; display: flex; flex-direction: column; }
  .hero__media { display: flex; flex-direction: column; flex: 1; height: auto; min-height: 56svh; }
  /* Safari does not stretch a flex <img>, so the photo is pinned to fill its box absolutely. */
  .hero__main { flex: 1; position: relative; min-height: 56svh; }
  .hero__main img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; object-position: 50% 22%; }
  .hero__kiosk { display: none; }
  .hero__text { position: relative; z-index: 1; margin-top: -11.5rem; padding-inline: var(--gutter); }
  .hero__text::before {
    content: ""; position: absolute; z-index: -1; inset: -5rem 0 auto 0; height: 17rem;
    background: linear-gradient(to top, var(--bg) 45%, rgba(242, 237, 227, 0));
  }
}

@media (min-width: 720px) {
  .hero__media { gap: 10px; height: clamp(360px, 52svh, 560px); }
}
/* Desktop: the ardah photo owns the right half (left in Arabic); the hall screen overlaps its inner foot as a framed inset. */
@media (min-width: 960px) {
  .hero { padding-block: 1rem 3.5rem; }
  .hero__in {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    align-items: center; gap: clamp(2.5rem, 5vw, 5rem);
  }
  .hero__text { padding-block: 2rem; }
  .hero__media {
    order: 0; display: block; position: relative;
    height: min(calc(100svh - var(--nav-h) - 4rem), 860px); min-height: 520px;
  }
  .hero__main { height: 100%; }
  .hero__main img { object-position: 50% 30%; }
  .hero__kiosk {
    position: absolute; inset-block-end: -1rem; inset-inline-start: clamp(-3rem, -3vw, -1.5rem);
    width: min(44%, 380px); padding: 10px 10px 12px; gap: .6rem;
    background: var(--bg); border-radius: calc(var(--r) + 10px);
    box-shadow: 0 18px 40px -24px oklch(0.2 0.02 260 / .45);
  }
  .hero__kiosk img { flex: none; aspect-ratio: 4 / 3; height: auto; }
  .hero__kiosk figcaption { padding-inline: .35rem; }
}

/* ---------- Section headings */
.h2 {
  font-family: var(--f-display); font-weight: var(--display-w);
  font-size: clamp(1.85rem, 1.25rem + 2.2vw, 3rem); line-height: 1.3;
  text-wrap: balance;
}
html:lang(en) .h2 { line-height: 1.12; }
.lead { margin-top: 1rem; font-size: clamp(1.0625rem, 1rem + .3vw, 1.2rem); color: var(--ink-2); max-width: 40rem; }

/* ---------- Live gallery */
.live { background: var(--surface); padding-block: var(--section); }
.live__head { max-width: 46rem; }
.spotme {
  display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none;
  font: 700 1.15rem/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase;
}
.spotme svg { width: 1.05em; height: 1.05em; margin-inline: .04em .1em; }
.spotme--sm { font-size: 1rem; }

.ways { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); font-weight: 700; font-size: 1.25rem; }
.paths { display: grid; gap: 1.25rem; margin-top: 1rem; }
@media (min-width: 840px) { .paths { grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; } } /* each card keeps its natural height: no empty gap in the shorter one */
.path { background: var(--card); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; }
.path__media { display: grid; grid-template-columns: 3fr 2fr; gap: 4px; height: clamp(220px, 26vw, 340px); }
.path__media img { width: 100%; height: 100%; object-fit: cover; }
.path__media--single { grid-template-columns: 1fr; grid-template-rows: 100%; overflow: hidden; }
.path__media--single img { min-height: 0; }
.path--phone .path__media--single .path__a { object-position: 50% 100%; } /* keep shirts + QR, crop the ceiling */
.path--phone .path__b { object-position: 50% 62%; }
.path--kiosk .path__a { object-position: 62% 50%; }
.path--kiosk .path__b { object-position: 58% 50%; }
.path__body { padding: 1.5rem 1.5rem 1.75rem; display: flex; flex-direction: column; flex: 1; }
@media (min-width: 720px) { .path__body { padding: 1.75rem 2rem 2rem; } }
.path__title { font-family: var(--f-display); font-weight: var(--display-w); font-size: 1.6rem; line-height: 1.3; }
.steps { list-style: none; padding: 0; margin-top: 1.1rem; display: grid; gap: .25rem; border-inline-start: 2px solid var(--accent-soft); }
.steps li { position: relative; padding-inline-start: 1.1rem; padding-block: .3rem; font-weight: 700; font-size: 1.125rem; }
.steps li::before {
  content: ""; position: absolute; inset-inline-start: -2px; top: .55em; height: 1.1em; width: 2px; background: var(--accent);
}
.screens { list-style: none; padding: 0; margin: 1.1rem 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.screens figure { margin: 0; }
.screens img {
  display: block; width: 100%; height: auto; border-radius: var(--r);
  background: var(--bg); border: 1px solid var(--line);
  box-shadow: 0 10px 24px -14px rgba(26, 22, 18, .45);
}
.screens figcaption { margin-top: .6rem; font-weight: 700; font-size: 1rem; line-height: 1.45; }
.path__desc { margin-top: .5rem; color: var(--ink-2); font-size: 1.0625rem; line-height: 1.65; max-width: 52ch; }
.path__foot { margin-top: auto; padding-top: 1.25rem; color: var(--ink-2); font-size: 1.0625rem; }
.path__foot::before { content: ""; display: block; height: 1px; background: var(--line); margin-bottom: 1rem; }
.live__foot {
  margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .75rem 2rem; padding-top: 1.25rem; border-top: 1px solid var(--line);
}
.noapp { font-weight: 700; font-size: 1.125rem; }
.credit { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .75rem; color: var(--ink-2); font-size: 1.0625rem; }

/* ---------- Packages: wedding matrix (photographers x video) with its inclusions, milcha apart */
.packages { padding-block: var(--section); }
.wed {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  border: 1px solid var(--line); border-radius: var(--r); background: var(--card); overflow: hidden;
}
.matrix { display: grid; }
.mcol { padding: 1.25rem 1.25rem .25rem; }
.mcol--video { background: var(--tint); border-top: 1px solid var(--line); }
@media (min-width: 760px) {
  .matrix { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
  .mcol { display: grid; grid-row: span 2; grid-template-rows: subgrid; padding: 1.75rem 2rem .5rem; }
  .mcol--video { border-top: 0; border-inline-start: 1px solid var(--line); }
}
.mcol__head { padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
.mcol__h { font-family: var(--f-display); font-weight: var(--display-w); font-size: 1.5rem; line-height: 1.3; }
.mcol__x { margin-top: .2rem; color: var(--accent-ink); font-weight: 700; font-size: 1.0625rem; }
.pk {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name btn" "crew btn" "price btn";
  align-items: center; gap: .15rem 1rem; padding-block: 1.1rem;
}
.pk + .pk { border-top: 1px solid var(--line); }
.pk__name { grid-area: name; font-family: var(--f-display); font-weight: var(--display-w); font-size: 1.375rem; line-height: 1.4; color: var(--gold-ink, var(--accent-ink)); }
.pk__crew { grid-area: crew; font-weight: 700; font-size: 1.0625rem; line-height: 1.4; }
.pk .pk__price { grid-area: price; }
.pk .pk__btn { grid-area: btn; }
.pk__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .8rem; }
.pk__now strong { font-family: var(--f-display); font-weight: var(--display-w); font-size: clamp(2rem, 1.7rem + 1vw, 2.5rem); line-height: 1.15; }
.pk__cur { color: var(--ink-2); font-size: 1.0625rem; }
.pk__old { color: var(--ink-2); font-size: 1.0625rem; text-decoration: line-through; text-decoration-thickness: 1.5px; }

.incl { background: var(--surface); border-top: 1px solid var(--line); padding: 1.25rem 1.25rem 1.5rem; }
@media (min-width: 720px) { .incl { padding: 1.5rem 2rem 1.75rem; } }
.incl__title { font-family: var(--f-display); font-weight: var(--display-w); font-size: 1.35rem; line-height: 1.3; }
.incl__list { margin-top: .9rem; display: grid; gap: .6rem 2rem; }
@media (min-width: 720px) { .incl__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .incl__list { grid-template-columns: repeat(3, 1fr); } }
.incl__list li, .milcha__incl li { display: flex; gap: .6rem; align-items: flex-start; }
.incl__list .ico, .milcha__incl .ico { color: var(--accent); margin-top: .25em; }

.milcha {
  margin-top: clamp(2rem, 4vw, 3rem); border: 1px solid var(--line); border-radius: var(--r); background: var(--card);
  padding: 1.25rem; display: grid; gap: .75rem 1rem; align-items: center;
}
@media (min-width: 840px) { .milcha { grid-template-columns: 1fr auto auto; gap: 2.5rem; padding: 1.5rem 2rem; } }
.milcha__name { font-family: var(--f-display); font-weight: var(--display-w); font-size: 1.5rem; line-height: 1.3; }
.milcha__incl { margin-top: .5rem; display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; }
.milcha .pk__btn { justify-self: start; }
.payment { margin-top: 1.25rem; color: var(--ink-2); font-weight: 700; }

/* ---------- How it works: a ruled sequence, not cards */
.how { padding-block: var(--section); background: var(--surface); }
.how__in { display: grid; gap: 1.75rem; }
@media (min-width: 960px) { .how__in { grid-template-columns: 1fr 1.6fr; gap: 4rem; align-items: start; } }
.how__list { display: grid; }
.how__item { display: grid; gap: .35rem; padding-block: 1.4rem; border-top: 1px solid var(--line); }
.how__item:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 640px) { .how__item { grid-template-columns: 11rem 1fr; gap: 2rem; align-items: baseline; } }
.how__t { font-family: var(--f-display); font-weight: var(--display-w); font-size: 1.6rem; line-height: 1.3; }
.how__item p { color: var(--ink-2); }

/* ---------- Work: asymmetric editorial grid with no empty cells */
.work { padding-block: var(--section); }
.works { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: dense; gap: 1.5rem 1rem; margin-top: clamp(1.75rem, 3vw, 2.75rem); }
.w a { display: block; text-decoration: none; color: var(--ink); }
.w img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r); transition: opacity .25s; }
.w a:hover img { opacity: .9; }
.w__media { display: block; aspect-ratio: 4 / 5; }
.w--feature { grid-column: 1 / -1; }
.w--feature .w__media { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: .5rem; aspect-ratio: 4 / 3; }
.w--feature .w__cover { grid-row: 1 / 3; }
.w--feature .w__x { min-height: 0; }
.w__cap { display: block; margin-top: .65rem; font-weight: 700; font-size: 1.0625rem; line-height: 1.45; }
.w a:hover .w__cap { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: .25em; }

@media (min-width: 900px) {
  .works { grid-template-columns: repeat(12, 1fr); gap: 3rem 2rem; }
  .w--1 { grid-column: 1 / span 8; grid-row: 1; }
  .w--2 { grid-column: 9 / span 4; grid-row: 1; }
  .w--3 { grid-column: 5 / span 8; grid-row: 2; }
  .w--4 { grid-column: 1 / span 4; grid-row: 2; }
  .w--5 { grid-column: 9 / span 4; grid-row: 3; }
  .w--6 { grid-column: 1 / span 8; grid-row: 3; }
  .w--7 { grid-column: 1 / span 5; grid-row: 4; }
  .w--8 { grid-column: 6 / span 3; grid-row: 4; }
  .w--9 { grid-column: 9 / span 4; grid-row: 4; }
  /* Singles beside a feature (and the two beside w--9) fill their row's height instead of leaving a hole. */
  .w--2 a, .w--4 a, .w--5 a, .w--7 a, .w--8 a { display: flex; flex-direction: column; height: 100%; }
  .w--2 .w__media, .w--4 .w__media, .w--5 .w__media, .w--7 .w__media, .w--8 .w__media { flex: 1; aspect-ratio: auto; min-height: 0; position: relative; }
  .w--2 .w__media img, .w--4 .w__media img, .w--5 .w__media img, .w--7 .w__media img, .w--8 .w__media img { position: absolute; inset: 0; }
}
.more { margin-top: clamp(2rem, 4vw, 3rem); text-align: center; }

/* ---------- FAQ */
.faq { padding-block: var(--section); background: var(--surface); }
.faq__in { display: grid; gap: 1.5rem; }
@media (min-width: 960px) { .faq__in { max-width: 54rem; margin-inline: auto; } } /* stacked, unlike .how, so the two sections read differently */
.qa { border-bottom: 1px solid var(--line); }
.qa:first-child { border-top: 1px solid var(--line); }
.qa summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  min-height: 44px; padding-block: 1.1rem; font-weight: 700; font-size: 1.1rem;
}
.qa summary::-webkit-details-marker { display: none; }
.qa__chev { color: var(--accent); transition: transform .25s var(--ease-out); }
.qa[open] .qa__chev { transform: rotate(180deg); }
.qa p { padding-bottom: 1.2rem; color: var(--ink-2); max-width: 42rem; }

/* ---------- Closing band */
.close { background: var(--ink); color: var(--on-ink); padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem); }
.close__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; }
.close__t {
  font-family: var(--f-display); font-weight: var(--display-w);
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); line-height: 1.3; text-wrap: balance; max-width: 24ch;
}
html:lang(en) .close__t { line-height: 1.15; }

/* ---------- Footer */
.foot { padding-block: 3.5rem 2rem; }
.foot__in { display: grid; gap: 2rem; }
@media (min-width: 840px) { .foot__in { grid-template-columns: 1.3fr 1fr 1fr; align-items: start; } }
.foot__logo { height: 40px; width: auto; }
.foot__brand p { margin-top: .9rem; color: var(--ink-2); }
.foot__links { display: grid; gap: .1rem; }
.foot__links li { display: flex; flex-wrap: wrap; column-gap: .75rem; align-items: center; }
.foot__links a { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: .2em; }
.foot__k { font-weight: 700; min-width: 5.5rem; }
.foot__v { color: var(--ink-2); }
.foot__partner { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .8rem; color: var(--ink-2); }
.foot__rights { grid-column: 1 / -1; padding-top: 1.5rem; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 1rem; }

/* ---------- Mobile booking dock: thumb zone, shown by site.js between the hero and the closing band */
.dock {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 40;
  padding: .6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: saturate(1.2) blur(10px); backdrop-filter: saturate(1.2) blur(10px);
  box-shadow: 0 -1px 0 var(--line);
  transform: translateY(110%); visibility: hidden;
  transition: transform .35s var(--ease-out), visibility 0s linear .35s;
}
.dock.is-on { transform: none; visibility: visible; transition: transform .35s var(--ease-out), visibility 0s; }
.dock__btn { width: 100%; }
@media (min-width: 720px) { .dock { display: none; } }

/* ---------- Reveal (only when JS is running; off under reduced motion; never hides a focused element) */
.js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.js [data-reveal].in, .js [data-reveal]:focus-within { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .btn:active { transform: none; }
  .dock { transform: none; }
}

/* ---------- Colour enhancement ("gold forward", owner choice 2026-10-10)
   Rhythm: cream hero, sand live gallery, cream packages, sand how/faq, gold closing band, espresso footer.
   (The live gallery was espresso for a moment; the owner found it too heavy, so it stays sand.)
   Gold is used only where it carries meaning: prices, section-title rules, steps, icons on dark buttons. */
:root {
  --gold: #A0762E; /* sampled from the @qamra_qa highlight covers (gold on #FAF8EC cream) */
  --gold-light: oklch(0.80 0.10 72);
  --gold-ink: oklch(0.46 0.10 60);
  --espresso: #1A1612;
}
.foot {
  --bg: #1A1612; --card: #251F19; --surface: #211B15;
  --ink: #F2EDE3; --ink-2: #CFC6B8; --line: rgba(242, 237, 227, .14); --on-ink: #1A1612;
  --accent: var(--gold-light); --accent-ink: var(--gold-light); --accent-soft: oklch(0.50 0.07 65);
  background: var(--bg); color: var(--ink);
}
.live .path { box-shadow: 0 18px 40px -30px rgba(26, 22, 18, .35); }
.foot__logo { filter: invert(1); }
.foot a:hover { color: var(--gold-light); }

.h2::after {
  content: ""; display: block; width: 64px; height: 3px; border-radius: 3px;
  margin-top: .85rem; background: var(--gold);
}
.steps { border-inline-start-color: var(--gold); }
.steps li::before { background: var(--gold); }

.pk__price { color: var(--gold-ink); }
.mcol--video { background: color-mix(in srgb, var(--gold) 16%, var(--card)); }
.milcha { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent); }

.btn--primary .ico, .nav .btn .ico { color: var(--gold-light); }
.btn--primary:hover { background: color-mix(in srgb, var(--espresso) 88%, var(--gold)); }
::selection { background: color-mix(in srgb, var(--gold) 35%, transparent); }

.qa__chev { color: var(--gold); }
.qa[open] .qa__chev { color: var(--gold-ink); }

/* Closing band: the brand gold from the Instagram highlight covers; cream heading 3.5:1 (large text only), cream button. */
.close { --gold-deep: var(--gold); background: var(--gold-deep); color: #F2EDE3; }
.close .btn { background: #F2EDE3; color: var(--espresso); }
.close .btn:hover { background: #FAF6EC; }
.close .btn .ico { color: var(--gold-deep); }

/* Taste pre-flight fixes (2026-10-10) */
@media (min-width: 960px) {
  .hero__in { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }   /* a wider text column keeps the slogan to 2 lines */
  .hero__title { font-size: clamp(2.4rem, 1.2rem + 2.1vw, 3.3rem); }
  html:lang(en) .hero__title { font-size: clamp(2.1rem, .9rem + 1.7vw, 2.55rem); }
}


/* Phone menu bar: slimmer and lighter (owner found it oversized). The CTA looks 36px tall
   but keeps a 44px tap area through an invisible ::after. */
@media (max-width: 719px) {
  :root { --nav-h: 54px; }
  .nav__logo img { height: 26px; }
  .nav__lang { font-size: .9rem; }
  .nav__end { gap: .6rem; }
  .nav__end .btn--sm { min-height: 36px; padding: .3rem .8rem; font-size: .8125rem; gap: .35rem; position: relative; }
  .nav__end .btn--sm .ico { width: 1.05em; height: 1.05em; }
  .nav__end .btn--sm::after { content: ""; position: absolute; inset: -4px -2px; }

  /* Transparent bar over the hero photo at the top; solid cream again once the page scrolls
     (.is-stuck is set by site.js). The hero slides up under the bar to fill the gap. */
  .nav:not(.is-stuck) {
    background: transparent;
    -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
  }
  .nav { transition: background-color .25s, box-shadow .25s; }
  .hero { margin-top: calc(-1 * var(--nav-h)); min-height: 100svh; }
}

/* Phones: the top of the hero photo fades into the cream bar the same way its foot fades into the
   headline, so there is no hard edge at the top (owner request). */
@media (max-width: 719px) {
  .hero__main { position: relative; }
  .hero__main::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: calc(var(--nav-h) + 3.5rem);
    background: linear-gradient(to bottom, rgba(242, 237, 227, .7) 0%, rgba(242, 237, 227, .35) 45%, rgba(242, 237, 227, 0) 100%);
    pointer-events: none; z-index: 1;
  }
}

/* iPhone clips glyph ink that hangs below the line box; Thmanyah Serif Display's final «ع» hangs deep.
   Give the Arabic headings room below the last line (layout spacing compensated). */
html:lang(ar) .hero__title, html:lang(ar) .h2 { padding-bottom: .32em; }
html:lang(ar) .hero__sub { margin-top: calc(.9rem - .32em * 1); }

/* ---------- Rewards card (home section + /card page)
   The pass is shown as the object it is: a dark Wallet card (its own colours, #11121F) lifted off a warm gold-tinted band.
   Everything around it stays cream, espresso and gold. */
.cardsec { padding-block: var(--section); background: color-mix(in srgb, var(--gold) 11%, var(--bg)); --tilt: -2.5deg; }
html[dir="rtl"] .cardsec { --tilt: 2.5deg; }
.cardsec__in { display: grid; gap: clamp(2.5rem, 6vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .cardsec__in { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(3rem, 6vw, 6rem); } }
.cardsec__text .lead { max-width: 34rem; }

.tiers { margin-top: 2rem; max-width: 34rem; }
.tiers__t { font-weight: 700; color: var(--ink-2); font-size: .975rem; margin-bottom: .35rem; }
.tiers__list { list-style: none; margin: 0; padding: 0; }
.tiers__list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.25rem;
  padding-block: .95rem; border-top: 1px solid var(--line);
}
.tiers__list li:last-child { border-bottom: 1px solid var(--line); }
.tier__l { font-size: 1.1rem; }
.tier__p {
  font-family: var(--f-body); font-weight: 700; font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.25rem);
  line-height: 1; color: var(--gold-ink); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.01em;
}
.tiers__list li:nth-child(3) .tier__p { color: var(--gold); }

.cardsec__act { margin-top: 2.25rem; display: grid; gap: .85rem; justify-items: start; }
.cardsec__act .btn { text-decoration: none; }
.cardsec__note { color: var(--ink-2); font-size: .975rem; max-width: 30rem; }

.cardsec__obj { display: grid; justify-items: center; perspective: 1200px; }
.wcard {
  --w-ink: #F4EFE7; --w-mute: #B7B0A7;
  margin: 0; width: min(100%, 400px);
  background: #11121F; color: var(--w-ink); border-radius: 20px; overflow: hidden;
  box-shadow: 0 2px 4px rgba(26, 22, 18, .12), 0 28px 50px -22px rgba(26, 22, 18, .55), 0 60px 90px -50px rgba(160, 118, 46, .55);
  transform: rotate(var(--tilt));
  transition: transform .7s var(--ease-out), box-shadow .7s var(--ease-out);
}
.wcard:hover { transform: rotate(0deg) translateY(-4px); }
.wcard__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.25rem .9rem; }
.wcard__logo { width: auto; height: 34px; }
.wcard__f { display: grid; gap: .1rem; min-width: 0; }
.wcard__f--end { text-align: end; }
.wcard__k { font-size: .62rem; letter-spacing: .09em; color: var(--w-mute); line-height: 1.2; font-weight: 700; }
.wcard__v { font-size: .98rem; line-height: 1.3; font-variant-numeric: lining-nums; overflow-wrap: anywhere; }
.wcard__v--sm { font-size: .82rem; }
.wcard__strip { width: 100%; height: auto; }
.wcard__row { display: grid; grid-template-columns: auto 1fr; gap: 1rem 1.5rem; padding: 1rem 1.25rem 1.1rem; }
.wcard__foot { display: grid; place-items: center; padding: .85rem 1.25rem 1.3rem; border-top: 1px solid rgba(244, 239, 231, .1); }
.wcard__foot span {
  font-size: .8rem; letter-spacing: .12em; color: var(--w-mute);
  padding: .45rem 1.1rem; border-radius: var(--pill); background: rgba(244, 239, 231, .06);
}
@media (max-width: 480px) { .wcard__row { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .wcard { transition: none; } .wcard:hover { transform: rotate(var(--tilt)); } }

/* /card page: the same block, headed by an h1, directly under the nav */
.cardsec--page { padding-top: clamp(2.5rem, 2rem + 4vw, 5.5rem); }
.cardsec--page .h2 { font-size: clamp(2.2rem, 1.4rem + 3vw, 3.75rem); }
html:lang(ar) .cardsec--page h1.h2 { padding-bottom: .32em; }