/* Qasr Al Karami. Ivory paper, the logo's own ink, one garnet accent.
   Logical properties (inline-start/end) throughout so the Arabic page
   mirrors without a second stylesheet. */

@font-face {
  font-family: 'Marcellus';
  src: url(/fonts/marcellus-latin.woff2) format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Readex Pro';
  src: url(/fonts/readex-latin.woff2) format('woff2');
  font-weight: 160 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Readex Pro';
  src: url(/fonts/readex-arabic.woff2) format('woff2');
  font-weight: 160 700;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

:root {
  /* Lime plaster and Mount Lebanon stone, the logo's ink, a deep garnet,
     brass for hairlines only (too light for small text), and wine for
     the one dark section. */
  --paper: #f6f1ed;
  --paper-2: #ede5dd;
  --line: #ddd1c5;
  --brass: #a4855a;
  --ink: #231f20; /* the logo's ink, sampled from the PDF */
  --ink-2: #514943;
  --garnet: #6f1f2c; /* fills and accent text: 10.6:1 on plaster */
  --garnet-2: #561721;
  --wine: #34151b;
  --on-dark: #f6f1ed;
  --on-dark-2: #d6c6bd;

  --display: 'Marcellus', 'Readex Pro', Georgia, serif;
  --body: 'Readex Pro', system-ui, sans-serif;

  --wrap: 1180px;
  --gut: clamp(20px, 5vw, 48px);
  --top-h: 76px;
  color-scheme: light;
}
/* Arabic: Marcellus has no Arabic glyphs, so headings use Readex Pro. */
:root[lang='ar'] {
  --display: 'Readex Pro', system-ui, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--top-h) + 12px);
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 300 17px/1.75 var(--body);
  -webkit-font-smoothing: antialiased;
}
:root[lang='ar'] body {
  font-size: 18px;
  line-height: 1.9;
}
img,
svg {
  display: block;
  max-width: 100%;
}
/* The mark's paths carry no fill; this lets every <use> take its colour from CSS. */
svg:has(> use) {
  fill: currentColor;
}
a {
  color: inherit;
}
a,
button,
summary,
select,
input {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
:focus-visible {
  outline: 2px solid var(--garnet);
  outline-offset: 3px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.skip {
  position: absolute;
  inset-inline-start: 12px;
  top: -60px;
  z-index: 50;
  padding: 10px 14px;
  background: var(--ink);
  color: var(--paper);
}
.skip:focus {
  top: 12px;
}
.wrap {
  width: min(var(--wrap), 100% - 2 * var(--gut));
  margin-inline: auto;
}

/* ---------- type ---------- */
.h2 {
  font: 400 clamp(32px, 4.2vw, 50px) / 1.2 var(--display);
  margin: 0 0 16px;
  letter-spacing: 0.005em;
}
:root[lang='ar'] .h2 {
  font-weight: 400;
  line-height: 1.5;
}
.lead {
  margin: 0;
  max-width: 52ch;
  color: var(--ink-2);
  font-size: 1.05em;
}
.head {
  margin-bottom: clamp(44px, 6vw, 72px);
}
/* Centred openings: the symmetry of a palace façade. A short brass rule
   under each heading ties the sections together. */
.head--center {
  text-align: center;
}
.head--center .lead {
  margin-inline: auto;
}
.head--center .h2::after {
  content: '';
  display: block;
  width: 44px;
  height: 1px;
  margin: 22px auto 0;
  background: var(--brass);
}
.more {
  margin: clamp(36px, 5vw, 56px) 0 0;
  text-align: center;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 30px;
  border: 1px solid var(--ink);
  border-radius: 1px;
  font: 400 15px/1.2 var(--body);
  letter-spacing: 0.03em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.btn--solid {
  background: var(--garnet);
  border-color: var(--garnet);
  color: var(--paper);
}
.btn--line {
  background: transparent;
  border-color: rgba(35, 31, 32, 0.45);
  color: var(--ink);
}
.btn--light {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
}
.btn--wide {
  width: 100%;
}
@media (hover: hover) and (pointer: fine) {
  .btn--solid:hover {
    background: var(--garnet-2);
    border-color: var(--garnet-2);
  }
  .btn--line:hover {
    background: var(--ink);
    color: var(--paper);
  }
  .btn--light:hover {
    background: transparent;
    color: var(--paper);
  }
}
.ico {
  width: 20px;
  height: 20px;
  flex: none;
}
.link {
  color: var(--garnet);
  text-underline-offset: 4px;
}
/* A secondary action that doesn't compete with the main button. */
.link--quiet {
  color: var(--ink);
  font-size: 15px;
  letter-spacing: 0.03em;
  text-decoration-color: var(--brass);
  text-decoration-thickness: 1px;
  text-underline-offset: 7px;
  padding: 12px 6px;
}
@media (hover: hover) and (pointer: fine) {
  .link--quiet:hover {
    color: var(--garnet);
  }
}

/* ---------- header ---------- */
.top {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s;
}
.top.is-scrolled {
  border-color: var(--line);
}
.top__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--top-h);
  gap: 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
}
.brand__logo {
  width: auto;
  height: 56px;
}
.nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 32px);
}
.nav a {
  white-space: nowrap;
  text-decoration: none;
  font-size: 15px;
  letter-spacing: 0.02em;
  padding-block: 6px;
  border-bottom: 1px solid transparent;
}
@media (hover: hover) and (pointer: fine) {
  .nav a:hover {
    border-color: currentColor;
  }
}
.nav__lang {
  color: var(--garnet);
}
/* Where the visitor is: the current page, or on the home page the section
   on screen (set by main.js), in garnet with the underline kept on. */
.nav a[aria-current],
.nav a.is-active {
  color: var(--garnet);
  border-color: currentColor;
}
.burger {
  display: none;
}

/* ---------- hero ---------- */
/* The venue's own film fills the first screen. A still of the opening
   frame paints first; the film fades in over it once it plays. The scrim
   is darker at the top and bottom, where the header and the buttons meet
   the picture, and lighter through the middle so the view stays bright. */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: min(calc(100svh - var(--top-h)), 980px);
  overflow: hidden;
  background: var(--wine);
  color: var(--on-dark);
}
.hero__film {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hero__film img,
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__video {
  opacity: 0;
  transition: opacity 1.4s ease;
}
.hero__video.is-playing {
  opacity: 1;
}
.hero__film::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 62% 48% at 50% 56%, rgba(26, 10, 13, 0.52), transparent 78%),
    linear-gradient(180deg, rgba(26, 10, 13, 0.5) 0%, rgba(26, 10, 13, 0.16) 32%, rgba(26, 10, 13, 0.2) 62%, rgba(26, 10, 13, 0.66) 100%);
}
.hero__in {
  display: grid;
  justify-items: center;
  text-align: center;
  padding-block: clamp(72px, 10vw, 128px);
}
.hero__mark {
  width: clamp(76px, 7vw, 112px);
  height: auto;
  aspect-ratio: 199 / 235.5;
  margin-bottom: clamp(20px, 2.6vw, 30px);
  color: var(--on-dark);
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.35));
}
.hero__title {
  font: 400 clamp(46px, 7.4vw, 104px) / 1.12 var(--display);
  margin: 0 0 20px;
  letter-spacing: 0.005em;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.35);
}
:root[lang='ar'] .hero__title {
  font-weight: 400;
  line-height: 1.45;
}
.hero__lead {
  margin: 0 0 38px;
  max-width: 40ch;
  font-size: clamp(17px, 1.5vw, 20px);
  color: var(--on-dark);
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.45);
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
/* A light outline button that sits on the film. */
.btn--glass {
  background: rgba(246, 241, 237, 0.08);
  border-color: rgba(246, 241, 237, 0.7);
  color: var(--on-dark);
  backdrop-filter: blur(6px);
}
@media (hover: hover) and (pointer: fine) {
  .btn--glass:hover {
    background: var(--on-dark);
    border-color: var(--on-dark);
    color: var(--ink);
  }
}
/* Pause control for the moving background (WCAG 2.2.2). Shown only once
   the film is actually playing. */
.hero__toggle {
  position: absolute;
  inset-block-end: 18px;
  inset-inline-end: 18px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(246, 241, 237, 0.55);
  border-radius: 50%;
  background: rgba(26, 10, 13, 0.25);
  color: var(--on-dark);
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background 0.2s, border-color 0.2s;
}
.hero__toggle[hidden] {
  display: none;
}
.hero__toggle .ico {
  width: 16px;
  height: 16px;
}
.hero__toggle .ico--play,
.hero__toggle.is-paused .ico--pause {
  display: none;
}
.hero__toggle.is-paused .ico--play {
  display: block;
}
@media (hover: hover) and (pointer: fine) {
  .hero__toggle:hover {
    background: rgba(26, 10, 13, 0.5);
    border-color: var(--on-dark);
  }
}

/* ---------- setting ---------- */
.setting {
  padding-block: clamp(64px, 9vw, 120px) clamp(40px, 5vw, 64px);
}
.setting__in {
  margin-bottom: 0;
}
.setting__in .lead {
  max-width: 52ch;
  margin-bottom: 28px;
}

/* The mark repeated as a carved frieze that slides slowly sideways.
   The track holds the same set twice, so sliding it by exactly half
   lands on an identical frame and the loop has no visible seam.
   Spacing is a margin on each mark (not flex gap) so both halves are
   precisely equal widths. */
.band {
  padding: 18px 0;
  border-block: 1px solid var(--line);
  overflow: hidden;
  color: var(--brass);
}
.band__track {
  display: flex;
  width: max-content;
  animation: band-slide 70s linear infinite;
}
.band:hover .band__track {
  animation-play-state: paused;
}
.band__mark {
  flex: none;
  width: 22px;
  height: 26px;
  margin-inline-end: 28px;
}
@keyframes band-slide {
  to {
    transform: translateX(-50%);
  }
}
/* Arabic reads right to left, so the frieze travels the other way. */
@keyframes band-slide-rtl {
  to {
    transform: translateX(50%);
  }
}
:root[dir='rtl'] .band__track {
  animation-name: band-slide-rtl;
}
.band__mark:nth-child(even) {
  color: var(--garnet);
}

/* ---------- check your date ---------- */
.check {
  padding-block: clamp(64px, 9vw, 120px);
  border-top: 1px solid var(--line);
}
.check__in {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(32px, 6vw, 88px);
  align-items: start;
}
.form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  padding: clamp(22px, 3.2vw, 36px);
  background: var(--paper-2);
  border: 1px solid var(--line);
}
.field {
  display: grid;
  gap: 6px;
  font-size: 14.5px;
  color: var(--ink-2);
}
.field input,
.field select {
  width: 100%;
  min-height: 50px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.3 var(--body); /* 16px stops iOS zooming on focus */
  appearance: none;
}
.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
:root[dir='rtl'] .field select {
  background-position: 15px 50%, 20px 50%;
}
.field input:focus,
.field select:focus {
  border-color: var(--garnet);
  outline: none;
}
.form .btn,
.form__note {
  grid-column: 1 / -1;
}
.form__note {
  margin: 0;
  font-size: 13.5px;
  color: var(--ink-2);
}

/* ---------- occasions ---------- */
.occasions {
  padding-block: clamp(64px, 9vw, 120px);
  border-top: 1px solid var(--line);
}
.occ {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: clamp(36px, 4vw, 52px);
}
.occ__item {
  padding-inline: clamp(18px, 2.4vw, 34px);
  text-align: center;
}
/* Hairlines between columns only, never on the outer edges. */
.occ__item:not(:nth-child(3n + 1)) {
  border-inline-start: 1px solid var(--line);
}
.occ__name {
  font: 400 25px/1.25 var(--display);
  margin: 0 0 10px;
}
:root[lang='ar'] .occ__name {
  font-weight: 500;
  font-size: 22px;
  line-height: 1.5;
}
.occ__item p {
  margin: 0 auto;
  color: var(--ink-2);
  max-width: 30ch;
}
/* Only the first few show until "See all occasions" is pressed. Without JS
   the toggle can't work, so everything stays visible. */
.js .occ:not(.is-all) .occ__item--more {
  display: none;
}
:root:not(.js) .occ__toggle {
  display: none;
}
.occ__toggle {
  margin-top: clamp(36px, 4vw, 52px);
}

/* ---------- visit (dark) ---------- */
.visit {
  background: var(--wine);
  color: var(--on-dark);
  padding-block: clamp(72px, 10vw, 136px);
  overflow: hidden;
}
.visit__in {
  position: relative;
  isolation: isolate; /* keeps the tulip's z-index -1 above the wine background */
}
.visit .lead {
  color: var(--on-dark-2);
}
.visit__mark {
  position: absolute;
  inset-inline-end: -50px;
  bottom: -150px;
  width: 300px;
  height: 355px;
  color: #401c23;
  pointer-events: none;
  /* Behind the copy and buttons: on phones the full-width WhatsApp button
     sits right where the tulip is. */
  z-index: -1;
  animation: drift 16s ease-in-out infinite alternate;
}
@keyframes drift {
  from {
    transform: translateY(0) rotate(-3deg);
  }
  to {
    transform: translateY(-24px) rotate(3deg);
  }
}
.steps {
  position: relative;
  list-style: none;
  margin: 0 0 44px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 40px);
}
.step {
  position: relative;
  padding-top: 22px;
}
/* The top rule draws across when the step scrolls in. */
.step::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: rgba(164, 133, 90, 0.55);
  transform-origin: left;
  transition: transform 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s;
}
:root[dir='rtl'] .step::before {
  transform-origin: right;
}
.js .step:not(.is-in)::before {
  transform: scaleX(0);
}
.step__n {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--brass);
  border-radius: 50%;
  color: #d9bf94;
  font: 400 17px/1 var(--display);
}
.step h3 {
  font: 400 24px/1.25 var(--display);
  margin: 18px 0 8px;
}
:root[lang='ar'] .step h3 {
  font-weight: 500;
  font-size: 22px;
  line-height: 1.45;
}
.step p {
  margin: 0;
  color: var(--on-dark-2);
}

/* ---------- gallery ---------- */
.gallery {
  padding-block: clamp(64px, 9vw, 120px);
}
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.gallery figure {
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--paper-2);
}
.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- faq ---------- */
.faq {
  padding-block: clamp(64px, 9vw, 120px);
  border-top: 1px solid var(--line);
}
.faq__in {
  max-width: 820px;
}
.faq__in > .h2 {
  text-align: center;
  margin-bottom: clamp(36px, 5vw, 56px);
}
.faq__in > .h2::after {
  content: '';
  display: block;
  width: 44px;
  height: 1px;
  margin: 22px auto 0;
  background: var(--brass);
}
.faq__list {
  border-top: 1px solid var(--line);
}
.qa {
  border-bottom: 1px solid var(--line);
}
.qa summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 0;
  font: 400 18px/1.5 var(--body);
}
.qa summary::-webkit-details-marker {
  display: none;
}
.qa summary::after {
  content: '+';
  flex: none;
  font: 300 26px/1 var(--body);
  color: var(--garnet);
  transition: transform 0.2s;
}
.qa[open] summary::after {
  transform: rotate(45deg);
}
.qa p {
  margin: 0 0 24px;
  max-width: 60ch;
  color: var(--ink-2);
}

/* ---------- find us ---------- */
.find {
  padding-block: clamp(64px, 9vw, 120px);
  background: var(--paper-2);
  border-top: 1px solid var(--line);
}
.find__in {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 6vw, 80px);
  align-items: start;
}
.find__label {
  margin: 26px 0 4px;
  font-size: 14px;
  color: var(--garnet);
}
.find__addr {
  margin: 0;
  font-size: 19px;
}
.hours {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hours li {
  display: flex;
  justify-content: space-between;
  max-width: 320px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}
.find__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 32px;
}
.map {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  min-height: 360px;
  border: 1px solid var(--line);
  background: var(--paper);
  text-align: center;
}
.map iframe {
  width: 100%;
  height: 420px;
  border: 0;
}
.map.is-loaded {
  display: block;
  min-height: 0;
}
.map__note {
  margin: 0;
  font-size: 13.5px;
  color: var(--ink-2);
}

/* ---------- footer ---------- */
.foot {
  padding-block: 56px calc(56px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  text-align: center;
}
.foot__in {
  display: grid;
  justify-items: center;
  gap: 10px;
}
.foot__logo {
  width: 150px;
  height: auto;
}
.foot__small {
  margin: 8px 0 0;
  font-size: 13.5px;
  color: var(--ink-2);
}

/* ---------- 404 ---------- */
.lost {
  min-height: 100svh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  text-align: center;
}
.lost__mark {
  width: 90px;
  height: 106px;
  color: var(--garnet);
}
.lost p {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

/* ---------- sticky phone bar ---------- */
.sticky {
  display: none;
}

/* ---------- reveal on scroll ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.js .reveal.is-in {
  opacity: 1;
  transform: none;
}
/* Items in a row arrive one after another. Delays come from position,
   not inline styles: the CSP blocks style="" attributes. */
.occ__item:nth-child(3n + 2),
.wcard:nth-child(3n + 2),
.step:nth-child(2),
.mosaic li:nth-child(2),
.qa:nth-child(2) {
  transition-delay: 0.1s;
}
.occ__item:nth-child(3n + 3),
.wcard:nth-child(3n + 3),
.step:nth-child(3),
.mosaic li:nth-child(3),
.qa:nth-child(3) {
  transition-delay: 0.2s;
}
.mosaic li:nth-child(4),
.qa:nth-child(4) {
  transition-delay: 0.3s;
}

/* ---------- page-load entrance ---------- */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
}
@keyframes bloom {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(14px);
  }
}
.js .intro {
  animation: rise 1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.js .wpage .lead.intro {
  animation-delay: 0.15s;
}
.js .hero__mark {
  animation: bloom 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s both;
}
.js .hero__title.intro {
  animation-delay: 0.35s;
}
.js .hero__lead.intro {
  animation-delay: 0.55s;
}
.js .hero__cta.intro {
  animation-delay: 0.75s;
}

/* ---------- FAQ answers slide open (where the browser supports it) ---------- */
@supports (interpolate-size: allow-keywords) {
  :root {
    interpolate-size: allow-keywords;
  }
  .qa::details-content {
    height: 0;
    overflow: clip;
    transition: height 0.35s ease, content-visibility 0.35s allow-discrete;
  }
  .qa[open]::details-content {
    height: auto;
  }
}

/* Visitors who ask their phone for less motion get a still page. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  .js .reveal {
    opacity: 1;
    transform: none;
  }
  .js .step::before {
    transform: none;
  }
}

/* ---------- preview-only sample banner ---------- */
.sample-note {
  margin: 0;
  padding: 10px var(--gut);
  background: #fff3cd;
  border-bottom: 1px solid #e6d28a;
  color: #5c4a00;
  font-size: 14px;
  text-align: center;
}

/* ---------- weddings strip (home) ---------- */
.weddings {
  padding-block: clamp(64px, 9vw, 120px);
  border-top: 1px solid var(--line);
}
.wcards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 380px));
  justify-content: center;
  gap: clamp(14px, 2vw, 24px);
}
.wcard__link {
  position: relative;
  display: grid;
  gap: 6px;
  text-decoration: none;
}
.wcard__img {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--paper-2);
  margin-bottom: 10px;
}
.wcard__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
  .wcard__link:hover .wcard__img img {
    transform: scale(1.06);
  }
  .wcard__link:hover .wcard__title {
    color: var(--garnet);
  }
}
.wcard__meta,
.wed__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  font-size: 14px;
  color: var(--ink-2);
}
.wcard__title {
  font: 400 24px/1.25 var(--display);
  transition: color 0.2s;
}
:root[lang='ar'] .wcard__title {
  font-weight: 600;
  font-size: 21px;
  line-height: 1.45;
}
.wcard__sample {
  position: absolute;
  top: 12px;
  inset-inline-start: 12px;
  padding: 4px 9px;
  background: #fff3cd;
  color: #5c4a00;
  font-size: 12.5px;
  border-radius: 2px;
}
.wcard__sample--inline {
  position: static;
  margin-inline-start: 8px;
}

/* ---------- weddings page ---------- */
.wpage {
  padding-top: clamp(40px, 7vw, 88px);
}
.wpage .wrap {
  padding-bottom: clamp(40px, 6vw, 72px);
}
.wpage__title {
  font: 400 clamp(44px, 6.6vw, 84px) / 1.18 var(--display);
  margin: 0 0 18px;
}
:root[lang='ar'] .wpage__title {
  font-weight: 600;
  line-height: 1.35;
}
.wed {
  padding-block: clamp(56px, 8vw, 104px) 0;
}
.wed__head {
  margin-bottom: 32px;
  text-align: center;
}
.wed__head .lead {
  margin-inline: auto;
}
.wed__meta {
  margin: 0 0 8px;
}
.mosaic {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-auto-rows: clamp(150px, 19vw, 250px);
  gap: 10px;
}
/* First photo is the hero of each wedding: two rows tall. */
.mosaic li:first-child {
  grid-row: span 2;
}
.mosaic--3 {
  grid-template-columns: 2fr 1fr;
}
.mosaic--2 {
  grid-template-columns: 1fr 1fr;
}
.mosaic--1 {
  grid-template-columns: 1fr;
}
.mosaic--4 li:nth-child(4) {
  grid-column: span 2;
}
.shot {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: var(--paper-2);
  overflow: hidden;
  cursor: zoom-in;
}
.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.4s;
}
@media (hover: hover) and (pointer: fine) {
  .shot:hover img {
    transform: scale(1.05);
  }
}
.wend {
  padding-block: clamp(72px, 10vw, 136px);
}
.wend__in {
  display: grid;
  justify-items: center;
  gap: 18px;
  text-align: center;
  padding-top: clamp(48px, 7vw, 88px);
  border-top: 1px solid var(--line);
}
.wend__mark {
  width: 56px;
  height: 66px;
  color: var(--garnet);
}

/* ---------- lightbox ---------- */
.lb {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(20, 17, 18, 0.96);
  color: var(--on-dark);
}
.lb::backdrop {
  background: transparent;
}
.lb[open] {
  display: grid;
  place-items: center;
  animation: lb-in 0.3s ease both;
}
@keyframes lb-in {
  from {
    opacity: 0;
  }
}
.lb__fig {
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 64px 72px 72px;
}
.lb__fig img {
  max-width: min(100%, 1400px);
  max-height: calc(100dvh - 180px);
  object-fit: contain;
  animation: bloom 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.lb__cap {
  font-size: 15px;
  color: var(--on-dark-2);
  text-align: center;
}
.lb__btn {
  position: fixed;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid #4a4244;
  border-radius: 50%;
  background: rgba(20, 17, 18, 0.6);
  color: var(--on-dark);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
@media (hover: hover) and (pointer: fine) {
  .lb__btn:hover {
    background: var(--garnet);
    border-color: var(--garnet);
  }
}
.lb__close {
  top: 16px;
  inset-inline-end: 16px;
}
.lb__prev,
.lb__next {
  top: 50%;
  translate: 0 -50%;
}
.lb__prev {
  inset-inline-start: 16px;
}
.lb__next {
  inset-inline-end: 16px;
}
/* The arrow icon points "forward"; previous is its mirror. In Arabic,
   forward is leftward, so both flip. */
.lb__prev .ico {
  transform: scaleX(-1);
}
:root[dir='rtl'] .lb__prev .ico {
  transform: none;
}
:root[dir='rtl'] .lb__next .ico {
  transform: scaleX(-1);
}
.lb__toast {
  position: fixed;
  top: 22px;
  left: 50%;
  margin: 0;
  padding: 10px 18px;
  border: 1px solid rgba(246, 241, 237, 0.35);
  background: rgba(52, 21, 27, 0.92);
  color: var(--on-dark);
  font-size: 15px;
  letter-spacing: 0.02em;
  opacity: 0;
  translate: -50% -8px;
  transition: opacity 0.3s, translate 0.3s;
  pointer-events: none;
}
.lb__toast.is-on {
  opacity: 1;
  translate: -50% 0;
}
.lb__count {
  position: fixed;
  bottom: 20px;
  inset-inline: 0;
  margin: 0;
  text-align: center;
  font-size: 14px;
  color: var(--on-dark-2);
}

/* ---------- tablet ---------- */
@media (max-width: 960px) {
  .occ {
    grid-template-columns: repeat(2, 1fr);
  }
  .occ__item:not(:nth-child(3n + 1)) {
    border-inline-start: 0;
  }
  .occ__item:nth-child(2n) {
    border-inline-start: 1px solid var(--line);
  }
  .check__in,
  .faq__in,
  .find__in {
    grid-template-columns: 1fr;
  }
}

/* ---------- phone ---------- */
@media (max-width: 760px) {
  :root {
    --top-h: 66px;
  }
  body {
    font-size: 16.5px;
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }
  /* On phones the film fills the screen between the header and the
     WhatsApp/Call bar, so both buttons sit in the first view. */
  .hero {
    min-height: calc(100svh - var(--top-h) - 64px - env(safe-area-inset-bottom));
  }
  .hero__in {
    align-self: end;
    padding-block: 56px 44px;
  }
  .hero__toggle {
    inset-block: 14px auto;
    inset-inline-end: 14px;
  }
  .hero__cta .btn {
    flex: 1 1 100%;
  }
  .form {
    grid-template-columns: 1fr;
  }
  .occ,
  .steps,
  .gallery__grid {
    grid-template-columns: 1fr;
  }
  /* Wedding cards become a swipeable row that peeks the next card. */
  .wcards {
    display: flex;
    gap: 14px;
    margin-inline: calc(-1 * var(--gut));
    padding-inline: var(--gut);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gut);
    scrollbar-width: none;
  }
  .wcards::-webkit-scrollbar {
    display: none;
  }
  .wcard {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }
  .mosaic,
  .mosaic--3,
  .mosaic--4 {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 42vw;
  }
  .mosaic li:first-child {
    grid-column: span 2;
    grid-row: span 1;
  }
  .mosaic--4 li:nth-child(4) {
    grid-column: span 1;
  }
  .mosaic--2 li:nth-child(2) {
    grid-column: span 2;
  }
  .lb__fig {
    padding: 64px 12px 84px;
  }
  .lb__prev,
  .lb__next {
    top: auto;
    bottom: 12px;
    translate: none;
    width: 46px;
    height: 46px;
  }
  .lb__count {
    bottom: 26px;
  }
  .occ__item,
  :root[dir='rtl'] .occ__item {
    padding-inline: 0;
  }
  .occ__item:nth-child(n) {
    border-inline-start: 0;
  }
  .occ__item + .occ__item {
    padding-top: clamp(28px, 7vw, 36px);
    border-top: 1px solid var(--line);
  }
  .occ {
    row-gap: clamp(28px, 7vw, 36px);
  }
  .visit__mark {
    width: 200px;
    height: 236px;
    inset-inline-end: -60px;
  }
  .visit .btn {
    width: 100%;
  }
  .sticky {
    position: fixed;
    inset: auto 0 0;
    z-index: 30;
    display: flex;
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--ink);
    border-top: 1px solid #3a3334;
  }
  .sticky a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 60px;
    color: var(--on-dark);
    text-decoration: none;
    font-weight: 500;
  }
  .sticky a + a {
    border-inline-start: 1px solid #3a3334;
  }
  .sticky a:first-child {
    background: var(--garnet);
  }
}

@media (max-width: 760px) {
  .brand__logo {
    height: 46px;
  }
}

/* ---------- wedding styling guide ---------- */
/* Five tips, each a column of copy beside a photo from the venue's own
   films. Photos alternate sides down the page; on phones they stack. */
.tips {
  list-style: none;
  margin: 0;
  padding: clamp(56px, 8vw, 104px) 0;
  display: grid;
  gap: clamp(72px, 10vw, 128px);
}
.tip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.tip:nth-child(even) .tip__shot {
  order: -1;
}
.tip:not(:has(.tip__shot)) {
  grid-template-columns: minmax(0, 680px);
  justify-content: center;
}
.tip__num {
  margin: 0 0 6px;
  font: 400 clamp(48px, 5vw, 64px) / 1 var(--display);
  color: var(--brass);
}
.tip__title {
  margin: 0 0 18px;
  font: 400 clamp(28px, 3vw, 38px) / 1.2 var(--display);
}
:root[lang='ar'] .tip__title {
  font-weight: 500;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.5;
}
.tip__copy > p {
  margin: 0 0 14px;
  max-width: 54ch;
  color: var(--ink-2);
}
.tip__copy > .tip__num {
  color: var(--brass);
}
.tip__note {
  margin-top: 26px;
  padding: 18px 22px;
  border-inline-start: 2px solid var(--garnet);
  background: rgba(111, 31, 44, 0.05);
}
.tip__note p {
  margin: 0;
}
.tip__note .tip__label {
  margin-bottom: 6px;
  font-size: 14px;
  color: var(--garnet);
}
.tip__shot {
  margin: 0;
}
.tip__shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.wend .lead {
  margin-inline: auto;
}
.wend__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin: 30px 0 0;
}
@media (max-width: 760px) {
  .tip {
    grid-template-columns: minmax(0, 1fr);
  }
  .tip:nth-child(even) .tip__shot {
    order: 0;
  }
  .wend__cta .btn {
    flex: 1 1 100%;
  }
}


/* ---------- inner page hero (weddings, guide) ---------- */
/* Same look as the home hero: a photo of the Qasr, the same scrim, a
   centred title. Shorter, so the content starts sooner. */
.hero--page {
  min-height: min(68svh, 640px);
}
.hero--page .hero__film img {
  object-position: 50% 60%;
}
.hero__lead--text {
  max-width: 46ch;
  margin-bottom: 0;
}

/* ---------- stills for slow connections ---------- */
.hero__slides img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.hero__slides img.is-on {
  opacity: 1;
}

/* ---------- indoor salon ---------- */
/* The exclusive option: a wine panel inside a brass hairline frame, the
   tulip faint behind the words. */
.indoor {
  padding-bottom: clamp(64px, 9vw, 120px);
}
.indoor__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  justify-items: center;
  max-width: 820px;
  margin-inline: auto;
  padding: clamp(44px, 6vw, 72px) clamp(24px, 5vw, 64px);
  text-align: center;
  background: var(--wine);
  color: var(--on-dark);
  outline: 1px solid rgba(164, 133, 90, 0.55);
  outline-offset: -12px;
}
.indoor__card .lead {
  max-width: 46ch;
  margin: 0 auto 30px;
  color: var(--on-dark-2);
}
.indoor__label {
  margin: 0 0 10px;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--brass);
}
.indoor__mark {
  position: absolute;
  inset-inline-end: -40px;
  bottom: -70px;
  z-index: -1;
  width: 220px;
  height: 260px;
  color: #401c23;
}

/* ---------- form: name across both columns ---------- */
.field--wide {
  grid-column: 1 / -1;
}

/* ---------- social links ---------- */
.soc-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}
.foot .soc-row {
  justify-content: center;
}
.soc {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.soc .ico {
  width: 18px;
  height: 18px;
}
@media (hover: hover) and (pointer: fine) {
  .soc:hover {
    background: var(--garnet);
    border-color: var(--garnet);
    color: var(--paper);
  }
}
@media (max-width: 760px) {
  .hero--page {
    min-height: 58svh;
  }
  .hero--page .hero__in {
    align-self: center;
    padding-block: 56px;
  }
}
.hero--page .hero__title {
  font-size: clamp(40px, 5.6vw, 76px);
}


/* ---------- menu button: phones and every iPad ---------- */
/* Below 1100px the seven nav labels no longer fit on one line (iPad
   portrait wrapped "Book a Visit" onto two), so the menu folds into the
   button. The dropdown column is capped at 760px and centred on tablets. */
@media (max-width: 1100px) {
  .burger {
    display: grid;
    gap: 6px;
    width: 44px;
    height: 44px;
    place-content: center;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--ink);
  }
  .burger span:not(.sr-only) {
    width: 22px;
    height: 1.5px;
    background: currentColor;
    transition: transform 0.25s;
  }
  .burger[aria-expanded='true'] span:first-child {
    transform: translateY(3.75px) rotate(45deg);
  }
  .burger[aria-expanded='true'] span:nth-child(2) {
    transform: translateY(-3.75px) rotate(-45deg);
  }
  .nav {
    position: fixed;
    inset: var(--top-h) 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px max(var(--gut), calc((100vw - 760px) / 2)) 24px;
    max-height: calc(100dvh - var(--top-h));
    overflow-y: auto;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  }
  .nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
  }
  .nav a {
    padding: 15px 0;
    font-size: 18px;
    border-bottom: 1px solid var(--line);
  }
  /* In the dropdown, the current page or section gets a garnet bar. */
  .nav a[aria-current],
  .nav a.is-active {
    border-bottom-color: var(--line);
    padding-inline-start: 14px;
    box-shadow: inset 2px 0 0 var(--garnet);
  }
  :root[dir='rtl'] .nav a[aria-current],
  :root[dir='rtl'] .nav a.is-active {
    box-shadow: inset -2px 0 0 var(--garnet);
  }
}

/* ---------- occasions: open to other events ---------- */
.occ__other {
  max-width: 560px;
  margin: clamp(48px, 6vw, 72px) auto 0;
  padding-top: clamp(36px, 4vw, 48px);
  border-top: 1px solid var(--line);
  text-align: center;
}
.occ__other p {
  margin: 0 0 18px;
  color: var(--ink-2);
}
/* Centred leads break into even lines instead of leaving one word alone. */
.head--center .lead,
.hero__lead,
.occ__other p,
.indoor__card .lead {
  text-wrap: balance;
}

/* Landing page sections: the guide layout without numbers. */
.tips--plain .tip__title {
  margin-top: 0;
}