/* ══════════════════════════════════════════════════════════════
   Leen Couples Retreat
   Cairo throughout — the brand's own type, as used on its social posts.
   Display = 600/700, body = 300/400.
   Teal is the water, sand and paper are the shore; the two meet along
   wide elliptical tide-curves instead of straight seams.
   One recurring form — the arch — carries every photograph.
   Gold marks the meeting points, and is never text on a light ground.
   ══════════════════════════════════════════════════════════════ */

:root{
  color-scheme: light only;

  --teal-deep:#023436;
  --teal:#045457;
  --teal-soft:#0A6164;
  --sand:#D9C3A5;
  --paper:#F5EADB;
  --cream:#EFE2CE;
  --gold:#C4935F;        /* rules & marks on light — never text */
  --gold-light:#D9AE7C;  /* safe as text on teal-deep (6.4:1) */
  --ink:#1E2A28;
  --ink-soft:#55635F;
  --on-dark:#EFE2CE;
  --on-dark-soft:#B9C7C3;
  --on-sand-soft:#6B5A44;

  --line-dark:rgba(30,42,40,.16);
  --line-light:rgba(239,226,206,.22);
  --line-gold:rgba(196,147,95,.45);

  --wrap:1180px;
  --gutter:clamp(20px,5vw,64px);
  --pad:clamp(72px,9.5vw,136px);

  --r-pill:999px;
  --r-frame:30px;
  --r-field:14px;
  /* the arch: a dome on top, a quiet radius underneath */
  --r-arch:50% 50% var(--r-frame) var(--r-frame) / 40% 40% var(--r-frame) var(--r-frame);

  --ui:"Cairo",system-ui,"Segoe UI",sans-serif;
  --display:"Cairo",system-ui,"Segoe UI",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--ui);
  font-weight:300;
  font-size:clamp(1.0625rem,.98rem + .36vw,1.1875rem);
  line-height:1.9;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{display:block;max-width:100%;height:auto}
a{color:inherit}
button,input,textarea{font:inherit;color:inherit}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

.skip{
  position:fixed;inset-block-start:-100px;inset-inline-start:var(--gutter);
  z-index:100;background:var(--cream);color:var(--teal-deep);
  padding:.75rem 1.25rem;border-radius:var(--r-pill);font-size:.9rem;
  text-decoration:none;transition:inset-block-start .2s;
}
.skip:focus{inset-block-start:12px}

/* ── layout primitives ───────────────────────────────────────── */

.wrap{width:min(var(--wrap),100% - 2*var(--gutter));margin-inline:auto}
/* narrow columns hang off the same inline-start edge as everything else,
   so the page keeps one spine instead of drifting between centred and aligned */
.wrap--narrow{max-width:min(720px,100%);margin-inline-end:auto}
.wrap--centre{margin-inline:auto}

.section{padding-block:var(--pad);position:relative}
.section--flush{padding-block-end:0}
.section--cont{padding-block-start:clamp(3.5rem,7vw,6rem)}  /* continues the band above it */
.section--paper{background:var(--paper)}
.section--sand{background:var(--sand)}
.section--deep{background:var(--teal-deep);color:var(--on-dark)}

/* ── the tide line: every change of ground is a curve ────────── */

.curve{
  --curve:clamp(2.25rem,6vw,6rem);
  z-index:1;
  margin-block-start:calc(-1 * var(--curve));
  padding-block-start:calc(var(--pad) + var(--curve) * .45);
  border-start-start-radius:50% var(--curve);
  border-start-end-radius:50% var(--curve);
}
/* an asymmetric swoop, for variety between the symmetric ones */
.curve--sweep{
  border-start-start-radius:100% var(--curve);
  border-start-end-radius:0;
}
.curve--sweep-rev{
  border-start-start-radius:0;
  border-start-end-radius:100% var(--curve);
}

/* ── type scale ──────────────────────────────────────────────── */

.h2{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.65rem,1.15rem + 2.1vw,2.9rem);
  line-height:1.45;
  margin:0 0 1.5rem;
  max-width:22ch;
  letter-spacing:-.012em;
  text-wrap:balance;
}
.h2--wide{max-width:30ch}
.h2--lead{margin-block-end:clamp(2.5rem,5vw,4rem)}
.h2--on-dark{color:var(--on-dark)}

.h3{
  font-family:var(--display);font-weight:600;
  font-size:1.2rem;line-height:1.6;margin:0 0 1.25rem;
  color:var(--teal);
}
/* a sub-heading that opens a second movement inside one section */
.h3--sub{
  margin-block-start:clamp(2.5rem,5vw,3.5rem);
  padding-block-start:clamp(2rem,4vw,2.5rem);
  border-block-start:1px solid var(--line-dark);
  font-size:1.3rem;
}

/* one line under a section heading, between display and body size. English
   carries these; Arabic leaves them empty, and an empty slot is hidden —
   which is why the heading's own lead margin only collapses when the line
   is actually there. */
.subline{
  margin:0 0 clamp(2.5rem,5vw,4rem);
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.1rem,1rem + .55vw,1.35rem);
  line-height:1.7;color:var(--teal);max-width:46ch;
}
.subline--sand{color:#4A3E2E}
.h2--lead:has(+ .subline:not([hidden])){margin-block-end:.9rem}

.rule{
  display:block;inline-size:3.25rem;block-size:1px;
  background:var(--gold);border:0;margin:0 0 1.75rem;
}
.rule--on-dark{background:var(--gold-light);opacity:.75}
.rule--centre{margin-inline:auto}

.lede{
  font-size:clamp(1.0625rem,1rem + .35vw,1.2rem);
  line-height:1.95;margin:0;max-width:58ch;color:var(--ink-soft);
}
.lede--next{margin-block-start:1.25rem}
.note{font-size:.9375rem;line-height:1.85;color:var(--ink-soft);margin:1.5rem 0 0;max-width:58ch}
.note--spaced{margin-block-start:clamp(2rem,4vw,2.75rem)}

/* ── buttons ─────────────────────────────────────────────────── */

.btn{
  display:inline-flex;align-items:center;gap:.9rem;
  /* the arrow sits at the inline start and the label runs to the inline end,
     so the breathing room is logical — it has to follow the direction */
  padding:.5rem;padding-inline-end:1.9rem;
  border:0;border-radius:var(--r-pill);
  background:var(--cream);color:var(--teal-deep);
  font-family:var(--ui);font-size:1rem;font-weight:500;line-height:1;
  text-decoration:none;cursor:pointer;
  transition:background .25s,color .25s;
}
.btn:hover{background:#fff}
.btn__arrow{
  flex:none;display:grid;place-items:center;
  inline-size:2.75rem;block-size:2.75rem;border-radius:50%;
  background:var(--teal);color:var(--cream);
}
.btn__arrow svg{inline-size:1.1rem;block-size:1.1rem}
[dir="ltr"] .btn__arrow svg{transform:scaleX(-1)}

.btn--sm{padding:.3rem;padding-inline-end:1.25rem;font-size:.9375rem;background:transparent;color:var(--on-dark);border:1px solid var(--line-light)}
.btn--sm:hover{background:var(--cream);color:var(--teal-deep)}

.btn--light{background:var(--cream);color:var(--teal-deep);padding:1rem 2.25rem}
.btn--ghost{background:transparent;color:var(--on-dark);border:1px solid var(--line-light);padding:1rem 2.25rem}
.btn--ghost:hover{background:rgba(239,226,206,.1)}
/* on a light ground the pill inverts: teal body, cream arrow */
.btn--solid{background:var(--teal);color:var(--cream)}
.btn--solid:hover{background:var(--teal-deep)}
.btn--solid .btn__arrow{background:var(--cream);color:var(--teal)}
.btn[disabled]{opacity:.55;cursor:progress}

/* ── header ──────────────────────────────────────────────────── */

.site-head{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:50;
  transition:background .3s,box-shadow .3s;
}
.site-head__in{
  width:min(var(--wrap),100% - 2*var(--gutter));margin-inline:auto;
  display:flex;align-items:center;gap:1.5rem;
  padding-block:.9rem;
}
.site-head__brand{flex:none;display:flex;align-items:center;text-decoration:none}
/* the full centre lockup: the mark and the name are one image, so the name is
   never set in a second typeface beside it. Cream over the hero, teal once the
   bar sticks over cream. */
.site-head__logo{inline-size:auto;block-size:44px}
.site-head__logo--dark{display:none}

.site-nav{display:none;gap:2rem;margin-inline-start:auto;font-size:.9375rem}
.site-nav a{color:var(--on-dark-soft);text-decoration:none;transition:color .2s}
.site-nav a:hover{color:var(--on-dark)}

.site-head__end{display:flex;align-items:center;gap:.75rem;margin-inline-start:auto}
.site-head__end .btn--sm{display:none}

/* the AR | EN switch: the first thing in the header after the mark, so a
   non-Arabic reader finds it without hunting. It names the language it
   switches *to*. */
.lang{
  background:transparent;border:1px solid var(--line-light);color:var(--on-dark);
  border-radius:var(--r-pill);padding:.45rem 1rem;font-size:.8125rem;cursor:pointer;
  font-weight:500;line-height:1;letter-spacing:.06em;
  min-block-size:2.2rem;min-inline-size:3.4rem;text-align:center;
  transition:background .25s,color .25s,border-color .25s;
}
/* letter-spacing severs the joins in Arabic script, and the label is Arabic
   exactly when the page is in English */
[lang="en"] .lang{letter-spacing:0}
.lang:hover{background:var(--cream);color:var(--teal-deep);border-color:var(--cream)}

.site-head.is-stuck{background:var(--cream);box-shadow:0 1px 0 var(--line-dark)}
.site-head.is-stuck .site-head__logo--light{display:none}
.site-head.is-stuck .site-head__logo--dark{display:block}
.site-head.is-stuck .site-nav a{color:var(--ink-soft)}
.site-head.is-stuck .site-nav a:hover{color:var(--teal)}
.site-head.is-stuck .lang{border-color:var(--line-dark);color:var(--ink)}
.site-head.is-stuck .lang:hover{background:var(--teal);color:var(--cream);border-color:var(--teal)}
.site-head.is-stuck .btn--sm{border-color:var(--line-dark);color:var(--teal)}
.site-head.is-stuck .btn--sm:hover{background:var(--teal);color:var(--cream)}

@media (min-width:56rem){
  .site-nav{display:flex}
  .site-head__end{margin-inline-start:0}
  .site-head__end .btn--sm{display:inline-flex}
  .site-head__logo{block-size:50px}
}

/* ── hero ────────────────────────────────────────────────────── */

.hero{
  position:relative;overflow:clip;  /* contains the entrance transforms */
  color:var(--on-dark);
  background:
    radial-gradient(118% 85% at 78% 4%, rgba(10,97,100,.85), rgba(2,52,54,0) 62%),
    var(--teal-deep);
  padding-block:clamp(6.75rem,13vh,9.25rem) clamp(5.5rem,10vw,8rem);
}
.hero__in{
  width:min(var(--wrap),100% - 2*var(--gutter));margin-inline:auto;
  display:grid;gap:0;
  grid-template-areas:"mark" "head" "fig" "body";
}

.lockup{grid-area:mark;margin-block-end:clamp(1.75rem,4vw,2.75rem)}
.lockup__mark{inline-size:clamp(142px,18vw,212px);block-size:auto}
.lockup__sub{
  display:block;margin-block-start:.5rem;
  font-size:clamp(.6rem,.8vw,.72rem);letter-spacing:.62em;
  color:var(--on-dark-soft);text-transform:uppercase;
  font-family:var(--ui);font-weight:300;
}

.hero__h{
  grid-area:head;
  font-family:var(--display);
  font-size:clamp(1.85rem,1rem + 3.4vw,3.55rem);
  line-height:1.33;font-weight:700;letter-spacing:-.022em;margin:0;
}
/* balance belongs on each clause: they are separate blocks, so balancing the
   h1 does not reach the lines inside it and the opening clause broke ragged */
.hero__line{display:block;text-wrap:balance}
/* the opening clause carries the weight; the concession answers it a step in
   and two-thirds the size, so the two read as one sentence with a pause
   rather than as two stacked headlines */
.hero__line--a{max-width:16em}
.hero__line--b{
  margin-block-start:.42em;
  margin-inline-start:clamp(1.25rem,4vw,3.25rem);
  font-size:.66em;font-weight:400;line-height:1.45;letter-spacing:-.006em;
}

.hero__body{grid-area:body}
.hero__p{
  margin:clamp(1.5rem,3vw,2.25rem) 0 0;max-width:50ch;
  color:var(--on-dark-soft);font-size:1.0625rem;line-height:1.95;
}

.hero__meta{
  display:flex;align-items:center;flex-wrap:wrap;gap:1rem;
  margin:1.75rem 0 2.1rem;
  font-size:.9375rem;color:var(--on-dark);
}
.hero__meta-rule{display:none}
@media (min-width:34rem){
  .hero__meta-rule{display:block;inline-size:1px;block-size:1.1rem;background:var(--gold);opacity:.6}
}

.hero__note{margin:1.25rem 0 0;font-size:.875rem;color:var(--on-dark-soft);max-width:44ch}

/* the photograph, in the arch that recurs through the page */
.hero__fig{
  grid-area:fig;position:relative;margin:clamp(2.75rem,6vw,3.5rem) 0 .5rem;
  align-self:center;
}
.hero__arch{
  position:relative;display:block;
  aspect-ratio:1/1;border-radius:var(--r-arch);overflow:hidden;
  background:var(--teal);
}
.hero__arch img{inline-size:100%;block-size:100%;object-fit:cover}
/* settles the photograph into the teal band and keeps the lower edge quiet */
.hero__arch::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to top,rgba(2,52,54,.72),rgba(2,52,54,.06) 46%,rgba(2,52,54,.18)),
    linear-gradient(to bottom,rgba(217,195,165,.10),rgba(217,195,165,0) 40%);
}
/* a second arch, in gold hairline, offset behind the first */
.hero__fig::before{
  content:"";position:absolute;z-index:-1;
  --off:clamp(.7rem,1.6vw,1.35rem);
  inset-block:var(--off) calc(-1 * var(--off));
  inset-inline:calc(-1 * var(--off)) var(--off);
  border:1px solid var(--gold);opacity:.45;
  border-radius:var(--r-arch);
}

/* on a phone the arch has to finish inside the first screen: the floating bar
   owns the foot of the viewport, and a full-width square was sliding under it
   on short viewports. svh is the shrunken state — the one on first load — and
   27rem is what sits above and below the photograph (lockup, headline, bar).
   On a tall phone the subtraction clears 100%, so nothing changes there. */
@media (max-width:39.99rem){
  /* the opening pad and the gap above the photograph follow the viewport, so a
     short phone gives the arch the room it needs instead of the fold */
  .hero{padding-block-start:clamp(5rem,11vh,9.25rem)}
  .hero__fig{
    margin-block-start:clamp(1.75rem,4vh,3.5rem);
    inline-size:min(100%,21rem);                    /* fallback: no svh */
    /* the floor was 13rem, which is more than 320×600 has left once the
       headline and the bar have taken theirs — it clipped by 14px there */
    inline-size:clamp(11.5rem,100svh - 27rem,100%);
    margin-inline:auto;
  }

  /* English answers the headline with a whole sentence instead of a
     three-word concession, so the headline block is twice as tall (220px
     against 115px at 390px wide) and no subtraction leaves the arch room
     above the bar — at 320×600 there are 52px left. So on a phone the
     English hero leads with the photograph and the words follow it: the
     couple stays whole and above the fold, and the headline is the next
     thing in view. The convergence still plays on the two clauses. */
  [lang="en"] .hero__in{grid-template-areas:"mark" "fig" "head" "body"}
  [lang="en"] .hero__fig{
    margin-block:clamp(1rem,2.5vh,2rem) clamp(2rem,4vh,2.75rem);
    /* 1.75rem of slack keeps the offset gold arch inside the gutter */
    inline-size:calc(100% - 1.75rem);
  }
  [lang="en"] .hero__p{margin-block-start:clamp(1.25rem,2.5vh,1.75rem)}
}

/* between phone and the split, a full-width square would swallow the fold —
   cap it and let it hang off the inline-end edge instead */
@media (min-width:40rem) and (max-width:69.99rem){
  .hero__fig{max-inline-size:min(24rem,62%);margin-inline-start:auto}
}

/* the split waits until each column can hold the headline in two lines;
   at 62rem it broke the opening clause into three */
@media (min-width:70rem){
  .hero__in{
    grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);
    grid-template-areas:
      "mark fig"
      "head fig"
      "body fig";
    column-gap:clamp(2.5rem,5vw,5rem);
    align-content:center;
  }
  .hero__fig{margin:0;align-self:center}
  .hero__h{max-width:none}
  .hero__line{max-width:none}
}

/* one orchestrated moment: the two lines close the distance, once */
@media (prefers-reduced-motion:no-preference){
  .hero__line--a{animation:closeA 1s cubic-bezier(.22,.61,.36,1) 80ms both}
  .hero__line--b{animation:closeB 1s cubic-bezier(.22,.61,.36,1) 260ms both}
  .lockup,.hero__body,.hero__fig{animation:rise .9s ease-out 120ms both}
  @keyframes closeA{from{opacity:0;transform:translateX(1.6rem)}to{opacity:1;transform:none}}
  @keyframes closeB{from{opacity:0;transform:translateX(-1.6rem)}to{opacity:1;transform:none}}
  @keyframes rise{from{opacity:0}to{opacity:1}}
}

/* ── the drift: the question the page opens on ───────────────── */

.drift__h{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.5rem,1.05rem + 2vw,2.6rem);
  line-height:1.5;letter-spacing:-.012em;
  margin:0 0 clamp(2rem,4vw,3rem);max-width:19ch;color:var(--teal-deep);
  text-wrap:balance;
}
.drift__body{display:grid;gap:1.5rem}
@media (min-width:52rem){
  .drift__body{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(2.5rem,5vw,4.5rem)}
  .drift__body .lede--next{margin-block-start:0}
}

/* ── split: a heading column beside its content ──────────────── */

.split{display:grid;gap:clamp(2.5rem,5vw,4rem)}
@media (min-width:58rem){
  .split{grid-template-columns:minmax(0,23rem) minmax(0,1fr);column-gap:clamp(2.5rem,5vw,5rem)}
  .split__head{position:sticky;inset-block-start:clamp(6rem,12vh,8rem);align-self:start}
}
/* a heading in a column this narrow needs a step down, or it shatters
   into five two-word lines */
.split__head .h2{
  margin-block-end:0;max-width:none;
  font-size:clamp(1.55rem,1.15rem + 1.4vw,2.2rem);
}
.split__body{min-inline-size:0}

/* ── attribute cards ─────────────────────────────────────────────
   Cream panels on the paper ground. Below 52rem they become a
   swipe track: one card plus a peek of the next, scroll-snapped,
   bled out to the viewport edge so the peek reads as "more". */

.feats{margin:0;display:grid;gap:1rem}
.feat{
  display:flex;flex-direction:column;gap:.7rem;
  padding:clamp(1.5rem,2.5vw,2rem);
  background:var(--cream);
  border:1px solid var(--line-dark);
  border-radius:var(--r-frame);
}
.feats dt{
  font-family:var(--display);font-weight:600;font-size:1.0625rem;line-height:1.7;
  color:var(--teal-deep);position:relative;padding-inline-start:1.5rem;
}
.feats dt::before{
  content:"";position:absolute;inset-inline-start:0;inset-block-start:.78em;
  inline-size:8px;block-size:8px;background:var(--gold);transform:rotate(45deg);
}
.feats dd{margin:0;color:var(--ink-soft);font-size:1rem;line-height:1.95}
/* an empty slot in the other language hides its dt/dd, which would otherwise
   leave a blank panel standing — hide the card with them (EN has no about.5) */
.feat:has(> dt[hidden]){display:none}

/* the swipe track */
@media (max-width:51.999rem){
  .feats{
    display:flex;gap:1rem;
    margin-inline:calc(var(--gutter) * -1);
    padding-inline:var(--gutter);
    padding-block-end:.25rem;
    overflow-x:auto;overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    scroll-padding-inline-start:var(--gutter);
    scrollbar-width:none;
  }
  .feats::-webkit-scrollbar{display:none}
  .feat{flex:0 0 min(80%,19rem);scroll-snap-align:start}
}

@media (min-width:52rem){
  .feats{grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:1.25rem}
  /* an odd last card would sit alone beside a gap — let it run the width
     (Arabic has five; English's fifth is empty, so nothing matches there) */
  .feat:last-child:nth-child(odd){grid-column:1/-1}
}

/* ── claim band ──────────────────────────────────────────────── */

.claim{text-align:center}
.claim__t{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.45rem,1.05rem + 1.85vw,2.5rem);
  line-height:1.55;letter-spacing:-.012em;margin:0;color:var(--teal-deep);
  max-width:24ch;margin-inline:auto;
  text-wrap:balance;
}
.claim__d{
  margin:1.5rem auto 0;max-width:48ch;
  font-size:1.0625rem;line-height:1.9;color:var(--on-sand-soft);
}

/* ── is this for you (continues the sand band) ───────────────── */

.fit .lede{color:var(--on-sand-soft);margin-block-end:clamp(1.75rem,3.5vw,2.25rem)}
/* the one line worth slowing down for — the gold hairline marks it, the same
   device the form's intro uses */
.fit__note{
  margin:clamp(2rem,4vw,2.75rem) 0 0;max-width:52ch;
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.1rem,1rem + .7vw,1.45rem);line-height:1.65;
  color:var(--teal-deep);
  padding-inline-start:1.25rem;border-inline-start:1px solid var(--gold);
}

/* ── therapists ──────────────────────────────────────────────── */

.people{list-style:none;margin:0;padding:0;display:grid;gap:clamp(3rem,6vw,4rem)}
@media (min-width:46rem){.people{grid-template-columns:repeat(3,1fr)}}
/* the row is staggered, so three portraits never read as three identical cards */
@media (min-width:62rem){
  .person:nth-child(2){margin-block-start:clamp(2rem,4.5vw,4.5rem)}
  .person:nth-child(3){margin-block-start:clamp(1rem,2.2vw,2.25rem)}
}

.person__frame{
  position:relative;
  border-radius:var(--r-arch);overflow:hidden;
  background:var(--teal);aspect-ratio:4/5;
  margin-block-end:1.5rem;
}
.person__frame img{inline-size:100%;block-size:100%;object-fit:cover}
/* settles three different backdrops into the one dark section */
.person__frame::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(2,52,54,.40),rgba(2,52,54,0) 58%);
}
.person__n{
  font-family:var(--display);font-weight:700;font-size:clamp(1.3rem,1.15rem + .5vw,1.5rem);
  line-height:1.5;margin:0 0 .4rem;color:var(--on-dark);
}
.person__r{margin:0 0 1rem;font-size:.875rem;line-height:1.75;color:var(--gold-light)}
.person__b{margin:0;font-size:.9375rem;line-height:1.9;color:var(--on-dark-soft)}

/* ── details / disclosures ───────────────────────────────────── */

.more{margin-block-start:1rem}
.more summary{
  cursor:pointer;font-size:.875rem;color:var(--gold-light);
  list-style:none;display:inline-flex;align-items:center;gap:.5rem;
}
.more summary::-webkit-details-marker{display:none}
.more summary::after{content:"+";font-size:1rem;line-height:1}
.more[open] summary::after{content:"–"}
.more p{margin:1rem 0 0;font-size:.9375rem;line-height:1.95;color:var(--on-dark-soft)}

.more--block{
  margin-block-start:2.25rem;border-block-start:1px solid var(--line-dark);padding-block-start:1.75rem;
}
/* the tier list already closes on a hairline — one rule, not two */
.tiers + .more--block{border-block-start:0;margin-block-start:1.5rem;padding-block-start:0}
.more--block summary{color:var(--teal);font-size:1rem}
.more--block .plain{margin:1.25rem 0 0;padding:0;list-style:none}
.more--block .plain li{
  position:relative;padding-inline-start:1.25rem;
  font-size:.9375rem;line-height:1.95;color:var(--ink-soft);
}
.more--block .plain li::before{
  content:"";position:absolute;inset-inline-start:0;inset-block-start:.95em;
  inline-size:5px;block-size:1px;background:var(--gold);
}
.more--block .plain__intro{margin:1.25rem 0 0;font-size:.9375rem;line-height:1.9;color:var(--ink-soft)}
.more--block .plain__intro:not([hidden]) + .plain{margin-block-start:.5rem}

/* ── the two days ────────────────────────────────────────────── */

.days{display:grid;gap:clamp(2rem,4vw,3rem)}
@media (min-width:46rem){
  .days{grid-template-columns:1fr 1fr;column-gap:clamp(3rem,6vw,5.5rem)}
  .day + .day{
    border-inline-start:1px solid var(--line-dark);
    padding-inline-start:clamp(3rem,6vw,5.5rem);
    margin-inline-start:calc(-1 * clamp(3rem,6vw,5.5rem) / 2);
  }
}
.day__k{
  font-size:.9375rem;line-height:1.7;letter-spacing:.02em;
  margin:0 0 .6rem;color:var(--teal);font-weight:500;
}
.day__t{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.5rem,1.15rem + 1.5vw,2.25rem);
  line-height:1.4;letter-spacing:-.015em;
  margin:0 0 1rem;color:var(--teal-deep);
}
.day__d{margin:0;font-size:1rem;line-height:1.9;color:var(--ink-soft);max-width:34ch}

/* where it happens — a hairline strip between the days and the cream shelf */
.venue{
  margin-block-start:clamp(3rem,6vw,4.5rem);
  padding-block-start:clamp(2rem,4vw,2.75rem);
  border-block-start:1px solid var(--line-dark);
}
.venue__n{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.0625rem,1rem + .5vw,1.3rem);line-height:1.6;
  margin:0;color:var(--teal-deep);
}
.venue .note{margin-block-start:1rem}

/* what the price covers — a cream shelf under the arch */
.incl{
  margin-block-start:clamp(3.5rem,6vw,5rem);
  background:var(--cream);
  border-radius:clamp(2.5rem,7vw,5.5rem) clamp(2.5rem,7vw,5.5rem) var(--r-frame) var(--r-frame);
  padding:clamp(2.25rem,5vw,3.5rem) clamp(1.75rem,4.5vw,4rem) clamp(2.25rem,5vw,3.25rem);
}
.ticks{margin:0;padding:0;list-style:none;display:grid;gap:.85rem}
@media (min-width:46rem){.ticks{grid-template-columns:1fr 1fr;column-gap:clamp(2rem,4vw,3.5rem)}}
.ticks li{position:relative;padding-inline-start:1.75rem;font-size:1rem;line-height:1.8}
.ticks li::before{
  content:"";position:absolute;inset-inline-start:0;inset-block-start:.78em;
  inline-size:10px;block-size:1px;background:var(--gold);
}
.ticks--roomy{gap:1.15rem}
.ticks--roomy li{max-width:46ch}

/* ── pricing ─────────────────────────────────────────────────── */

.pricing__in{display:flex;flex-wrap:wrap;gap:clamp(2.5rem,5vw,4.5rem)}
.pricing__tiers{flex:1 1 20rem;min-inline-size:0}

/* the one figure that should be impossible to miss */
.offer{
  flex:1 1 20rem;min-inline-size:0;align-self:start;
  background:var(--teal-deep);color:var(--on-dark);
  border-radius:clamp(2.5rem,7vw,5rem) clamp(2.5rem,7vw,5rem) var(--r-frame) var(--r-frame);
  padding:clamp(2.25rem,5vw,3.25rem);
  display:grid;gap:.4rem;
}
.offer__k{margin:0;font-size:.9375rem;color:var(--gold-light)}
.offer__v{margin:.35rem 0 0;display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap}
/* the price it replaces, struck in gold so the saving reads at a glance */
.offer__was{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.3rem,1rem + 1.1vw,1.75rem);
  line-height:1.2;color:var(--on-dark-soft);
  text-decoration:line-through;
  text-decoration-color:var(--gold-light);
  text-decoration-thickness:2px;
}
.offer__num{
  font-family:var(--display);font-weight:700;
  font-size:clamp(2.6rem,1.8rem + 3.4vw,4.1rem);
  line-height:1.2;letter-spacing:-.03em;color:var(--on-dark);
}
.offer__cur{font-size:1rem;color:var(--on-dark-soft)}
.offer__d{margin:.75rem 0 0;font-size:.9375rem;line-height:1.8;color:var(--on-dark-soft)}
.offer .btn{margin-block-start:1.75rem;justify-self:start}

.tiers{list-style:none;margin:0;padding:0}
.tier{
  display:grid;gap:.3rem 2rem;align-items:baseline;
  padding-block:1.4rem;border-block-start:1px solid var(--line-dark);
}
.tier:first-child{border-block-start:0;padding-block-start:0}
.tier:last-child{border-block-end:1px solid var(--line-dark)}
.tier__k{font-size:1rem;font-weight:500;color:var(--teal-deep)}
.tier__v{font-family:var(--display);font-weight:600;font-size:1.0625rem;color:var(--ink-soft)}
.tier__n{font-size:.875rem;line-height:1.8;color:var(--ink-soft);opacity:.85;grid-column:1/-1;max-width:64ch}

@media (min-width:34rem){
  .tier{grid-template-columns:minmax(0,1fr) auto}
}

/* ── steps (a real sequence, so it is numbered) ──────────────── */

.steps{
  list-style:none;margin:0;padding:0;counter-reset:s;
  display:grid;gap:clamp(1.75rem,3.5vw,2.25rem);
}
.steps li{
  counter-increment:s;position:relative;
  padding-inline-start:3.25rem;max-width:52ch;
  font-size:1.0625rem;line-height:1.9;color:#4A3E2E;
}
.steps li::before{
  content:counter(s);position:absolute;inset-inline-start:0;inset-block-start:.15em;
  inline-size:2.25rem;block-size:2.25rem;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid rgba(30,42,40,.3);background:var(--sand);
  font-family:var(--display);font-weight:600;font-size:.95rem;line-height:1;color:var(--teal-deep);
}
/* the English copy titles each step; the Arabic does not, and an empty
   title is hidden, so the body closes the gap on its own */
.step__t{
  display:block;margin-block-end:.4rem;
  font-family:var(--display);font-weight:600;
  font-size:1.0625rem;line-height:1.6;color:var(--teal-deep);
}
.steps__note{
  margin:clamp(2.5rem,5vw,3.5rem) 0 0;max-width:64ch;
  padding-block-start:1.5rem;border-block-start:1px solid rgba(30,42,40,.2);
  font-size:.9375rem;line-height:1.85;color:#4A3E2E;
}

@media (min-width:58rem){
  /* the three read across, with the hairline that joins them */
  .steps{grid-template-columns:repeat(3,1fr);column-gap:clamp(2rem,4vw,3.5rem)}
  .steps li{padding-inline-start:0;padding-block-start:3.75rem;max-width:34ch;font-size:1rem}
  .steps li::before{inset-block-start:0}
  .steps li:not(:last-child)::after{
    content:"";position:absolute;inset-block-start:1.125rem;
    inset-inline-start:2.75rem;inline-size:calc(100% - 2.75rem + clamp(2rem,4vw,3.5rem));
    block-size:1px;background:var(--gold);opacity:.45;
  }
}

/* ── form ────────────────────────────────────────────────────── */

.form__layout{display:grid;gap:clamp(2.5rem,5vw,4rem)}
@media (min-width:62rem){
  .form__layout{grid-template-columns:minmax(0,20rem) minmax(0,1fr);column-gap:clamp(3rem,6vw,6rem)}
  .form__aside{position:sticky;inset-block-start:clamp(6rem,12vh,8rem);align-self:start}
}
.form__lede{margin:0;color:var(--on-dark-soft);font-size:1rem;line-height:1.95;max-width:50ch}
/* the privacy note, under its own hairline beside the fields */
.priv{
  margin-block-start:2rem;padding-block-start:1.75rem;
  border-block-start:1px solid var(--line-light);
}
.priv__h{
  margin:0 0 .7rem;font-family:var(--display);font-weight:600;
  font-size:.9375rem;line-height:1.6;color:var(--gold-light);
}
.form__priv{margin:0;font-size:.8125rem;line-height:1.9;color:var(--on-dark-soft)}
.form__priv--next{margin-block-start:.85rem}

.step{border:0;padding:0;margin:0}
.step__h{
  font-family:var(--display);font-weight:700;font-size:1.25rem;line-height:1.6;
  padding:0;margin:0 0 1.5rem;color:var(--on-dark);
}
.step__intro{
  margin:0 0 2rem;font-size:.9375rem;line-height:1.95;color:var(--on-dark-soft);
  border-inline-start:1px solid var(--gold);padding-inline-start:1.25rem;
}

/* two columns on desktop keeps eight fields from reading as a wall.
   the grid lives on an inner div — a <legend> does not lay out reliably
   as a grid item. */
.grid2{display:grid;gap:0 1.5rem}
@media (min-width:46rem){
  .grid2{grid-template-columns:1fr 1fr}
  .field--wide{grid-column:1/-1}
}

.field{display:grid;gap:.5rem;margin:0 0 1.5rem;align-content:start}
.field label{font-size:.9375rem;color:var(--on-dark)}
.opt{font-size:.8125rem;color:var(--on-dark-soft)}

.field input,.field textarea{
  background:rgba(239,226,206,.07);
  border:1px solid var(--line-light);
  border-radius:var(--r-field);
  padding:.95rem 1.1rem;
  color:var(--on-dark);
  font-size:1rem;font-weight:300;
  transition:border-color .2s,background .2s;
}
.field textarea{resize:vertical;line-height:1.8}
.field input::placeholder,.field textarea::placeholder{color:rgba(185,199,195,.6)}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--gold-light);background:rgba(239,226,206,.12);
}
.field.is-bad input,.field.is-bad textarea{border-color:#E8A08A}

.err{font-size:.8125rem;color:#E8A08A;min-block-size:0}
.err:empty{display:none}

.hp{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* names the two figures for screen readers, where a strikethrough alone
   leaves "37,000 35,000" ambiguous */
.vh{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.form__nav{display:flex;flex-wrap:wrap;gap:1rem;margin-block-start:2.5rem}

/* ── faq ─────────────────────────────────────────────────────── */

.qa{border-block-start:1px solid var(--line-dark)}
.qa:first-of-type{border-block-start:0}
.qa:last-of-type{border-block-end:1px solid var(--line-dark)}
.qa summary{
  cursor:pointer;list-style:none;
  padding-block:1.4rem;padding-inline-end:2rem;
  font-family:var(--display);font-weight:500;
  font-size:1.0625rem;line-height:1.7;position:relative;color:var(--teal-deep);
}
.qa summary::-webkit-details-marker{display:none}
/* physical borders on purpose: the chevron must point down in both
   directions, and border-inline-end flips it to a sideways caret in RTL */
.qa summary::after{
  content:"";position:absolute;inset-inline-end:.4rem;inset-block-start:1.9rem;
  inline-size:10px;block-size:10px;
  border-right:1px solid var(--teal);border-bottom:1px solid var(--teal);
  transform:rotate(45deg);transition:transform .25s;
}
.qa[open] summary::after{transform:rotate(-135deg);inset-block-start:2.2rem}
.qa p{margin:0 0 1.75rem;max-width:62ch;color:var(--ink-soft);font-size:1rem;line-height:1.95}

/* ── closing call ────────────────────────────────────────────── */

.close{text-align:center}
.close .h2{margin-inline:auto;max-width:26ch}
.close__p{margin:0 auto;max-width:46ch;font-size:1.0625rem;line-height:1.85;color:var(--on-dark-soft)}
.close__p:not([hidden]) + .close__p{margin-block-start:1rem}
.close .h2--lead:has(+ .close__p:not([hidden])){margin-block-end:1.25rem}
.close__meta{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:1rem;
  margin:clamp(2rem,4vw,2.5rem) auto 2rem;
  font-size:.9375rem;color:var(--on-dark);
}
.close__note{margin:1.5rem auto 0;max-width:42ch;font-size:.875rem;color:var(--on-dark-soft)}
.close .btn{margin-block-start:.5rem}

/* ── footer ──────────────────────────────────────────────────── */

.foot{background:var(--teal-deep);color:var(--on-dark-soft);padding-block:clamp(3rem,6vw,4.5rem) 2rem}
.foot__in{display:grid;gap:2.5rem;align-items:start;padding-block-start:clamp(2.5rem,5vw,3.5rem);border-block-start:1px solid var(--line-light)}
@media (min-width:46rem){.foot__in{grid-template-columns:auto 1fr auto;gap:4rem}}

.foot__logo{inline-size:auto;block-size:72px}
.foot__k{margin:0 0 .5rem;font-size:.8125rem;color:var(--gold-light)}
.foot__col p{margin:0;font-size:.9375rem}
.foot__col a{text-decoration:none;color:var(--on-dark);border-block-end:1px solid var(--line-light);padding-block-end:2px}
.foot__col a:hover{border-color:var(--gold-light)}
.foot__partner{inline-size:auto;block-size:40px;opacity:.9}

.foot__fine{
  width:min(var(--wrap),100% - 2*var(--gutter));margin:clamp(2.5rem,5vw,4rem) auto 0;
  padding-block-start:1.5rem;border-block-start:1px solid var(--line-light);
  font-size:.8125rem;color:rgba(185,199,195,.7);
}

/* ── floating CTA (mobile only) ──────────────────────────────── */

.bar{
  position:fixed;inset-block-end:0;inset-inline:0;z-index:40;
  padding:.75rem var(--gutter) calc(.75rem + env(safe-area-inset-bottom));
  background:linear-gradient(to top,var(--teal-deep) 55%,rgba(2,52,54,0));
  display:flex;justify-content:center;
  pointer-events:none;
}
.bar .btn{pointer-events:auto}
.btn--bar{inline-size:100%;justify-content:center;padding-inline:.5rem}
body{padding-block-end:6rem}

@media (min-width:56rem){
  .bar{display:none}
  body{padding-block-end:0}
}

/* ── modal ───────────────────────────────────────────────────── */

.modal{
  border:0;padding:0;background:transparent;
  max-inline-size:min(34rem,calc(100% - 2*var(--gutter)));
  color:var(--on-dark);
}
.modal::backdrop{background:rgba(2,52,54,.72);backdrop-filter:blur(3px)}
.modal__in{
  background:var(--teal-deep);border:1px solid var(--line-light);
  border-radius:var(--r-frame);
  padding:clamp(2.25rem,5vw,3.25rem);
  text-align:center;
}
.modal__mark{
  display:block;inline-size:11px;block-size:11px;margin:0 auto 1.75rem;
  background:var(--gold-light);transform:rotate(45deg);
}
.modal__h{
  font-family:var(--display);font-weight:700;font-size:clamp(1.35rem,1.15rem + .9vw,1.75rem);
  line-height:1.6;margin:0 0 1rem;color:var(--on-dark);
}
.modal__p{margin:0;font-size:1rem;line-height:1.9;color:var(--on-dark-soft)}
.modal__steps{
  margin:2rem 0 0;padding:0;list-style:none;counter-reset:m;
  text-align:start;display:grid;gap:1rem;
}
.modal__steps li{
  counter-increment:m;position:relative;padding-inline-start:2.5rem;
  font-size:.9375rem;line-height:1.85;color:var(--on-dark-soft);
}
.modal__steps li::before{
  content:counter(m);position:absolute;inset-inline-start:0;inset-block-start:.1em;
  inline-size:1.75rem;block-size:1.75rem;border-radius:50%;
  display:grid;place-items:center;border:1px solid var(--line-light);
  font-family:var(--display);font-weight:600;font-size:.8125rem;line-height:1;color:var(--gold-light);
}
.modal .btn{margin-block-start:2.25rem}

/* ══════════════════════════════════════════════════════════════
   English — the same design, retuned for Latin text
   Nothing here changes a colour, a shape or the layout. Arabic needs
   the open leading the page is built on; Latin set at the same values
   reads loose and the lines stop holding together as paragraphs. The
   hero is the one real difference: Arabic answers its headline with a
   three-word concession, English with a whole sentence, so the second
   line becomes a deck on its own scale instead of a fraction of the
   display size — at .66em that sentence filled four lines.
   ══════════════════════════════════════════════════════════════ */

[lang="en"] .hero__line--b{
  margin-block-start:1.1rem;
  font-size:clamp(1.15rem,1.04rem + .55vw,1.55rem);
  font-weight:400;line-height:1.65;letter-spacing:0;
  color:var(--on-dark);max-width:42ch;text-wrap:pretty;
}

[dir="ltr"] body{line-height:1.7}
[dir="ltr"] .lede,
[dir="ltr"] .hero__p,
[dir="ltr"] .claim__d,
[dir="ltr"] .feats dd,
[dir="ltr"] .person__b,
[dir="ltr"] .more p,
[dir="ltr"] .qa p,
[dir="ltr"] .day__d,
[dir="ltr"] .note,
[dir="ltr"] .form__lede,
[dir="ltr"] .step__intro,
[dir="ltr"] .steps li,
[dir="ltr"] .ticks li,
[dir="ltr"] .modal__p{line-height:1.75}
[dir="ltr"] .form__priv,
[dir="ltr"] .tier__n,
[dir="ltr"] .modal__steps li,
[dir="ltr"] .more--block .plain li,
[dir="ltr"] .more--block .plain__intro{line-height:1.7}