/* =========================================================
   SKYBOUND · NOOR edition of the platform
   Dark olive night, refined gold, cream ink. Manrope light headings with Cormorant accents.
   Colour roles come from css/skin-base.css (--k-* hooks).
   ========================================================= */
:root {
  --sand: #eee8cf; --night: #191c0d; --gold: #d6b468;
  --olive: #252916; --deep: #191c0d; --card: #2d3219; --ink: #eee8cf; --glow: #e6c983;
  /* everything is dark in NOOR, so every soft tint is cream on olive */
  --night-80: rgb(238 232 207 / .82); --night-60: rgb(238 232 207 / .64); --night-40: rgb(238 232 207 / .4);
  --night-12: rgb(238 232 207 / .13); --night-06: rgb(238 232 207 / .07);
  --sand-80: rgb(238 232 207 / .82); --sand-60: rgb(238 232 207 / .64); --sand-40: rgb(238 232 207 / .4);
  --sand-14: rgb(238 232 207 / .14); --sand-08: rgb(238 232 207 / .08);
  --gold-20: rgb(214 180 104 / .2); --gold-10: rgb(214 180 104 / .1);
  --white: #2d3219;
  --k-bg-sand: var(--olive); --k-bg-night: var(--deep); --k-bg-white: var(--card);
  --k-fg-night: var(--ink); --k-fg-sand: var(--ink); --k-fg-white: var(--ink); --k-on-gold: var(--deep);
  --k-sh-06: rgb(0 0 0 / .18); --k-sh-12: rgb(0 0 0 / .3); --k-sh-40: rgb(0 0 0 / .45);
  --k-shade-rgb: 16 18 8; --k-glass-rgb: 37 41 22;
  --display: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --sans: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --accent: "Cormorant Garamond", Georgia, serif;
  color-scheme: dark;
}
body { background: var(--olive); color: var(--ink); }
::selection { background: var(--gold); color: var(--deep); }

/* type: thin, wide Manrope; the italic word is a Cormorant flourish in gold */
.h1, .h2, .h3 { font-weight: 200; letter-spacing: -.035em; }
.h1 { font-weight: 200; }
html:not([lang="ar"]) em { font-family: var(--accent); font-weight: 400; font-style: italic; letter-spacing: -.01em; color: var(--glow); }
html[lang="ar"] .h1, html[lang="ar"] .h2, html[lang="ar"] .h3 { font-weight: 500; letter-spacing: 0; }
.eyebrow { font-family: var(--mono); font-weight: 500; letter-spacing: .22em; color: var(--gold); }
html[lang="ar"] .eyebrow { font-family: var(--sans); }
.eyebrow::before { background: none; border: 1px solid var(--gold); width: 8px; height: 8px; }
.muted { color: var(--night-60); }

/* header: solid olive, a gold hairline, no blur over moving content */
.hdr.is-solid { background: rgb(29 32 15 / .97); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 1px 0 rgb(214 180 104 / .22); }
.logo__t b { font-weight: 600; }
.nav a::after { height: 2px; background: linear-gradient(90deg, #c2a04f, var(--glow)); }

/* buttons: gold, with a light sweep on hover */
.btn--gold, .btn--night { background: linear-gradient(120deg, #e0c47e, #b8913f); color: var(--deep); box-shadow: 0 10px 30px -14px rgb(214 180 104 / .6); }
.btn--gold::after, .btn--night::after { background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .5) 50%, transparent 70%); transform: translateX(-120%); transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.btn--gold:hover::after, .btn--night:hover::after { transform: translateX(120%); }
.btn--night:hover, .btn--gold:hover { color: var(--deep); }
.btn--sand { background: var(--ink); color: var(--deep); }
.btn--line:hover, .dark .btn--line:hover, .btn--line-light:hover { color: var(--deep); }
.chip { background: rgb(25 28 13 / .78); color: var(--ink); }
.chip--gold { color: var(--deep); }
.icon-btn { background: var(--card); }
.icon-btn.is-on { background: var(--gold); color: var(--deep); border-color: var(--gold); }
.icon-btn.is-on svg { fill: var(--deep); }
.pill.is-on, .seg button.is-on { background: var(--gold); color: var(--deep); border-color: var(--gold); }
.toggle input:checked { background: var(--gold); }
.fab { background: #2f5f3f; }

/* cards: lifted olive with a gold edge on hover */
.pcard { border: 1px solid rgb(238 232 207 / .07); }
.pcard:hover { box-shadow: 0 0 0 1px rgb(224 196 126 / .45), 0 34px 60px -30px rgb(0 0 0 / .7); }
.tag { color: var(--glow); }
.dark, .ftr, .phead, .wiz, .own, .cta__card, .reviews-card, .calc, .agent { background-color: var(--deep); }
.sadu { opacity: .35; }
.lattice { opacity: .05; }
.crenel-bottom::after { background: var(--olive); }
input, select, textarea { color-scheme: dark; }

/* the scroll statement words light up cream and gold */
.statement .w { color: rgb(238 232 207 / .16); }

/* admin: same olive night */
.adm { background: var(--olive); font-family: var(--sans); }
.adm__side { background: var(--deep); border-inline-end: 1px solid rgb(214 180 104 / .18); }
.adm-card { border-color: rgb(238 232 207 / .08); }
.adm-btn--dark { background: var(--gold); color: var(--deep); }
.serp { background: #fff; color: #202124; }

/* ---------- the cinematic page cut: letterbox bars close on a gold line, then open on the next page ---------- */
.transition { display: none !important; }
.nx { position: fixed; inset: 0; z-index: 1500; pointer-events: none; visibility: hidden; }
.nx.on { visibility: visible; pointer-events: all; }
.nx__bar { position: absolute; left: 0; right: 0; height: 50.5%; background: var(--deep); will-change: transform; }
.nx__bar--t { top: 0; }
.nx__bar--b { bottom: 0; }
.nx__bar::after { content: ""; position: absolute; inset: 0; opacity: .5;
  background: repeating-linear-gradient(0deg, rgb(238 232 207 / .025) 0 1px, transparent 1px 3px); }
.nx__line { position: absolute; left: 0; right: 0; top: 50%; height: 1px; margin-top: -.5px; transform: scaleX(0);
  background: linear-gradient(90deg, transparent, #b8913f 12%, var(--glow) 50%, #b8913f 88%, transparent); box-shadow: 0 0 18px rgb(230 201 131 / .7); }
.nx__scan { position: absolute; top: 50%; left: 0; width: 22vw; height: 3px; margin-top: -1.5px; border-radius: 2px; opacity: 0;
  background: radial-gradient(closest-side, #fff8e0, rgb(230 201 131 / .8), transparent); filter: blur(.5px); }
.nx__label { position: absolute; left: 0; right: 0; top: calc(50% - 46px); display: flex; justify-content: center; gap: 16px;
  font: 500 11px/1 var(--mono); letter-spacing: .32em; color: var(--gold); text-transform: uppercase; opacity: 0; }
.nx__label b { color: var(--ink); font-weight: 500; }
.nx__sub { position: absolute; left: 0; right: 0; top: calc(50% + 22px); text-align: center; font: 200 clamp(26px, 3.4vw, 46px)/1 var(--sans); letter-spacing: -.02em; color: var(--ink); opacity: 0; }
html[lang="ar"] .nx__label, html[lang="ar"] .nx__sub { font-family: "IBM Plex Sans Arabic", sans-serif; letter-spacing: 0; }

/* intro: the same letterbox, opening on the platform */
.intro { background: transparent; }
.intro::before, .intro__mark, .intro__word, .intro__bar { display: none; }

/* page arrivals: a slow Ken Burns on every page header photograph */
.phead__img img, .hero__media img { transform-origin: 50% 60%; }
.k-hair { display: block; height: 1px; width: 100%; margin-top: 22px; transform-origin: 0 50%; background: linear-gradient(90deg, var(--gold), transparent); }
html[dir="rtl"] .k-hair { transform-origin: 100% 50%; background: linear-gradient(270deg, var(--gold), transparent); }

@media (max-width: 760px) {
  .nx__scan { width: 40vw; }
}

/* ---------- the Palm House walkthrough: opens the NOOR homepage ---------- */
.nw { position: relative; height: 640vh; background: var(--deep); }
.nw__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.nw__poster, .nw__cv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nw__cv { opacity: 0; transition: opacity .6s; }
.nw--live .nw__cv { opacity: 1; }
.nw__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(25 28 13 / .82), rgb(25 28 13 / .35) 45%, transparent 75%), linear-gradient(0deg, rgb(25 28 13 / .85), transparent 32%); transition: background .8s; }
.nw--story .nw__shade { background: linear-gradient(90deg, rgb(27 31 16 / .94) 0%, rgb(27 31 16 / .72) 32%, rgb(27 31 16 / .2) 62%, transparent 80%), linear-gradient(0deg, rgb(27 31 16 / .85), transparent 30%); }
.nw__open { position: absolute; left: var(--g); bottom: clamp(110px, 16vh, 170px); max-width: 760px; transition: opacity .6s, transform .8s var(--ease); }
.nw__open .h1 { margin: 18px 0 20px; font-size: clamp(54px, 7.2vw, 118px); line-height: .98; }
.nw__lead { color: var(--sand-80); font-size: 16px; max-width: 420px; }
.nw--story .nw__open { opacity: 0; transform: translateY(-30px); pointer-events: none; }
.nw__story { position: absolute; left: var(--g); top: 50%; width: min(860px, calc(100vw - 2 * var(--g))); }
.nw__msg { position: absolute; left: 0; top: 0; width: 100%; transform: translateY(-50%); }
.nw__kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; font: 500 11px/1 var(--mono); letter-spacing: .22em; color: var(--glow); opacity: 0; transition: opacity .6s ease .1s; }
.nw__kicker i { width: 0; height: 1px; background: var(--gold); transition: width .9s cubic-bezier(.2,.7,.2,1) .1s; }
.nw__msg h2 { font: 200 clamp(36px, 3.9vw, 66px)/1.05 var(--sans); letter-spacing: -.035em; color: #f3eedb; text-shadow: 0 2px 30px #0006; }
.nw__msg h2 .ln { display: block; overflow: hidden; padding-bottom: .08em; }
.nw__msg h2 .ln > span { display: inline-block; transform: translateY(105%); transition: transform 1s cubic-bezier(.2,.75,.2,1); transition-delay: calc(var(--k) * .11s + .12s); }
.nw__msg h2 .ln:last-child > span { font: italic 400 1.05em/1 var(--accent); color: var(--glow); letter-spacing: -.01em; }
.nw__sub { max-width: 460px; margin-top: 22px; font: 300 15px/1.65 var(--sans); color: #ddd7c2; opacity: 0; transform: translateY(10px); transition: opacity .8s ease .45s, transform .9s cubic-bezier(.2,.7,.2,1) .45s; }
.nw__msg .btn { margin-top: 26px; }
.nw__msg.in .nw__kicker, .nw__msg.in .nw__sub { opacity: 1; transform: none; }
.nw__msg.in .nw__kicker i { width: 46px; }
.nw__msg.in h2 .ln > span { transform: none; }
.nw__msg.out { transition: opacity .5s, transform .6s cubic-bezier(.4,0,.2,1); opacity: 0; transform: translateY(calc(-50% - 26px)); }
.nw__hud { position: absolute; left: var(--g); right: var(--g); bottom: 92px; display: flex; align-items: center; gap: 18px; font: 500 11px/1 var(--mono); letter-spacing: .2em; color: var(--sand-80); text-transform: uppercase; }
.nw__room { min-width: 170px; color: var(--glow); }
.nw__track { flex: 1; height: 1px; background: rgb(238 232 207 / .2); }
.nw__track i { display: block; height: 100%; background: linear-gradient(90deg, #b8913f, var(--glow)); transform-origin: 0 50%; transform: scaleX(0); box-shadow: 0 0 10px rgb(230 201 131 / .6); }
.nw__skip { position: absolute; right: var(--g); bottom: 120px; font-size: 13px; color: var(--sand-80); border-bottom: 1px solid var(--gold); padding-bottom: 3px; }
@media (max-width: 760px) {
  .nw { height: 560vh; }
  .nw__story { top: 42%; }
  .nw__msg h2 { font-size: clamp(30px, 8.4vw, 40px); }
  .nw__sub { font-size: 13.5px; }
  .nw--story .nw__shade { background: linear-gradient(180deg, rgb(27 31 16 / .8), rgb(27 31 16 / .7) 55%, rgb(27 31 16 / .9)); }
  .nw__hud { bottom: 76px; } .nw__room { min-width: 0; }
  .nw__skip { bottom: 104px; }
  .nw__skip { bottom: 104px; }
}