/* ============================================================
   SCENES — design direction A, "Limestone & Cypress" (v7, approved)
   Tatweer Misr · Mostakbal City

   Scoped to .pn-comp-letterbox, the body class only this project's
   composition emits. No other project loads this file.

   A light, editorial page: a warm limestone ground, deep cypress green
   as the one dark tone, brass only as a hairline and for small labels.
   Headings in EB Garamond (English) and Noto Naskh Arabic; text in
   Manrope and IBM Plex Sans Arabic. Every render sits in plain white
   space, never behind a badge.

   Contrast, measured (WCAG AA for text is 4.5:1):
     ink    #1C1F1D on limestone #F6F2EB ... 14.9:1
     ink-2  #3E433F on limestone ........... 9.0:1   on stone #ECE5D9 ... 8.0:1
     brass  #7C5B31 on limestone ........... 5.5:1   on stone ........... 4.9:1
     on-dark #F2EDE4 on cypress #22302A .... 11.8:1
   ============================================================ */

.pn-comp-letterbox{
  --paper:#F6F2EB;
  --stone:#ECE5D9;
  --white:#FFFFFF;
  --ink:#1C1F1D;
  --ink-2:#3E433F;
  --cypress:#22302A;
  --cypress-2:#2E3F36;
  --brass:#7C5B31;
  --brass-l:#C9A774;
  --on-dark:#F2EDE4;
  --on-dark-2:#C9C2B5;
  --line:rgba(28,31,29,.16);
  --hair:rgba(28,31,29,.09);
  --line-dark:rgba(242,237,228,.2);

  /* the engine's names, so shared parts (form, colophon, index) follow */
  --brand:var(--cypress);
  --brand-deep:var(--cypress);
  --brand-ink:var(--cypress);
  --deep:var(--cypress);
  --deep-2:var(--cypress-2);
  --on-deep:var(--on-dark);
  --on-deep-muted:var(--on-dark-2);
  --line-inv:var(--line-dark);

  /* Latin words, digits and symbols inside Arabic copy fall through to
     Manrope: the Arabic files carry Arabic outlines only. */
  --f-display:"Scenes Display","EB Garamond",Georgia,"Times New Roman",serif;
  --f-sans:"Scenes Sans",Manrope,"Segoe UI",system-ui,sans-serif;
  --f-ar-display:"Scenes Arabic Display","Noto Naskh Arabic","Scenes Sans",Manrope,"Segoe UI",Tahoma,serif;
  --f-ar-sans:"Scenes Arabic","IBM Plex Sans Arabic","Scenes Sans",Manrope,"Segoe UI",Tahoma,sans-serif;

  --serif:var(--f-display);
  --sans:var(--f-sans);
  --num:var(--f-sans);
  --ar-display:var(--f-ar-display);
  --ar-sans:var(--f-ar-sans);

  --gutter:clamp(14px,4.4vw,72px);
  --frame:1360px;
  --bar-h:64px;
  --pad:clamp(64px,9vw,128px);
  --gap:clamp(1.25rem,3vw,2.5rem);

  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-sans);
  font-size:16.5px;
  line-height:1.7;
  font-variant-numeric:lining-nums;
}
/* On the narrowest phones the gutter gives two pixels to the headings,
   which is what lets the longest ones keep their size on one line. */
@media (max-width:359px){ .pn-comp-letterbox{ --gutter:12px; } }
@media (min-width:1024px){ .pn-comp-letterbox{ --bar-h:72px; } }
[dir="rtl"] .pn-comp-letterbox{font-family:var(--f-ar-sans);font-size:18px;line-height:1.9;}
.pn-comp-letterbox section[id]{scroll-margin-top:calc(var(--bar-h) + 12px);}
.pn-comp-letterbox :focus-visible{outline:2px solid var(--cypress);outline-offset:3px;}
.pn-comp-letterbox .colophon :focus-visible{outline-color:var(--on-dark);}
.pn-comp-letterbox img{max-width:100%;height:auto;}
.pn-comp-letterbox .scn-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}

/* ------------------------------------------------------------ the bar */
.pn-comp-letterbox .ticket{
  position:sticky;top:0;z-index:60;
  background:var(--paper);color:var(--ink);
  border-bottom:1px solid var(--line);
}
.pn-comp-letterbox .ticket__in{
  max-width:var(--frame);margin-inline:auto;padding-inline:var(--gutter);
  height:var(--bar-h);display:flex;align-items:center;gap:clamp(.5rem,2vw,2rem);
}
.pn-comp-letterbox .ticket__id{display:flex;align-items:center;min-height:44px;flex:0 0 auto;color:var(--ink);}
.pn-comp-letterbox .scnmark{width:clamp(124px,12vw,160px);height:auto;overflow:visible;}
/* The kit's logo (assets/scenes/logo-scenes.svg): 5.8:1, so 128px wide on a phone is
   22px tall and 164px on a wide screen 28px — inside the old lockup's box; the bar keeps its height. */
.pn-comp-letterbox .scnmark--logo{display:block;width:clamp(128px,11.5vw,164px);height:auto;}
/* A logo chosen in the dashboard: held to the typographic mark's box, so the bar never grows. */
.pn-comp-letterbox .scnmark--img{width:auto;height:auto;max-width:clamp(124px,12vw,168px);max-height:40px;object-fit:contain;}
.pn-comp-letterbox .ticket__nav{display:none;}
@media (min-width:1180px){
  .pn-comp-letterbox .ticket__nav{display:flex;gap:clamp(1rem,1.8vw,1.8rem);margin-inline:auto;}
  .pn-comp-letterbox .ticket__nav a{
    display:inline-flex;align-items:center;min-height:44px;
    font-size:14.5px;font-weight:400;color:var(--ink-2);
    border-bottom:1px solid transparent;transition:color .3s,border-color .3s;
  }
  .pn-comp-letterbox .ticket__nav a:hover{color:var(--ink);border-color:var(--brass);}
  [dir="rtl"] .pn-comp-letterbox .ticket__nav a{font-family:var(--f-ar-sans);font-size:16px;}
}
.pn-comp-letterbox .ticket__acts{display:flex;align-items:center;gap:clamp(.35rem,1.2vw,.9rem);margin-inline-start:auto;}
@media (min-width:1180px){ .pn-comp-letterbox .ticket__acts{margin-inline-start:0;} }
.pn-comp-letterbox .ticket__lang{
  display:inline-grid;place-items:center;min-width:44px;min-height:44px;padding-inline:.4rem;
  font-size:15px;font-weight:400;color:var(--ink);
}
.pn-comp-letterbox .ticket__lang[lang="ar"]{font-family:var(--f-ar-sans);font-size:16px;}
.pn-comp-letterbox .ticket__lang[lang="en"]{font-family:var(--f-sans);}
.pn-comp-letterbox .ticket__lang-s{display:none;}
.pn-comp-letterbox .ticket__ask{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.45rem 1.1rem;
  border:1px solid var(--cypress);color:var(--cypress);font-size:14px;font-weight:600;
  white-space:nowrap;transition:background .3s,color .3s;
}
.pn-comp-letterbox .ticket__ask:hover{background:var(--cypress);color:var(--on-dark);}
[dir="rtl"] .pn-comp-letterbox .ticket__ask{font-family:var(--f-ar-sans);font-size:15.5px;}
.pn-comp-letterbox .ticket__index{
  display:inline-flex;align-items:center;gap:.6rem;min-height:44px;min-width:44px;padding:.3rem .5rem;
  background:none;border:0;color:var(--ink);cursor:pointer;
}
.pn-comp-letterbox .ticket__index-t{font-size:14px;font-weight:600;}
[dir="rtl"] .pn-comp-letterbox .ticket__index-t{font-family:var(--f-ar-sans);font-size:15.5px;}
.pn-comp-letterbox .ticket__bars{display:grid;gap:6px;width:22px;}
.pn-comp-letterbox .ticket__bars i{display:block;height:1.5px;background:currentColor;}
@media (max-width:640px){
  .pn-comp-letterbox .ticket__index-t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
  .pn-comp-letterbox .ticket__index{padding:0;justify-content:center;}
}
@media (max-width:420px){
  .pn-comp-letterbox .ticket__lang-l{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
  .pn-comp-letterbox .ticket__lang-s{display:inline;}
  .pn-comp-letterbox .ticket__ask{padding-inline:.8rem;}
}
@media (max-width:374px){
  /* The hero's button and the index panel both lead to the form; on the
     narrowest phones the bar keeps the mark, the language and the index. */
  .pn-comp-letterbox .ticket__ask{display:none;}
}

/* ------------------------------------------------------- the index panel */
.pn-comp-letterbox .index-page{background:var(--paper);color:var(--ink);}
.pn-comp-letterbox .index-page__cap{color:var(--brass);border-color:var(--line);font-family:var(--f-sans);font-size:13px;font-weight:600;letter-spacing:.1em;}
[dir="rtl"] .pn-comp-letterbox .index-page__cap{font-family:var(--f-ar-sans);letter-spacing:0;font-size:15.5px;text-transform:none;}
.pn-comp-letterbox .index-page__list a{
  font-family:var(--f-display);font-weight:500;font-size:clamp(1.6rem,4vw,2.4rem);letter-spacing:0;text-transform:none;
  border-color:var(--line);min-height:56px;color:var(--ink);
}
.pn-comp-letterbox .index-page__list a::before{color:var(--brass);font-family:var(--f-sans);font-size:.8rem;letter-spacing:.08em;}
.pn-comp-letterbox .index-page__list a:hover{color:var(--cypress);}
[dir="rtl"] .pn-comp-letterbox .index-page__list a{font-family:var(--f-ar-display);font-weight:600;font-size:clamp(1.5rem,3.6vw,2.1rem);}
.pn-comp-letterbox .index-page__lang{color:var(--ink);font-family:var(--f-sans);border:1px solid var(--line);padding-inline:1rem;}
.pn-comp-letterbox .index-page__lang[lang="ar"]{font-family:var(--f-ar-sans);letter-spacing:0;font-size:1rem;text-transform:none;}
.pn-comp-letterbox .index-page__close{color:var(--ink);border-color:var(--line);}
.pn-comp-letterbox .index-page__close:hover{background:var(--cypress);color:var(--on-dark);}

/* ------------------------------------------------------ shared pieces */
.pn-comp-letterbox .scn-sec{padding-block:var(--pad);position:relative;}
.pn-comp-letterbox .scn-sec--paper{background:var(--paper);}
.pn-comp-letterbox .scn-sec--stone{background:var(--stone);}
.pn-comp-letterbox .scn-sec--paper + .scn-sec--paper{border-top:1px solid var(--line);}

/* Headings. Every H1 and H2 is one element in one face at one size, on a
   line of its own above the section. Sizes are read off the measured width
   of the longest heading of each level in its own face, so at the 320px
   floor it fits the frame (320 − 2 × 12px = 296px) and it grows more slowly
   than the frame at every width above. Longest, at 320px:
     EN H2 "Scenes Mostakbal City Masterplan"  EB Garamond 500 × 21px   ≈ 288px (13.7px per px, as rendered)
     AR H2 «ماستر بلان سينز مستقبل سيتي»        Noto Naskh 600 × 25px   ≈ 284px
   A heading edited in the dashboard to something longer wraps rather than
   pushing the page sideways; the dashboard help asks to keep the length. */
.pn-comp-letterbox .scn-head{margin-bottom:clamp(20px,3vw,44px);}
.pn-comp-letterbox .scn-h1,
.pn-comp-letterbox .scn-h2{margin:0;max-width:none;letter-spacing:0;font-style:normal;text-transform:none;color:var(--ink);font-family:var(--f-display);}
.pn-comp-letterbox .scn-h1{font-weight:500;font-size:clamp(32px,calc(32px + (100vw - 320px) * .07),84px);line-height:1.08;}
.pn-comp-letterbox .scn-h2{font-weight:500;font-size:clamp(21px,calc(21px + (100vw - 320px) * .05),50px);line-height:1.15;}
[dir="rtl"] .pn-comp-letterbox .scn-h1,
[dir="rtl"] .pn-comp-letterbox .scn-h2{font-family:var(--f-ar-display);font-weight:600;}
[dir="rtl"] .pn-comp-letterbox .scn-h1{font-size:clamp(28px,calc(28px + (100vw - 320px) * .05),64px);line-height:1.55;}
[dir="rtl"] .pn-comp-letterbox .scn-h2{font-size:clamp(25px,calc(25px + (100vw - 320px) * .04),46px);line-height:1.6;}

.pn-comp-letterbox .scn-h3{margin:2rem 0 .5rem;font:600 13px/1.4 var(--f-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--brass);}
[dir="rtl"] .pn-comp-letterbox .scn-h3{font:600 16px/1.6 var(--f-ar-sans);letter-spacing:0;text-transform:none;}
.pn-comp-letterbox .scn-lead{margin:0;font-size:clamp(16.5px,1.3vw,18.5px);line-height:1.75;color:var(--ink-2);max-width:54ch;}
[dir="rtl"] .pn-comp-letterbox .scn-lead{font-size:clamp(18px,1.35vw,19.5px);line-height:1.95;}
.pn-comp-letterbox .scn-cap{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem 1.2rem;margin:.7rem 0 0;font-size:14px;line-height:1.55;color:var(--ink-2);}
[dir="rtl"] .pn-comp-letterbox .scn-cap{font-size:15px;line-height:1.8;}
.pn-comp-letterbox .scn-note{margin:26px 0 0;padding-inline-start:18px;border-inline-start:2px solid var(--brass-l);color:var(--ink-2);max-width:56ch;}
[dir="rtl"] .pn-comp-letterbox .scn-note{line-height:1.95;}

.pn-comp-letterbox .scn-btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:.75rem 1.6rem;
  font-size:15px;font-weight:600;letter-spacing:.02em;text-align:center;line-height:1.3;
  border:1px solid transparent;background:none;cursor:pointer;transition:background .3s,color .3s;
}
[dir="rtl"] .pn-comp-letterbox .scn-btn{font-family:var(--f-ar-sans);font-size:16.5px;letter-spacing:0;}
.pn-comp-letterbox .scn-btn--solid{background:var(--cypress);color:var(--on-dark);}
.pn-comp-letterbox .scn-btn--solid:hover{background:var(--cypress-2);}
.pn-comp-letterbox .scn-btn--line{min-height:48px;padding:.6rem 1.2rem;border-color:var(--cypress);color:var(--cypress);}
.pn-comp-letterbox .scn-btn--line:hover{background:var(--cypress);color:var(--on-dark);}
.pn-comp-letterbox .scn-link{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--brass);}
.pn-comp-letterbox .scn-link:hover{color:var(--cypress);}
.pn-comp-letterbox .scn-link--sm{font-size:14.5px;}
[dir="rtl"] .pn-comp-letterbox .scn-link--sm{font-size:15.5px;}

/* drawings: a thin brass frame for the map, white card for plans */
.pn-comp-letterbox .scn-frame-line{display:block;padding:10px;border:1px solid var(--brass-l);background:var(--paper);cursor:zoom-in;}
.pn-comp-letterbox .scn-frame-card{display:block;background:var(--white);padding:clamp(8px,1.4vw,20px);cursor:zoom-in;}
.pn-comp-letterbox .scn-frame-line img,
.pn-comp-letterbox .scn-frame-card img{display:block;width:100%;height:auto;}

/* ------------------------------------------------------------- hero */
.pn-comp-letterbox .scn-hero{padding-block:clamp(32px,6vw,88px) clamp(8px,2vw,24px);background:var(--paper);}
.pn-comp-letterbox .scn-hero .scn-head{margin-bottom:0;}
.pn-comp-letterbox .scn-hero__row{display:grid;gap:22px;margin-top:clamp(14px,2.2vw,30px);}
@media (min-width:980px){
  .pn-comp-letterbox .scn-hero__row{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;}
  .pn-comp-letterbox .scn-hero__acts{justify-content:flex-end;}
}
.pn-comp-letterbox .scn-hero__lead{margin:0;font-size:clamp(17px,1.4vw,20px);line-height:1.72;color:var(--ink-2);max-width:56ch;}
[dir="rtl"] .pn-comp-letterbox .scn-hero__lead{font-size:clamp(18.5px,1.45vw,21px);line-height:1.95;}
.pn-comp-letterbox .scn-hero__acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;}
@media (max-width:560px){ .pn-comp-letterbox .scn-hero__acts .scn-btn{flex:1 1 100%;} }
.pn-comp-letterbox .scn-hero__pic{margin:clamp(26px,4vw,56px) 0 0;}
.pn-comp-letterbox .scn-hero__pic img{display:block;width:100%;height:auto;aspect-ratio:21/9;object-fit:cover;}
@media (max-width:700px){ .pn-comp-letterbox .scn-hero__pic img{aspect-ratio:4/3;} }
.pn-comp-letterbox .scn-facts{display:grid;grid-template-columns:repeat(4,1fr);margin:0;border-bottom:1px solid var(--line);}
.pn-comp-letterbox .scn-facts div{padding:22px 24px;border-inline-start:1px solid var(--line);min-width:0;}
.pn-comp-letterbox .scn-facts div:first-child{border-inline-start:0;padding-inline-start:0;}
.pn-comp-letterbox .scn-facts dt{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--brass);}
[dir="rtl"] .pn-comp-letterbox .scn-facts dt{font-size:15px;letter-spacing:0;text-transform:none;}
.pn-comp-letterbox .scn-facts dd{margin:4px 0 0;font:600 24px/1.3 var(--f-display);}
[dir="rtl"] .pn-comp-letterbox .scn-facts dd{font:600 21px/1.6 var(--f-ar-display);}
@media (max-width:760px){
  .pn-comp-letterbox .scn-facts{grid-template-columns:1fr 1fr;}
  .pn-comp-letterbox .scn-facts div{padding-block:16px;padding-inline:0 14px;border-inline-start:0;border-top:1px solid var(--line);}
  .pn-comp-letterbox .scn-facts div:nth-child(-n+2){border-top:0;}
  .pn-comp-letterbox .scn-facts dd{font-size:21px;}
  [dir="rtl"] .pn-comp-letterbox .scn-facts dd{font-size:20px;}
}

/* ------------------------------------------------------------ location */
.pn-comp-letterbox .scn-loc__grid{display:grid;gap:36px;}
@media (min-width:980px){
  .pn-comp-letterbox .scn-loc__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:start;}
  .pn-comp-letterbox .scn-loc__grid.is-solo{grid-template-columns:1fr;}
}
@media (max-width:979px){ .pn-comp-letterbox .scn-loc__map{order:-1;} }
.pn-comp-letterbox .scn-loc__map{margin:0;}
.pn-comp-letterbox .scn-ledger{margin:0;border-top:1px solid var(--line);}
.pn-comp-letterbox .scn-ledger div{display:grid;grid-template-columns:minmax(8.5rem,.8fr) 1.6fr;gap:1rem;padding:14px 0;border-bottom:1px solid var(--hair);}
.pn-comp-letterbox .scn-ledger dt{font-weight:600;}
.pn-comp-letterbox .scn-ledger dd{margin:0;color:var(--ink-2);}
@media (max-width:560px){
  .pn-comp-letterbox .scn-ledger div{grid-template-columns:1fr;gap:2px;padding:12px 0;}
  .pn-comp-letterbox .scn-ledger dt{font-size:13.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--brass);}
  [dir="rtl"] .pn-comp-letterbox .scn-ledger dt{font-size:15.5px;text-transform:none;letter-spacing:0;}
  .pn-comp-letterbox .scn-ledger dd{color:var(--ink);font-size:17px;}
  [dir="rtl"] .pn-comp-letterbox .scn-ledger dd{font-size:18px;}
}

/* ----------------------------------------------------------- amenities */
.pn-comp-letterbox .scn-amen__grid{display:grid;gap:36px;}
@media (min-width:980px){
  .pn-comp-letterbox .scn-amen__grid{grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:72px;align-items:start;}
  .pn-comp-letterbox .scn-amen__grid.is-solo{grid-template-columns:1fr;}
}
.pn-comp-letterbox .scn-amen__map{margin:0;}
.pn-comp-letterbox .scn-fac{list-style:none;padding:0;margin:26px 0 0;display:grid;border-top:1px solid var(--line);}
@media (min-width:600px) and (max-width:979px){ .pn-comp-letterbox .scn-fac{grid-template-columns:1fr 1fr;column-gap:28px;} }
.pn-comp-letterbox .scn-fac li{display:flex;align-items:center;gap:16px;padding:13px 0;border-bottom:1px solid var(--hair);}
.pn-comp-letterbox .scn-fac__n{font-size:18px;font-weight:600;line-height:1.4;}
[dir="rtl"] .pn-comp-letterbox .scn-fac__n{font-size:19px;font-weight:500;}
.pn-comp-letterbox .scn-fac__k{flex:0 0 40px;height:40px;display:grid;place-items:center;background:var(--cypress);color:var(--on-dark);border-radius:50%;font:600 19px/1 var(--f-display);}

/* --------------------------------------------------------------- units */
.pn-comp-letterbox .scn-units__first{margin:0;font:600 clamp(19px,1.6vw,23px)/1.55 var(--f-display);color:var(--ink);max-width:48ch;}
[dir="rtl"] .pn-comp-letterbox .scn-units__first{font:600 clamp(20px,1.6vw,24px)/1.8 var(--f-ar-display);}
.pn-comp-letterbox .scn-units__second{margin-top:12px;}
.pn-comp-letterbox .scn-fams{display:grid;gap:clamp(36px,5vw,56px);margin-top:clamp(36px,5vw,64px);}
.pn-comp-letterbox .scn-fam{display:grid;gap:18px;padding-top:clamp(28px,4vw,40px);border-top:1px solid var(--line);align-content:start;}
@media (min-width:980px){
  .pn-comp-letterbox .scn-fams{grid-template-columns:1fr 1fr;column-gap:40px;}
  .pn-comp-letterbox .scn-fam--many{grid-column:1 / -1;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:start;}
}
.pn-comp-letterbox .scn-fam__pic{margin:0;}
.pn-comp-letterbox .scn-fam__pic img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;}
.pn-comp-letterbox .scn-fam__pic figcaption,
.pn-comp-letterbox .scn-fam__name{margin:10px 0 0;font:600 22px/1.3 var(--f-display);}
[dir="rtl"] .pn-comp-letterbox .scn-fam__pic figcaption,
[dir="rtl"] .pn-comp-letterbox .scn-fam__name{font:600 21px/1.6 var(--f-ar-display);}
.pn-comp-letterbox .scn-fam__models{display:grid;gap:16px;}
@media (min-width:700px){ .pn-comp-letterbox .scn-fam--many .scn-fam__models{grid-template-columns:1fr 1fr;} }
.pn-comp-letterbox .scn-model{background:var(--white);border:1px solid var(--line);padding:clamp(18px,2vw,24px);}
.pn-comp-letterbox .scn-model__top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;}
/* Model names are the developer's own, in Latin script in both languages. */
.pn-comp-letterbox .scn-model__name{margin:0;font:600 17px/1.35 var(--f-sans);}
.pn-comp-letterbox .scn-model__area{margin:0;font-size:15px;color:var(--ink-2);}
.pn-comp-letterbox .scn-model__area b{font:600 36px/1 var(--f-display);color:var(--cypress);margin-inline-end:2px;}
.pn-comp-letterbox .scn-model__fl-l{margin:16px 0 0;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--brass);}
[dir="rtl"] .pn-comp-letterbox .scn-model__fl-l{font-size:15px;letter-spacing:0;text-transform:none;}
.pn-comp-letterbox .scn-model__bar{display:flex;gap:3px;height:8px;margin-top:8px;}
.pn-comp-letterbox .scn-model__bar i{flex-basis:0;min-width:6px;background:var(--cypress);}
.pn-comp-letterbox .scn-model__bar i:nth-child(2){background:#5E7466;}
.pn-comp-letterbox .scn-model__bar i:nth-child(3){background:var(--brass-l);}
.pn-comp-letterbox .scn-model__floors{list-style:none;padding:0;margin:10px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.pn-comp-letterbox .scn-model__floors li{display:grid;}
.pn-comp-letterbox .scn-model__floors span{font-size:13.5px;color:var(--ink-2);}
[dir="rtl"] .pn-comp-letterbox .scn-model__floors span{font-size:15px;}
.pn-comp-letterbox .scn-model__floors b{font-size:17px;font-weight:600;font-family:var(--f-sans);}
.pn-comp-letterbox .scn-model__rooms{list-style:none;padding:0;margin:14px 0 0;border-top:1px solid var(--hair);}
.pn-comp-letterbox .scn-model__rooms li{padding:9px 0;border-bottom:1px solid var(--hair);font-size:16px;}
[dir="rtl"] .pn-comp-letterbox .scn-model__rooms li{font-size:17px;}
.pn-comp-letterbox .scn-model__note{margin:12px 0 0;color:var(--ink-2);font-size:15.5px;}
.pn-comp-letterbox .scn-model__acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;margin-top:18px;}
.pn-comp-letterbox .scn-units__note{margin-top:28px;}

/* the viewer every drawing opens in */
.pn-comp-letterbox .scn-pv{padding:0;border:0;background:var(--white);color:var(--ink);width:min(1100px,96vw);height:min(92vh,960px);max-width:none;max-height:none;}
/* A column, not a grid of fixed rows: the tab row is hidden for a single
   map, and the drawing must still take all the height that is left. */
.pn-comp-letterbox .scn-pv[open]{display:flex;flex-direction:column;}
.pn-comp-letterbox .scn-pv__bar,.pn-comp-letterbox .scn-pv__tabs,.pn-comp-letterbox .scn-pv__ctl{flex:0 0 auto;}
.pn-comp-letterbox .scn-pv::backdrop{background:rgba(28,31,29,.72);}
@media (max-width:700px){ .pn-comp-letterbox .scn-pv{width:100vw;height:100dvh;margin:0;} }
.pn-comp-letterbox .scn-pv__bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.5rem;padding-inline:1rem .5rem;background:var(--cypress);color:var(--on-dark);}
.pn-comp-letterbox .scn-pv__t{margin:0;font-weight:600;}
.pn-comp-letterbox .scn-pv__x{width:44px;height:44px;border:1px solid var(--line-dark);background:none;color:var(--on-dark);cursor:pointer;font-size:16px;}
.pn-comp-letterbox .scn-pv__tabs{display:flex;border-bottom:1px solid var(--line);}
.pn-comp-letterbox .scn-pv__tabs[hidden]{display:none;}
.pn-comp-letterbox .scn-pv__tab{flex:1 1 0;min-height:52px;border:0;border-bottom:3px solid transparent;background:none;cursor:pointer;font:600 15px/1.3 var(--f-sans);color:var(--ink-2);}
[dir="rtl"] .pn-comp-letterbox .scn-pv__tab{font-family:var(--f-ar-sans);font-size:16px;}
.pn-comp-letterbox .scn-pv__tab[hidden]{display:none;}
.pn-comp-letterbox .scn-pv__tab span{display:block;font-size:13px;font-weight:400;}
.pn-comp-letterbox .scn-pv__tab[aria-selected="true"]{color:var(--cypress);border-bottom-color:var(--cypress);}
.pn-comp-letterbox .scn-pv__stage{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;touch-action:none;background:#F4F1EC;cursor:grab;}
.pn-comp-letterbox .scn-pv__stage img{position:absolute;inset:0;margin:auto;max-width:100%;max-height:100%;width:auto;height:auto;transform-origin:50% 50%;user-select:none;-webkit-user-drag:none;}
.pn-comp-letterbox .scn-pv__ctl{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-top:1px solid var(--line);}
.pn-comp-letterbox .scn-pv__ctl button{min-width:44px;min-height:44px;border:1px solid var(--line);background:var(--white);color:var(--cypress);font-size:1.2rem;cursor:pointer;}
.pn-comp-letterbox .scn-pv__ctl button:last-of-type{font-size:14px;font-weight:600;padding-inline:.8rem;}
[dir="rtl"] .pn-comp-letterbox .scn-pv__ctl button:last-of-type{font-family:var(--f-ar-sans);font-size:15px;}
.pn-comp-letterbox .scn-pv__ctl p{margin:0;margin-inline-start:.4rem;font-size:13.5px;color:var(--ink-2);}
[dir="rtl"] .pn-comp-letterbox .scn-pv__ctl p{font-size:14.5px;}
@media (max-width:420px){ .pn-comp-letterbox .scn-pv__ctl p{display:none;} }

/* ------------------------------------------------------------ masterplan */
.pn-comp-letterbox .scn-plan__lead{margin-bottom:clamp(24px,3vw,40px);}
.pn-comp-letterbox .scn-plan__grid{display:grid;gap:28px;}
@media (min-width:980px){
  .pn-comp-letterbox .scn-plan__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:start;}
  .pn-comp-letterbox .scn-plan__grid.is-solo{grid-template-columns:1fr;}
}
.pn-comp-letterbox .scn-plan__map{margin:0;}
.pn-comp-letterbox .scn-plan__map .scn-frame-card{border:1px solid var(--line);}
.pn-comp-letterbox .scn-plan__aerials{display:grid;gap:20px;}
@media (min-width:600px) and (max-width:979px){ .pn-comp-letterbox .scn-plan__aerials{grid-template-columns:1fr 1fr;} }
.pn-comp-letterbox .scn-plan__aerials figure{margin:0;}
.pn-comp-letterbox .scn-plan__aerials img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;}

/* --------------------------------------------------------- renders strip */
.pn-comp-letterbox .scn-strip{
  list-style:none;margin:0;display:grid;grid-auto-flow:column;grid-auto-columns:min(84vw,40rem);gap:16px;
  overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  padding:0 max(var(--gutter), calc((100vw - var(--frame)) / 2 + var(--gutter))) 10px;
  scroll-padding-inline:max(var(--gutter), calc((100vw - var(--frame)) / 2 + var(--gutter)));
  scrollbar-width:thin;scrollbar-color:var(--brass-l) transparent;
}
.pn-comp-letterbox .scn-strip.is-dragging{scroll-snap-type:none;}
.pn-comp-letterbox .scn-strip li{scroll-snap-align:start;}
.pn-comp-letterbox .scn-strip img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;}
.pn-comp-letterbox .scn-gal__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem;margin-top:12px;}
.pn-comp-letterbox .scn-gal__foot .scn-cap{margin:0;}
.pn-comp-letterbox .scn-rail-ctl{display:flex;gap:.5rem;}
.pn-comp-letterbox .scn-rail-ctl__b{width:44px;height:44px;display:grid;place-items:center;background:var(--white);border:1px solid var(--line);color:var(--cypress);cursor:pointer;}
.pn-comp-letterbox .scn-rail-ctl__b:disabled{opacity:.35;cursor:default;}
[dir="rtl"] .pn-comp-letterbox .scn-rail-ctl__b svg{transform:scaleX(-1);}

/* ------------------------------------------------------------ developer */
.pn-comp-letterbox .scn-dev__grid{display:grid;gap:24px 72px;}
@media (min-width:980px){ .pn-comp-letterbox .scn-dev__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start;} }
.pn-comp-letterbox .scn-works{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));column-gap:24px;border-top:1px solid var(--line);}
.pn-comp-letterbox .scn-works li{display:grid;padding:12px 0;border-bottom:1px solid var(--hair);}
.pn-comp-letterbox .scn-works b{font:600 20px/1.3 var(--f-display);color:var(--ink);}
.pn-comp-letterbox .scn-works span{font-size:14.5px;color:var(--ink-2);}
[dir="rtl"] .pn-comp-letterbox .scn-works span{font-size:15.5px;}

/* ------------------------------------------------------------ the form */
/* The engine's enquiry section, on the stone ground with a white card.
   Its heading is lifted onto a row of its own, like every other H2; the
   text column and the form sit side by side beneath it. Nothing in the
   form's markup or behaviour changes. */
.pn-comp-letterbox .room--office{background:var(--stone);color:var(--ink);padding-block:var(--pad);}
.pn-comp-letterbox .room--office .frame{background:none;border:0;border-radius:0;box-shadow:none;padding-block:0;padding-inline:var(--gutter);}
.pn-comp-letterbox .room--office .enquiry{display:grid;gap:clamp(20px,3vw,44px) clamp(2rem,5vw,4.5rem);}
.pn-comp-letterbox .room--office .enquiry__say{display:contents;}
.pn-comp-letterbox .room--office .h-room{
  grid-column:1 / -1;margin:0;max-width:none;letter-spacing:0;text-transform:none;font-style:normal;color:var(--ink);
  font:500 clamp(21px,calc(21px + (100vw - 320px) * .05),50px)/1.15 var(--f-display);
}
/* The Arabic prices heading («أسعار مشروع سينز المستقبل سيتي», the client's
   keyword) is the longest H2: under ~420px its size also follows the screen
   (6.9vw, 22px at 320) so it stays one line. Wider, the H2 scale is unchanged. */
[dir="rtl"] .pn-comp-letterbox .room--office .h-room{font:600 min(clamp(25px,calc(25px + (100vw - 320px) * .04),46px),6.9vw)/1.6 var(--f-ar-display);}
.pn-comp-letterbox .room--office .enquiry__say>*:not(.h-room){grid-column:1;}
@media (min-width:980px){
  .pn-comp-letterbox .room--office .enquiry{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start;}
  .pn-comp-letterbox .room--office .pn-form{grid-column:2;grid-row:2 / span 6;}
}
.pn-comp-letterbox .room--office .lede{margin:0;font-family:var(--f-sans);color:var(--ink-2);font-size:clamp(16.5px,1.3vw,18.5px);line-height:1.75;max-width:44ch;}
[dir="rtl"] .pn-comp-letterbox .room--office .lede{font-family:var(--f-ar-sans);font-size:clamp(18px,1.35vw,19.5px);line-height:1.95;}
.pn-comp-letterbox .room--office .direct{display:flex;flex-wrap:wrap;gap:10px;}
.pn-comp-letterbox .room--office .direct a{display:inline-flex;align-items:center;gap:.5rem;min-height:48px;border:1px solid var(--cypress);color:var(--cypress);padding-inline:1rem;font-weight:600;}
.pn-comp-letterbox .room--office .direct a:hover{background:var(--cypress);color:var(--on-dark);}
.pn-comp-letterbox .room--office .pn-form{background:var(--white);padding:clamp(18px,2.6vw,32px);border:1px solid var(--line);}
.pn-comp-letterbox .room--office .fields{gap:18px 18px;}
@media (min-width:700px){
  .pn-comp-letterbox .room--office .fields{grid-template-columns:1fr 1fr;}
  .pn-comp-letterbox .room--office .cell--wide,
  .pn-comp-letterbox .room--office .agree{grid-column:1 / -1;}
}
.pn-comp-letterbox .room--office .cell>span{color:var(--ink);font-family:var(--f-sans);font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;}
[dir="rtl"] .pn-comp-letterbox .room--office .cell>span{font-family:var(--f-ar-sans);font-size:15.5px;}
.pn-comp-letterbox .room--office .cell input,
.pn-comp-letterbox .room--office .cell select,
.pn-comp-letterbox .room--office .cell textarea{
  background:var(--paper);border:1px solid rgba(28,31,29,.28);border-radius:0;color:var(--ink);
  min-height:50px;padding:.6rem .8rem;font-size:16px;
}
[dir="rtl"] .pn-comp-letterbox .room--office .cell select,
[dir="rtl"] .pn-comp-letterbox .room--office .cell textarea{font-family:var(--f-ar-sans);font-size:17px;}
.pn-comp-letterbox .room--office .cell select option{color:var(--ink);background:#fff;}
/* The country code takes what it needs and the number keeps the rest: on a
   320px phone the select's own width left the number box too narrow. */
.pn-comp-letterbox .room--office .phone-combo{grid-template-columns:minmax(5.6rem,7.5rem) minmax(0,1fr);}
.pn-comp-letterbox .room--office .phone-combo__cc{max-width:none;width:100%;}
.pn-comp-letterbox .room--office .cell input:focus,
.pn-comp-letterbox .room--office .cell select:focus,
.pn-comp-letterbox .room--office .cell textarea:focus{border-color:var(--cypress);outline:none;box-shadow:0 0 0 3px rgba(34,48,42,.18);}
.pn-comp-letterbox .room--office .cell input[aria-invalid="true"]{border-color:#A8322A;}
.pn-comp-letterbox .room--office .agree{color:var(--ink-2);font-size:15px;}
[dir="rtl"] .pn-comp-letterbox .room--office .agree{font-size:16px;}
.pn-comp-letterbox .room--office .agree input{accent-color:var(--cypress);}
.pn-comp-letterbox .room--office .btn--send{
  width:100%;min-height:54px;margin-top:1.25rem;background:var(--cypress);color:var(--on-dark);border:0;border-radius:0;
  font-family:var(--f-sans);font-weight:600;font-size:15.5px;letter-spacing:.02em;text-transform:none;cursor:pointer;
}
.pn-comp-letterbox .room--office .btn--send:hover{background:var(--cypress-2);}
[dir="rtl"] .pn-comp-letterbox .room--office .btn--send{font-family:var(--f-ar-sans);font-size:17px;letter-spacing:0;}
.pn-comp-letterbox .room--office .form-msg{color:var(--ink);margin-top:.9rem;min-height:1.5em;font-weight:600;}
.pn-comp-letterbox .room--office .form-msg.is-ok{color:#2D6A3E;}
.pn-comp-letterbox .room--office .form-msg.is-err{color:#A8322A;}
.pn-comp-letterbox .room--office .enquiry__mark{display:none;}

/* ---------------------------------------------------------------- FAQ */
.pn-comp-letterbox .scn-qs{max-width:900px;border-top:1px solid var(--line);}
.pn-comp-letterbox .scn-q{border-bottom:1px solid var(--line);}
.pn-comp-letterbox .scn-q__h{margin:0;font-size:inherit;}
.pn-comp-letterbox .scn-q__btn{
  width:100%;display:grid;grid-template-columns:1fr 1.25rem;align-items:center;gap:1rem;min-height:56px;padding:.9rem 0;
  background:none;border:0;text-align:start;cursor:pointer;color:var(--ink);
  font:600 17.5px/1.45 var(--f-sans);letter-spacing:0;
}
[dir="rtl"] .pn-comp-letterbox .scn-q__btn{font-family:var(--f-ar-sans);font-size:18.5px;line-height:1.7;}
.pn-comp-letterbox .scn-q__ic{position:relative;width:1.1rem;height:1.1rem;justify-self:end;}
.pn-comp-letterbox .scn-q__ic::before,.pn-comp-letterbox .scn-q__ic::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;background:var(--cypress);transition:transform .3s;}
.pn-comp-letterbox .scn-q__ic::after{transform:rotate(90deg);}
.pn-comp-letterbox .scn-q__btn[aria-expanded="true"] .scn-q__ic::after{transform:rotate(0);}
.pn-comp-letterbox .scn-q__p{padding-bottom:1.1rem;}
.pn-comp-letterbox .scn-q__p p{margin:0;color:var(--ink-2);max-width:64ch;}
.pn-comp-letterbox .scn-qs.is-ready .scn-q__p:not(.is-open){display:none;}

/* ------------------------------------------------------------- colophon */
.pn-comp-letterbox .colophon{background:var(--cypress);color:var(--on-dark);padding-block:clamp(2.75rem,5vw,4.5rem) clamp(1.5rem,3vw,2rem);}
.pn-comp-letterbox .colophon__mark .logo__name{font-family:var(--f-display);font-weight:600;font-size:1.7rem;letter-spacing:.28em;text-transform:uppercase;}
.pn-comp-letterbox .colophon__mark .logo__by{display:block;margin-top:.4rem;font-family:var(--f-sans);font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-l);}
[dir="rtl"] .pn-comp-letterbox .colophon__mark .logo__name{font-family:var(--f-ar-display);font-weight:600;letter-spacing:0;text-transform:none;}
[dir="rtl"] .pn-comp-letterbox .colophon__mark .logo__by{font-family:var(--f-sans);}
.pn-comp-letterbox .colophon__imprint{font-family:var(--f-sans);font-size:15px;line-height:1.65;color:var(--on-dark-2);margin-top:1rem;max-width:60ch;}
[dir="rtl"] .pn-comp-letterbox .colophon__imprint{font-family:var(--f-ar-sans);font-size:16px;line-height:1.9;}
.pn-comp-letterbox .colophon__index{display:flex;flex-wrap:wrap;gap:.1rem 1.5rem;margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--line-dark);}
.pn-comp-letterbox .colophon__index a{display:inline-flex;align-items:center;min-height:44px;font-size:14.5px;color:var(--on-dark-2);}
.pn-comp-letterbox .colophon__index a:hover{color:var(--on-dark);}
[dir="rtl"] .pn-comp-letterbox .colophon__index a{font-family:var(--f-ar-sans);font-size:15.5px;}
.pn-comp-letterbox .colophon__social a,.pn-comp-letterbox .reach{border-color:var(--line-dark);color:var(--on-dark);}
.pn-comp-letterbox .colophon__legal{border-color:var(--line-dark);color:var(--on-dark-2);font-family:var(--f-sans);font-size:13.5px;}
[dir="rtl"] .pn-comp-letterbox .colophon__legal{font-family:var(--f-ar-sans);font-size:14.5px;}

/* -------------------------------------------------- phone bar, rail */
/* The phone bar appears only when a contact channel has been entered. It is
   one flat cypress strip of equal buttons, and the footer keeps the same
   clearance the engine gives it, so its last line is never under the bar. */
.pn-comp-letterbox .dock{
  gap:0;padding:0 0 env(safe-area-inset-bottom);
  background:var(--cypress);border-top:1px solid var(--line-dark);
  box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
}
.pn-comp-letterbox .dock a{
  min-height:62px;border:0;border-inline-end:1px solid var(--line-dark);border-radius:0;
  background:none;color:var(--on-dark);box-shadow:none;transform:none;
}
.pn-comp-letterbox .dock a:last-child{border-inline-end:0;}
.pn-comp-letterbox .dock a:hover,
.pn-comp-letterbox .dock a:focus-visible{background:var(--cypress-2);color:var(--on-dark);}
@media (max-width:900px){
  .pn-comp-letterbox:has(.dock a) .colophon{padding-block-end:calc(clamp(1.5rem,3vw,2rem) + 76px + env(safe-area-inset-bottom));}
}
.pn-comp-letterbox .standing a{background:var(--cypress);border-color:var(--cypress);color:var(--on-dark);}
.pn-comp-letterbox .standing a:hover,
.pn-comp-letterbox .standing a:focus-visible{background:var(--ink);border-color:var(--ink);color:var(--on-dark);}

/* ---------------------------------------------------- reduced motion */
@media (prefers-reduced-motion:reduce){
  .pn-comp-letterbox .scn-q__ic::before,
  .pn-comp-letterbox .scn-q__ic::after,
  .pn-comp-letterbox .scn-btn,
  .pn-comp-letterbox .ticket__ask,
  .pn-comp-letterbox .ticket__nav a{transition:none;}
}