:root {
  --navy: #0a2c42;
  --navy-deep: #071c2e;
  --navy-soft: #123350;
  --accent: #c8a45e;
  --accent-bright: #e6cf9c;
  --gold: var(--accent);
  --gold-bright: var(--accent-bright);
  --sand: #efe8db;
  --cream: #fbf9f4;
  --white: #ffffff;
  --ink: #16242f;
  --muted: #6a7680;
  --line: rgba(10, 44, 66, .14);
  --error: #b5453a;
  --success: #2f7d57;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Manrope', 'Segoe UI', Arial, sans-serif;
  --shadow: 0 24px 70px rgba(3, 23, 38, .18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--cream);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
.shell { width: min(1200px, calc(100% - 48px)); margin-inline: auto; }
.section { padding: clamp(80px, 11vw, 128px) 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -60px; inset-inline-start: 16px; z-index: 100; padding: 12px 18px; background: var(--white); color: var(--navy); }
.skip-link:focus { top: 12px; }
::selection { background: rgba(200, 164, 94, .28); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.eyebrow {
  margin: 0 0 18px;
  color: var(--gold);
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .18em;
  line-height: 1.2;
  text-transform: uppercase;
}
.eyebrow--light { color: var(--gold-bright); }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: var(--serif); font-weight: 500; letter-spacing: -.01em; }
h2 { font-size: clamp(2.6rem, 5vw, 4.8rem); line-height: 1.02; }
em { color: var(--gold-bright); font-weight: 400; }

.button {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  padding: 0 28px;
  border: 1px solid transparent;
  border-radius: 2px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: transform .25s ease, background .25s ease, color .25s ease;
}
.button:hover { transform: translateY(-2px); }
.button--gold { background: var(--gold); color: var(--navy-deep); }
.button--gold:hover { background: var(--gold-bright); }
.button--dark { background: var(--navy); color: var(--white); }
.button--nav { min-height: 42px; margin-inline-start: 14px; padding-inline: 20px; background: var(--gold); color: var(--navy-deep) !important; }
.text-link { display: inline-flex; align-items: center; gap: 14px; padding-bottom: 5px; border-bottom: 1px solid currentColor; color: var(--navy); font-size: .85rem; font-weight: 700; letter-spacing: .04em; }
.text-link span { transition: transform .2s ease; }
.text-link:hover span { transform: translateX(4px); }
.text-link--light { color: var(--white); }

.topbar { position: absolute; top: 0; z-index: 20; width: 100%; border-bottom: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.78); }
.topbar__inner { height: 38px; display: flex; align-items: center; justify-content: space-between; font-size: .7rem; letter-spacing: .11em; text-transform: uppercase; }
.topbar p { margin: 0; }
.topbar__links { display: flex; align-items: center; gap: 12px; }
.topbar__whatsapp { color: var(--gold-bright); }
.language { padding: 0; border: 0; background: transparent; cursor: pointer; font-size: inherit; letter-spacing: inherit; }
.language span { color: rgba(255,255,255,.45); }

.site-header { position: absolute; top: 38px; z-index: 20; width: 100%; border-bottom: 1px solid rgba(255,255,255,.14); color: var(--white); transition: background .25s ease, box-shadow .25s ease, top .25s ease; }
.site-header.is-stuck { position: fixed; top: 0; background: rgba(6, 29, 49, .96); box-shadow: 0 8px 30px rgba(0,0,0,.16); backdrop-filter: blur(14px); }
.nav-wrap { min-height: 82px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--gold-bright); }
/* Source art is only 132x81, so 48px tall keeps it at ~1.7x — near enough to
   retina-sharp. Going larger gives the wordmark more presence but visibly softens
   the fine linework; past 81px it is being upscaled outright. Raise this once a
   vector version of the logo exists. */
.brand__logo { width: auto; height: 48px; }
.site-menu { display: flex; align-items: center; gap: 28px; }
.site-menu > a:not(.button) { color: rgba(255,255,255,.86); font-size: .76rem; font-weight: 600; letter-spacing: .04em; }
.site-menu > a:not(.button):hover { color: var(--gold-bright); }
.menu-toggle { display: none; width: 42px; height: 42px; padding: 9px; border: 0; background: transparent; cursor: pointer; }
.menu-toggle span:not(.sr-only) { display: block; height: 1px; margin: 6px 0; background: currentColor; }

/* Sunset over the Cleopatra Sharm infinity pool. The slot renders 2.19:1 against
   the source's 1.5:1, so `cover` crops ~32% of the height — 45% keeps the sun,
   horizon and pool edge and drops the empty foreground paving. The plain url()
   is declared first as the fallback: browsers without image-set() discard the
   second declaration and keep the 1x file rather than losing the image. */
.hero { position: relative; min-height: 92svh; display: grid; align-items: center; overflow: hidden; background: var(--navy) center 45% / cover no-repeat; color: var(--white); background-image: url('../assets/hero-infinity-sunset-1920.webp'); background-image: image-set(url('../assets/hero-infinity-sunset-1920.webp') 1x, url('../assets/hero-infinity-sunset-3840.webp') 2x); }
.hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,25,42,.88) 0%, rgba(4,25,42,.58) 49%, rgba(4,25,42,.12) 100%); }
.hero::after { content: ''; position: absolute; inset: auto 0 0; height: 30%; background: linear-gradient(transparent, rgba(4,25,42,.52)); }
.hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.12), transparent 28%); }
.hero__layout { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 8vw; align-items: end; padding-top: 150px; }
.hero__content { max-width: 720px; }
.hero h1 { margin-bottom: 28px; font-size: clamp(3.8rem, 6.5vw, 6.5rem); line-height: .92; }
.hero h1 em { display: inline-block; font-size: .76em; }
.hero__lead { max-width: 620px; margin-bottom: 36px; color: rgba(255,255,255,.82); font-size: 1.1rem; }
.hero__actions { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.trip-card { padding: 36px 34px; border-top: 3px solid var(--gold); background: rgba(7,28,46,.84); box-shadow: 0 24px 70px rgba(3,23,38,.4); backdrop-filter: blur(14px); }
.trip-card__overline { margin-bottom: 12px; color: var(--gold-bright); font-size: .67rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.trip-card h2 { margin-bottom: 30px; font-size: 2rem; line-height: 1.1; }
.trip-card ul { margin: 0 0 28px; padding: 0; list-style: none; }
.trip-card li { display: grid; grid-template-columns: 34px 1fr; gap: 8px; padding: 13px 0; border-top: 1px solid rgba(255,255,255,.13); color: rgba(255,255,255,.76); font-size: .83rem; }
.trip-card li span { color: var(--gold); font-size: .67rem; }
.trip-card > a { display: flex; justify-content: space-between; color: var(--gold-bright); font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }

.proof { background: var(--sand); }
.proof__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 48px); padding: clamp(56px, 8vw, 84px) 0; align-items: end; }
.proof__intro { grid-column: 1 / -1; max-width: 580px; }
.proof__intro h2 { margin: 0; font-size: 2.35rem; line-height: 1.1; }
.proof__stat { padding-inline-start: 25px; border-inline-start: 1px solid rgba(9,42,70,.2); }
.proof__stat strong { display: block; color: var(--navy); font-family: var(--serif); font-size: 2.65rem; font-weight: 400; line-height: 1; }
.proof__stat span { display: block; margin-top: 10px; color: var(--muted); font-size: .72rem; line-height: 1.4; }

.section-heading { display: grid; grid-template-columns: 1.3fr .7fr; gap: 70px; align-items: end; margin-bottom: 64px; }
.section-heading h2 { margin-bottom: 0; color: var(--navy); }
.section-heading > p { max-width: 440px; margin: 0 0 5px; color: var(--muted); font-size: 1.02rem; }
/* Used where the right-hand column carries a link under the lead, so the lead
   is no longer a direct child and .section-heading > p stops matching it. */
.section-heading__aside { max-width: 440px; margin-bottom: 5px; }
.section-heading__aside p { margin: 0 0 20px; color: var(--muted); font-size: 1.02rem; }
.section-heading--light .section-heading__aside p { color: rgba(255,255,255,.62); }
.pathways { background: var(--cream); }
.pathway-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.pathway { min-height: 390px; display: flex; flex-direction: column; justify-content: space-between; padding: 30px; background: var(--white); transition: transform .3s ease, box-shadow .3s ease; }
.pathway:hover { z-index: 2; transform: translateY(-6px); box-shadow: var(--shadow); }
.pathway--large { grid-column: span 2; padding-inline-end: 28%; background: var(--sand); }
.pathway--dark { grid-column: span 3; background: var(--navy); color: var(--white); }
.pathway--photo { position: relative; min-height: 390px; padding: 0; overflow: hidden; background: var(--navy); }
.pathway--photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 48%, rgba(4,24,40,.76)); }
.pathway--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% center; transition: transform .8s ease; }
.pathway--photo:hover img { transform: scale(1.035); }
.pathway__photo-content { position: absolute; z-index: 1; inset: auto 0 0; padding: 30px; }
.pathway__photo-content .pathway__label { margin: 0; color: var(--gold-bright); }
.pathway__number { align-self: flex-end; color: var(--gold); font-size: .67rem; letter-spacing: .12em; }
.pathway__icon { width: 48px; height: 48px; margin-bottom: 30px; color: var(--gold); }
.pathway__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.2; }
.pathway__label { margin-bottom: 10px; color: var(--gold); font-size: .64rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.pathway h3 { max-width: 500px; margin-bottom: 14px; color: var(--navy); font-family: var(--serif); font-size: 2rem; font-weight: 500; line-height: 1.08; }
.pathway--dark h3 { color: var(--white); }
.pathway p:not(.pathway__label) { max-width: 520px; margin-bottom: 26px; color: var(--muted); font-size: .88rem; }
.pathway--dark p:not(.pathway__label) { color: rgba(255,255,255,.66); }
.pathway a { display: inline-flex; gap: 12px; color: var(--navy); font-size: .73rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.pathway--dark a { color: var(--gold-bright); }

.concierge { background: var(--white); }
.concierge__layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 9vw; align-items: start; }
.concierge__sticky { position: sticky; top: 130px; }
.concierge__sticky h2 { margin-bottom: 30px; color: var(--navy); font-size: clamp(2.8rem, 4.6vw, 4.3rem); }
.concierge__sticky > p:not(.eyebrow) { max-width: 470px; margin-bottom: 34px; color: var(--muted); }
.service-list { border-top: 1px solid var(--line); }
.service-row { display: grid; grid-template-columns: 42px 1fr 20px; gap: 20px; align-items: start; padding-block: 30px; padding-inline: 0 10px; border-bottom: 1px solid var(--line); transition: background .2s ease, padding .2s ease; }
.service-row > span { color: var(--gold); font-size: .68rem; }
.service-row h3 { margin: 0 0 6px; color: var(--navy); font-family: var(--serif); font-size: 1.5rem; font-weight: 500; line-height: 1.15; }
.service-row p { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.6; }
.service-row b { color: var(--gold); font-weight: 400; transition: transform .2s ease; }
.service-row:hover { padding-inline-start: 10px; background: #faf7f0; }
.service-row:hover b { transform: translate(3px, -3px); }

.portfolio { overflow: hidden; background: var(--navy-deep); color: var(--white); }
.section-heading--light h2 { color: var(--white); }
.section-heading--light > p { color: rgba(255,255,255,.62); }
.portfolio__grid { display: grid; grid-template-columns: 1.55fr .8fr; gap: 24px; }
.property { position: relative; min-height: 580px; overflow: hidden; }
.property img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.property:hover img { transform: scale(1.035); }
.property__overlay { position: absolute; inset: 0; background: linear-gradient(transparent 38%, rgba(4,24,40,.88)); }
.property__content { position: absolute; inset: auto 0 0; padding: 46px; }
.property__content p, .property-note p { margin-bottom: 9px; color: var(--gold-bright); font-size: .65rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.property__content h3 { margin-bottom: 22px; font-family: var(--serif); font-size: 2.5rem; font-weight: 500; line-height: 1.05; }
.property__content a { color: var(--white); font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.property-stack { display: grid; grid-template-rows: .55fr 1fr; gap: 24px; }
.property-note { display: flex; align-items: end; justify-content: space-between; padding: 34px; border: 1px solid rgba(255,255,255,.13); background: var(--navy-soft); }
.property-note h3 { max-width: 300px; margin: 0; font-family: var(--serif); font-size: 1.8rem; font-weight: 500; line-height: 1.08; }
/* Arrow-circle link only. The accent card also carries .property-note, so without
   :not(.button) this captures its CTA and squeezes it into a 46px box. */
.property-note > a:not(.button) { display: grid; width: 46px; height: 46px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(255,255,255,.22); color: var(--gold-bright); }
.property-note--photo { position: relative; isolation: isolate; overflow: hidden; background: var(--navy-soft); }
/* Three stops rather than two. The card is only 400x197, so a flat .3 -> .9 ramp
   buried the pool and palms and the photo read as a plain gradient. The bottom
   stays at .84 because the caption sits there: the gold overline (#e6cf9c) needs
   roughly .80+ over a mid-bright pixel to clear WCAG AA at this text size. */
.property-note--photo::before { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgba(4,24,40,.15) 0%, rgba(4,24,40,.4) 42%, rgba(4,24,40,.84) 100%); }
.property-note--photo > img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .8s ease; }
.property-note--photo:hover > img { transform: scale(1.035); }
.property-note--photo h3 { color: var(--white); }
.property-note--accent { display: block; background: var(--gold); color: var(--navy-deep); }
.property-note--accent .eyebrow { color: rgba(6,29,49,.7); }
.property-note--accent h3 { max-width: 360px; margin: 0 0 32px; font-size: 2rem; }

.pilgrimage { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 690px; background: var(--navy); color: var(--white); }
.pilgrimage__image { min-height: 600px; background: linear-gradient(90deg, transparent 72%, rgba(9,42,70,.8)), url('../assets/umrah.jpg') center / cover no-repeat; }
.pilgrimage__content { align-self: center; max-width: 620px; padding: 80px 8vw; }
.pilgrimage__content h2 { margin-bottom: 26px; }
.pilgrimage__content > p:not(.eyebrow) { margin-bottom: 28px; color: rgba(255,255,255,.7); }
.pilgrimage__content ul { display: grid; grid-template-columns: 1fr 1fr; gap: 11px 24px; margin: 0 0 36px; padding: 0; list-style: none; color: rgba(255,255,255,.86); font-size: .83rem; }
.pilgrimage__content li::before { content: '—'; margin-inline-end: 8px; color: var(--gold); }

.promise { background: var(--sand); }
.promise__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 10vw; align-items: end; }
.promise__title h2 { margin: 0; color: var(--navy); }
.promise__title em { color: var(--gold); }
.promise__copy { padding-bottom: 8px; }
.promise__copy p { color: var(--muted); font-family: var(--serif); font-size: 1.25rem; line-height: 1.6; }
.promise__copy .text-link { margin-top: 16px; font-family: var(--sans); font-size: .76rem; }

.planner { background: var(--navy-deep); color: var(--white); }
.planner__grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: 8vw; align-items: start; }
.planner__intro { position: sticky; top: 130px; }
.planner__intro h2 { margin-bottom: 26px; font-size: clamp(3.1rem, 5vw, 5rem); }
.planner__intro > p:not(.eyebrow) { max-width: 480px; color: rgba(255,255,255,.65); }
.planner__trust { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.planner__trust span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; color: rgba(255,255,255,.82); font-size: .72rem; }
.planner__trust b { color: var(--gold); font-size: .6rem; }
.planner__contact { display: grid; gap: 5px; margin-top: 38px; }
.planner__contact span { margin-bottom: 8px; color: var(--gold); font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.planner__contact a { color: rgba(255,255,255,.84); font-size: .86rem; }
.planner__contact .planner__whatsapp { margin-top: 8px; color: var(--gold-bright); font-size: .8rem; font-weight: 600; }
.planner-form { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 24px; padding: 42px; border-top: 3px solid var(--gold); background: var(--white); box-shadow: var(--shadow); color: var(--ink); }
.field { display: grid; gap: 8px; }
.field--wide { grid-column: 1 / -1; }
.field label { color: var(--navy); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.field input, .field select, .field textarea { width: 100%; min-height: 49px; padding: 10px 0; border: 0; border-bottom: 1px solid rgba(9,42,70,.25); border-radius: 0; outline: 0; background: transparent; color: var(--ink); }
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold); }
.field input::placeholder, .field textarea::placeholder { color: #9ca5aa; }
.field input[aria-invalid="true"] { border-color: var(--error); }
.field__error { min-height: 1.1em; color: var(--error); font-size: .72rem; }
.form-action { display: flex; align-items: center; gap: 22px; margin-top: 5px; }
.form-action p { margin: 0; color: var(--success); font-size: .8rem; }

.site-footer { background: #041522; color: rgba(255,255,255,.65); }
.footer__top { display: flex; align-items: center; justify-content: space-between; padding: 65px 0 42px; border-bottom: 1px solid rgba(255,255,255,.12); }
.footer__top p { margin: 0; color: var(--white); font-family: var(--serif); font-size: 1.55rem; }
.brand--footer { color: var(--gold-bright); }
.footer__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; padding: 56px 0; }
.footer__grid > div { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.footer__grid h2 { margin-bottom: 12px; color: var(--gold); font-family: var(--sans); font-size: .64rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.footer__grid p, .footer__grid a { margin: 0; font-size: .8rem; }
.footer__grid a:hover { color: var(--gold-bright); }
.footer__bottom { display: flex; justify-content: space-between; padding: 25px 0; border-top: 1px solid rgba(255,255,255,.1); font-size: .66rem; }
.footer__bottom p { margin: 0; }
.footer__bottom div { display: flex; gap: 25px; }

.floating-cta { position: fixed; z-index: 40; inset-inline-end: clamp(16px, 3vw, 28px); bottom: clamp(16px, 3vw, 28px); display: inline-flex; min-height: 52px; align-items: center; gap: 10px; padding: 0 24px; border-radius: 999px; background: var(--gold); box-shadow: 0 14px 40px rgba(3,23,38,.35); color: var(--navy-deep); font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: 0; pointer-events: none; transform: translateY(16px); transition: opacity .25s ease, transform .25s ease, background .2s ease; }
.floating-cta.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.floating-cta:hover { background: var(--gold-bright); color: var(--navy-deep); }

/* Purpose — mission, vision and the Cleopatra Group parentage.
   Sits between the sand Promise band and the dark Planner, so it stays white
   to keep the three sections visually distinct. */
.purpose { background: var(--white); }
.purpose__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.purpose__card { padding: 44px 46px; border: 1px solid var(--line); border-inline-start: 2px solid var(--accent); background: var(--cream); }
.purpose__card p { margin: 0 0 18px; color: var(--muted); font-family: var(--serif); font-size: 1.22rem; line-height: 1.6; }
.purpose__card p:last-child { margin-bottom: 0; }
.purpose__card .purpose__label { margin: 0 0 22px; color: var(--gold); font-family: var(--sans); font-size: .73rem; font-weight: 700; letter-spacing: .18em; line-height: 1.2; text-transform: uppercase; }

.purpose__band { height: 380px; margin-block: 24px 0; margin-inline: 0; overflow: hidden; background: var(--navy-soft); }
.purpose__band img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }

.purpose__group { display: flex; align-items: center; justify-content: space-between; gap: 48px; margin-top: 24px; padding: 38px 46px; border: 1px solid var(--line); }
.purpose__group-lead { max-width: 520px; margin: 0; color: var(--navy); font-size: .98rem; line-height: 1.6; }
.purpose__industries { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.purpose__industries li { padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }

/* Forthcoming Cleopatra properties — no photography exists yet, so these are
   text-only cards, dashed to read as "not open" against the built properties. */
.portfolio__upcoming { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; }
.property-upcoming { padding: 34px; border: 1px dashed rgba(255,255,255,.22); background: rgba(255,255,255,.03); }
.property-upcoming p { margin: 0 0 6px; color: rgba(255,255,255,.62); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.property-upcoming .property-upcoming__badge { margin: 0 0 20px; color: var(--gold-bright); font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.property-upcoming h3 { margin: 0; font-family: var(--serif); font-size: 1.8rem; font-weight: 500; line-height: 1.08; }

/* ============================================================
   Gallery page (/gallery)
   ============================================================ */

/* No hero photograph here: the grid below is the imagery, and a full-bleed
   photo above 48 more would fight it. The navy band carries the same weight
   as the home hero without competing. */
.gallery-intro { padding: 190px 0 clamp(56px, 7vw, 84px); background: var(--navy-deep); color: var(--white); }
.gallery-intro h1 { max-width: 14ch; margin-bottom: 24px; font-family: var(--serif); font-size: clamp(3rem, 6vw, 5.2rem); font-weight: 500; line-height: .96; }
.gallery-intro__lead { max-width: 560px; margin: 0; color: rgba(255,255,255,.72); font-size: 1.05rem; }

.gallery { background: var(--cream); }
.gallery__filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(40px, 5vw, 60px); }
.gallery__filter { display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; transition: border-color .2s ease, background .2s ease, color .2s ease; }
.gallery__filter:hover { border-color: var(--accent); color: var(--navy); }
.gallery__filter.is-active { border-color: var(--navy); background: var(--navy); color: var(--white); }
.gallery__filter-count { color: var(--gold); font-size: .68rem; font-weight: 700; }
.gallery__filter.is-active .gallery__filter-count { color: var(--gold-bright); }

.gallery-group + .gallery-group { margin-top: clamp(56px, 7vw, 88px); }
.gallery-group__heading { margin-bottom: 26px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.gallery-group__location { margin: 0 0 6px; color: var(--gold); font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.gallery-group__heading h2 { margin: 0; color: var(--navy); font-size: clamp(1.9rem, 3vw, 2.5rem); line-height: 1.1; }

.gallery__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.gallery__item { margin: 0; }
/* Fixed 3:2 frames rather than a masonry flow: the sources are a mix of 3:2,
   16:9 and one portrait, and a ragged grid reads as broken rather than
   editorial at this density. object-fit crops to the centre. */
.gallery__tile { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--navy-soft); }
.gallery__tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.gallery__tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgba(4,24,40,.42)); opacity: 0; transition: opacity .35s ease; }
.gallery__tile:hover img, .gallery__tile:focus-visible img { transform: scale(1.045); }
.gallery__tile:hover::after, .gallery__tile:focus-visible::after { opacity: 1; }

/* Scroll lock while the dialog is open. position: fixed would lose the scroll
   position; the page is restored the moment the class comes off. */
body.has-lightbox { overflow: hidden; }

.lightbox { position: fixed; z-index: 60; inset: 0; display: grid; place-items: center; padding: clamp(16px, 4vw, 48px); }
.lightbox[hidden] { display: none; }
.lightbox__backdrop { position: absolute; inset: 0; background: rgba(4,20,34,.94); backdrop-filter: blur(6px); }
.lightbox__figure { position: relative; z-index: 1; display: flex; max-width: min(1200px, 100%); max-height: 100%; flex-direction: column; align-items: center; gap: 18px; margin: 0; }
.lightbox__image { max-width: 100%; max-height: min(74vh, 900px); width: auto; height: auto; object-fit: contain; box-shadow: 0 30px 90px rgba(0,0,0,.5); }
.lightbox__caption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 6px 16px; max-width: 62ch; text-align: center; }
.lightbox__group { color: var(--gold-bright); font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.lightbox__text { color: rgba(255,255,255,.82); font-size: .86rem; }
.lightbox__counter { color: rgba(255,255,255,.45); font-size: .72rem; font-variant-numeric: tabular-nums; }

.lightbox__close, .lightbox__nav { position: absolute; z-index: 2; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.22); background: rgba(7,28,46,.6); color: var(--white); cursor: pointer; line-height: 1; transition: background .2s ease, border-color .2s ease; }
.lightbox__close:hover, .lightbox__nav:hover { border-color: var(--gold); background: rgba(7,28,46,.9); }
.lightbox__close { top: clamp(12px, 3vw, 26px); inset-inline-end: clamp(12px, 3vw, 26px); width: 46px; height: 46px; border-radius: 50%; font-size: .9rem; }
.lightbox__nav { top: 50%; width: 52px; height: 52px; border-radius: 50%; font-size: 1.8rem; transform: translateY(-50%); }
/* Logical inset so the arrows swap sides under dir="rtl" along with the
   reading order the keyboard handler mirrors. */
.lightbox__nav--prev { inset-inline-start: clamp(8px, 2.5vw, 26px); }
.lightbox__nav--next { inset-inline-end: clamp(8px, 2.5vw, 26px); }
/* The glyphs are ‹ and › — literal left/right marks, so mirror them in RTL. */
[dir="rtl"] .lightbox__nav { transform: translateY(-50%) scaleX(-1); }

@media (max-width: 980px) {
  .gallery-intro { padding-top: 165px; }
  .gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .gallery__grid { grid-template-columns: 1fr; gap: 16px; }
  .gallery__filters { gap: 8px; }
  .gallery__filter { padding: 9px 14px; font-size: .68rem; }
  .lightbox__nav { width: 44px; height: 44px; font-size: 1.5rem; }
  /* Arrows would sit on top of the photo at this width; drop them below it. */
  .lightbox__nav { top: auto; bottom: 10px; transform: none; }
  [dir="rtl"] .lightbox__nav { transform: scaleX(-1); }
  .lightbox__image { max-height: 62vh; }
}

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1); }
.reveal--delay { transition-delay: .12s; }
.reveal--delay-2 { transition-delay: .22s; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 980px) {
  .site-menu { position: absolute; top: 82px; left: 0; width: 100%; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 16px 24px 26px; background: rgba(6,29,49,.98); }
  .site-menu.is-open { display: flex; }
  .site-menu > a:not(.button) { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
  .button--nav { margin: 18px 0 0; }
  .menu-toggle { display: block; }
  /* Narrower viewports don't need the 1920/3840 pair; the 1280 file at 2x
     covers a 640px-wide layout, which is above this breakpoint's widest phone. */
  .hero { min-height: 900px; background-image: url('../assets/hero-infinity-sunset-1280.webp'); background-image: image-set(url('../assets/hero-infinity-sunset-1280.webp') 1x, url('../assets/hero-infinity-sunset-2560.webp') 2x); }
  .hero__layout { grid-template-columns: 1fr; gap: 55px; align-items: center; padding-top: 190px; padding-bottom: 110px; }
  .trip-card { width: min(100%, 560px); }
  .proof__grid { grid-template-columns: repeat(3, 1fr); }
  .proof__intro h2 br { display: none; }
  .pathway-grid { grid-template-columns: 1fr 1fr; }
  .pathway--large { grid-column: span 2; }
  /* The yacht photo is portrait (0.83:1). Letting it span both columns at a fixed
     260px rendered it as a 3.4:1 sliver of a vertical image. Instead the VIP card
     and the photo take one column each and share a row, so the photo inherits the
     row's natural height and stays close to portrait. Rows then divide evenly:
     Leisure (2) / Corporate + Pilgrimage / VIP + photo. */
  .pathway--dark, .pathway--photo { grid-column: span 1; }
  .pathway--photo { min-height: 390px; height: auto; }
  .concierge__layout { grid-template-columns: 1fr; }
  .concierge__sticky, .planner__intro { position: static; }
  .portfolio__grid { grid-template-columns: 1fr; }
  .property-stack { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .purpose__band { height: 320px; }
  .purpose__group { flex-direction: column; align-items: flex-start; gap: 28px; }
  .pilgrimage { grid-template-columns: 1fr; }
  .pilgrimage__image { min-height: 520px; background-position: center; }
  .pilgrimage__content { max-width: none; padding: 80px max(24px, 7vw); }
  .planner__grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .shell { width: min(100% - 32px, 1180px); }
  .section { padding: 82px 0; }
  .topbar__inner > p { display: none; }
  .topbar__inner { justify-content: flex-end; }
  .nav-wrap { min-height: 70px; }
  .site-menu { top: 70px; }
  .brand__logo { height: 40px; }
  /* At ~430x820 the slot is 0.52:1, so `cover` scales to height and crops ~65%
     of the width. 68% keeps the sun and the infinity edge in frame; the old 58%
     was tuned for the previous stock photo's centred composition. */
  .hero { min-height: 820px; background-position: 68% center; }
  .hero::before { background: rgba(4,25,42,.68); }
  .hero__layout { padding-top: 165px; padding-bottom: 70px; }
  .hero h1 { font-size: clamp(3.5rem, 17vw, 5.2rem); }
  .hero__lead { font-size: 1rem; }
  .hero__actions { align-items: flex-start; flex-direction: column; gap: 22px; }
  .trip-card { display: block; width: 100%; padding: 28px 24px; }
  .proof__grid { grid-template-columns: 1fr 1fr; padding: 50px 0; }
  .proof__intro { grid-column: 1 / -1; margin-bottom: 18px; }
  .proof__stat { padding-inline-start: 16px; }
  .purpose__grid, .portfolio__upcoming { grid-template-columns: 1fr; }
  .purpose__card { padding: 34px 30px; }
  .purpose__band { height: 260px; }
  .purpose__group { padding: 30px; }
  .proof__stat:last-child { grid-column: 1 / -1; }
  .section-heading { grid-template-columns: 1fr; gap: 24px; margin-bottom: 44px; }
  .pathway-grid { grid-template-columns: 1fr; }
  .pathway--large { grid-column: auto; padding-inline-end: 30px; }
  .pathway { min-height: 350px; }
  .pathway--dark, .pathway--photo { grid-column: auto; }
  /* Single column: a fixed 240px made this 2.9:1. aspect-ratio keeps it a
     proportionate block at any phone width instead of a fixed letterbox. */
  .pathway--photo { min-height: 0; height: auto; aspect-ratio: 4 / 3; }
  .service-row { grid-template-columns: 34px 1fr 20px; }
  .property { min-height: 460px; }
  .property__content { padding: 28px; }
  .property-stack { grid-template-columns: 1fr; }
  .pilgrimage__image { min-height: 390px; }
  .pilgrimage__content { padding: 70px 24px; }
  .pilgrimage__content ul { grid-template-columns: 1fr; }
  .promise__grid { grid-template-columns: 1fr; gap: 48px; }
  .planner-form { grid-template-columns: 1fr; padding: 28px 22px; }
  .field--wide { grid-column: auto; }
  .form-action { align-items: flex-start; flex-direction: column; }
  .footer__top { align-items: flex-start; flex-direction: column; gap: 24px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__bottom { align-items: flex-start; flex-direction: column; gap: 14px; }
  .floating-cta { min-height: 46px; padding: 0 18px; font-size: .68rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   RTL / Arabic — applied when <html dir="rtl">
   Layout mirrors automatically via logical properties (inset-inline,
   padding-inline, border-inline) used above; this block covers the
   few things logical properties can't express.
   ============================================================ */

/* Swap the type family for an Arabic display + UI pairing. */
[dir="rtl"] {
  --serif: 'Amiri', 'Cormorant Garamond', Georgia, serif;
  --sans: 'Cairo', 'Manrope', 'Segoe UI', Arial, sans-serif;
}

/* Arabic is a cursive, connected script: letter-spacing breaks glyph joining
   and uppercase is meaningless — neutralise both on the display/label styles. */
[dir="rtl"] .eyebrow,
[dir="rtl"] .purpose__card .purpose__label,
[dir="rtl"] .purpose__industries li,
[dir="rtl"] .property-upcoming p,
[dir="rtl"] .property-upcoming .property-upcoming__badge,
[dir="rtl"] .topbar__inner,
[dir="rtl"] .button,
[dir="rtl"] .text-link,
[dir="rtl"] .site-menu > a:not(.button),
[dir="rtl"] .trip-card__overline,
[dir="rtl"] .trip-card > a,
[dir="rtl"] .pathway__number,
[dir="rtl"] .pathway__label,
[dir="rtl"] .pathway a,
[dir="rtl"] .property__content p,
[dir="rtl"] .property-note p,
[dir="rtl"] .property__content a,
[dir="rtl"] .field label,
[dir="rtl"] .planner__contact span,
[dir="rtl"] .footer__grid h2,
[dir="rtl"] .gallery__filter,
[dir="rtl"] .gallery-group__location,
[dir="rtl"] .lightbox__group,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 {
  letter-spacing: normal;
  text-transform: none;
}

/* The Latin display line-heights (h1 .92, h2 1.02) are tighter than the font
   size itself. Cormorant tolerates that; Amiri does not — its ascenders,
   descenders and diacritics sit well outside the em box, so lines collide with
   each other and the first line rides up into the eyebrow. These rules sit at
   the end of the file so they beat the per-section overrides, which share the
   same (0,1,1) specificity. */
[dir="rtl"] h1 { line-height: 1.18; }
[dir="rtl"] h2 { line-height: 1.28; }
[dir="rtl"] h3 { line-height: 1.4; }
[dir="rtl"] .eyebrow { margin-bottom: 22px; }
/* The hero h1 is ~89px, so its ascenders reach further than the shared bump clears. */
[dir="rtl"] .hero .eyebrow { margin-bottom: 32px; }

/* Mirror the horizontal hero gradient so the dark, readable side stays under the copy. */
[dir="rtl"] .hero::before {
  background: linear-gradient(270deg, rgba(4,25,42,.88) 0%, rgba(4,25,42,.58) 49%, rgba(4,25,42,.12) 100%);
}

/* Mirror the pilgrimage image edge-fade to the opposite side. */
[dir="rtl"] .pilgrimage__image {
  background: linear-gradient(270deg, transparent 72%, rgba(9,42,70,.8)), url('../assets/umrah.jpg') center / cover no-repeat;
}

/* Flip directional arrow motion. */
[dir="rtl"] .text-link:hover span { transform: translateX(-4px); }
[dir="rtl"] .service-row:hover b { transform: translate(-3px, -3px); }

/* inset-inline-start, not left. Under dir="rtl" a physical left: -9999px puts the
   field 10,000px *after* the scroll origin, so every Arabic page reported an
   11,232px scrollWidth — invisible only because body has overflow-x: hidden.
   The logical property parks it off the unreachable edge in both directions. */
.planner-form__honeypot {
  position: absolute;
  inset-inline-start: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}