:root{
  --ink:#080807; --ink2:#141210; --ink3:#1d1a17;
  --ivory:#F3EBDD; --sand:#D9C4A1; --gold:#C8A268; --gold-lt:#DDBF83; --taupe:#8B7865;
  --line:rgba(200,162,104,.22);
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --r:2px;
  --pad:clamp(20px,5vw,72px);
}
html[dir="rtl"]{ --sans:'Noto Kufi Arabic','Jost',sans-serif; --serif:'Noto Kufi Arabic',Georgia,serif; }
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--ink);color:var(--ivory);font-family:var(--sans);font-weight:300;
  line-height:1.65;font-size:16px;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--pad)}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;line-height:1.1}
.eyebrow{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);
  font-weight:400}
html[dir="rtl"] .eyebrow{letter-spacing:.08em}
.rule{width:54px;height:1px;background:var(--gold);opacity:.6;margin:18px 0}
html[dir="rtl"] .rule{margin-inline-start:0}

/* ── header ─────────────────────────────────────────────────────────── */
header{position:fixed;inset:0 0 auto;z-index:60;padding:14px 0;
  transition:background .4s,backdrop-filter .4s,border-color .4s;
  border-bottom:1px solid transparent}
header.solid{background:rgba(8,8,7,.86);backdrop-filter:blur(16px);border-bottom-color:var(--line)}
.hrow{display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:11px;margin-inline-end:auto}
.brand img{height:40px;width:auto}
.bword{display:block}
.brand b{font-family:var(--serif);font-size:19px;font-weight:500;letter-spacing:.01em;
  color:var(--ivory);white-space:nowrap}
.brand span{display:block;font-family:var(--sans);font-size:8.5px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--gold);margin-top:1px}
nav{display:none;gap:30px;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase}
nav a{color:rgba(243,235,221,.7);transition:color .25s}
nav a:hover{color:var(--gold-lt)}
@media(min-width:1000px){nav{display:flex}}
/* ON A PHONE THE WORDMARK GIVES WAY.
   At 390px the serif "SHAMBALA" and its sub-line ran straight under the
   language pill and left the Book button touching it. The circular mark is
   the brand at that size — and the film behind it is the wordmark anyway. */
@media(max-width:640px){
  .hrow{gap:10px}
  .brand img{height:34px}
  .brand .bword{display:none}
  .lang button{padding:6px 10px;font-size:10px}
  header .btn.fill{padding:11px 15px!important;font-size:10px!important}
}
.lang{display:flex;gap:2px;border:1px solid var(--line);border-radius:999px;padding:3px}
.lang button{font-size:10.5px;letter-spacing:.14em;padding:5px 11px;border-radius:999px;
  color:rgba(243,235,221,.6);transition:.25s}
.lang button[aria-pressed="true"]{background:var(--gold);color:var(--ink);font-weight:400}

/* ── buttons ────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 30px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  border:1px solid var(--gold);color:var(--gold-lt);border-radius:var(--r);
  transition:background .3s,color .3s;white-space:nowrap}
html[dir="rtl"] .btn{letter-spacing:.06em}
.btn:hover{background:var(--gold);color:var(--ink)}
.btn.fill{background:var(--gold);color:var(--ink);font-weight:400}
.btn.fill:hover{background:var(--gold-lt);border-color:var(--gold-lt)}
.btn.ghost{border-color:rgba(243,235,221,.28);color:var(--ivory)}
.btn.ghost:hover{border-color:var(--ivory);background:transparent;color:var(--ivory)}

/* ── hero ───────────────────────────────────────────────────────────── */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;
  padding-bottom:clamp(56px,11vh,120px);overflow:hidden}
.hero .bg{position:absolute;inset:0;z-index:0}
.hero .bg img,.hero .bg video{width:100%;height:100%;object-fit:cover}
/* TWO SCRIMS, NOT ONE. The vertical gradient seats the section into the page;
   the horizontal one exists solely so the headline stays legible when the film
   cuts to the lit gold signage, which is by far its brightest frame. A single
   overall darkening strong enough for that frame would have flattened every
   other one. */
.hero .scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(8,8,7,.72) 0%,rgba(8,8,7,.30) 30%,rgba(8,8,7,.82) 76%,var(--ink) 100%),
             linear-gradient(to right,rgba(8,8,7,.80) 0%,rgba(8,8,7,.46) 38%,rgba(8,8,7,0) 68%)}
html[dir="rtl"] .hero .scrim{
  background:linear-gradient(180deg,rgba(8,8,7,.72) 0%,rgba(8,8,7,.30) 30%,rgba(8,8,7,.82) 76%,var(--ink) 100%),
             linear-gradient(to left,rgba(8,8,7,.80) 0%,rgba(8,8,7,.46) 38%,rgba(8,8,7,0) 68%)}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero h1{font-size:clamp(40px,7.4vw,92px);font-weight:300;max-width:16ch;margin-top:16px}
.hero h1 em{font-style:italic;color:var(--gold-lt)}
.hero p.sub{margin-top:20px;max-width:46ch;color:rgba(243,235,221,.8);font-size:clamp(15px,1.5vw,18px)}
.hcta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.hnote{margin-top:26px;font-size:12px;letter-spacing:.06em;color:rgba(243,235,221,.5);
  display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.hnote i{width:5px;height:5px;border-radius:50%;background:var(--gold);display:inline-block;flex:none}

/* ── sections ───────────────────────────────────────────────────────── */
section{position:relative;padding:clamp(70px,10vh,132px) 0}
.warm{background:var(--ivory);color:var(--ink2)}
.warm .eyebrow{color:#9A7B44}
.warm .rule{background:#9A7B44}
.warm .btn{border-color:#9A7B44;color:#7C5F2E}
.warm .btn:hover{background:#9A7B44;color:var(--ivory)}
.warm .btn.fill{background:#1d1a17;border-color:#1d1a17;color:var(--ivory)}
.shead{max-width:56ch;margin-bottom:clamp(34px,5vh,58px)}
.shead h2{font-size:clamp(30px,4.4vw,56px);margin-top:12px}
.shead p{margin-top:16px;color:rgba(243,235,221,.65)}
.warm .shead p{color:#5B5148}

/* ── offers ─────────────────────────────────────────────────────────── */
.offers{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:860px){.offers{grid-template-columns:repeat(3,1fr)}}
.offer{border:1px solid var(--line);border-radius:var(--r);padding:clamp(26px,3vw,38px);
  background:linear-gradient(170deg,rgba(200,162,104,.07),rgba(200,162,104,.015));
  display:flex;flex-direction:column;gap:11px;position:relative;transition:border-color .3s}
.offer:hover{border-color:rgba(200,162,104,.5)}
.offer .tag{position:absolute;top:-9px;inset-inline-start:clamp(26px,3vw,38px);
  background:var(--gold);color:var(--ink);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;padding:4px 11px;border-radius:999px;font-weight:400}
.offer h3{font-size:clamp(25px,2.6vw,32px)}
.offer .dur{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--taupe)}
.offer .price{font-family:var(--serif);font-size:clamp(34px,4vw,46px);color:var(--gold-lt);
  font-weight:500;margin-top:4px;letter-spacing:-.02em}
.offer .price small{font-size:14px;letter-spacing:.14em;color:var(--taupe);font-family:var(--sans);
  margin-inline-start:7px;text-transform:uppercase}
.offer p{font-size:14.5px;color:rgba(243,235,221,.66);flex:1}
.offer .btn{margin-top:8px}

/* ── treatments ─────────────────────────────────────────────────────── */
.goals{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:34px}
.goal{border:1px solid rgba(29,26,23,.14);border-radius:var(--r);padding:14px 16px;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;text-align:center;
  transition:.25s;color:#5B5148}
.goal[aria-pressed="true"]{background:#1d1a17;color:var(--sand);border-color:#1d1a17}
html[dir="rtl"] .goal{letter-spacing:.04em}
.tlist{display:grid;gap:0}
.trow{display:grid;gap:6px 24px;padding:24px 0;border-bottom:1px solid rgba(29,26,23,.12);
  grid-template-columns:1fr;align-items:start}
@media(min-width:760px){.trow{grid-template-columns:1.3fr 2fr auto}}
.trow h3{font-size:clamp(21px,2.2vw,27px)}
.trow .meta{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#9A7B44;margin-top:5px}
.trow p{font-size:14.5px;color:#5B5148;max-width:62ch}
.trow .px{text-align:end;white-space:nowrap}
.trow .px b{font-family:var(--serif);font-size:24px;font-weight:600;color:#1d1a17}
/* The on-request line is a block capped at 20ch so "PRICE CONFIRMED WHEN
   BOOKING" wraps to two tidy lines rather than one long thin one. But a
   capped block still starts at the inline-start edge, and at mobile — where
   the row collapses to a single full-width column — that printed the short
   first line ragged against the long second one. margin-inline-start:auto
   pushes the capped block to the row's end edge where the price belongs;
   the mobile rule drops the whole price cell to start alignment so it lines
   up with the treatment name and its description instead of floating. */
.trow .px .ask{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#8B7865;
  display:block;max-width:20ch;line-height:1.5;text-align:end;margin-inline-start:auto}
.trow .px .btn{margin-top:10px;padding:11px 20px;font-size:10.5px}
@media(max-width:759px){
  .trow .px{text-align:start}
  .trow .px .ask{text-align:start;margin-inline-start:0}
}
.tnote{margin-top:30px;font-size:13px;color:#6B6158;max-width:70ch;
  border-inline-start:2px solid #C8A268;padding-inline-start:16px}

/* ── therapists ─────────────────────────────────────────────────────── */
/* Eight therapists. auto-fit left a 6 + 2 orphan row at desktop width, which
   reads as two people who did not fit rather than a roster; the fixed tracks
   below give 2 / 4 / 4 across the breakpoints, so every row is full. */
.team{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:640px){.team{grid-template-columns:repeat(4,minmax(0,1fr))}}
.person{min-width:0}
.person h3,.person .role{overflow-wrap:anywhere}
.person{border:1px solid var(--line);border-radius:var(--r);padding:26px 18px;text-align:center;
  background:linear-gradient(170deg,rgba(200,162,104,.05),transparent);transition:border-color .3s}
.person:hover{border-color:rgba(200,162,104,.45)}
/* One frame for every therapist — 2:3, same corner radius, same hairline —
   whether it holds a photograph or a monogram. The whole point is that a card
   with a face and a card without do not look like two different designs.

   2:3 is not an arbitrary taste decision: it is the exact ratio the eight
   renditions are cut to, so `object-fit:cover` has nothing left to remove.
   The previous 3:4 frame held a 2.2-face-width head-and-shoulders crop; the
   client asked for as much of the supplied picture as the card can hold, and
   a taller frame holding a full-length rendition is how you get it. */
.shot{position:relative;aspect-ratio:2/3;margin:0 auto 16px;border-radius:calc(var(--r) - 4px);
  overflow:hidden;border:1px solid var(--line);display:grid;place-items:center;
  background:radial-gradient(circle at 50% 38%,rgba(200,162,104,.13),transparent 72%)}
.shot.has-photo{border-color:rgba(200,162,104,.28)}
.shot picture{position:absolute;inset:0;display:block}
/* `cover` rather than `fill`, always — `fill` would stretch a face the moment
   a rendition's ratio drifted by a pixel. object-position keeps the head end
   of the frame if that ever happens; while frame and file agree it does
   nothing at all, which is the point of matching them. */
.shot img{width:100%;height:100%;object-fit:cover;display:block;
  object-position:50% 30%;filter:saturate(.92) contrast(1.02)}
@media(max-width:559px){ .shot img{object-position:50% 25%} }
@media(min-width:1100px){ .shot img{object-position:50% 32%} }
/* No scrim over the photograph: the name and role sit below the frame, not on
   top of it, so darkening the foot of the picture would only dim a shoulder
   for nothing. */
.mono{width:74px;height:74px;border-radius:50%;
  border:1px solid var(--gold);display:grid;place-items:center;
  font-family:var(--serif);font-size:29px;color:var(--gold-lt);
  background:radial-gradient(circle at 50% 40%,rgba(200,162,104,.16),transparent 70%)}
.person h3{font-size:20px}
.person .role{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--taupe);margin-top:6px}
.person .btn{margin-top:15px;padding:10px 12px;font-size:10px;width:100%;
  white-space:normal;line-height:1.5;min-width:0}
/* The client's own wording, recording that Shambala supplied and approved
   these visuals — with the one word that keeps it true for the guest reading
   it. She is choosing a therapist by a face, so the page has to say that the
   face is an illustration rather than a photograph of that person. Quiet:
   11px, uppercase, 38% opacity. */
.teamillus{margin-top:22px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(243,235,221,.38)}
.teamnote{margin-top:10px;font-size:13px;color:rgba(243,235,221,.5);max-width:66ch;
  border-inline-start:2px solid var(--line);padding-inline-start:16px}

/* ── gallery ────────────────────────────────────────────────────────── */
.gal{display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.gal{grid-template-columns:repeat(4,1fr)}}
.gal figure{position:relative;overflow:hidden;border-radius:var(--r);aspect-ratio:3/4;cursor:zoom-in}
.gal figure.tall{grid-row:span 2;aspect-ratio:3/8}
@media(max-width:759px){
  .gal figure.tall{grid-row:span 1;aspect-ratio:3/4}
  /* Seven frames into two columns leaves a single tile alone on the last
     row, which reads as one that did not fit. The odd one out spans the
     full width instead and closes the set deliberately. */
  .gal figure:last-child:nth-child(odd){grid-column:span 2;aspect-ratio:16/10}
}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.gal figure:hover img{transform:scale(1.04)}
.lb{position:fixed;inset:0;z-index:90;background:rgba(8,8,7,.96);display:none;
  place-items:center;padding:24px}
.lb.on{display:grid}
.lb img{max-width:min(1100px,92vw);max-height:88vh;object-fit:contain}
.lb button{position:absolute;top:22px;inset-inline-end:22px;font-size:26px;color:var(--sand);
  width:46px;height:46px;border:1px solid var(--line);border-radius:50%}

/* ── location ───────────────────────────────────────────────────────── */
.loc{display:grid;gap:32px;grid-template-columns:1fr}
@media(min-width:900px){.loc{grid-template-columns:1fr 1.15fr;align-items:center}}
.mapcard{position:relative;display:block;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;aspect-ratio:4/3;background:#141210}
.mapcard img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s ease}
.mapcard:hover img{transform:scale(1.03)}
.mapgo{position:absolute;inset-block-end:16px;inset-inline-start:16px;background:rgba(12,11,10,.82);
  border:1px solid var(--line);border-radius:999px;padding:10px 18px;font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--sand);backdrop-filter:blur(6px)}
.mapattr{position:absolute;inset-block-end:8px;inset-inline-end:10px;font-size:9px;
  letter-spacing:.08em;color:rgba(232,224,212,.42)}
.facts{display:grid;gap:18px;margin-top:26px}
.fact{display:flex;gap:14px;align-items:flex-start}
.fact .k{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
  min-width:92px;padding-top:4px}
.fact .v{font-size:15.5px;color:rgba(243,235,221,.85)}
.fact .v small{display:block;font-size:12.5px;color:rgba(243,235,221,.5);margin-top:3px}

/* ── faq ────────────────────────────────────────────────────────────── */
.faq{max-width:840px}
.q{border-bottom:1px solid rgba(29,26,23,.12)}
.q summary{padding:22px 0;font-family:var(--serif);font-size:clamp(19px,2vw,24px);
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center}
.q summary::-webkit-details-marker{display:none}
.q summary::after{content:'+';color:#9A7B44;font-size:22px;font-family:var(--sans);flex:none;
  transition:transform .3s}
.q[open] summary::after{transform:rotate(45deg)}
.q p{padding-bottom:22px;color:#5B5148;font-size:15px;max-width:68ch}

/* ── footer ─────────────────────────────────────────────────────────── */
footer{background:var(--ink2);border-top:1px solid var(--line);padding:clamp(52px,7vh,86px) 0 34px}
.fgrid{display:grid;gap:34px;grid-template-columns:1fr}
@media(min-width:800px){.fgrid{grid-template-columns:1.4fr 1fr 1fr}}
footer h4{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
footer a,footer p{font-size:14.5px;color:rgba(243,235,221,.66);display:block;margin-bottom:9px}
footer a:hover{color:var(--gold-lt)}
footer img.mark{height:64px;margin-bottom:18px}
/* In an Arabic paragraph the bidi algorithm reorders the space-separated
   groups of a phone number, so +971 50 521 1993 was printing as
   1993 521 50 971+ — a number a guest cannot dial. <bdi> isolates it and
   this rule pins the run left-to-right without disturbing the RTL column
   it sits in. */
a[href^="tel:"] bdi{direction:ltr;unicode-bidi:isolate}
.fbase{margin-top:44px;padding-top:22px;border-top:1px solid rgba(200,162,104,.13);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  font-size:12px;color:rgba(243,235,221,.4)}

/* ── sticky contact rail ────────────────────────────────────────────── */
.rail{position:fixed;z-index:55;inset-inline-end:18px;bottom:18px;display:flex;
  flex-direction:column;gap:9px}
.rail a,.rail button{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;
  background:rgba(20,18,16,.92);border:1px solid var(--line);backdrop-filter:blur(10px);
  transition:.28s;color:var(--gold-lt)}
.rail a:hover,.rail button:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.rail svg{width:21px;height:21px;fill:currentColor}
/* ON A PHONE THE RAIL IS ONE BUTTON, NOT THREE.
   Three stacked circles floated over a 390px column and landed on top of the
   "Book with <name>" buttons — a floating shortcut that covers the thing it is
   shortcutting to is worse than no shortcut. WhatsApp stays because it is the
   one people actually use; calling and Telegram are a thumb away in the Visit
   section and the footer, where they are not covering anything. */
@media(max-width:600px){
  .rail{inset-inline-end:12px;bottom:12px}
  .rail a,.rail button{width:52px;height:52px;box-shadow:0 6px 24px rgba(0,0,0,.5)}
  .rail a:not(#waRail){display:none}
}

/* ── booking drawer ─────────────────────────────────────────────────── */
.drawer{position:fixed;inset:0;z-index:100;display:none}
.drawer.on{display:block}
.drawer .veil{position:absolute;inset:0;background:rgba(8,8,7,.8);backdrop-filter:blur(4px)}
.panel{position:absolute;inset-block:0;inset-inline-end:0;width:min(520px,100%);
  background:var(--ink2);border-inline-start:1px solid var(--line);overflow-y:auto;
  padding:clamp(24px,4vw,40px);display:flex;flex-direction:column;gap:22px}
.panel .x{position:absolute;top:18px;inset-inline-end:18px;font-size:24px;color:var(--taupe)}
.panel h3{font-size:28px}
.step{border:1px solid var(--line);border-radius:var(--r);padding:18px}
.step .k{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line);border-radius:999px;padding:9px 15px;font-size:12.5px;
  color:rgba(243,235,221,.75);transition:.25s}
.chip[aria-pressed="true"]{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.panel label{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--taupe);margin-bottom:6px}
.panel input,.panel select{width:100%;background:var(--ink);border:1px solid var(--line);
  border-radius:var(--r);padding:13px 14px;color:var(--ivory);font:inherit;font-size:15px;
  margin-bottom:14px}
.panel input:focus,.panel select:focus{outline:2px solid var(--gold);outline-offset:1px}
.panel .pending{border:1px dashed var(--line);border-radius:var(--r);padding:18px;
  font-size:14px;color:rgba(243,235,221,.6);line-height:1.6}
.panel .pending b{color:var(--gold-lt);display:block;margin-bottom:7px;font-weight:400}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}}
.skip{position:absolute;inset-inline-start:-9999px;z-index:200}
.skip:focus{inset-inline-start:12px;top:12px;background:var(--gold);color:var(--ink);padding:12px 18px}
[hidden]{display:none!important}

/* ── THE CONTACT DOCK, REDONE FOR PHONES ──────────────────────────────
   The previous note here was right about the symptom and wrong about the
   cure: three stacked circles on the right edge landed on the "Book with"
   buttons, so two of them were hidden on mobile. Hiding a contact channel
   is not a fix. On a phone the dock becomes one centred pill and the page
   reserves the height it occupies, so it covers nothing at any width. */
.rail .rlabel{display:none}
@media(max-width:600px){
  body{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .rail{inset-inline-end:50%;transform:translateX(50%);
    bottom:calc(12px + env(safe-area-inset-bottom,0px));
    flex-direction:row;gap:0;padding:6px;border-radius:999px;
    background:rgba(16,14,13,.94);border:1px solid var(--line);
    backdrop-filter:blur(14px);box-shadow:0 10px 34px rgba(0,0,0,.55)}
  html[dir="rtl"] .rail{transform:translateX(-50%)}
  .rail a,.rail button{width:52px;height:52px;background:transparent;border:0;box-shadow:none}
  .rail a:not(#waRail){display:grid}
  .rail a:hover,.rail button:hover{background:transparent;color:var(--gold)}
  .rail a:active,.rail button:active{background:var(--gold);color:var(--ink)}
}
@media(max-width:340px){ .rail a,.rail button{width:46px;height:46px} .rail svg{width:19px;height:19px} }

/* ── ABOUT ───────────────────────────────────────────────────────────── */
.about{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);align-items:center}
.about .fig{position:relative;border-radius:2px;overflow:hidden;background:#100e0d}
.about .fig img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/5}
.about .fig::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--line)}
.about p{margin:0 0 18px}
.about .pts{display:grid;gap:14px;margin-top:26px;padding-top:26px;border-top:1px solid var(--line)}
.about .pt{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.about .pt i{width:7px;height:7px;border-radius:50%;background:var(--gold);margin-top:9px;flex:none}
.about .pt b{display:block;font-family:var(--serif);font-size:19px;font-weight:500;margin-bottom:3px}
.about .pt span{font-size:14px;color:var(--taupe);line-height:1.75}
@media(max-width:820px){ .about{grid-template-columns:1fr} .about .fig{order:-1} .about .fig img{aspect-ratio:16/10} }

/* ── FINAL CTA ───────────────────────────────────────────────────────── */
.finale{position:relative;overflow:hidden;background:#0d0c0b}
.finale .bgi{position:absolute;inset:0}
.finale .bgi img{width:100%;height:100%;object-fit:cover;opacity:.3}
.finale .bgi::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(13,12,11,.75),rgba(13,12,11,.92))}
.finale .wrap{position:relative;text-align:center;max-width:760px}
.finale h2{font-size:clamp(32px,5vw,60px);line-height:1.08;margin:14px 0 0}
.finale .rule{margin:26px auto}
.finale p{max-width:56ch;margin:0 auto 30px}
.finale .hcta{justify-content:center}

/* ── BOOKING DRAWER · date and time ──────────────────────────────────── */
.drawer .chip.more{border-style:dashed;color:var(--gold-lt)}
.drawer .morewrap{display:contents}
.drawer .when{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.drawer .when label{margin-top:0}
.drawer input[type=date],.drawer input[type=time]{
  color-scheme:dark;font-family:var(--sans);letter-spacing:.02em}
.drawer .sends{display:grid;gap:10px}
.drawer .btn.tg{background:transparent;border:1px solid var(--gold);color:var(--gold-lt)}
.drawer .btn.tg:hover{background:var(--gold);color:var(--ink)}
.copied{position:fixed;inset-inline:0;bottom:calc(96px + env(safe-area-inset-bottom,0px));
  margin:auto;width:max-content;max-width:88vw;z-index:90;
  background:var(--gold);color:var(--ink);font-size:13px;letter-spacing:.02em;
  padding:11px 18px;border-radius:2px;opacity:0;transform:translateY(8px);
  transition:.3s;pointer-events:none}
.copied.on{opacity:1;transform:none}

/* ── CONCIERGE ────────────────────────────────────────────────────────── */
.cx{position:fixed;z-index:70;inset-inline-end:18px;bottom:18px;width:min(384px,calc(100vw - 28px));
  max-height:min(640px,calc(100dvh - 36px));display:none;flex-direction:column;
  background:#141211;border:1px solid var(--line);border-radius:3px;
  box-shadow:0 30px 80px rgba(0,0,0,.66);overflow:hidden}
.cx.on{display:flex}
@media(max-width:600px){
  .cx{inset-inline:10px;width:auto;bottom:calc(76px + env(safe-area-inset-bottom,0px));
    max-height:calc(100dvh - 120px)}
}
.cx header{display:flex;align-items:center;gap:12px;padding:15px 16px;
  border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)}
.cx header img{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none}
.cx header b{font-family:var(--serif);font-size:17px;font-weight:500;display:block;line-height:1.2}
.cx header span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe)}
.cx header .x{margin-inline-start:auto;background:none;border:0;color:var(--taupe);
  font-size:24px;line-height:1;cursor:pointer;padding:0 2px}
.cx header .x:hover{color:var(--gold)}
.cx .log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;
  -webkit-overflow-scrolling:touch}
.cx .msg{max-width:86%;font-size:14px;line-height:1.7;padding:11px 14px;border-radius:2px}
.cx .msg.bot{background:rgba(255,255,255,.045);border:1px solid var(--line);align-self:flex-start;
  color:var(--ivory)}
.cx .msg.me{background:var(--gold);color:var(--ink);align-self:flex-end}
.cx .msg b{color:var(--gold-lt);font-weight:500}
.cx .msg.bot a{color:var(--gold-lt);text-decoration:underline;text-underline-offset:3px}
.cx .qs{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 14px}
.cx .qs button{font-family:var(--sans);font-size:12px;letter-spacing:.04em;
  background:transparent;border:1px solid var(--line);color:var(--taupe);
  padding:9px 13px;border-radius:999px;cursor:pointer;transition:.22s}
.cx .qs button:hover{border-color:var(--gold);color:var(--gold-lt)}
.cx footer{padding:12px 16px 14px;border-top:1px solid var(--line);display:grid;gap:9px;
  background:rgba(255,255,255,.02)}
.cx footer .row{display:flex;gap:8px}
.cx footer .row .btn{flex:1;padding:12px 10px;font-size:11px}
.cx .langsel{display:flex;gap:6px;justify-content:center}
.cx .langsel button{font-family:var(--sans);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;background:transparent;border:1px solid var(--line);
  color:var(--taupe);padding:7px 14px;border-radius:999px;cursor:pointer;transition:.22s}
.cx .langsel button[aria-pressed="true"]{border-color:var(--gold);color:var(--gold-lt);
  background:rgba(197,160,89,.1)}
.cx .note{font-size:11px;color:var(--taupe);text-align:center;line-height:1.6}

/* ═══════════════════════════════════════════════════════════════════════════
   v2 — multipage layer.

   base.css is the first build's stylesheet and is unchanged. This file adds
   what the routed site needs and re-points the handful of selectors whose
   markup changed. Keeping them apart means the visual language that was
   already approved is still one readable file, and everything new is one
   readable diff.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── header ─────────────────────────────────────────────────────────────── */
/* The language control is a link now, not a pair of buttons, because it
   navigates to a different document rather than rewriting this one. */
.lang{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);
  border-radius:999px;padding:7px 15px;font-size:11px;letter-spacing:.12em;
  color:var(--sand);transition:.25s;white-space:nowrap}
.lang:hover{border-color:var(--gold);color:var(--gold-lt)}
nav a[aria-current="page"]{color:var(--gold-lt)}
nav a[aria-current="page"]::after{content:"";display:block;height:1px;margin-top:5px;background:var(--gold)}

.burger{display:grid;gap:5px;padding:11px 9px;border:1px solid var(--line);border-radius:2px}
.burger span{display:block;width:18px;height:1px;background:var(--sand);transition:.3s}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3px) rotate(-45deg)}
@media(min-width:1000px){.burger{display:none}}
@media(max-width:999px){
  nav{position:fixed;inset:0 0 auto;top:var(--hdrh,68px);display:block;background:rgba(13,12,11,.98);
    backdrop-filter:blur(14px);border-bottom:1px solid var(--line);padding:10px var(--pad) 22px;
    transform:translateY(-8px);opacity:0;pointer-events:none;transition:.28s;z-index:60}
  nav.on{transform:none;opacity:1;pointer-events:auto}
  nav a{display:block;padding:15px 0;border-bottom:1px solid rgba(200,162,104,.12);font-size:14px}
  nav a[aria-current="page"]::after{display:none}
  .hbook{display:none}
}

/* ── live hours pill ────────────────────────────────────────────────────── */
/* Renders the confirmed-safe wording server-side. The script only upgrades it
   to a live open/closed reading once real hours exist, so with none supplied
   this is what every visitor sees and it cannot be wrong. */
.pill{display:inline-flex;align-items:center;gap:9px;margin-top:22px;padding:9px 16px;
  border:1px solid var(--line);border-radius:999px;font-size:11.5px;letter-spacing:.1em;
  color:rgba(243,235,221,.72);background:rgba(20,18,16,.5);backdrop-filter:blur(6px)}
.pill b{font-weight:400;color:var(--gold-lt)}
.pill .sep{opacity:.4}
.pill .dot{width:6px;height:6px;border-radius:50%;background:var(--taupe);flex:none}
.pill.is-open .dot{background:#5FA16A;box-shadow:0 0 0 3px rgba(95,161,106,.18)}
.pill.is-closed .dot{background:#A86B5E}
footer .pill{margin-top:18px}

/* The pill in the header. On a desktop it sits in the bar; below 1000px the
   bar has no room for it and it moves into the opened menu instead, so the
   information is on every page at every width without ever fighting the
   brand mark for space. */
/* After the nav, before the language control — the brand still leads the
   bar, and the status sits with the other utilities. */
.pill.inbar{margin-top:0;padding:7px 13px;font-size:11px}
@media(max-width:1099px){ .pill.inbar{display:none} }
/* The mobile menu uppercases its links; the pill is a sentence, not a
   label, so it opts out. */
.pill.inmenu{margin:16px 0 4px;width:100%;justify-content:center;text-transform:none;letter-spacing:.04em;font-size:12.5px}
@media(min-width:1000px){ .navhours{display:none} }
.pill .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pill{position:relative}
.pill.is-open .state{color:#7FBF8A}
.pill.is-closed .state{color:#C79287}
.warm .pill{border-color:rgba(29,26,23,.18);color:#5B5148;background:transparent}
.warm .pill b{color:#7C5F2E}

/* ── page heads (every route but the homepage) ──────────────────────────── */
.phead{padding:calc(var(--hdrh,68px) + clamp(48px,9vh,96px)) 0 clamp(30px,5vh,52px);
  border-bottom:1px solid rgba(200,162,104,.12)}
.phead h1{font-size:clamp(33px,5.4vw,66px);font-weight:300;margin-top:13px;max-width:18ch;line-height:1.06}
.phead p{margin-top:18px;max-width:58ch;color:rgba(243,235,221,.66);font-size:clamp(15px,1.5vw,17.5px)}
.narrow{max-width:760px}

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero{padding-top:0}
/* The poster and the film occupy the SAME box. The first build stacked them:
   the video was appended after the poster in normal flow, so once the script
   faded the poster out the hero went black with the film sitting below the
   fold of its own container. Both are absolutely positioned now, which is
   also what lets the poster cross-fade into the film instead of cutting. */
.hero .bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:#0d0c0b}
.hero .bg>img,.hero .bg>video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block}
.hero .bg>video{z-index:1}
.hero .bg>img{z-index:2}
.hcopy{padding-bottom:clamp(54px,9vh,104px)}
/* The headline is two lines by design. At 390px the first line was breaking
   after "Massage", orphaning "Spa" onto a line of its own, so the phone size
   comes down until "European Massage Spa" fits on one line and the break
   falls where the markup puts it. */
.hero h1{font-size:clamp(31px,7.4vw,92px);font-weight:300;max-width:16ch;margin-top:16px;line-height:1.06}
@media(max-width:430px){ .hero h1{font-size:29px;line-height:1.16;max-width:none} }
.hero h1 em{font-style:italic;color:var(--gold-lt)}
.hero .hcopy>p{margin-top:20px;max-width:46ch;color:rgba(243,235,221,.82);font-size:clamp(15px,1.5vw,18px)}
.hacts{display:flex;flex-wrap:wrap;gap:13px;margin-top:30px}

/* ── the roster, moved under the hero and enlarged ──────────────────────── */
/* The therapists are the first thing below the fold, and the picture is the
   card. Everything else on the card — name, role, button — is sized to sit
   under a portrait rather than to share space with it.

   Three tracks, and only three:
     one  below 560px   a phone: one portrait per row, near full bleed
     two  560–1099px    a tablet, either orientation, including 768 and 1024
     four 1100px and up a desktop, and never more than four

   There is no three-up band any more. It used to run 840–1039, which put two
   of the eight on a short last row on a landscape tablet, and it broke the
   rule that a tablet shows two. */
.teamlead{padding-top:clamp(56px,8vh,104px)}
.teamlead .wrap{max-width:1440px}
.teamgrid{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:560px){.teamgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}
@media(min-width:1100px){.teamgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}}

/* The card is a frame around a picture. Padding is thin on purpose: every
   pixel spent on the card's own border is a pixel taken off the portrait,
   and the portrait is the thing being chosen from. */
.person{padding:10px 10px 18px}
.person h3{font-size:clamp(21px,1.7vw,25px);margin-top:16px}
.shot{margin-bottom:0;border-radius:2px}

/* ── TWO BOOKING BUTTONS PER CARD ──────────────────────────────────────────
   WhatsApp and Telegram, side by side, each half the card. The pair is a grid
   rather than two floated buttons so both are exactly the same width whatever
   the two words translate to — "واتساب" and "تيليجرام" are not the same
   length as their English labels, and a pair of unequal buttons reads as one
   primary and one afterthought.

   They keep the single button's height: tall enough to be a comfortable touch
   target and never below 48px, the floor a finger needs. Half the width of
   one button is still 150px+ on the narrowest phone this grid produces, so
   neither label wraps. */
.person .bookpair{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.person .bookbtn{width:100%;min-height:52px;padding:16px 10px;
  font-size:12px;letter-spacing:.14em;line-height:1.2;white-space:nowrap}

/* WhatsApp leads, because it is the one that arrives with the therapist's
   name already in the message; Telegram opens an empty chat. So WhatsApp
   takes the filled treatment and Telegram the outline — a visual order,
   not a demotion. Both are the same size and the same type, and the outline
   is a full-contrast border rather than a greyed one, so neither reads as
   disabled. */
.person .bookbtn.wa{background:var(--gold);color:var(--ink);font-weight:400}
.person .bookbtn.tg{background:transparent;border-color:var(--gold);color:var(--gold-lt)}

/* A phone: the card runs nearly the full viewport with a comfortable gutter,
   and the name and button grow with it. A portrait 350px across is a picture
   somebody can choose a person from; the 160px thumbnail this replaced was
   not. */
@media(max-width:559px){
  .teamlead .wrap{padding-inline:16px}
  .person{padding:8px 8px 16px}
  .person h3{font-size:26px;margin-top:18px}
  .person .role{font-size:11px;margin-top:8px}
  .person .bookpair{margin-top:18px;gap:8px}
  .person .bookbtn{min-height:58px;padding:19px 8px;font-size:12px;letter-spacing:.1em}
}
@media(min-width:1100px){
  .person{padding:12px 12px 22px}
  .person .bookbtn{min-height:54px;font-size:11.5px}
}

/* The floating WhatsApp button and the assistant button are fixed to the
   bottom-inline-end corner, which on a phone is directly over a full-bleed
   card. They step aside while the roster is on screen — see the observer in
   app.js. Nothing is lost by doing it: every card already carries its own
   booking button, which is the same action. */
html.roster-in-view #waRail,
html.roster-in-view .cxopen,
html.roster-in-view .rail{opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .22s ease,visibility .22s,transform .22s ease;pointer-events:none}
@media(prefers-reduced-motion:reduce){
  html.roster-in-view #waRail,
  html.roster-in-view .cxopen,
  html.roster-in-view .rail{transition:none;transform:none}
}

/* ── offers / treatments / teasers ──────────────────────────────────────── */
.more{margin-top:34px}
.tlink{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);border-bottom:1px solid rgba(200,162,104,.4);padding-bottom:4px}
.tlink:hover{color:var(--gold-lt);border-color:var(--gold-lt)}
.warm .tlink{color:#7C5F2E;border-color:rgba(154,123,68,.45)}
.trnote{margin-top:30px;font-size:13px;color:#5B5148;max-width:68ch;
  border-inline-start:2px solid rgba(154,123,68,.4);padding-inline-start:16px}
section:not(.warm) .trnote{color:rgba(243,235,221,.5);border-inline-start-color:var(--line)}
.offteaser{background:#0d0c0b}
.goal{border:1px solid rgba(29,26,23,.2);border-radius:999px;padding:11px 16px;font-size:12px;
  letter-spacing:.1em;color:#5B5148;transition:.25s}
.goal[aria-pressed="true"]{background:#1d1a17;color:var(--ivory);border-color:#1d1a17}
.trow[hidden]{display:none}

/* ── the bath ───────────────────────────────────────────────────────────── */
.bathsec{padding-top:clamp(46px,7vh,84px)}
.bathgrid{display:grid;gap:34px;grid-template-columns:1fr;align-items:start}
@media(min-width:900px){.bathgrid{grid-template-columns:1.1fr 1fr;gap:54px}}
.bathfig img{width:100%;height:auto;border-radius:2px;border:1px solid var(--line)}
.pend{border:1px dashed var(--line);border-radius:2px;padding:20px;color:rgba(243,235,221,.66);font-size:14px}
.pend b{display:block;color:var(--gold-lt);font-weight:400;margin-bottom:9px;font-size:16px}
.pend p+p{margin-top:13px}
.pend.big{padding:clamp(22px,3vw,34px)}
.pend.big b{font-family:var(--serif);font-size:clamp(21px,2.4vw,28px);margin-bottom:14px}
.pend .facts{display:flex;flex-wrap:wrap;gap:13px;margin-top:24px}

/* ── venue film + gallery ───────────────────────────────────────────────── */
/* .vfilm / .vbg removed with the venue film they styled. */
.gal{grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.gal{grid-template-columns:repeat(4,1fr)}}
.gcell{position:relative;overflow:hidden;border-radius:2px;aspect-ratio:3/2;cursor:zoom-in;
  border:1px solid rgba(200,162,104,.14);padding:0;background:none;display:block}
.gcell img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.gcell:hover img{transform:scale(1.04)}
.gcell:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ── location ───────────────────────────────────────────────────────────── */
.place{display:grid;gap:32px;grid-template-columns:1fr}
@media(min-width:900px){.place{grid-template-columns:1fr 1.15fr;align-items:center}}
.pbit{padding:18px 0;border-bottom:1px solid var(--line)}
.pbit h4{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.pbit p{font-size:17px}
.pbit small{display:block;margin-top:5px;font-size:12.5px;color:rgba(243,235,221,.45)}
.pacts{display:flex;flex-wrap:wrap;gap:13px;margin-top:26px}
.mapgo{position:absolute;inset-inline-start:16px;bottom:14px;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ivory);background:rgba(8,8,7,.7);padding:8px 13px;border-radius:999px}
.mapattr{position:absolute;inset-inline-end:10px;top:10px;font-size:9.5px;color:rgba(243,235,221,.5)}

/* ── journal ────────────────────────────────────────────────────────────── */
.jteaser{background:#0d0c0b}
.jgrid{display:grid;gap:22px;grid-template-columns:1fr}
@media(min-width:680px){.jgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.jlist .jgrid{grid-template-columns:repeat(3,1fr)}}
.jcard{border:1px solid var(--line);border-radius:2px;overflow:hidden;transition:border-color .3s;
  background:linear-gradient(170deg,rgba(200,162,104,.04),transparent)}
.jcard:hover{border-color:rgba(200,162,104,.45)}
.jcard a{display:block}
.jcard img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block}
.jcard h3{font-size:clamp(20px,2vw,25px);margin:10px 22px 0;font-weight:300}
.jcard p{margin:11px 22px 0;font-size:14.5px;color:rgba(243,235,221,.62)}
.jcard .tlink{margin:16px 22px 24px}
.jmeta{display:flex;gap:9px;align-items:center;margin:20px 22px 0;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--taupe)}
/* A card and an article without artwork. The image was carrying the top of
   the card and the gap between the lede and the body; without it the two
   need the space back, or the post reads as though something failed to load
   rather than as though it was written without a picture. */
.jcard.nopic .jmeta{margin-top:26px}
.pbody.nohero{margin-top:clamp(34px,5vh,58px)}

.post{padding-top:calc(var(--hdrh,68px) + clamp(38px,7vh,74px))}
.post .back{margin-bottom:26px}
.post .jmeta{margin:0 0 14px}
.post h1{font-size:clamp(31px,4.8vw,58px);font-weight:300;line-height:1.08;max-width:20ch}
.post .lede{margin-top:20px;font-size:clamp(16px,1.8vw,20px);color:rgba(243,235,221,.72);
  font-family:var(--serif);font-style:italic;max-width:54ch}
.phero{margin:clamp(34px,5vh,58px) 0}
.phero img{width:100%;max-height:60vh;object-fit:cover}
.pbody{font-size:16.5px;line-height:1.78;color:rgba(243,235,221,.8)}
.pbody h2{font-family:var(--serif);font-size:clamp(23px,2.6vw,32px);font-weight:400;
  color:var(--ivory);margin:38px 0 14px}
.pbody p+p{margin-top:17px}
.pbody ul{margin:16px 0 0;padding-inline-start:20px}
.pbody li{margin-bottom:11px}
.pbody li::marker{color:var(--gold)}
.pnote{margin-top:30px;border-inline-start:2px solid var(--line);padding-inline-start:18px;
  font-size:14px;color:rgba(243,235,221,.5)}
.pfaq{margin-top:clamp(40px,6vh,64px)}
.pfaq h2{font-family:var(--serif);font-size:clamp(23px,2.6vw,32px);font-weight:400;margin-bottom:8px}
.pcta{margin-top:clamp(44px,7vh,76px);border:1px solid var(--line);border-radius:2px;
  padding:clamp(26px,4vw,40px);text-align:center;background:linear-gradient(170deg,rgba(200,162,104,.06),transparent)}
.pcta h3{font-family:var(--serif);font-size:clamp(23px,2.8vw,32px);font-weight:400}
.pcta p{margin:11px 0 22px;color:rgba(243,235,221,.6);font-size:15px}
.jlist{padding-top:clamp(44px,6vh,72px)}

/* ── faq ────────────────────────────────────────────────────────────────── */
.fq{border-bottom:1px solid var(--line)}
.fq summary{display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding:22px 0;cursor:pointer;font-size:clamp(16px,1.8vw,20px);list-style:none}
.fq summary::-webkit-details-marker{display:none}
.fq summary::after{content:'+';color:var(--gold);font-size:22px;flex:none;transition:transform .3s}
.fq[open] summary::after{transform:rotate(45deg)}
.fq p{padding-bottom:22px;color:rgba(243,235,221,.66);font-size:15px;max-width:68ch}

/* ── footer additions ───────────────────────────────────────────────────── */
.fgrid{grid-template-columns:1fr}
@media(min-width:800px){.fgrid{grid-template-columns:1.5fr 1fr 1fr 1fr}}
.flogo{height:78px;width:auto;margin-bottom:16px;opacity:.9}
.ftag{max-width:32ch}
.fbot{margin-top:44px;padding-top:22px;border-top:1px solid rgba(200,162,104,.13);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  font-size:12px;color:rgba(243,235,221,.4)}

/* ── drawer / concierge / rail (markup renamed from the first build) ────── */
.drawer{position:fixed;inset:0;z-index:100;display:none}
.drawer:not([hidden]){display:block}
.drawer::before{content:"";position:absolute;inset:0;background:rgba(8,8,7,.8);backdrop-filter:blur(4px)}
.dpanel{position:absolute;inset-block:0;inset-inline-end:0;width:min(460px,100%);
  background:var(--ink2);border-inline-start:1px solid var(--line);overflow-y:auto;
  padding:clamp(26px,4vw,40px);display:flex;flex-direction:column;gap:9px}
.dclose{position:absolute;top:16px;inset-inline-end:16px;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--line);color:var(--sand);font-size:22px}
.dpanel h3{font-family:var(--serif);font-size:clamp(24px,3vw,32px);font-weight:400;margin-bottom:14px}
.dpanel label{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-top:14px}
.dpanel select,.dpanel input{width:100%;background:rgba(243,235,221,.05);border:1px solid var(--line);
  border-radius:2px;padding:13px 14px;color:var(--ivory);font-family:var(--sans);font-size:15px}
.dpanel select:focus-visible,.dpanel input:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.when{display:grid;gap:10px;grid-template-columns:1fr 1fr}
.dpanel .btn{margin-top:16px;width:100%}
.dfoot{margin-top:14px;font-size:12px;color:rgba(243,235,221,.42)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.chip{border:1px solid var(--line);border-radius:999px;padding:9px 15px;font-size:12.5px;color:var(--sand);transition:.2s}
.chip[aria-pressed="true"]{background:var(--gold);color:var(--ink)}

#waRail{position:fixed;z-index:55;inset-inline-end:16px;bottom:16px;width:52px;height:52px;
  border-radius:50%;display:grid;place-items:center;background:rgba(20,18,16,.94);
  border:1px solid var(--line);backdrop-filter:blur(10px);color:var(--gold-lt);
  box-shadow:0 6px 24px rgba(0,0,0,.45);transition:.28s}
#waRail:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}

.cxopen{position:fixed;z-index:55;inset-inline-end:16px;bottom:78px;width:52px;height:52px;
  border-radius:50%;background:rgba(20,18,16,.94);border:1px solid var(--line);
  display:grid;place-items:center;backdrop-filter:blur(10px);box-shadow:0 6px 24px rgba(0,0,0,.45)}
.cxopen img{border-radius:50%}
.cx{position:fixed;z-index:80;inset-inline-end:16px;bottom:16px;width:min(370px,calc(100vw - 32px));
  background:var(--ink2);border:1px solid var(--line);border-radius:4px;overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.6)}
.cx[hidden]{display:none}
.cxhead{display:flex;align-items:center;gap:11px;padding:14px 16px;border-bottom:1px solid var(--line)}
.cxhead b{font-size:14px;font-weight:400;display:block}
.cxhead span{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--taupe)}
.cxhead button{margin-inline-start:auto;font-size:22px;color:var(--sand);width:32px;height:32px}
.cxlog{max-height:250px;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:11px}
.cxmsg{font-size:14px;line-height:1.55;padding:11px 14px;border-radius:12px;max-width:88%}
.cxmsg.bot{background:rgba(200,162,104,.1);border:1px solid var(--line);align-self:flex-start}
.cxmsg.me{background:var(--gold);color:var(--ink);align-self:flex-end}
.cxqs{display:flex;flex-wrap:wrap;gap:7px;padding:0 16px 14px}
.cxqs button{border:1px solid var(--line);border-radius:999px;padding:8px 13px;font-size:12px;color:var(--sand)}
.cxqs button:hover{border-color:var(--gold);color:var(--gold-lt)}
.cxacts{display:grid;gap:9px;grid-template-columns:1fr 1fr;padding:0 16px 12px}
.cxacts .btn{padding:12px;font-size:11px}
.cxnote{padding:0 16px 16px;font-size:11.5px;color:rgba(243,235,221,.4)}

.toast{position:fixed;z-index:120;inset-inline:16px;bottom:96px;margin:0 auto;max-width:400px;
  background:var(--ink3);border:1px solid var(--gold);border-radius:2px;padding:14px 18px;
  font-size:13.5px;text-align:center;opacity:0;pointer-events:none;transition:.3s}
.toast.on{opacity:1}
.lb[hidden]{display:none}
.lb:not([hidden]){position:fixed;inset:0;z-index:110;background:rgba(8,8,7,.96);
  display:grid;place-items:center;padding:24px}
.lbclose{position:absolute;top:22px;inset-inline-end:22px;font-size:26px;color:var(--sand);
  width:46px;height:46px;border:1px solid var(--line);border-radius:50%}

/* ── about / keys ───────────────────────────────────────────────────────── */
.abgrid{display:grid;gap:36px;grid-template-columns:1fr}
@media(min-width:900px){.abgrid{grid-template-columns:1fr 1fr;gap:64px}}
.abgrid h2{font-size:clamp(28px,4vw,50px);margin-top:12px;font-weight:300}
.abgrid p{margin-top:17px;color:rgba(243,235,221,.7);max-width:52ch}
.keys{display:grid;gap:20px;align-content:start}
.key{border-inline-start:2px solid var(--line);padding-inline-start:18px}
.key h4{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.key p{margin-top:0;font-size:14.5px;color:rgba(243,235,221,.62)}

.finale .facts{display:flex;flex-wrap:wrap;gap:13px;justify-content:center;margin-top:28px}
.finale p{margin-top:18px;color:rgba(243,235,221,.66);max-width:56ch;margin-inline:auto}

/* ── focus, motion, print ───────────────────────────────────────────────── */
:where(a,button,select,input,summary):focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ── skip link ──────────────────────────────────────────────────────────── */
/* Pushing it to -9999px works in LTR and becomes a 9999px overflow to the
   right the moment the document is RTL, which is how an Arabic page ends up
   with a horizontal scrollbar nobody can see the cause of. Clipping it keeps
   it out of the flow in both directions. */
.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
  white-space:nowrap;inset-inline-start:0;top:0;z-index:200}
.skip:focus{width:auto;height:auto;overflow:visible;clip-path:none;
  inset-inline-start:12px;top:12px;background:var(--gold);color:var(--ink);padding:12px 18px}


/* ── THE MOBILE HOME CONTROL ───────────────────────────────────────────────
   A wordmark that goes home is a convention, not an affordance. This is an
   independent, labelled control that is visible at every phone width and
   never collapses into the hamburger. It is sized first — 44x44 is the floor
   a finger needs — and the decorative spacing around it gives way before the
   label or the target does. */
.homebtn{display:none}
@media(max-width:899px){
  .homebtn{display:inline-flex;align-items:center;justify-content:center;
    min-width:44px;min-height:44px;padding:0 14px;margin-inline-start:auto;
    font-size:12px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--gold-lt);border:1px solid rgba(200,162,104,.42);border-radius:2px;
    white-space:nowrap;flex:0 0 auto;order:2}
  .homebtn:hover,.homebtn:focus-visible{color:var(--ink);background:var(--gold);border-color:var(--gold)}
  .hrow{gap:8px}
  .hrow .lang{order:3;flex:0 0 auto}
  .hrow .burger{order:4;flex:0 0 auto}
  .hrow .brand{order:1;flex:0 1 auto;min-width:0}
  .hrow .hbook{display:none}
}
/* At the narrowest widths the decoration goes, not the control. */
@media(max-width:380px){
  .hrow{gap:6px}
  .homebtn{padding:0 10px;letter-spacing:.1em}
  .brand .bword span{display:none}
}
@media(max-width:340px){
  .brand .bword{display:none}
  .homebtn{padding:0 9px}
}

/* ── TWO-LINE HERO ON A PHONE ──────────────────────────────────────────────
   "European Massage Spa" then "in Al Barsha, Dubai." — exactly two lines from
   320px to 430px. The first line is held together by making the whole span
   un-wrappable and letting the font size shrink to fit the viewport, rather
   than by hoping a line break lands where we want it. */
@media(max-width:559px){
  .hero h1{font-size:clamp(25px,7.4vw,34px);line-height:1.12;letter-spacing:-.01em}
  .hero h1 > span,.hero h1 > em{display:block;white-space:nowrap}
  .hero h1 em{font-size:.94em}
  .hero .sub{font-size:14.5px;line-height:1.55}
}
@media(max-width:340px){ .hero h1{font-size:clamp(23px,7.2vw,26px)} }

/* ── THE WORD GAP BETWEEN "Spa" AND "in" ───────────────────────────────────
   There is no rule here, and that is the fix.

   The headline is two elements, <span> and <em>, and they were emitted with
   nothing between them — not a thin space, not a margin, nothing. On a phone
   that was invisible, because each half becomes its own block. Above 560px
   they set as one run of inline text, and with no separator the browser had
   no word boundary to work with: it read "Spa" and "in" as the single word
   "Spain" and broke the line wherever that long token allowed. Every desktop
   width rendered

       European Massage
       Spain Al Barsha,
       Dubai.

   A margin would have pushed the two glyphs apart and left the text saying
   "Spain" to a screen reader, to copy-and-paste, and to anything reading the
   page's text. So the separator is a real space, in the markup, inside the
   <em> — see the comment in src/build.mjs. It gives one natural word gap
   where the words meet, it is trimmed at the start of a line so the phone
   layout is untouched, and it restores the word boundary the line breaker
   needed. The line structure is unchanged: same three lines, same left edge.

   A margin is deliberately NOT added on top. It would stack with the space,
   and on any width where the <em> happened to begin a line it would indent
   that line out of alignment with the one above. */

/* ── PRICES ────────────────────────────────────────────────────────────── */
.pxrow{display:flex;align-items:baseline;gap:10px;justify-content:flex-end;margin-bottom:6px}
.pxrow:last-of-type{margin-bottom:10px}
.pxdur{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe);margin-inline-end:auto}
.trow .px s.was,.offer s.was{opacity:.5;text-decoration:line-through;font-size:.86em;font-weight:400}
.trow .px b.now,.offer .now{color:var(--gold-lt)}
.offer .price s.was{margin-inline-end:8px}
@media(max-width:759px){
  .pxrow{justify-content:flex-start}
  .pxdur{margin-inline-end:0;min-width:74px}
}

/* ── FLOATING CONTACT STACK: Telegram above WhatsApp ───────────────────────
   Two controls, both permanent. Neither replaces the other, neither toggles,
   and there is no third ambiguous button — the mandala launcher that used to
   sit here vanished when tapped, which is why it is gone entirely rather than
   restyled. Safe-area inset keeps them off the iPhone home indicator. */
#tgRail{position:fixed;z-index:55;inset-inline-end:16px;
  bottom:calc(78px + env(safe-area-inset-bottom,0px));
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:rgba(20,18,16,.94);border:1px solid var(--line);backdrop-filter:blur(10px);
  color:var(--gold-lt);box-shadow:0 6px 24px rgba(0,0,0,.45);transition:.28s}
#tgRail:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}
#waRail{bottom:calc(16px + env(safe-area-inset-bottom,0px))}
html.roster-in-view #tgRail{opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .22s ease,visibility .22s,transform .22s ease;pointer-events:none}


/* ── THE PLACE — SIX TILES ──────────────────────────────────────────────────
   Three supplied photographs and three supplied clips, all shown in the same
   4:5 frame so the two rows read as one composition rather than as a photo
   block and a video block.

   The ratio is declared on the tile, not inferred from the media, so the
   section occupies its final height before a single byte of image or video
   has arrived and nothing below it moves. */
/* A screen-reader-only utility. One existed already but was scoped to .pill,
   which meant any new use of the class elsewhere rendered as visible text. */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pgrid{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:760px){ .pgrid{grid-template-columns:repeat(3,1fr);gap:18px} }
.ptile{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:2px;
  border:1px solid var(--line);background:#0b0b0a;margin:0}
.ptile img,.ptile video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block}
/* The location card is a composed graphic on its own black field. Cropping it
   would cut the wordmark or the address, so it is fitted whole; its own
   background matches the tile and the fit reads as a frame, not a letterbox. */
.ptile[data-fit="contain"] img{object-fit:contain}
.ptile.shot{cursor:zoom-in;border:0;padding:0;width:100%;display:block;
  appearance:none;-webkit-appearance:none}
.ptile.shot img{transition:transform .7s ease}
.ptile.shot:hover img{transform:scale(1.04)}
.ptile.shot[data-fit="contain"]:hover img{transform:none}
.ptile:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* The poster fades out once the clip is actually painting frames, so a slow
   connection or a blocked autoplay leaves a photograph rather than a void. */
.ptile video{opacity:0;transition:opacity .6s ease}
.ptile.playing video{opacity:1}
.ptile.playing .pposter{opacity:0}
.pposter{transition:opacity .6s ease}
.pcap{position:absolute;inset-inline-start:10px;bottom:10px;z-index:2;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sand);background:rgba(8,8,7,.55);border:1px solid var(--line);
  border-radius:999px;padding:5px 10px;pointer-events:none}
@media(prefers-reduced-motion:reduce){
  .ptile.shot:hover img{transform:none}
  .ptile video{transition:none}
}