/*
Theme Name: T Residences New Alamein
Theme URI: https://tresidencenewalamein.com
Author: TOREC Developments
Description: A bilingual, editorial landing theme for T Residences New Alamein by TOREC Developments, inland of the coastal road in New Alamein City. English is the primary site; Arabic runs at /ar/ with full RTL. The page is read by time of day, from the widest view of the community to one moment of material detail, and information density rises towards the enquiry. Prices are never published: the enquiry form is the price list. No external requests; fonts and scripts are served locally. Integrates with Rank Math when it is active and stands in for it when it is not.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
Tags: one-column, custom-logo, rtl-language-support, translation-ready, block-styles
Text Domain: t-residences-new-alamein
*/

/* ============================================================
   1. TOKENS
   Warm, not white. A museum ground carried into a coastal
   light: shell and sand rather than paper, and a soft green
   charcoal instead of black, so the calm never reads as cold.
   ============================================================ */
:root{
  /* Third ground, and a decisive change of family rather than another step
     along the same beige. The site now sits on the cool slate of the render
     skies and the render shadows, and the footer is graphite rather than the
     navy or the teal of the last builds. Terracotta stays: it is the only
     colour the buildings themselves actually carry. */
  --paper:#D7DDE0;
  --paper-2:#C6CFD4;
  --paper-3:#B2BEC5;
  --ink:#1B2126;
  --ink-2:#232A31;
  --muted:#3D4750;
  --accent:#8E3F26;
  --accent-ink:#742F17;
  --sea:#3F6484;
  --warm:#C4693F;
  --deep:#171B1F;
  --line:rgba(27,33,38,.18);
  --hair:rgba(27,33,38,.10);
  --line-inv:rgba(215,221,224,.24);
  --white:#fff;

  --serif:"TR Display","Hoefler Text","Iowan Old Style","Sitka Display",Constantia,Charter,"Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:"TR Sans","Avenir Next",Avenir,"Segoe UI Variable Text","Segoe UI",Inter,ui-sans-serif,-apple-system,system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
  /* Arabic is not an afterthought on a Latin stack. These are faces already
     present on iOS, macOS, Windows and Android, so nothing is downloaded, and
     "PN Arabic" sits first so a licensed brand face takes over the moment its
     WOFF2 is dropped into assets/fonts. */
  /* Arabic first for an Arabic market: the brand face if it is installed,
     then the best face each platform actually ships. */
  --ar-display:"TR Arabic Display","SF Arabic","Dubai","IBM Plex Sans Arabic","Noto Sans Arabic","Segoe UI","Noto Naskh Arabic",sans-serif;
  --ar-sans:"TR Arabic","SF Arabic","Dubai","IBM Plex Sans Arabic","Noto Sans Arabic","Segoe UI",Tahoma,sans-serif;
  --num:"Manrope","Work Sans","Avenir Next",Avenir,"Segoe UI Variable Text","Segoe UI",Inter,ui-sans-serif,system-ui,Arial,sans-serif;

  /* Five steps, each clearly apart from the next. Calm is not flatness:
     the reader still has to know where a room begins. */
  --t1:clamp(2.2rem,5.2vw,4.2rem);    /* the name           */
  --t2:clamp(1.5rem,2.6vw,2.3rem);    /* room title         */
  --t3:clamp(1.14rem,1.5vw,1.42rem); /* work title, lede   */
  --t4:1.02rem;                     /* body               */
  --t5:.68rem;                      /* card label, caption */
  --t3b:clamp(1.06rem,1.25vw,1.2rem); /* standfirst under a heading */
  --t-index:var(--t5);              /* contents caption: the label step */

  --s1:.45rem; --s2:.8rem; --s3:1.25rem; --s4:2rem;
  --s5:clamp(1.4rem,2.2vw,2rem);
  --s6:clamp(1.7rem,2.6vw,2.4rem);
  --s7:clamp(2rem,3.2vw,3rem);
  --s8:clamp(2.4rem,3.8vw,3.6rem);

  --gutter:clamp(1.35rem,5vw,5rem);
  --frame:1640px;
  --caption:38%;          /* the line every card and label hangs from */
  --rule:1px;
  --slow:1.6s;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   2. BASE
   ============================================================ */
*,*::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);
  /* iPhone: keep content out of the notch and the home indicator */
  padding-inline:env(safe-area-inset-left) env(safe-area-inset-right);
  font-family:var(--sans);font-size:var(--t4);line-height:1.78;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video{max-width:100%;display:block;height:auto;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{margin:0;font-weight:400;line-height:1.08;letter-spacing:-.018em;}
p{margin:0;}
ol,ul,dl,dd{margin:0;padding:0;} li{list-style:none;}
button,input,select,textarea{font:inherit;color:inherit;}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px;}
.room--warm :focus-visible,.room--plan :focus-visible{outline-color:var(--paper);}
.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}
.skip:focus{width:auto;height:auto;clip:auto;clip-path:none;inset-inline-start:var(--gutter);top:.6rem;z-index:200;background:var(--ink);color:var(--paper);padding:.9rem 1.4rem;}
.fig,.ledger__v,.terms dd b,.reckon dd{
  font-family:var(--num);font-variant-numeric:tabular-nums lining-nums;letter-spacing:0;
}

/* ============================================================
   3. THE CAPTION LINE
   There is no twelve column grid. Everything hangs from one
   line at 38% of the frame, the way a wall card sits beside
   the work rather than under it.
   ============================================================ */
.frame{width:100%;max-width:var(--frame);margin-inline:auto;padding-inline:var(--gutter);}
.room{padding-block:var(--s7);position:relative;}
/* The masthead is 85px and becomes sticky on scroll. Without this, every
   link in the contents lands the reader underneath it. */
section[id]{scroll-margin-top:100px;}
.room--open{padding-block:var(--s8) var(--s7);}
.room--gallery{padding-block:var(--s7) var(--s6);}
.room--warm{background:var(--paper-2);}
.room--plan{background:var(--deep);color:var(--paper);}
.room--plan .prose,.room--plan .lede{color:rgba(215,221,224,.76);}
.room--plan .room__name{color:rgba(215,221,224,.55);}
.room--read{background:var(--paper-2);padding-block:var(--s6) var(--s6);}
/* 244px is the rhythm between rooms. These two were 172 and 280, which is a
   stumble rather than a phrase. */
.room--gallery+.room--read{padding-top:var(--s7);}
.room--open+.room--wide{padding-top:var(--s6);}
/* A room that holds nothing but pictures needs no side margin at all. */
.room--folio{padding-block:var(--s7) var(--s8);}
.room--office{padding-block:var(--s8);}
.room--wide{padding-block:var(--s8) var(--s7);}
.key--wide{min-width:auto;}
.enquiry__say{position:relative;}
.pn-form{position:relative;}

/* ============================================================
   4. TYPOGRAPHY
   ============================================================ */
.room__name{
  font-family:var(--sans);font-size:var(--t5);font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;color:var(--muted);
  margin-bottom:var(--s4);
}
.arrival__line{font-size:var(--t3b);line-height:1.7;color:var(--ink);}
.h-wall{font-family:var(--serif);font-size:var(--t2);max-width:none;text-wrap:pretty;line-height:1.08;}
.h-room{font-family:var(--serif);font-size:var(--t2);max-width:none;text-wrap:pretty;line-height:1.08;}
.lede{
  font-family:var(--serif);font-size:var(--t3);line-height:1.42;
  color:var(--ink);margin-top:var(--s4);text-wrap:pretty;
}
/* The paragraph that follows a heading is the one a reader actually reads on
   a phone. It was set at body size and read as a caption; it now has a step
   of its own between body and work title. */
.prose,.card__note,.tally__item p,.ledger__d,.faq__a p{font-size:var(--t3b);line-height:1.78;color:var(--ink);}
.tally__item p,.card__note{line-height:1.7;}
.prose{max-width:76ch;margin-top:var(--s3);color:var(--muted);text-wrap:pretty;}
.rubric{
  font-size:.86rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-top:var(--s5);padding-bottom:var(--s2);
  border-bottom:var(--rule) solid var(--line);
}
.cap{
  margin-top:var(--s2);font-size:var(--t5);letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);
}
/* The heading is first in the source and the label is painted above it, so a
   crawler and a screen reader both meet the heading before the kicker. */
.wall{max-width:none;display:flex;flex-direction:column;}
.wall .room__name{order:-1;}
@media (min-width:1024px){
  .wall .h-wall,.wall .h-room{max-width:none;margin-bottom:var(--s4);}
  .wall .lede{max-width:64ch;margin-top:0;}
  .wall .prose{max-width:76ch;margin-top:var(--s3);}
}

/* ============================================================
   5. BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:.9rem 2.1rem;
  background:var(--accent);color:var(--paper);border:var(--rule) solid var(--accent);
  font-size:var(--t5);font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  cursor:pointer;transition:background var(--slow) var(--ease),border-color var(--slow) var(--ease);
}
.btn:hover{background:var(--accent-ink);border-color:var(--accent-ink);}
/* The enquiry is the only action that carries the brand colour. Everything
   else is an outline, so the eye has one place to land. */
.btn--send,
.ask .btn,
.folio__acts .btn:not(.btn--line),
.arrival__acts .btn:not(.btn--quiet){
  background:var(--accent);color:var(--paper);border-color:var(--accent);
}
.btn--send:hover,
.ask .btn:hover,
.folio__acts .btn:not(.btn--line):hover,
.arrival__acts .btn:not(.btn--quiet):hover{
  background:var(--accent-ink);border-color:var(--accent-ink);color:var(--paper);
}
.btn--quiet{background:transparent;color:var(--muted);border-color:var(--line);}
.btn--quiet:hover{background:transparent;border-color:var(--ink);color:var(--ink);}
.btn--line{background:transparent;color:var(--ink);border-color:var(--line);}
.btn--line:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.btn--send{width:100%;margin-top:var(--s5);}
.room--plan .key{border-color:var(--line-inv);color:var(--paper);}

.key{
  min-height:44px;min-width:44px;padding:.6rem 1.1rem;background:transparent;
  border:var(--rule) solid currentColor;color:inherit;cursor:pointer;
  font-size:var(--t5);letter-spacing:.18em;text-transform:uppercase;
  transition:background var(--slow) var(--ease);
}
.key:hover{background:rgba(251,246,240,.12);}

/* ============================================================
   7. ARRIVAL
   Type on the ground, the photograph directly beneath it and
   inside the same screen. Nothing sits on top of anything.
   ============================================================ */
.arrival,.hero{
  min-height:94svh;display:grid;grid-template-rows:auto 1fr;
  align-content:start;padding-top:var(--s4);
}
.arrival__type{
  width:100%;max-width:var(--frame);margin-inline:auto;
  padding-inline:var(--gutter);padding-bottom:0;
}
.wordmark{font-family:var(--serif);font-size:var(--t1);line-height:.94;letter-spacing:-.035em;}
.wordmark__a{display:block;}
.wordmark__b{
  display:block;font-family:var(--sans);font-size:.26em;font-weight:600;
  letter-spacing:.4em;text-transform:uppercase;line-height:1;
  margin-top:.75em;padding-top:.8em;border-top:var(--rule) solid var(--line);
  max-width:15em;color:var(--ink);
}
.arrival__line{
  font-family:var(--serif);font-size:var(--t3);line-height:1.45;
  max-width:none;margin-top:var(--s3);color:var(--ink-2);
}
.arrival__acts{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4);}
/* A picture pressed against a button reads as a background. The pause is
   what lets it be read as a photograph. */
.arrival__plate{margin:var(--s4) 0 0;align-self:end;overflow:hidden;}
.arrival__plate img{width:100%;height:auto;}
.arrival__plate .cap{
  width:100%;max-width:var(--frame);margin-inline:auto;padding-inline:var(--gutter);
}
@media (min-width:1024px){
  .arrival{grid-template-rows:auto auto;align-content:space-between;}
  /* Capping the height turned a 1.78 picture into a 3.08 letterbox, which is
     not a gentle crop. Hanging the plate from the caption line instead keeps
     the whole frame and still puts it inside the first screen. */
  /* Full width, at its own proportions. The fold cuts it, which is an
     invitation to scroll rather than a crop of the photograph. */
  .arrival__plate{width:100%;}
  .arrival__plate img{width:100%;}
}

.broad{
  margin:0 calc(var(--gutter) * -1) var(--s6);
  overflow:hidden;
}
.broad img{width:100%;height:auto;}
.room--warm .broad{margin-top:var(--s6);}
.broad--after{margin-top:var(--s6);margin-bottom:0;}

/* ============================================================
   8. LEDGER
   ============================================================ */
.ledger{margin-top:var(--s6);border-top:var(--rule) solid var(--line);}
.ledger__cap{font-size:var(--t5);font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);padding-block:var(--s3);}
.ledger__row{
  display:grid;grid-template-columns:1fr auto;align-items:baseline;column-gap:var(--s4);
  padding-block:var(--s3);border-top:var(--rule) solid var(--hair);
}
.ledger__k{font-size:.96rem;}
.ledger__v{font-family:var(--serif);font-size:var(--t3);line-height:1;grid-row:span 2;}
.ledger__v i{font-style:normal;font-size:.5em;margin-inline-start:.2em;}
.ledger__n{grid-column:1;font-size:var(--t5);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
@media (min-width:1024px){
  .ledger{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--s6);border-top:var(--rule) solid var(--line);}
  .ledger__cap{grid-column:1 / -1;}
}

/* ============================================================
   9. HANGING A WORK
   The picture keeps its own proportions and is given room. The
   wall card sits beside it on the caption line, never over it.
   ============================================================ */
.hang{display:grid;gap:var(--s5);}
.hang__work{margin:0;}
.hang__shot{display:block;overflow:hidden;}
.hang__map{margin:0;}
.hang__map img{width:100%;height:auto;}
.hang__work .cap{margin-bottom:var(--s5);}
.hang__work img{width:100%;height:auto;}
.card{position:relative;display:flex;flex-direction:column;}
.card .room__name{margin-bottom:var(--s3);order:-1;}
.hang--textonly{max-width:74ch;}
@media (min-width:1024px){
  .hang{grid-template-columns:1fr;row-gap:var(--s5);}
  .card{max-width:none;}
  .card .lede{max-width:64ch;}
  .card .prose{max-width:76ch;}
  .card .reckon{columns:2;column-gap:var(--s6);}
}
.reckon{margin-top:var(--s3);}
.reckon dt{padding-top:var(--s3);font-size:.96rem;}
.reckon dd{margin:0;padding-bottom:var(--s3);border-bottom:var(--rule) solid var(--hair);
  font-size:var(--t5);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}

/* ============================================================
   10. TALLY
   ============================================================ */
.tally{margin-top:var(--s6);counter-reset:tally;}
.tally__item{counter-increment:tally;padding-block:var(--s4);border-top:var(--rule) solid var(--line);display:grid;gap:var(--s2);}
.tally__item::before{content:counter(tally,decimal-leading-zero);font-family:var(--num);font-size:var(--t5);letter-spacing:.2em;color:var(--warm);}
.tally__item h3{font-family:var(--serif);font-size:var(--t3);}
.tally__item p{color:var(--muted);max-width:70ch;text-wrap:pretty;}
@media (min-width:1024px){
  .tally{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--s6);}
  .tally__item{grid-template-columns:3rem 1fr;align-items:start;}
  .tally__item::before{grid-row:span 2;padding-top:.4rem;}
  .tally__item p{grid-column:2;}
}

/* ============================================================
   11. RAILS
   One shape for every run of things: gallery plates and unit
   cards. Same frame, same gap, same controls, one size.
   ============================================================ */
.rail{position:relative;margin-top:var(--s6);}
.rail__track{
  display:flex;gap:var(--s3);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scroll-padding-inline:0;
  padding-bottom:var(--s3);
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
}
.rail__track.is-dragging{scroll-snap-type:none;cursor:grabbing;}
.rail__track:focus-visible{outline-offset:6px;}
.rail__keys{display:flex;gap:.5rem;margin-top:var(--s3);}
.rail__foot{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s3);margin-top:var(--s3);flex-wrap:wrap;
}
.rail__foot .rail__keys{margin-top:0;}
.rail__foot .rail__hint{margin:0;}
.rail__key{
  width:52px;height:52px;display:grid;place-items:center;
  background:none;border:var(--rule) solid var(--line);color:var(--ink);
  cursor:pointer;transition:background var(--slow) var(--ease),color var(--slow) var(--ease);
}
.rail__key:hover:not(:disabled){background:var(--ink);color:var(--paper);}
.rail__key:disabled{opacity:.3;cursor:default;}
[dir="rtl"] .rail__key svg{transform:scaleX(-1);}

/* every plate the same frame */
/* ------------------------------------------------ the gallery
   One proportion, one size, wide gaps, no scrollbar. The pictures are the
   largest thing in the room and the run is pushed rather than clicked. */
.rail__track--gallery{
  gap:clamp(24px,4vw,48px);
  scrollbar-width:none;
  -ms-overflow-style:none;
  cursor:grab;
}
.rail__track--gallery::-webkit-scrollbar{display:none;}
.rail__track--gallery.is-dragging{cursor:grabbing;}
.rail__track img{-webkit-user-drag:none;user-select:none;}
.plate{margin:0;flex:0 0 clamp(280px,82vw,680px);scroll-snap-align:start;}
.plate img{
  width:100%;aspect-ratio:3/2;object-fit:cover;object-position:50% 45%;
  transition:transform .8s var(--ease);
}
@media (hover:hover){
  .plate:hover img{transform:translateY(-6px) scale(1.02);}
}
@media (min-width:700px){
  .plate{flex-basis:clamp(560px,46vw,680px);}
}
.rail__hint{
  display:flex;align-items:center;justify-content:center;gap:.9rem;
  margin-top:var(--s4);
  font-size:var(--t5);letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
}
.rail__hint span{font-family:var(--sans);opacity:.6;}
@media (prefers-reduced-motion:reduce){.plate img{transition:none;}}

/* every unit card the same frame, picture then figures then actions */
.unit{
  flex:0 0 84%;scroll-snap-align:start;
  display:flex;flex-direction:column;
  background:var(--paper);
  border:var(--rule) solid var(--line);
}
.room--warm .unit,.room--read .unit{background:var(--paper);}
.unit__media img{width:100%;aspect-ratio:3/2;object-fit:cover;}
.unit__name{
  font-family:var(--serif);font-size:var(--t3);
  padding:var(--s3) var(--s4) 0;
}
.unit .spec{margin:var(--s3) var(--s4) 0;border-top:var(--rule) solid var(--line);}
.unit .spec>div{padding-block:.4rem;}
.unit .spec dt{font-size:.66rem;}
.unit .spec .fig{font-size:1.2rem;}
.unit__acts{display:flex;flex-wrap:wrap;gap:.5rem;padding:var(--s3) var(--s4) var(--s4);margin-top:auto;}
.unit__acts .btn{flex:1 1 auto;min-height:46px;padding:.7rem 1rem;font-size:.66rem;}

@media (min-width:700px){
  .unit{flex-basis:calc((100% - var(--s3)) / 2);}
}
@media (min-width:1100px){
  .unit{flex-basis:calc((100% - var(--s3) * 2) / 3);}
}

.gal-slider{width:100%;}

.lightbox{border:0;padding:0;max-width:min(1180px,94vw);width:100%;background:var(--paper);color:var(--ink);}
.lightbox::backdrop{background:rgba(23,35,31,.86);}
.lightbox__bar{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:var(--s3) var(--s4);border-bottom:var(--rule) solid var(--line);
}
.lightbox__bar h3{font-family:var(--serif);font-size:var(--t3);}
.lightbox img{width:100%;}
.lightbox__detail{padding:var(--s4);}
.lightbox__detail .spec{margin-top:0;}
@media (min-width:900px){
  .lightbox__detail{display:grid;grid-template-columns:repeat(3,1fr);gap:0 var(--s5);padding:var(--s4) var(--s5) var(--s5);}
  .lightbox__detail .spec{border-top:0;display:contents;}
  .lightbox__detail .spec>div{display:grid;gap:.3rem;padding-block:var(--s3);
    border-top:var(--rule) solid var(--line);border-bottom:0;}
  .lightbox__detail .spec dd{text-align:start;}
}

/* ============================================================
   12. THE PLAN
   ============================================================ */
.plan{margin-top:var(--s6);}
/* At rest the drawing lets a vertical swipe through to the page: this section
   sits between the reader and the enquiry form, and swallowing the scroll
   stranded them on it. Once zoomed the plan owns the gesture again so it can
   be panned. */
.plan__stage{position:relative;overflow:hidden;background:#0E1A17;cursor:grab;touch-action:pan-y;}
.plan__stage.is-zoomed{touch-action:none;}
.plan__stage.is-dragging{cursor:grabbing;}
.plan__stage.is-zoomed{cursor:grab;}
.plan__stage:not(.is-zoomed){cursor:zoom-in;}
.plan__stage.is-zoomed{cursor:grab;}
.plan__stage img{-webkit-user-drag:none;user-select:none;}
.plan__inner{position:relative;transform-origin:50% 50%;transition:transform 1.1s var(--ease);will-change:transform;}
.plan__inner.is-live{transition:none;}
.plan__inner img{display:block;width:100%;height:auto;}
.pin{position:absolute;transform:translate(-50%,-50%);}
.pin__n{
  width:30px;height:30px;display:grid;place-items:center;border-radius:50%;
  background:var(--paper);color:var(--deep);
  font-family:var(--num);font-size:.78rem;font-weight:600;
  box-shadow:0 0 0 5px rgba(251,246,240,.24);
}

.plan__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3);padding-top:var(--s3);}
.plan__hint{font-size:var(--t5);letter-spacing:.1em;color:rgba(251,246,240,.56);}
.plan__keys{display:flex;gap:.4rem;}
@media (min-width:900px){
  /* The plan is a portrait drawing. It keeps its own shape and the legend
     stands beside it rather than under a very tall column. */
  .plan{display:grid;grid-template-columns:minmax(0,1.15fr) 1fr;column-gap:var(--s6);align-items:start;}
  .plan__stage{grid-column:1;grid-row:1 / 3;}
  .legend{grid-column:2;grid-row:1;margin-top:0;grid-template-columns:1fr;}
  .plan__bar{grid-column:2;grid-row:2;}
}

.legend{display:grid;gap:0;margin-top:var(--s4);counter-reset:legend;}
.legend__row{
  counter-increment:legend;
  display:grid;grid-template-columns:2.2rem 1fr;gap:.2rem var(--s3);
  padding-block:var(--s3);border-top:var(--rule) solid var(--line-inv);
}
.legend__row::before{
  content:counter(legend);grid-row:span 2;
  font-family:var(--num);font-size:.78rem;font-weight:600;color:var(--sea);padding-top:.15rem;
}
.legend__t{font-family:var(--serif);font-size:1.05rem;font-weight:400;}
.legend__d{font-size:.88rem;color:rgba(251,246,240,.66);}
@media (min-width:900px){.legend{grid-template-columns:1fr 1fr;column-gap:var(--s6);}}

/* ============================================================
   13. COLLECTIONS
   ============================================================ */
.collection{
  display:grid;gap:var(--s2);margin-top:var(--s7);padding-bottom:var(--s4);
  border-bottom:var(--rule) solid var(--line);counter-increment:collection;
}
.room{counter-reset:collection;}
.collection__t{font-family:var(--serif);font-size:var(--t2);}
.collection__t::before{
  content:counter(collection,decimal-leading-zero);display:block;
  font-family:var(--num);font-size:var(--t5);letter-spacing:.24em;color:var(--warm);margin-bottom:var(--s2);
}
.collection__d{color:var(--muted);max-width:76ch;text-wrap:pretty;}
.ask{
  display:grid;gap:var(--s3);justify-items:start;
  margin-top:var(--s6);padding-top:var(--s5);border-top:var(--rule) solid var(--line);
}
.ask__t{font-family:var(--serif);font-size:var(--t2);text-wrap:pretty;}
@media (min-width:900px){
  .ask{grid-template-columns:1fr auto;align-items:center;gap:var(--s5);}
}


/* ============================================================
   14. THE FILM
   ============================================================ */
.reel{position:relative;margin-top:var(--s6);background:var(--deep);}
/* The supplied film is a 720x1280 vertical cut and no landscape master exists.
   The stage is 16:9 regardless, and the film is covered into it from its own
   centre rather than stretched: the frames were checked end to end and every
   burnt in caption, the script signature and the TOREC end card all sit inside
   the centred 16:9 band. The film file is untouched, so the VideoObject that
   is parsed out of it stays true.

   The cap is 960px. The source is 720px wide, so anything wider than this is
   visibly soft, and anything narrower wastes the section.

   Both class names are styled: reel--wide is what the theme renders now, and
   reel--portrait is what a page built by an earlier version has stored in its
   Custom HTML block. Rebuilding the pages is optional, not required.

   Base rule first, modifier second. The two carry the same specificity, so
   source order is what decides, and with the base written last height:auto won
   and the film escaped the stage at its own 9:16 shape, clipped from the top by
   overflow:hidden. That crop showed the logo lockup instead of the picture. */
.reel video{width:100%;height:auto;display:block;}
.reel--portrait,
.reel--wide{
  max-width:min(100%,960px);margin-inline:auto;
  aspect-ratio:16/9;overflow:hidden;
}
.reel--portrait video,
.reel--wide video{
  position:absolute;inset:0;
  width:100%;height:100%;display:block;
  object-fit:cover;object-position:50% 50%;background:var(--deep);
}
/* Without JavaScript the cover button stays in flow and would sit under an
   absolutely positioned film, so the film goes back into the flow with it. */
html:not(.js) .reel--portrait video,
html:not(.js) .reel--wide video{position:static;}
.reel--portrait .reel__cover img,
.reel--wide .reel__cover img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;}
.reel__cover{position:static;width:100%;padding:0;border:0;background:none;cursor:pointer;}
.js .reel__cover{position:absolute;inset:0;}
html:not(.js) .reel video{display:block;}
.reel__cover img{width:100%;height:100%;object-fit:cover;}
.reel__cover.is-gone{display:none;}
.reel__blocked{
  position:absolute;left:50%;bottom:12%;transform:translateX(-50%);
  width:min(84%,34ch);text-align:center;
  background:rgba(23,27,31,.88);color:var(--paper);
  font-family:var(--sans);font-size:.9rem;line-height:1.5;
  padding:.7rem .9rem;border-radius:2px;
}
.reel__go{position:absolute;inset-inline-start:50%;top:50%;transform:translate(-50%,-50%);
  width:76px;height:76px;display:grid;place-items:center;border-radius:50%;
  background:rgba(251,246,240,.92);color:var(--deep);transition:opacity var(--slow) var(--ease);}
[dir="rtl"] .reel__go{transform:translate(50%,-50%);}
@media (max-width:620px){
  .reel__go{width:56px;height:56px;}
  .reel__blocked{bottom:8%;font-size:.82rem;}
}

/* ============================================================
   15. TERMS
   ============================================================ */
.terms{margin-top:var(--s5);}
.terms>div{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);
  padding-block:var(--s4);border-top:var(--rule) solid var(--line);}
.terms dt{font-size:var(--t5);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);}
.terms dd{margin:0;font-family:var(--serif);font-size:var(--t2);line-height:1;}
.terms dd i{font-style:normal;font-size:.42em;margin-inline-start:.1em;}
.ledgerwall{display:grid;gap:var(--s5);}
@media (min-width:1024px){
  .ledgerwall{grid-template-columns:1fr 1fr;column-gap:var(--s6);align-items:start;}
  .card--plain{grid-column:1 / -1;}
  .card--plain .prose{max-width:none;}
  .terms{grid-column:1 / -1;margin-top:var(--s5);}
}

/* ============================================================
   16. THE OFFICE
   ============================================================ */
.enquiry{display:grid;gap:var(--s6);}
.direct{display:flex;flex-wrap:wrap;gap:var(--s4);margin-top:var(--s5);}
.direct a{min-height:44px;min-width:44px;display:inline-flex;align-items:center;gap:.6rem;
  font-size:var(--t5);letter-spacing:.16em;text-transform:uppercase;
  border-bottom:var(--rule) solid var(--line);}
.direct a:hover{border-color:var(--ink);}
.direct__where{margin-top:var(--s4);font-size:.88rem;color:var(--muted);}
.fields{display:grid;gap:var(--s4);}
.cell{display:grid;gap:.35rem;}
.cell>span{font-size:var(--t5);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);}
.cell input,.cell select,.cell textarea,
.pn-form--plugin input[type="text"],.pn-form--plugin input[type="tel"],
.pn-form--plugin input[type="email"],.pn-form--plugin select,.pn-form--plugin textarea{
  width:100%;min-height:48px;padding:.7rem 0;background:none;color:var(--ink);
  border:0;border-bottom:var(--rule) solid var(--line);border-radius:0;
  transition:border-color var(--slow) var(--ease);
}
.cell textarea,.pn-form--plugin textarea{min-height:96px;resize:vertical;}
/* The select was the only control still wearing the operating system. The
   element stays native to the keyboard and to assistive technology; only the
   arrow is drawn, so the form reads as one piece. */
.cell select,.phone-combo__cc{
  appearance:none;-webkit-appearance:none;
  padding-inline-end:1.8rem;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-size:6px 6px,6px 6px;
  background-position:right 0.75rem center,right 0.42rem center;
  background-repeat:no-repeat;
}
[dir="rtl"] .cell select,[dir="rtl"] .phone-combo__cc{
  padding-inline-end:1.8rem;
  background-position:left 0.42rem center,left 0.75rem center;
  background-image:linear-gradient(135deg,transparent 50%,currentColor 50%),
                   linear-gradient(45deg,currentColor 50%,transparent 50%);
}
.cell input:focus,.cell select:focus,.cell textarea:focus{border-color:var(--accent);}
.phone-combo{display:grid;grid-template-columns:auto 1fr;gap:var(--s2);align-items:end;}
.phone-combo__cc{max-width:9.5rem;}
.agree{display:flex;align-items:flex-start;gap:.7rem;font-size:.88rem;color:var(--muted);}
.agree input{width:20px;height:20px;flex:0 0 20px;margin-top:.35rem;accent-color:var(--accent);}
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}
.form-msg{margin-top:var(--s3);font-size:.9rem;min-height:1.4em;}
.form-msg.is-ok{color:var(--accent-ink);} .form-msg.is-err{color:#9c3220;}
.pn-form--plugin input[type="submit"],.pn-form--plugin button[type="submit"]{
  min-height:52px;padding:.9rem 2rem;background:transparent;color:var(--ink);
  border:var(--rule) solid var(--ink);cursor:pointer;letter-spacing:.18em;text-transform:uppercase;}
@media (min-width:1024px){
  .enquiry{grid-template-columns:1fr 1fr;column-gap:var(--s6);align-items:start;}
  .enquiry__say{grid-column:1 / -1;}
  .pn-form{grid-column:1 / -1;}
  .enquiry__say .h-wall{margin-bottom:var(--s4);}
  .fields{grid-template-columns:1fr 1fr;column-gap:var(--s4);}
  .cell--wide,.agree{grid-column:1 / -1;}
}

/* ============================================================
   17. FAQ
   ============================================================ */
.faq{margin-top:var(--s5);border-top:var(--rule) solid var(--line);counter-reset:faq;}
.faq__item{border-bottom:var(--rule) solid var(--hair);counter-increment:faq;}
.faq summary{display:flex;gap:var(--s4);align-items:baseline;cursor:pointer;list-style:none;
  padding-block:var(--s4);font-family:var(--serif);font-size:var(--t3);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::before{content:counter(faq,decimal-leading-zero);font-family:var(--num);
  font-size:var(--t5);letter-spacing:.2em;color:var(--warm);flex:0 0 2.2rem;line-height:2.4;}
.faq__a{padding:0 0 var(--s4) calc(2.2rem + var(--s4));}
[dir="rtl"] .faq__a{padding:0 calc(2.2rem + var(--s4)) var(--s4) 0;}
.faq__a p{color:var(--muted);max-width:82ch;text-wrap:pretty;}
.faq__item[open] summary{color:var(--accent-ink);}
@media (min-width:1024px){
  .faq{max-width:none;}
}

/* ============================================================
   19. FALLBACK PAGES
   ============================================================ */
.section{padding-block:var(--s7);}
.prose h1{font-family:var(--serif);font-size:var(--t2);max-width:20ch;}
.prose__body{max-width:64ch;margin-top:var(--s4);color:var(--muted);}
.prose__cta{margin-top:var(--s5);}
.prose__nav{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5);padding-top:var(--s3);
  border-top:var(--rule) solid var(--line);}
.prose__nav a{min-height:44px;min-width:44px;display:inline-flex;align-items:center;
  font-size:var(--t5);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
.label{display:block;font-size:var(--t5);font-weight:600;letter-spacing:.28em;
  text-transform:uppercase;color:var(--muted);margin-bottom:var(--s3);}

/* ============================================================
   20. MOTION
   Almost none. Light comes up over one and a half seconds and
   nothing slides. Two full width plates drift a little as the
   page moves, which is the only movement on the site.
   ============================================================ */
.js .reveal{opacity:0;}
.js .reveal.is-in{opacity:1;transition:opacity var(--slow) var(--ease);}
.reveal-d1.is-in{transition-delay:.2s;}
[data-drift]{overflow:hidden;}
[data-drift] img{will-change:transform;}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;}
  [data-drift] img{transform:none!important;}
  .plan__inner,.btn,.key{transition:none!important;}
}

/* ============================================================
   6. MASTHEAD
   Set like a publication's masthead: a hairline, the mark
   centred beneath it, and the two controls out in the margins.
   The section list is not here; it opens as a full page index.
   ============================================================ */
.masthead{
  position:relative;z-index:90;
  padding-top:calc(var(--s3) + env(safe-area-inset-top));
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:var(--s3);padding:var(--s3) var(--gutter);
  background:var(--paper);border-bottom:var(--rule) solid var(--hair);
}
.masthead__mark{justify-self:center;display:inline-flex;align-items:center;min-height:44px;line-height:0;}
.masthead__index-t{display:inline-block;}
.logo__by{font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-inline-start:.5rem;}
.masthead__mark img{height:30px;width:auto;}
.masthead__lang{
  justify-self:start;min-height:44px;display:inline-flex;align-items:center;
  font-family:var(--sans);font-size:.86rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
  border:var(--rule) solid var(--line);border-radius:2px;padding:.5rem .95rem;
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.masthead__lang:hover,.masthead__lang:focus-visible{
  background:var(--paper-2);border-color:var(--ink);color:var(--ink);
}
/* The switcher shows the OTHER language, so it is sized by its own lang
   attribute rather than by the direction of the page it sits on. */
.masthead__lang[lang="ar"]{text-transform:none;letter-spacing:.02em;font-size:.95rem;}
.masthead__lang:hover{color:var(--ink);}
/* Both controls in the masthead were set at .66rem, which is smaller than any
   other text on the page and read as fine print rather than as the two things
   a visitor is meant to press. They are larger now, and the contents toggle is
   drawn as a bordered control so it looks pressable rather than decorative. */
.masthead__index{
  justify-self:end;min-height:44px;
  display:inline-flex;align-items:center;gap:.7rem;
  background:none;cursor:pointer;
  border:var(--rule) solid var(--line);border-radius:2px;
  padding:.5rem .95rem;
  font-family:var(--sans);font-size:.86rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink);
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.masthead__index:hover,.masthead__index:focus-visible{
  background:var(--paper-2);border-color:var(--ink);
}
.masthead__index-r{
  display:block;width:22px;height:2px;background:currentColor;
  box-shadow:0 6px 0 currentColor,0 -6px 0 currentColor;
  transition:box-shadow .4s var(--ease);
}
.masthead__index[aria-expanded="true"] .masthead__index-r{box-shadow:0 0 0 currentColor;}
.masthead__index:hover .masthead__index-r{box-shadow:0 8px 0 currentColor;}
.masthead.is-stuck{position:sticky;top:0;}
@media (min-width:900px){
  .masthead__mark img{height:38px;}
}

/* ------------------------------------------------ the index page */
.index-page{
  position:fixed;inset:0;z-index:100;background:var(--paper);color:var(--ink);
  display:grid;grid-template-rows:1fr auto;
  padding:var(--s7) var(--gutter) var(--s5);
  opacity:0;visibility:hidden;
  transition:opacity .6s var(--ease),visibility .6s;
}
.index-page.is-open{opacity:1;visibility:visible;}
.index-page__inner{align-self:center;width:100%;max-width:var(--frame);margin-inline:auto;}
.index-page__cap{
  font-size:var(--t-index);font-weight:600;letter-spacing:.34em;text-transform:uppercase;
  color:var(--muted);padding-bottom:var(--s3);border-bottom:var(--rule) solid var(--line);
}
.index-page__list{display:flex;flex-direction:column;counter-reset:idx;}
.index-page__list a{
  counter-increment:idx;
  display:grid;grid-template-columns:3.4rem 1fr;align-items:baseline;
  min-height:56px;padding-block:var(--s2);
  border-bottom:var(--rule) solid var(--hair);
  transition:color .5s var(--ease);
}
.index-page__list a:hover{color:var(--accent-ink);}
.index-page__list a::before{content:counter(idx,decimal-leading-zero);
  font-family:var(--num);font-size:.66rem;letter-spacing:.2em;color:var(--accent);}
.index-page__list a{font-family:var(--serif);font-size:clamp(1.4rem,3.6vw,2.4rem);line-height:1.1;}
.index-page__lang{
  display:inline-flex;align-items:center;min-height:44px;min-width:44px;margin-top:var(--s4);
  font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);
}
.index-page__close{
  position:absolute;top:var(--s4);inset-inline-end:var(--gutter);
  width:52px;height:52px;display:grid;place-items:center;
  background:none;border:var(--rule) solid var(--line);color:var(--ink);
  cursor:pointer;transition:background var(--slow) var(--ease),color var(--slow) var(--ease);
}
.index-page__close:hover{background:var(--ink);color:var(--paper);}
@media (min-width:900px){
  .index-page__list{
    display:grid;grid-template-columns:1fr 1fr;column-gap:var(--s7);
  }
}

/* ============================================================
   18. COLOPHON
   The page ends the way a publication ends: the mark set large,
   one line of imprint, the contents once across the width, and
   the legal line last. No column grid, no icon row.
   ============================================================ */
.colophon{background:var(--deep);color:var(--paper);padding-block:var(--s5) var(--s4);}
.colophon__mark{display:block;}
.colophon__mark img{height:clamp(38px,4.6vw,54px);width:auto;}
.colophon__mark .logo__by{color:rgba(215,221,224,.55);}
.colophon__mark .logo__name{font-family:var(--serif);font-size:clamp(2rem,6vw,3.4rem);}
.colophon__imprint{
  margin-top:var(--s3);max-width:60ch;
  font-family:var(--serif);font-size:1rem;line-height:1.5;
  color:rgba(255,248,243,.8);
}
.colophon__contents{
  display:flex;flex-wrap:wrap;gap:0 var(--s5);
  margin-top:var(--s6);padding-top:var(--s3);
  border-top:var(--rule) solid var(--line-inv);
}
.colophon__contents a{
  min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,248,243,.66);transition:color .5s var(--ease);
}
.colophon__contents a:hover{color:var(--paper);}
.colophon__reach{display:flex;gap:.5rem;margin-top:var(--s4);}
.reach{
  width:52px;height:52px;display:grid;place-items:center;
  border:var(--rule) solid var(--line-inv);color:var(--paper);
  transition:background .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease);
}
.reach:hover{background:var(--paper);color:var(--deep);border-color:var(--paper);}
.reach--wa:hover{background:#25D366;color:#fff;border-color:#25D366;}
.colophon__social{display:flex;gap:.5rem;margin-top:var(--s3);}
.colophon__social a{
  width:44px;height:44px;display:grid;place-items:center;
  border:var(--rule) solid var(--line-inv);color:var(--paper);
}
.colophon__social a:hover{background:var(--paper);color:var(--deep);}
.colophon__legal{
  margin-top:var(--s4);padding-top:var(--s3);
  border-top:var(--rule) solid var(--line-inv);
  font-size:.72rem;color:rgba(255,248,243,.46);
}
@media (min-width:1024px){
  .colophon .frame{
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) auto;
    column-gap:var(--s6);row-gap:var(--s4);align-items:start;
  }
  .colophon__mark{grid-column:1;grid-row:1;}
  .colophon__imprint{grid-column:1 / 3;grid-row:2;max-width:64ch;margin-top:var(--s3);}
  .colophon__reach{grid-column:3;grid-row:1;justify-self:end;align-self:center;margin-top:0;}
  .colophon__social{grid-column:3;grid-row:2;justify-self:end;margin-top:0;}
  .colophon__legal{grid-column:1 / -1;}
}

/* ------------------------------------------------ one standing action */
.standing{display:none;}
@media (min-width:901px){
  .standing{
    display:flex;flex-direction:column;gap:.55rem;
    position:fixed;inset-inline-end:var(--s3);top:50%;z-index:80;
    transform:translateY(-50%);
    background:none;border:0;box-shadow:none;
    transition:transform var(--slow) var(--ease),opacity var(--slow) var(--ease);
  }
  .standing.is-away{opacity:0;transform:translateY(-50%) translateX(100%);pointer-events:none;}
  [dir="rtl"] .standing.is-away{transform:translateY(-50%) translateX(-100%);}
  /* Three marks of equal weight. None of them outranks the others. */
  .standing a{
    width:56px;height:56px;display:grid;place-items:center;
    font-size:0;line-height:0;overflow:hidden;
    color:var(--paper);background:var(--accent);
    border:0;border-radius:50%;
    box-shadow:0 10px 26px -14px rgba(23,35,31,.7);
    transition:background var(--slow) var(--ease);
  }

  .standing a:hover{background:var(--accent-ink);}
}
.dock{
  position:fixed;inset-inline:0;bottom:0;z-index:80;
  padding-bottom:env(safe-area-inset-bottom);
  display:grid;grid-template-columns:repeat(3,1fr);
  background:var(--accent);
  border-top:0;
  box-shadow:0 -14px 34px -26px rgba(23,35,31,.5);
  transition:transform var(--slow) var(--ease);
}
.dock.is-away{transform:translateY(100%);}
.burger{color:inherit;}
.dock__call,.dock__wa,.dock__go,.standing__act,.cta-rail__wa{color:inherit;}
.dock a{
  min-height:62px;display:flex;align-items:center;justify-content:center;
  color:var(--paper);background:none;
  border-inline-end:var(--rule) solid rgba(251,246,240,.22);
}
.dock a:last-child{border-inline-end:0;}
.dock a:active{background:var(--accent-ink);}
@media (min-width:901px){.dock{display:none;}}
@media (max-width:900px){body{padding-bottom:calc(62px + env(safe-area-inset-bottom));}}

/* ============================================================
   21. ARABIC
   ============================================================ */
body.pn-ar{direction:rtl;}
/* Arabic takes its own faces. The numeric stack is left alone so figures stay
   tabular and line up down the page. */
[dir="rtl"] body,body.pn-ar{font-family:var(--ar-sans);}
[dir="rtl"] .wordmark,[dir="rtl"] .h-wall,[dir="rtl"] .h-room,
[dir="rtl"] .lede,[dir="rtl"] .arrival__line,[dir="rtl"] .collection__t,
[dir="rtl"] .unit__name,[dir="rtl"] .ask__t,[dir="rtl"] .faq summary,
[dir="rtl"] .legend__t,[dir="rtl"] .terms dd,[dir="rtl"] .ledger__v,
[dir="rtl"] .tally__item h3,[dir="rtl"] .lightbox__bar h3,
[dir="rtl"] .colophon__imprint,[dir="rtl"] .pin__note b{
  font-family:var(--ar-display);
}
[dir="rtl"] .room__name,[dir="rtl"] .rubric,[dir="rtl"] .cap,
[dir="rtl"] .btn,[dir="rtl"] .key,[dir="rtl"] .rail__hint,
[dir="rtl"] .cell>span,[dir="rtl"] .spec dt,[dir="rtl"] .terms dt{
  font-family:var(--ar-sans);
}
/* The Arabic page swaps both families. Figures keep the numeric face, because
   the digits are Latin and are compared against one another. */
[dir="rtl"] body,[dir="rtl"] .prose,[dir="rtl"] p,[dir="rtl"] li,
[dir="rtl"] dt,[dir="rtl"] dd,[dir="rtl"] label,[dir="rtl"] input,
[dir="rtl"] select,[dir="rtl"] textarea,[dir="rtl"] .btn,[dir="rtl"] .key,
[dir="rtl"] .room__name,[dir="rtl"] .rubric,[dir="rtl"] .cap,
[dir="rtl"] .nav a,[dir="rtl"] .rail__hint{font-family:var(--ar-sans);}
[dir="rtl"] .wordmark,[dir="rtl"] .h-wall,[dir="rtl"] .h-room,
[dir="rtl"] .lede,[dir="rtl"] .arrival__line,[dir="rtl"] .collection__t,
[dir="rtl"] .unit__name,[dir="rtl"] .ledger__v,[dir="rtl"] .terms dd,
[dir="rtl"] .faq summary,[dir="rtl"] .legend__t,[dir="rtl"] .ask__t,
[dir="rtl"] .tally__item h3,[dir="rtl"] .lightbox__bar h3,
[dir="rtl"] .colophon__imprint{font-family:var(--ar-display);}
[dir="rtl"] .fig,[dir="rtl"] .legend__row::before,
[dir="rtl"] .faq summary::before,[dir="rtl"] .pin__n{font-family:var(--num);}
/* Arabic letterforms carry their own rhythm; tracking meant for Latin caps
   pulls them apart. */
[dir="rtl"] .room__name,[dir="rtl"] .rubric,[dir="rtl"] .cap,
[dir="rtl"] .rail__hint{letter-spacing:.08em;}
[dir="rtl"] .wordmark,[dir="rtl"] .h-wall,[dir="rtl"] .h-room{letter-spacing:0;line-height:1.3;}
[dir="rtl"] .h-wall,[dir="rtl"] .h-room,[dir="rtl"] .wordmark{font-weight:500;}
[dir="rtl"] .display,[dir="rtl"] .wordmark,[dir="rtl"] h1,[dir="rtl"] h2,
[dir="rtl"] h3,[dir="rtl"] h4{letter-spacing:0;line-height:1.28;}
[dir="rtl"] .wordmark{line-height:1.02;}
[dir="rtl"] [dir="rtl"] [dir="rtl"] .lede{}
[dir="rtl"] .index,[dir="rtl"] .rubric,[dir="rtl"] .ledger__n,
[dir="rtl"] .spec dt,[dir="rtl"] .terms dt,[dir="rtl"] .cell>span{letter-spacing:.06em;}
[dir="rtl"] .wordmark__b{letter-spacing:.16em;}
[dir="rtl"] .btn,[dir="rtl"] .key,[dir="rtl"] .nav a,[dir="rtl"] .lang,
[dir="rtl"] .direct a,[dir="rtl"] .mbar a,[dir="rtl"] .cta-rail a{letter-spacing:.04em;}
/* Values that are only ever figures stay left to right. */
[dir="rtl"] .terms dd,[dir="rtl"] .phone-combo input,
[dir="rtl"] .cell input[type="email"]{
  direction:ltr;unicode-bidi:isolate;text-align:start;
}
/* These hold a figure on one row and an Arabic sentence on the next, so the
   direction is inherited and the run is isolated instead of forced. */
[dir="rtl"] .ledger__v,[dir="rtl"] .reckon dd,[dir="rtl"] .spec dd{
  unicode-bidi:isolate;text-align:start;
}
[dir="rtl"] .spec dd{text-align:end;}


/* ============================================================
   RESIDENCES AS A GRID
   Two cards per collection do not overflow a desktop rail, so the
   arrows had nothing to scroll and sat there dead. The collection
   is a grid instead: everything visible, nothing to push.
   ============================================================ */
.units{position:relative;}
.units-grid{
  display:grid;gap:var(--s4);margin-top:var(--s6);
  grid-template-columns:1fr;
}
@media (min-width:760px){ .units-grid{grid-template-columns:repeat(2,1fr);} }
@media (min-width:1240px){ .units-grid{grid-template-columns:repeat(2,1fr);gap:var(--s5);} }
.units-grid > .unit{flex:none;width:auto;max-width:none;}


/* ============================================================
   HORIZONTAL FIRST
   The house rule for this build and the ones after it: read
   across before reading down. Everything that was a stack of
   full width rows becomes a run of columns on a desktop and a
   snap rail on a phone, so a thumb moves sideways instead of
   scrolling past twelve identical bands.
   ============================================================ */

/* --- the eight figures: a row, not a list ------------------- */
.ledger__row{grid-template-columns:1fr auto;}
@media (min-width:620px){
  .ledger{display:grid;grid-template-columns:repeat(2,1fr);column-gap:var(--s5);}
  .ledger__cap{grid-column:1 / -1;}
}
@media (min-width:1100px){
  .ledger{grid-template-columns:repeat(4,1fr);column-gap:var(--s4);}
  .ledger__row{
    grid-template-columns:1fr;align-items:start;row-gap:.35rem;
    padding-block:var(--s3) var(--s4);
  }
  .ledger__v{grid-row:auto;order:-1;font-size:clamp(2rem,3vw,3rem);line-height:1;}
  .ledger__k{font-size:var(--t5);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
}

/* --- the amenities: three across, a rail on a phone --------- */
@media (max-width:759px){
  .tally{
    display:flex;gap:var(--s3);overflow-x:auto;
    scroll-snap-type:x proximity;overscroll-behavior-x:contain;
    padding-bottom:var(--s3);scrollbar-width:none;
  }
  .tally::-webkit-scrollbar{display:none;}
  .tally__item{
    flex:0 0 76%;scroll-snap-align:start;
    border-top:var(--rule) solid var(--line);
  }
}
@media (min-width:760px){
  .tally{display:grid;grid-template-columns:repeat(2,1fr);column-gap:var(--s5);}
}
@media (min-width:1100px){
  .tally{grid-template-columns:repeat(3,1fr);column-gap:var(--s5);}
}

/* --- the questions: two columns of answers ------------------ */
@media (min-width:1024px){
  .faq{columns:2;column-gap:var(--s6);}
  .faq__item{break-inside:avoid;}
}

/* --- the payment terms: a row of four ----------------------- */
@media (min-width:760px){
  .terms{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);}
  .terms>div{
    display:block;padding-block:var(--s3) var(--s4);
    border-top:var(--rule) solid var(--line);
  }
  .terms>div dt{font-size:var(--t5);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
  .terms>div dd{margin:.4rem 0 0;font-family:var(--num);font-size:clamp(1.6rem,2.4vw,2.4rem);line-height:1;}
}

/* --- picture beside its card, not above it ------------------ */
@media (min-width:1024px){
  .hang{grid-template-columns:1.15fr .85fr;column-gap:var(--s6);align-items:center;}
  .hang--textonly{grid-template-columns:1fr;max-width:78ch;}
}

/* --- the residences: a rail on a phone, a pair on a desktop -- */
@media (max-width:759px){
  .units-grid{
    display:flex;gap:var(--s3);overflow-x:auto;
    scroll-snap-type:x proximity;overscroll-behavior-x:contain;
    padding-bottom:var(--s3);scrollbar-width:none;
  }
  .units-grid::-webkit-scrollbar{display:none;}
  .units-grid > .unit{flex:0 0 82%;scroll-snap-align:start;}
}

/* --- the distances table reads across ----------------------- */
@media (min-width:760px){
  .hang__map + .card .ledger,
  #location .ledger{grid-template-columns:repeat(2,1fr);}
}
@media (min-width:1240px){
  #location .ledger{grid-template-columns:repeat(3,1fr);}
}


/* --- masthead on a narrow phone ----------------------------
   The horizontal lockup is wider than the stacked one it
   replaced, and at 390px it walked straight into the contents
   label. The mark shrinks and the word "contents" drops to its
   rule, which is what the burger already means. */
@media (max-width:600px){
  .masthead{gap:var(--s2);}
  .masthead__mark img{height:20px;max-width:34vw;object-fit:contain;object-position:center;}
  .masthead{gap:.5rem;padding-inline:calc(var(--gutter) * .7);}
  .masthead__index,.masthead__lang{padding:.36rem .5rem;font-size:.66rem;letter-spacing:.06em;}
  .masthead__index{gap:.4rem;}
  .masthead__index-r{width:18px;box-shadow:0 5px 0 currentColor,0 -5px 0 currentColor;}
  .masthead__lang[lang="ar"]{font-size:.76rem;}
  .masthead__mark img{height:18px;max-width:30vw;}
}


/* --- the arrival on a phone --------------------------------
   94svh reserved a screen the type did not fill, so the two
   actions floated in the middle of nothing and the photograph
   sat below the fold twice over. The screen is given back to
   the picture, and the two actions sit side by side. */
@media (max-width:759px){
  /* Still one screen, as the arrival is meant to be, but the rows are
     sized by their content so the picture takes the slack instead of a gap. */
  .arrival,.hero{min-height:86svh;grid-template-rows:auto 1fr;}
  .arrival__acts{flex-wrap:nowrap;}
  .arrival__acts .btn{flex:1 1 0;text-align:center;padding-inline:.6rem;}
  .arrival__plate{margin-top:var(--s3);}
}


/* ============================================================
   HORIZONTAL, FURTHER
   The remaining verticality was the head of every section: a
   label, a heading, a standfirst and two paragraphs, each one
   full width and stacked. They now sit as two columns, so the
   reader crosses the page before dropping down it.
   ============================================================ */
@media (min-width:1024px){
  /* The heading column used to be a grid row of its own, so it was pushed
     down to sit level with the body text and left a screen of empty paper
     above it. Label and heading now share one cell at the top of the column,
     and the body column starts at the same line. */
  .wall{
    display:grid;
    grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
    column-gap:var(--s6);align-items:start;
  }
  .wall .room__name{grid-column:1;grid-row:1;order:0;margin:0 0 var(--s2);}
  .wall .h-wall,.wall .h-room{grid-column:1;grid-row:2;margin:0;max-width:20ch;}
  .wall .lede{grid-column:2;grid-row:1 / span 2;margin-top:0;max-width:52ch;align-self:start;}
  .wall .prose{grid-column:2;max-width:66ch;margin-top:var(--s3);}
  .wall > *:not(.room__name):not(.h-wall):not(.h-room):not(.lede):not(.prose){grid-column:1 / -1;}
}

/* the card head, same treatment */
@media (min-width:1024px){
  .card:not(.card--plain) .lede{max-width:48ch;}
  .ledgerwall .card{display:grid;grid-template-columns:1fr;}
}

/* --- four across where there is room ------------------------ */
@media (min-width:1420px){
  .tally{grid-template-columns:repeat(4,1fr);}
  #location .ledger{grid-template-columns:repeat(3,1fr);}
}
@media (min-width:1420px){
  .faq{columns:3;}
}

/* --- the gallery runs wider plates so fewer bands are needed - */
@media (min-width:1024px){
  .plate{flex-basis:clamp(520px,38vw,700px);}
}

/* --- amenity rail on tablets too, not just phones ----------- */
@media (min-width:760px) and (max-width:1023px){
  .tally{grid-template-columns:repeat(2,1fr);column-gap:var(--s4);}
}

/* --- the enquiry form fields sit across ---------------------- */
@media (min-width:760px){
  .fields{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3) var(--s4);}
  .cell--wide{grid-column:1 / -1;}
}