/* ============================================================================
   ALRAYYAN GROUP — Modern Redesign
   Design language: "Quiet Luxury" · editorial real-estate · warm charcoal + gold
   Author: Claude (redesign proposal — not the production site)
   ========================================================================== */

/* ---- Design tokens ------------------------------------------------------- */
:root {
  /* Brand */
  --gold:        #c9a24b;
  --gold-soft:   #e2c581;
  --gold-deep:   #9c7a2e;

  /* Neutrals (warm) */
  --ink:         #0b0a08;
  --ink-2:       #131210;
  --ink-3:       #1c1a16;
  --panel:       #17150f;
  --line:        rgba(201,162,75,.18);
  --line-soft:   rgba(255,255,255,.07);

  --cream:       #f6f1e7;
  --sand:        #cdc4b4;
  --muted:       #94897a;
  --white:       #ffffff;

  /* Typography — Fraunces (editorial display) + Hanken Grotesk (warm humanist UI).
     Chosen to read distinctly bespoke, not the generic Playfair/Cormorant look. */
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans:  "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif-set: "opsz" 40, "SOFT" 0, "WONK" 1;

  /* Rhythm */
  --container: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --section-y: clamp(72px, 11vw, 160px);
  --radius: 16px;
  --radius-lg: 26px;

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  /* Shadow */
  --shadow-lg: 0 40px 80px -30px rgba(0,0,0,.75);
  --shadow-sm: 0 12px 30px -12px rgba(0,0,0,.6);
}

/* ---- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body {
  font-family: var(--sans);
  background: var(--ink);
  color: var(--cream);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  user-select: none !important; -webkit-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important;
  -webkit-touch-callout: none !important;
}
input, textarea, select, [contenteditable] {
  user-select: text !important; -webkit-user-select: text !important;
}
img, picture, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 3px; border-radius: 4px; }

/* Ambient grain / vignette layer */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 80% -10%, rgba(201,162,75,.10), transparent 55%),
    radial-gradient(100% 80% at -10% 110%, rgba(201,162,75,.06), transparent 50%);
}

/* ---- Layout helpers ------------------------------------------------------ */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { position: relative; z-index: 1; padding-block: var(--section-y); }
.section--tight { padding-block: clamp(48px, 7vw, 96px); }

/* ---- Section splitter ----------------------------------------------------- */
.section-splitter {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center; gap: 18px;
  max-width: 420px; margin: 0 auto; padding-block: clamp(8px, 2vw, 16px);
}
.section-splitter::before, .section-splitter::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 50%, transparent);
}
.section-splitter::before { background: linear-gradient(90deg, transparent, var(--gold)); }
.section-splitter::after { background: linear-gradient(90deg, var(--gold), transparent); }
.section-splitter__mark {
  width: 9px; height: 9px; flex: none;
  background: var(--gold-soft); transform: rotate(45deg);
  box-shadow: 0 0 0 5px rgba(201,162,75,.12);
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--sans); font-size: .72rem; font-weight: 600;
  letter-spacing: .32em; text-transform: uppercase; color: var(--gold-soft);
}
.eyebrow::before { content: ""; width: 34px; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); }
.center .eyebrow::before { display: none; }

.display {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(2.4rem, 5.6vw, 4.6rem);
  line-height: 1.02; letter-spacing: -.01em; color: var(--white);
}
.display em { font-style: italic; color: var(--gold-soft); }
.section-title {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.06; color: var(--white);
  letter-spacing: -.01em;
}
.lead { color: var(--sand); font-size: clamp(1rem, 1.6vw, 1.12rem); font-weight: 300; }
.center { text-align: center; }
.center .eyebrow { justify-content: center; }

.section-head { max-width: 640px; margin-bottom: clamp(36px, 5vw, 64px); }
.section-head.center { margin-inline: auto; }
.section-head .eyebrow { margin-bottom: 18px; }
.section-head .lead { margin-top: 20px; }

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  --btn-bg: var(--gold); --btn-fg: #17130a;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 30px; border-radius: 100px;
  font-weight: 600; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase;
  background: var(--btn-bg); color: var(--btn-fg);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), background .3s;
  will-change: transform; position: relative;
}
.btn:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -14px rgba(201,162,75,.6); }
.btn:active { transform: translateY(-1px); }
.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--cream);
  border: 1px solid var(--line); background: rgba(255,255,255,.02);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover { border-color: var(--gold); color: var(--gold-soft); box-shadow: none; }
.btn--lg { padding: 18px 38px; font-size: .86rem; }
.btn--block { display: flex; width: 100%; }
.btn .arrow { transition: transform .4s var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }

.link-underline {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold-soft); padding-bottom: 3px;
  background: linear-gradient(var(--gold), var(--gold)) left bottom / 0% 1px no-repeat;
  transition: background-size .4s var(--ease);
}
.link-underline:hover { background-size: 100% 1px; }

/* ---- Navbar -------------------------------------------------------------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background .4s var(--ease), border-color .4s, padding .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: 20px;
}
.nav.scrolled {
  background: rgba(11,10,8,.72);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--line-soft);
}
.nav.scrolled .nav__inner { padding-block: 12px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { width: 42px; height: 42px; object-fit: contain; }
.brand__name { font-family: var(--serif); font-size: 1.32rem; letter-spacing: .06em; color: var(--white); line-height: 1; }
.brand__sub { display: block; font-family: var(--sans); font-size: .56rem; letter-spacing: .42em; text-transform: uppercase; color: var(--gold-soft); margin-top: 4px; }

.nav__links { display: flex; align-items: center; gap: 34px; }
.nav__links a {
  font-size: .78rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--sand);
  position: relative; padding: 4px 0; transition: color .3s;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px;
  background: var(--gold); transition: width .35s var(--ease);
}
.nav__links a:hover { color: var(--white); }
.nav__links a:hover::after { width: 100%; }

.nav__actions { display: flex; align-items: center; gap: 18px; }
.lang {
  display: inline-flex; border: 1px solid var(--line); border-radius: 100px; overflow: hidden;
  font-size: .68rem; font-weight: 700; letter-spacing: .08em;
}
.lang button { padding: 7px 13px; color: var(--sand); transition: all .3s; }
.lang button.active { background: var(--gold); color: #17130a; }

.nav__mobile { display: none; }
.nav__burger { display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); position: relative; }
.nav__burger span { position: absolute; left: 12px; right: 12px; height: 1.6px; background: var(--cream); transition: transform .35s var(--ease), opacity .3s; }
.nav__burger span:nth-child(1) { top: 16px; }
.nav__burger span:nth-child(2) { top: 22px; }
.nav__burger span:nth-child(3) { top: 28px; }
.nav__burger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__burger.open span:nth-child(2) { opacity: 0; }
.nav__burger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---- Hero ---------------------------------------------------------------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.8s ease; }
.hero__bg-img.active { opacity: 1; animation: heroZoom 9s var(--ease-out) forwards; }
@keyframes heroZoom { from { transform: scale(1.1); } to { transform: scale(1); } }
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(11,10,8,.55) 0%, rgba(11,10,8,.35) 40%, rgba(11,10,8,.92) 100%),
    linear-gradient(90deg, rgba(11,10,8,.85) 0%, transparent 60%);
}
.hero__inner { position: relative; z-index: 2; width: 100%; padding-top: 96px; }
.hero__eyebrow { margin-bottom: 26px; }
.hero__cta { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 16px; }

/* Hero brand mark — replaces the headline with the logo, "dynamic" entrance
   (fade + scale in) plus a slow continuous float, matching the current site's
   logo-led hero. Outer wrapper owns the one-shot entrance so it doesn't fight
   the inner img's own looping float animation. */
.hero__logo-wrap { opacity: 0; transform: scale(.7) translateY(20px); animation: logoIn 1s var(--ease-out) .15s forwards; }
@keyframes logoIn { to { opacity: 1; transform: scale(1) translateY(0); } }
.hero__logo { width: clamp(90px, 11vw, 160px); height: auto; filter: drop-shadow(0 14px 30px rgba(0,0,0,.55)); animation: logoFloat 5s ease-in-out 1.2s infinite; }
@keyframes logoFloat { 0%, 50%, 100% { transform: translateY(0); } 25% { transform: translateY(-8px); } }
.hero__wordmark { margin-top: 22px; font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 5.5vw, 3.6rem); letter-spacing: .04em; color: #fff; }
/* Fixed gold (not the theme-following --gold-soft token) — this sits on the
   always-dark hero photo in both themes, so it must not go dull in light mode. */
.hero__wordmark em { font-style: normal; color: #e2c581; }
.hero__tagline { margin-top: 14px; font-size: clamp(.92rem, 1.5vw, 1.1rem); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.72); font-weight: 300; }

.scroll-cue { position: absolute; z-index: 2; right: var(--gutter); top: 50%; writing-mode: vertical-rl; font-size: .64rem; letter-spacing: .35em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 14px; }
.scroll-cue::after { content: ""; width: 1px; height: 60px; background: linear-gradient(var(--gold), transparent); animation: cue 2.4s var(--ease) infinite; }
@keyframes cue { 0%,100% { transform: scaleY(.4); opacity:.4; transform-origin: top; } 50% { transform: scaleY(1); opacity:1; } }

/* ---- About --------------------------------------------------------------- */
.about__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(36px, 6vw, 84px); align-items: center; }
.about__media { position: relative; }
.about__media img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; border-radius: var(--radius-lg); }
.about__frame { position: absolute; inset: -14px; border: 1px solid var(--line); border-radius: var(--radius-lg); z-index: -1; }
.about__badge {
  position: absolute; right: -18px; bottom: -18px; width: 148px; height: 148px; border-radius: 50%;
  display: grid; place-content: center; text-align: center;
  background: radial-gradient(circle at 30% 30%, var(--gold-soft), var(--gold-deep));
  color: #1a1409; box-shadow: var(--shadow-sm);
}
.about__badge .b-n { font-family: var(--serif); font-size: 2.6rem; line-height: 1; font-weight: 600; }
.about__badge .b-l { font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; margin-top: 4px; }
.about__body p { margin-top: 20px; color: var(--sand); font-weight: 300; }
.about__body .btn-row { margin-top: 34px; display: flex; gap: 16px; flex-wrap: wrap; }

/* ---- Solutions cards ----------------------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 26px); }
.card {
  position: relative; border-radius: var(--radius); overflow: hidden; min-height: 400px;
  display: flex; flex-direction: column; justify-content: flex-end;
  isolation: isolate; border: 1px solid var(--line-soft);
}
.card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11,10,8,.1) 30%, rgba(11,10,8,.55) 60%, rgba(11,10,8,.95) 100%); transition: background .5s; }
.card__body { padding: 28px; transform: translateY(8px); transition: transform .5s var(--ease); }
.card:hover .card__body { transform: translateY(0); }
.card__tag { font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-soft); }
.card h3 { font-family: var(--serif); font-size: 1.7rem; color: var(--white); margin-top: 10px; font-weight: 500; }
.card p { margin-top: 10px; color: var(--sand); font-size: .88rem; font-weight: 300; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s var(--ease), opacity .4s, margin .4s; }
.card:hover p { max-height: 160px; opacity: 1; }
.card__foot { margin-top: 18px; display: flex; align-items: center; justify-content: space-between; }
.card__price { font-size: .78rem; color: var(--muted); letter-spacing: .04em; }

/* ---- Availability -------------------------------------------------------- */
.avail { background: var(--ink-2); border-block: 1px solid var(--line-soft); }
.avail__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.avail-row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px;
  padding: 22px 26px; border: 1px solid var(--line-soft); border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent);
  transition: border-color .35s, transform .35s var(--ease), background .35s;
}
.avail-row:hover { border-color: var(--line); transform: translateY(-2px); background: rgba(201,162,75,.04); }
.avail-row__floor { font-family: var(--serif); font-size: 1.5rem; color: var(--gold-soft); min-width: 62px; }
.avail-row__meta .t { font-weight: 600; font-size: .96rem; color: var(--white); }
.avail-row__sizes { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 4px; }
.size-tag { font-size: .74rem; font-weight: 600; letter-spacing: .03em; }
.size-tag--on { color: #7ee0a0; }
.size-tag--off { color: var(--muted); opacity: .55; text-decoration: line-through; }
.avail-row__book { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-soft); border: 1px solid var(--line); padding: 9px 16px; border-radius: 100px; transition: all .3s; white-space: nowrap; }
.avail-row__book:hover { background: var(--gold); color: #17130a; border-color: var(--gold); }

/* Floors with no available size at all render as a plain (non-clickable)
   div instead of <a> — style it as visibly inert rather than a dead link. */
.avail-row--disabled { cursor: default; }
.avail-row--disabled:hover { border-color: var(--line-soft); transform: none; background: linear-gradient(180deg, rgba(255,255,255,.02), transparent); }
.avail-row--disabled .avail-row__book { color: var(--muted); border-color: var(--line-soft); }
.avail-row--disabled .avail-row__book:hover { background: none; color: var(--muted); border-color: var(--line-soft); }

/* ---- Features — individual glowing cards (not a joined table/list) ------- */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 22px); }
.feature {
  position: relative; text-align: center; overflow: hidden; isolation: isolate;
  background: var(--ink-2); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: clamp(30px, 3.5vw, 42px) 26px 30px;
  transition: transform .45s var(--ease), border-color .4s, box-shadow .4s, background .4s;
}
.feature::after {
  content: ""; position: absolute; left: 14%; right: 14%; bottom: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: .55; transition: opacity .4s, height .4s;
}
.feature:hover { transform: translateY(-8px); border-color: var(--gold); box-shadow: 0 26px 54px -22px rgba(201,162,75,.4); }
.feature:hover::after { opacity: 1; height: 4px; }
.feature__ico {
  width: 62px; height: 62px; margin: 0 auto 22px; display: grid; place-content: center; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, var(--gold-soft), var(--gold-deep));
  color: #17130a; font-size: 1.4rem; box-shadow: 0 12px 26px -10px rgba(201,162,75,.55);
  transition: transform .5s var(--ease);
}
.feature:hover .feature__ico { transform: scale(1.1) rotate(-8deg); }
.feature h3 { font-family: var(--serif); font-size: 1.3rem; color: var(--white); font-weight: 500; }
.feature p { margin-top: 10px; color: var(--sand); font-size: .88rem; font-weight: 300; }

/* ---- Ventures ------------------------------------------------------------ */
.ventures { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px); }
.venture { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 460px; display: flex; align-items: flex-end; isolation: isolate; }
.venture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1s var(--ease-out); filter: grayscale(.2); }
.venture::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 20%, rgba(11,10,8,.4) 55%, rgba(11,10,8,.96) 100%); }
.venture:hover img { transform: scale(1.06); filter: grayscale(0); }
/* Admin-disabled business — stays visible but faded and non-interactive,
   matching the current production site's applyBizStatus() treatment. */
.venture--disabled { opacity: .35; pointer-events: none; }
.venture__body { padding: 34px; width: 100%; }
.venture__body .num { font-family: var(--serif); font-size: .9rem; color: var(--gold-soft); }
.venture__body h3 { font-family: var(--serif); font-size: 2rem; color: var(--white); margin-top: 8px; font-weight: 500; }
.venture__body p { color: var(--sand); font-size: .9rem; font-weight: 300; margin-top: 12px; max-width: 40ch; }
.venture__body .link-underline { margin-top: 20px; }

/* ---- Glimpse Inside — full-width cinematic slider ------------------------ */
.glimpse { position: relative; }
.glimpse__frame { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line-soft); background: var(--ink-3); }
.glimpse__viewport { overflow: hidden; }
.glimpse__track { display: flex; direction: ltr; transition: transform .7s var(--ease-out); will-change: transform; }
.glimpse__slide { position: relative; min-width: 100%; aspect-ratio: 16 / 7; background: var(--ink-3); }
.glimpse__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.glimpse__slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(11,10,8,.78) 100%); pointer-events: none; }
.glimpse__cap { position: absolute; left: clamp(20px, 3vw, 40px); bottom: clamp(18px, 3vw, 34px); z-index: 2; font-size: .74rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--gold-soft); }
[dir="rtl"] .glimpse__cap { left: auto; right: clamp(20px, 3vw, 40px); }

.glimpse__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-content: center;
  background: rgba(11,10,8,.4); border: 1px solid rgba(255,255,255,.14); color: var(--cream);
  font-size: 1.2rem; backdrop-filter: blur(6px); opacity: 0; transition: opacity .35s, background .3s, color .3s; cursor: pointer;
}
.glimpse__frame:hover .glimpse__arrow { opacity: 1; }
.glimpse__arrow:hover { background: var(--gold); color: #17130a; border-color: var(--gold); }
.glimpse__arrow--prev { left: 18px; } .glimpse__arrow--next { right: 18px; }

.glimpse__dots { display: flex; justify-content: center; gap: 10px; margin-top: 22px; }
.glimpse__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); cursor: pointer; padding: 0; transition: all .35s; }
.glimpse__dot.active { background: var(--gold); width: 30px; border-radius: 100px; }
@media (max-width: 720px) { .glimpse__slide { aspect-ratio: 4 / 3; } .glimpse__arrow { opacity: 1; width: 44px; height: 44px; } }

/* ---- Find Us — clickable map card (no external embed) -------------------- */
.find-map {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; text-align: center; min-height: 440px; height: 100%; padding: 40px;
  border-radius: var(--radius-lg); border: 1px solid var(--line); overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 40%, rgba(201,162,75,.06), transparent 60%),
    var(--ink-2);
  transition: border-color .4s, transform .4s var(--ease);
}
.find-map::before {
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: .5;
  background-image:
    linear-gradient(rgba(201,162,75,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,162,75,.09) 1px, transparent 1px);
  background-size: 46px 46px; mask-image: radial-gradient(circle at 50% 45%, #000 30%, transparent 78%);
}
.find-map:hover { border-color: var(--gold); transform: translateY(-3px); }
.find-map > * { position: relative; z-index: 1; }
.find-map__pin { font-size: 2.6rem; filter: drop-shadow(0 8px 14px rgba(0,0,0,.5)); animation: pinFloat 2.6s var(--ease) infinite; }
@keyframes pinFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.find-map__addr { font-family: var(--serif); font-size: clamp(1.2rem, 2.4vw, 1.7rem); color: var(--white); font-weight: 500; max-width: 22ch; }
.find-map__rule { width: 90px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.find-map__go { font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-soft); }
.find-map:hover .find-map__go { color: var(--gold); }

/* ---- CTA band ------------------------------------------------------------ */
.cta-band { position: relative; border-radius: var(--radius-lg); overflow: hidden; padding: clamp(48px, 7vw, 96px); text-align: center; isolation: isolate; }
.cta-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.cta-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11,10,8,.82), rgba(11,10,8,.9)); }
.cta-band .btn { margin-top: 30px; }

/* ---- Contact ------------------------------------------------------------- */
.contact__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(36px, 5vw, 72px); align-items: start; }
.contact__list { margin-top: 34px; display: grid; gap: 4px; }
.contact-item { display: flex; gap: 20px; padding: 22px 4px; border-bottom: 1px solid var(--line-soft); align-items: flex-start; }
.contact-item__ico { width: 46px; height: 46px; flex: none; display: grid; place-content: center; border: 1px solid var(--line); border-radius: 12px; color: var(--gold-soft); }
.contact-item .k { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.contact-item .v { font-size: 1.02rem; color: var(--cream); margin-top: 4px; }
.contact-item .v a:hover { color: var(--gold-soft); }
.contact__socials { margin-top: 30px; display: flex; gap: 12px; }
.social-btn { width: 48px; height: 48px; display: grid; place-content: center; border: 1px solid var(--line); border-radius: 12px; color: var(--sand); transition: all .35s; }
.social-btn:hover { background: var(--gold); color: #17130a; border-color: var(--gold); transform: translateY(-3px); }
.map-wrap { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); min-height: 440px; height: 100%; }
.map-wrap iframe { width: 100%; height: 100%; min-height: 440px; border: 0; filter: grayscale(.4) invert(.9) contrast(.85); }

/* ---- Footer -------------------------------------------------------------- */
.footer { border-top: 1px solid var(--line-soft); background: var(--ink-2); padding-block: clamp(48px, 6vw, 80px); }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.footer__brand p { color: var(--muted); font-size: .88rem; font-weight: 300; margin-top: 18px; max-width: 34ch; }
.footer h4 { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 20px; }
.footer li { margin-bottom: 12px; }
.footer li { color: var(--sand); font-size: .88rem; font-weight: 400; }
.footer li a { color: var(--sand); font-size: .88rem; font-weight: 400; transition: color .3s; }
.footer li a:hover { color: var(--white); }
.footer__bottom { margin-top: 54px; padding-top: 26px; border-top: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; gap: 14px 22px; justify-content: space-between; align-items: center; }
.footer__bottom p { color: var(--muted); font-size: .78rem; }
.footer__privacy { color: var(--muted); font-size: .78rem; text-decoration: underline; text-underline-offset: 3px; transition: color .3s; }
.footer__privacy:hover { color: var(--gold-soft); }

/* ---- Booking modal ------------------------------------------------------- */
.modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; visibility: hidden; opacity: 0; transition: opacity .4s, visibility .4s; }
.modal.open { visibility: visible; opacity: 1; }
.modal__scrim { position: absolute; inset: 0; background: rgba(6,5,4,.72); backdrop-filter: blur(8px); }
.modal__panel {
  position: relative; width: min(560px, 100%); max-height: 92vh; overflow-y: auto;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 44px); box-shadow: var(--shadow-lg);
  transform: translateY(24px) scale(.98); transition: transform .5s var(--ease-out);
}
.modal.open .modal__panel { transform: none; }
.modal__close { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); color: var(--sand); font-size: 1.1rem; transition: all .3s; }
.modal__close:hover { background: var(--gold); color: #17130a; border-color: var(--gold); rotate: 90deg; }
.modal h3 { font-family: var(--serif); font-size: 1.9rem; color: var(--white); font-weight: 500; }
.modal .lead { margin-top: 8px; font-size: .92rem; }
.form { margin-top: 26px; display: grid; gap: 16px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 7px; }
.field label { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea {
  font: inherit; font-size: .92rem; color: var(--cream); background: var(--ink); border: 1px solid var(--line-soft);
  border-radius: 11px; padding: 13px 15px; transition: border-color .3s, background .3s; width: 100%;
}
.field textarea { resize: vertical; min-height: 84px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold); background: var(--ink-3); outline: none; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c9a24b' fill='none' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 38px; }
.form__note { font-size: .74rem; color: var(--muted); text-align: center; }
.booking-success { text-align: center; padding: 20px 0; }
.booking-success .tick { width: 74px; height: 74px; border-radius: 50%; margin: 0 auto 20px; display: grid; place-content: center; font-size: 2rem; background: rgba(126,224,160,.12); border: 1px solid rgba(126,224,160,.4); color: #7ee0a0; }
.booking-success .ref { display: inline-block; margin-top: 14px; font-family: var(--serif); font-size: 1.5rem; color: var(--gold-soft); letter-spacing: .05em; }

/* ---- Cookie bar ---------------------------------------------------------- */
.cookie { position: fixed; z-index: 150; left: 20px; right: 20px; bottom: 20px; max-width: 520px; margin-inline: auto; background: var(--ink-3); border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; box-shadow: var(--shadow-lg); display: flex; gap: 18px; align-items: center; transform: translateY(140%); transition: transform .6s var(--ease-out); }
.cookie.show { transform: none; }
.cookie p { font-size: .8rem; color: var(--sand); font-weight: 300; }
.cookie a { color: var(--gold-soft); text-decoration: underline; }
.cookie button { flex: none; padding: 10px 20px; border-radius: 100px; background: var(--gold); color: #17130a; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

/* ---- Scroll reveal ------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; }
.reveal[data-d="4"] { transition-delay: .32s; }

/* ---- Progress bar -------------------------------------------------------- */

/* ---- RTL ----------------------------------------------------------------- */
/* Body/UI copy → IBM Plex Sans Arabic (clean, professional). Display headings
   → Markazi Text, chosen to echo Fraunces' editorial serif feel in Arabic
   rather than defaulting to the generic Cairo/Tahoma look. */
[dir="rtl"] { font-family: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif; }
[dir="rtl"] .display, [dir="rtl"] .section-title, [dir="rtl"] .sec-title,
[dir="rtl"] .hero__wordmark, [dir="rtl"] .fl-hero h1,
[dir="rtl"] .card h3, [dir="rtl"] .venture__body h3, [dir="rtl"] .find-map__addr {
  font-family: "Markazi Text", "Fraunces", serif;
}
[dir="rtl"] .eyebrow::before { background: linear-gradient(-90deg, var(--gold), transparent); }
/* Arabic is a cursive/joining script — the wide letter-spacing used all over
   this site for its English small-caps look (eyebrows, pills, nav links,
   buttons, footer headings…) breaks the joining between Arabic letters,
   making words render as disconnected/"dashed" glyphs. Force it off for
   every element once the page is in RTL — !important is deliberate here,
   since dozens of individual rules set their own tracking and all of them
   must lose to this once the script changes. */
[dir="rtl"] * { letter-spacing: normal !important; }
[dir="rtl"] .scroll-cue { left: var(--gutter); right: auto; font-size: .8rem; }
[dir="rtl"] .btn:hover .arrow { transform: translateX(-4px); }
/* Arabic reads a touch small at the same rem sizes as the Latin nav — nudge
   the top bar links up slightly for comfortable legibility. */
[dir="rtl"] .nav__links a { font-size: .9rem; }
[dir="rtl"] .hero__eyebrow { font-size: .85rem; }
/* ‹ › are Unicode bidi-mirrored characters — inside an RTL document the
   browser auto-flips their glyph, making "next" look like "prev" and vice
   versa. Force LTR rendering context on the arrow buttons so the glyph
   always points the way its class name says, on both LTR and RTL pages. */
.slider__arrow, .glimpse__arrow { direction: ltr; }

/* ==========================================================================
   v2 ADDITIONS — light theme, WhatsApp pill, compact ventures, logo, IG, toggle
   ========================================================================== */

/* ---- Light theme --------------------------------------------------------- */
:root[data-theme="light"] {
  --gold: #a5801f; --gold-soft: #8a6a1e; --gold-deep: #6f5417;
  --ink: #f4efe6; --ink-2: #ffffff; --ink-3: #efe8db; --panel: #fbf8f2;
  --line: rgba(140,106,30,.28); --line-soft: rgba(20,18,14,.10);
  --cream: #211c14; --sand: #4d463a; --muted: #8a7f6c; --white: #171208;
  --shadow-lg: 0 40px 80px -34px rgba(90,70,20,.28);
  --shadow-sm: 0 14px 30px -16px rgba(90,70,20,.24);
}
:root[data-theme="light"] body { background: var(--ink); color: var(--cream); }
:root[data-theme="light"] body::before {
  background:
    radial-gradient(120% 90% at 80% -10%, rgba(165,128,31,.10), transparent 55%),
    radial-gradient(100% 80% at -10% 110%, rgba(165,128,31,.07), transparent 50%);
}
:root[data-theme="light"] .nav.scrolled { background: rgba(244,239,230,.82); border-bottom-color: var(--line-soft); }
:root[data-theme="light"] .nav__mobile { background: rgba(244,239,230,.98); }
:root[data-theme="light"] .btn--ghost { background: rgba(0,0,0,.02); }
/* Text on LIGHT surfaces → dark. */
:root[data-theme="light"] .find-map__addr,
:root[data-theme="light"] .section-title { color: var(--white); }
/* The dark-mode mint green (#7ee0a0) washes out on the cream light-mode
   background — swap in a deeper, more saturated green and bump the weight
   so available sizes stay legible/prominent in light mode. */
:root[data-theme="light"] .size-tag--on { color: #158a4a; font-weight: 800; }
:root[data-theme="light"] .feature:hover { background: var(--ink-3); }

/* ---- Fixed "on-photo" palette (theme-independent) -----------------------
   These sit on imagery that stays dark in BOTH themes (hero/fl-hero
   backgrounds, card & venture thumbnails, glimpse slides, the CTA band) — so
   their color must NOT follow the light/dark tokens, or they wash out in
   light mode. Values below equal the previous dark-theme token output, so
   dark mode is visually unchanged; light mode now matches it exactly. */
.hero__eyebrow, .hero__wordmark,
.card h3, .venture__body h3,
.cta-band .display { color: #fff; }
.hero__tagline, .card p, .venture__body p { color: rgba(255,255,255,.82); }
.scroll-cue { color: rgba(255,255,255,.62); }
.card__tag, .glimpse__cap, .venture__body .num { color: #e2c581; }
.card__price { color: rgba(255,255,255,.6); }
.hero__cta .btn--ghost { color: #fff; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.06); }
.hero__cta .btn--ghost:hover { border-color: var(--gold); color: var(--gold-soft); }
/* Floor/space page equivalents (.fl-hero h1, .fl-size-tag, .fl-breadcrumb,
   .fl-hero .btn--ghost) are fixed directly in floor.css, which is loaded
   AFTER this file on those pages and would otherwise re-shadow these rules. */

.nav__back { font-size: .72rem; white-space: nowrap; }

/* Nav sits transparently over the (always-dark) hero photo until scrolled —
   force light-safe colors here regardless of theme. Only index.html ever
   shows this un-scrolled state; floor/space/privacy pages start pre-scrolled
   (see their markup), so this never affects a page with a plain background. */
.nav:not(.scrolled) .nav__links a,
.nav:not(.scrolled) .lang button:not(.active),
.nav:not(.scrolled) .theme-btn,
.nav:not(.scrolled) .nav__back { color: rgba(255,255,255,.85); }
.nav:not(.scrolled) .nav__links a:hover { color: #fff; }
.nav:not(.scrolled) .brand__name { color: #fff; }
.nav:not(.scrolled) .theme-btn, .nav:not(.scrolled) .lang, .nav:not(.scrolled) .nav__burger { border-color: rgba(255,255,255,.35); }
.nav:not(.scrolled) .nav__burger span { background: #fff; }
.nav:not(.scrolled) .btn--ghost { color: #fff; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.06); }

/* When the mobile menu is open, its own backdrop (light cream in light mode)
   sits behind the nav bar instead of the dark hero photo, so the "always
   white" on-photo override above would go invisible on light backgrounds.
   Switch back to the theme-aware token — resolves to white in dark mode
   (no visual change there) and dark text in light mode (fixes contrast). */
.nav.mobile-open .brand__name,
.nav.mobile-open .brand__sub { color: var(--white); }
.nav.mobile-open .nav__links a,
.nav.mobile-open .lang button:not(.active),
.nav.mobile-open .theme-btn,
.nav.mobile-open .nav__back { color: var(--sand); }
.nav.mobile-open .theme-btn, .nav.mobile-open .lang, .nav.mobile-open .nav__burger { border-color: var(--line); }
.nav.mobile-open .nav__burger span { background: var(--cream); }

/* ---- Theme toggle button ------------------------------------------------- */
.theme-btn { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 1px solid var(--line);
  display: grid; place-content: center; color: var(--gold-soft); font-size: 1rem; transition: all .3s; background: transparent; }
.theme-btn:hover { border-color: var(--gold); color: var(--gold); transform: rotate(18deg); }
.theme-btn .sun { display: none; } .theme-btn .moon { display: block; }
:root[data-theme="light"] .theme-btn .sun { display: block; } :root[data-theme="light"] .theme-btn .moon { display: none; }

/* ---- WhatsApp glowing pill ------------------------------------------------
   One floating button; clicking it reveals a small menu of both numbers
   instead of showing two separate floating pills. */
.wa-pill-wrap { position: fixed; bottom: 24px; right: 24px; z-index: 95; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
[dir="rtl"] .wa-pill-wrap { right: auto; left: 24px; align-items: flex-start; }
.wa-pill {
  border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px; border-radius: 100px;
  background: #25d366; color: #fff; font-weight: 700; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase;
  box-shadow: 0 10px 30px -6px rgba(37,211,102,.7); animation: waGlow 2.6s ease-in-out infinite; transition: transform .3s;
}
.wa-pill svg { flex: none; }
.wa-pill:hover { transform: translateY(-3px) scale(1.04); }
@keyframes waGlow {
  0%,100% { box-shadow: 0 0 0 0 rgba(37,211,102,.5), 0 10px 28px -6px rgba(37,211,102,.6); }
  50%     { box-shadow: 0 0 0 14px rgba(37,211,102,0), 0 12px 36px -6px rgba(37,211,102,.9); }
}
.wa-pill-menu {
  display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 16px;
  background: var(--panel, var(--ink-2)); border: 1px solid var(--line); box-shadow: var(--shadow-lg);
  animation: waMenuIn .2s var(--ease-out, ease-out);
}
.wa-pill-menu[hidden] { display: none; }
.wa-pill-menu a {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 10px;
  background: rgba(37,211,102,.12); color: var(--cream); font-weight: 600; font-size: .82rem; white-space: nowrap;
  transition: background .2s;
}
.wa-pill-menu a:hover { background: rgba(37,211,102,.22); }
.wa-pill-menu a svg { flex: none; color: #25d366; }
@keyframes waMenuIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) {
  .wa-pill-wrap { bottom: 16px; right: 16px; }
  [dir="rtl"] .wa-pill-wrap { left: 16px; }
  .wa-pill { padding: 13px; }
  .wa-pill .wa-lbl { display: none; }
}

/* ---- Back-to-top arrow (mobile only) — appears once the user nears the
   bottom of the page, sits opposite the WhatsApp pill so they never overlap. */
.to-top {
  display: none; position: fixed; bottom: 24px; left: 24px; z-index: 95;
  width: 44px; height: 44px; border-radius: 50%; align-items: center; justify-content: center;
  font-size: 1.15rem; background: var(--gold); color: #17130a; box-shadow: 0 10px 26px -8px rgba(0,0,0,.55);
  opacity: 0; transform: translateY(12px); transition: opacity .35s, transform .35s; pointer-events: none;
}
[dir="rtl"] .to-top { left: auto; right: 24px; }
@media (max-width: 860px) {
  .to-top { display: inline-flex; }
  .to-top.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
}
@media (max-width: 560px) { .to-top { width: 40px; height: 40px; bottom: 16px; left: 16px; } [dir="rtl"] .to-top { left: auto; right: 16px; } }

/* ---- Compact ventures (smaller cards) ----------------------------------- */
.ventures.ventures--compact { grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ventures--compact .venture { min-height: 300px; border-radius: var(--radius); }
.ventures--compact .venture__body { padding: 22px; }
.ventures--compact .venture__body h3 { font-size: 1.5rem; }
.ventures--compact .venture__body p { font-size: .82rem; margin-top: 8px; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.ventures--compact .venture__body .link-underline { margin-top: 14px; }
@media (max-width: 760px) { .ventures.ventures--compact { grid-template-columns: 1fr; } .ventures--compact .venture { min-height: 240px; } }

/* ---- Card links to sub-pages -------------------------------------------- */
.card__media { display: block; overflow: hidden; }

/* ---- Instagram gradient button ------------------------------------------ */
.social-btn.ig:hover { background: linear-gradient(45deg,#f09433,#dc2743,#bc1888); border-color: transparent; color: #fff; }
.social-btn svg { width: 20px; height: 20px; }

/* ---- Cookie actions (Accept / Reject) ----------------------------------- */
.cookie__actions { display: flex; gap: 8px; flex: none; }
.cookie-reject { background: transparent; border: 1px solid var(--line); color: var(--sand); padding: 10px 18px; border-radius: 100px; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; transition: all .3s; }
.cookie-reject:hover { border-color: var(--gold); color: var(--gold-soft); }
@media (max-width: 460px) { .cookie { flex-direction: column; align-items: stretch; text-align: center; } .cookie__actions { justify-content: center; } }

/* ---- Logo watermark in CTA band ----------------------------------------- */
.cta-band { }
.cta-band__logo { position: absolute; right: clamp(16px,3vw,40px); bottom: clamp(16px,3vw,34px); width: clamp(70px,10vw,120px); opacity: .16; z-index: 0; pointer-events: none; }
[dir="rtl"] .cta-band__logo { right: auto; left: clamp(16px,3vw,40px); }
.cta-band > *:not(.cta-band__logo):not(img) { position: relative; z-index: 1; }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 1080px) {
  .cards, .features, .ventures { grid-template-columns: repeat(2, 1fr); }
  .gallery { columns: 2; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 860px) {
  /* Disable the double-tap-to-zoom gesture on mobile (page + mobile dropdown
     nav both showed it) while still allowing normal pinch-zoom and scroll. */
  html, body { touch-action: manipulation; }
  .nav__mobile, .nav__mobile a, .nav__mobile button { touch-action: manipulation; }
  .nav__links { display: none; }
  /* Keep language + theme reachable on phones; drop the redundant Book
     button to make room. The floor/space back-link collapses to a compact
     round arrow button instead of disappearing entirely. flex-wrap is a
     safety net: on very narrow phones brand + all the action icons can
     still exceed the row width, so actions wrap to their own line below
     the brand instead of overlapping it. */
  .nav__inner { flex-wrap: wrap; row-gap: 10px; }
  .nav__actions .btn--ghost { display: none; }
  .nav__actions .nav__back {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex: none; padding: 0; border-radius: 50%;
    border: 1px solid var(--line); background: rgba(255,255,255,.04);
    font-size: 0; background-image: none;
  }
  .nav__actions .nav__back::before { content: "←"; font-size: 1.05rem; line-height: 1; }
  .nav__actions { gap: 10px; }
  .nav__burger { display: block; }
  .nav__mobile { position: fixed; inset: 0; z-index: 99; background: rgba(11,10,8,.97); backdrop-filter: blur(20px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; transform: translateY(-100%); transition: transform .5s var(--ease-out); }
  .nav__mobile.open { transform: none; }
  .nav__mobile a { font-family: var(--serif); font-size: 1.8rem; color: var(--cream); }
  .about__grid, .contact__grid { grid-template-columns: 1fr; }
  /* 2-up instead of one full-width row per floor — see the compact .avail-row
     treatment below that turns each into a short card, like the solutions
     cards, so the section doesn't dominate the mobile scroll. */
  .avail__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .about__media img { min-height: 340px; }
  /* Contact info as compact boxes (2-up) instead of a long bordered list —
     cuts the section's height considerably to shorten the page scroll. */
  .contact__list { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 24px; }
  .contact-item {
    flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px;
    border: 1px solid var(--line-soft); border-radius: 12px; background: rgba(255,255,255,.02);
  }
  .contact-item__ico { width: 32px; height: 32px; font-size: .82rem; border-radius: 9px; }
  .contact-item .k { font-size: .58rem; }
  .contact-item .v { font-size: .8rem; margin-top: 2px; word-break: break-word; }
}
@media (max-width: 440px) {
  .brand__sub { display: none; }
  .brand__name { font-size: 1.1rem; }
  .brand img { width: 34px; height: 34px; }
  .nav__actions { gap: 7px; }
  .lang button { padding: 6px 9px; }
  .theme-btn { width: 34px; height: 34px; font-size: .88rem; }
  .nav__actions .nav__back { width: 34px; height: 34px; }
  .nav__burger { width: 38px; height: 38px; }
}
@media (max-width: 620px) {
  /* "A standard above / the rest" — drop the forced line break so the
     heading flows instead of stacking, shortening the section's height. */
  #why .section-title br { display: none; }
  .ventures { grid-template-columns: 1fr; }
  /* Office Rental Solutions cards: stay 2-up (not full-width stacked) and
     shrink considerably so the section doesn't dominate the mobile scroll. */
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .card { min-height: 190px; border-radius: 12px; min-width: 0; }
  .card__body { padding: 12px; }
  /* Why Choose Us cards: same 2-up treatment as the solutions cards above
     instead of stacking full-width — keeps them side by side on mobile. */
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .feature { padding: 18px 14px 20px; border-radius: 12px; min-width: 0; }
  .feature__ico { width: 44px; height: 44px; margin-bottom: 12px; font-size: 1.1rem; }
  .feature h3 { font-size: 1rem; }
  .feature p { font-size: .78rem; margin-top: 6px; }
  .card__tag { font-size: .56rem; letter-spacing: .14em; }
  .card h3 { font-size: 1rem; margin-top: 4px; line-height: 1.2; }
  .card p { display: none; }
  .card__foot { margin-top: 8px; flex-direction: column; align-items: flex-start; gap: 4px; }
  .card__price { font-size: .66rem; }
  .card .link-underline { font-size: .74rem; }
  .gallery { columns: 1; }
  .footer__grid { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  /* Availability rows: same 2-up compact-card treatment as the solutions
     cards above — was one tall full-width row per floor, the longest
     scroll on mobile. Now a short centered card, floor/sizes/book stacked. */
  .avail-row { grid-template-columns: 1fr; text-align: center; gap: 6px; padding: 14px 10px; border-radius: 12px; min-width: 0; }
  .avail-row__floor { min-width: 0; font-size: 1.15rem; }
  .avail-row__meta .t { font-size: .78rem; }
  .avail-row__sizes { justify-content: center; gap: 4px 8px; margin-top: 2px; }
  .avail-row .size-tag { font-size: .62rem; }
  .avail-row__book { justify-self: center; font-size: .62rem; padding: 6px 12px; margin-top: 2px; }
  .hero { min-height: auto; flex-direction: column; align-items: stretch; justify-content: flex-start; }
  .hero__inner { padding-top: 130px; padding-bottom: 30px; }
  .scroll-cue { display: none; }
}
/* Smallest phones (Galaxy Fold/older iPhones down to ~280px): keep the cards
   2-up at any width by shrinking gap/padding further instead of overflowing. */
@media (max-width: 360px) {
  .cards { gap: 6px; }
  .card { min-height: 168px; }
  .card__body { padding: 8px; }
  .card__tag { font-size: .52rem; letter-spacing: .1em; }
  .card h3 { font-size: .86rem; }
  .card__price { font-size: .6rem; }
  .card .link-underline { font-size: .66rem; }
  .features { gap: 6px; }
  .feature { padding: 14px 10px 16px; }
  .feature__ico { width: 38px; height: 38px; margin-bottom: 8px; font-size: 1rem; }
  .feature h3 { font-size: .9rem; }
  .feature p { font-size: .72rem; }
  .avail__grid { gap: 6px; }
  .avail-row { padding: 10px 8px; }
  .avail-row__floor { font-size: 1rem; }
  .avail-row__meta .t { font-size: .7rem; }
  .avail-row .size-tag { font-size: .58rem; }
  .avail-row__book { font-size: .56rem; padding: 5px 10px; }
}