/* =========================================================
   NoVision 3D — styles
   Palette is taken from the villa image: night navy, glass blue, warm gold.
   Hero is laid out on a 1600×900 reference (1vw = 16px there).
   ========================================================= */

/* ---------- The three default fonts, served from this site (all SIL Open Font License) ----------
   Outfit (English), IBM Plex Sans Arabic (Arabic) and Michroma (logo). A browser downloads only the files whose
   characters and weights the page actually uses. Other fonts chosen in the admin still load from Google Fonts.
   font-display: optional: the font is used if it arrives within ~0.1 s (they are preloaded, so it normally does); if not,
   that page view keeps the system font instead of reflowing the text when it lands, and later pages use the cached font. */
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:300;font-display:optional;src:url("../assets/fonts/ibm-plex-sans-arabic-300-arabic.woff2") format("woff2");unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:300;font-display:optional;src:url("../assets/fonts/ibm-plex-sans-arabic-300-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:400;font-display:optional;src:url("../assets/fonts/ibm-plex-sans-arabic-400-arabic.woff2") format("woff2");unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:400;font-display:optional;src:url("../assets/fonts/ibm-plex-sans-arabic-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:500;font-display:optional;src:url("../assets/fonts/ibm-plex-sans-arabic-500-arabic.woff2") format("woff2");unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:500;font-display:optional;src:url("../assets/fonts/ibm-plex-sans-arabic-500-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:600;font-display:optional;src:url("../assets/fonts/ibm-plex-sans-arabic-600-arabic.woff2") format("woff2");unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:600;font-display:optional;src:url("../assets/fonts/ibm-plex-sans-arabic-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:700;font-display:optional;src:url("../assets/fonts/ibm-plex-sans-arabic-700-arabic.woff2") format("woff2");unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:700;font-display:optional;src:url("../assets/fonts/ibm-plex-sans-arabic-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Michroma";font-style:normal;font-weight:400;font-display:optional;src:url("../assets/fonts/michroma-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Outfit";font-style:normal;font-weight:300 700;font-display:optional;src:url("../assets/fonts/outfit-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root {
  --navy-950: #050a15;
  --navy-900: #070d1a;
  --navy-800: #0b1426;
  --gold: #e3b562;
  --gold-hi: #f3cf8a;
  --gold-lo: #c99543;
  --blue: #2e8bff;
  --blue-glow: #3fa2ff;
  --text: #ffffff;
  --muted: #aeb8cc;
  --glass: rgba(14, 26, 48, .52);
  --glass-hi: rgba(255, 255, 255, .06);
  --stroke: rgba(255, 255, 255, .1);
  --radius: 22px;
  --space: 24px;          /* base spacing token; the admin's design tokens can change it */
  --card-ratio: 4 / 3;    /* default shape for cards and covers */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --font: var(--font-en, "Outfit"), system-ui, -apple-system, "Segoe UI", sans-serif;
  --hp: 0;
}
html[lang="ar"] { --font: var(--font-ar, "IBM Plex Sans Arabic"), var(--font-en, "Outfit"), system-ui, sans-serif; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html.modal-open { overflow: hidden; }
body {
  font-family: var(--font);
  font-size: var(--fs-body, 16px);
  font-weight: var(--fw-body, 400);
  background: var(--navy-900);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: opacity .18s;
}
body.lang-switching { opacity: .35; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { display: block; max-width: 100%; }
[hidden], [data-dead] { display: none !important; }
.nv-loading .nav, .nv-loading #page { visibility: hidden; } /* a first-time visitor's brief wait for live content */
/* Highlighted words (*like this* in the admin). --hl-* come from Fonts & sizes; unset = the design. */
.gold { color: var(--hl-color, var(--gold)); font-weight: var(--hl-weight, inherit); font-style: var(--hl-style, inherit); text-decoration: var(--hl-deco, none); text-underline-offset: .15em; }
.muted { color: var(--muted); }
[dir="rtl"] .flip { transform: scaleX(-1); }
.flip-rev { transform: scaleX(-1); }
[dir="rtl"] .flip-rev { transform: none; }
:focus-visible { outline: 2px solid var(--blue-glow); outline-offset: 3px; border-radius: 8px; }

.glass {
  background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02)), var(--glass);
  border: 1px solid var(--stroke);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

/* ---------- Buttons ---------- */
.btn-gold, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  height: clamp(44px, 3.25vw, 60px);
  padding: 0 clamp(22px, 1.85vw, 34px);
  border-radius: 999px;
  font-weight: var(--fw-button, 600);
  font-size: var(--fs-button, clamp(15px, 1.06vw, 19px));
  transition: transform .25s var(--ease), box-shadow .25s, background .25s;
  white-space: nowrap;
}
.btn-gold {
  background: linear-gradient(180deg, var(--gold-hi) 0%, #dcaa58 55%, var(--gold-lo) 100%);
  color: #1a1407;
  box-shadow: 0 8px 28px rgba(227,181,98,.28), inset 0 1px 0 rgba(255,255,255,.45);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(227,181,98,.42), inset 0 1px 0 rgba(255,255,255,.45); }
.btn-gold svg, .btn-ghost svg { width: 18px; height: 18px; }
.btn-ghost { border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.04); }
.btn-ghost:hover { background: rgba(255,255,255,.1); transform: translateY(-2px); }

.btn-outline {
  display: inline-flex; align-items: center; gap: .75em;
  height: clamp(40px, 2.9vw, 52px);
  padding: 0 clamp(18px, 1.6vw, 28px);
  border-radius: 999px;
  border: 1.5px solid var(--blue-glow);
  background: rgba(8, 20, 40, .35);
  font-weight: var(--fw-button, 500);
  font-size: var(--fs-button, clamp(14px, 1.06vw, 18px));
  box-shadow: 0 0 14px rgba(63,162,255,.45), inset 0 0 10px rgba(63,162,255,.18);
  transition: background .25s, box-shadow .25s, transform .25s;
  white-space: nowrap;
}
.btn-outline:hover { background: rgba(46,139,255,.22); box-shadow: 0 0 24px rgba(63,162,255,.75), inset 0 0 12px rgba(63,162,255,.3); transform: translateY(-1px); }

/* ---------- Fixed villa stage ---------- */
/* lvh: the height stays the same when a phone's address bar collapses, so the picture never rescales. */
.stage { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh; z-index: -1; overflow: hidden; background: var(--navy-900); }
/* .stage__img holds one layer per background item (js/main.js); only the active layer and the next one load.
   --bg-pos is the item's focus point; unset, the design keeps the villa on the side away from the text. */
.stage__img { position: absolute; inset: 0; filter: var(--bg-filter, none); }
.stage__layer { position: absolute; inset: 0; background: var(--bg-pos, right center) / cover no-repeat; opacity: 0; visibility: hidden;
  transition: opacity 1.2s var(--ease), transform 1.4s var(--ease), visibility 0s 1.2s; }
[dir="rtl"] .stage__layer { background-position: var(--bg-pos, left center); }
.stage__layer.on { opacity: 1; visibility: visible; transform: none; transition: opacity 1.2s var(--ease), transform 1.4s var(--ease); }
.stage__img[data-transition="none"] .stage__layer { transition: none; }
.stage__img[data-transition="slide"] .stage__layer:not(.on) { transform: translateX(6%); }
[dir="rtl"] .stage__img[data-transition="slide"] .stage__layer:not(.on) { transform: translateX(-6%); }
.stage__img[data-transition="zoom"] .stage__layer:not(.on) { transform: scale(1.12); }
.stage__img[data-transition="kenburns"] .stage__layer.on { animation: stage-kenburns var(--bg-interval, 6s) linear both; }
@keyframes stage-kenburns { from { transform: scale(1); } to { transform: scale(1.08); } }
.stage__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--bg-pos, right center); }
[dir="rtl"] .stage__video { object-position: var(--bg-pos, left center); }
/* A YouTube background: the 16:9 player is scaled to cover the screen, and can't be clicked. */
.stage__yt { position: absolute; top: 50%; left: 50%; width: max(100vw, 177.78lvh); height: max(56.25vw, 100lvh); transform: translate(-50%, -50%); border: 0; pointer-events: none; }
.stage__overlay { position: absolute; inset: 0; background: var(--bg-overlay, transparent); opacity: var(--bg-overlay-opacity, 0); pointer-events: none; }
.stage__vignette { position: absolute; inset: 0; pointer-events: none; opacity: var(--bg-vignette, 0);
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 35%, rgba(3,6,13,.55) 75%, rgba(3,6,13,.95) 100%); }
.stage__shade[hidden] { display: none; }
.stage__shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(7,13,26,.55) 0%, rgba(7,13,26,.25) 38%, rgba(7,13,26,0) 55%),
    linear-gradient(180deg, rgba(7,13,26,.35) 0%, rgba(7,13,26,0) 18%, rgba(7,13,26,0) 70%, rgba(7,13,26,.55) 100%);
}
[dir="rtl"] .stage__shade {
  background:
    linear-gradient(270deg, rgba(7,13,26,.7) 0%, rgba(7,13,26,.35) 40%, rgba(7,13,26,0) 60%),
    linear-gradient(180deg, rgba(7,13,26,.35) 0%, rgba(7,13,26,0) 18%, rgba(7,13,26,0) 70%, rgba(7,13,26,.55) 100%);
}
[dir="rtl"] .stage__img { background-position: left center; }
.stage__dim { position: absolute; inset: 0; background: var(--navy-950); opacity: 0; will-change: opacity; }

/* ---------- Transparent floating header ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center;
  padding: clamp(14px, 2.2vw, 40px) 5.6vw 14px 5.7vw;
  background: transparent;
  transition: transform .45s var(--ease), padding .45s var(--ease);
}
.nav.hide { transform: translateY(-110%); }
.nav.past-hero { padding-top: 14px; }
/* The header itself never gets a fill. Once content scrolls under it, each item floats on its own small glass pill. */
.nav.past-hero .logo { filter: drop-shadow(0 1px 8px rgba(5,10,21,.85)); }
.nav.past-hero .nav__burger {
  border-radius: 50%; background: rgba(7,13,26,.55);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
@media (min-width: 1025px) {
  .nav.past-hero .nav__links > a, .nav.past-hero .dropdown__toggle {
    background: rgba(7,13,26,.55);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  }
  .nav.past-hero .nav__links > a:hover, .nav.past-hero .dropdown__toggle:hover, .nav.past-hero .dropdown.open .dropdown__toggle { background: rgba(46,139,255,.32); }
  .nav.past-hero .lang { background: rgba(7,13,26,.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
}

.logo {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--font-logo, "Michroma"), var(--font-en, "Outfit"), sans-serif;
  font-size: clamp(18px, 2vw, 34px);
  letter-spacing: .04em;
  line-height: 1;
  white-space: nowrap;
  direction: ltr;
  color: var(--logo-color, #fff);
  text-shadow: 0 0 22px rgba(63,162,255,.25);
}
.nav .logo { font-size: var(--logo-size-d, clamp(18px, 2vw, 34px)); }
.logo__img { flex: none; width: auto; max-width: none; height: var(--logo-img-d, 44px); }
video.logo__img { object-fit: contain; }
/* Logo in the middle of the header; the menu and buttons keep their places. */
.logo-center .nav .logo { position: absolute; left: 50%; transform: translateX(-50%); }
.logo--sm .logo__img { height: 34px; }
.logo__o { color: var(--logo-accent, var(--blue-glow)); text-shadow: 0 0 14px rgba(63,162,255,.8); }
.logo__3d {
  margin-inline-start: .08em;
  background: linear-gradient(180deg, #7cc4ff 0%, var(--blue) 70%, #1f6fe0 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 10px rgba(63,162,255,.55));
}
.logo-custom-accent .logo__3d { background: none; color: var(--logo-accent); filter: none; }
.logo-custom-accent .logo__o { text-shadow: none; }
.logo--sm { font-size: 22px; }

.nav__links {
  display: flex; align-items: center;
  gap: clamp(6px, .9vw, 16px);
  margin-inline-start: auto;
  font-size: clamp(14px, 1vw, 18px);
}
.nav__links > a, .dropdown__toggle {
  position: relative;
  padding: .55em 1.05em;
  border-radius: 999px;
  color: rgba(255,255,255,.92);
  transition: background .25s, color .25s, transform .25s var(--ease);
}
/* floating pills: no bar background, each item hovers on its own */
.nav__links > a:hover, .dropdown__toggle:hover, .dropdown.open .dropdown__toggle {
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transform: translateY(-1px);
}
.nav__links > a::after {
  content: ""; position: absolute; inset-inline: 1.05em; bottom: -.15em;
  height: 2.5px; border-radius: 2px;
  background: var(--blue-glow); box-shadow: 0 0 10px var(--blue-glow);
  transform: scaleX(0); transition: transform .3s var(--ease);
}
.nav__links > a.active::after { transform: scaleX(1); }
.nav__mobile-tools { display: none; }

.dropdown { position: relative; }
.dropdown__toggle { display: inline-flex; align-items: center; gap: .7em; font-size: inherit; }
.dropdown__toggle svg { transition: transform .25s; }
.dropdown__menu {
  position: absolute; top: calc(100% + 12px); inset-inline-start: -10px;
  min-width: 290px; padding: 8px; border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: .25s var(--ease);
}
.dropdown__menu a {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; border-radius: 11px;
  color: rgba(255,255,255,.85); font-size: 15px;
}
.dropdown__menu a svg { width: 22px; height: 22px; color: var(--gold); flex: none; }
.dropdown__menu a:hover { background: rgba(46,139,255,.16); color: #fff; }
.dropdown.open .dropdown__menu { opacity: 1; visibility: visible; transform: none; }
.dropdown.open .dropdown__toggle svg { transform: rotate(180deg); }
@media (hover: hover) and (min-width: 1025px) {
  .dropdown:hover .dropdown__menu { opacity: 1; visibility: visible; transform: none; }
  .dropdown:hover .dropdown__toggle svg { transform: rotate(180deg); }
}

.nav__tools { display: flex; align-items: center; gap: clamp(10px, 1.1vw, 18px); margin-inline-start: clamp(14px, 2.4vw, 44px); }
.lang {
  display: inline-flex; align-items: center; gap: 8px;
  height: clamp(36px, 2.6vw, 46px); padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
  font-size: 13px; font-weight: 600; letter-spacing: .08em;
  font-family: var(--font-en, "Outfit"), sans-serif;
  direction: ltr;
  transition: background .25s, border-color .25s;
}
.lang:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.35); }
.lang i { width: 1px; height: 14px; background: rgba(255,255,255,.3); }
.lang span { opacity: .5; transition: opacity .25s, color .25s; }
.lang[data-active="en"] [data-l="en"], .lang[data-active="ar"] [data-l="ar"] { opacity: 1; color: var(--gold); }

.nav__burger { display: none; margin-inline-start: auto; width: 44px; height: 44px; position: relative; z-index: 2; }
.nav__burger span { position: absolute; inset-inline: 10px; height: 2px; background: #fff; border-radius: 2px; transition: .3s; }
.nav__burger span:nth-child(1) { top: 14px; } .nav__burger span:nth-child(2) { top: 21px; } .nav__burger span:nth-child(3) { top: 28px; }
.nav.menu-open .nav__burger span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.nav.menu-open .nav__burger span:nth-child(2) { opacity: 0; }
.nav.menu-open .nav__burger span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  height: max(56.25vw, 100vh);
  height: max(56.25vw, 100svh);
  min-height: 620px;
}
.hero__content {
  position: absolute;
  inset-inline-start: 5.7vw;
  top: 16.1vw;
  max-width: 52vw;
  transform: translateY(calc(var(--hp) * -90px));
  opacity: calc(1 - var(--hp) * 1.25);
}
.hero__title {
  font-weight: var(--fw-h1, 500);
  font-size: var(--fs-h1, clamp(34px, 3.8vw, 74px));
  line-height: 1.12;
  letter-spacing: -.012em;
  text-shadow: 0 2px 24px rgba(0,0,0,.35);
}
html[lang="ar"] .hero__title { line-height: 1.3; font-weight: var(--fw-h1, 600); letter-spacing: 0; font-size: var(--fs-h1, clamp(34px, 4vw, 78px)); }
/* A colour chosen in the admin sets --hl-bg:none and --hl-fill, replacing the gold gradient with that solid colour. */
.hero__title .gold, h2 .gold {
  background: var(--hl-bg, linear-gradient(180deg, var(--gold-hi) 0%, #e0b061 60%, var(--gold-lo) 100%));
  -webkit-background-clip: text; background-clip: text; color: var(--hl-fill, transparent);
  text-decoration-color: var(--hl-color, var(--gold));
}
.hero__phases {
  display: flex; align-items: center; gap: 2.05vw;
  margin-top: .75vw;
  font-size: clamp(18px, 1.62vw, 31px);
}
.hero__phases i { width: .26em; height: .26em; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px rgba(227,181,98,.6); }
.hero__lead {
  margin-top: 1.95vw;
  font-size: var(--fs-body, clamp(15px, 1.2vw, 23px));
  font-weight: 300; line-height: 1.42;
  color: rgba(255,255,255,.86);
}
.hero__ctas { display: flex; align-items: center; gap: 2.1vw; margin-top: 2.35vw; }
.btn-play { display: inline-flex; align-items: center; gap: .8vw; font-weight: 500; font-size: var(--fs-button, clamp(15px, 1.06vw, 19px)); }
.btn-play__circle {
  display: grid; place-items: center;
  width: clamp(44px, 3.05vw, 58px); aspect-ratio: 1; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.85);
  transition: background .25s, transform .25s var(--ease);
}
.btn-play__circle svg { margin-inline-start: 3px; }
[dir="rtl"] .btn-play__circle svg { margin-inline-start: 0; margin-inline-end: 3px; transform: scaleX(-1); }
.btn-play:hover .btn-play__circle { background: rgba(255,255,255,.14); transform: scale(1.07); }

.hero__services {
  position: absolute; inset-inline-start: 10.75vw; bottom: 5.4vw;
  display: flex;
  transform: translateY(calc(var(--hp) * 60px));
  opacity: calc(1 - var(--hp) * 1.6);
}
.hs {
  width: 15.6vw;
  display: flex; flex-direction: column; align-items: center; gap: 1.05vw;
  position: relative; text-align: center;
  font-size: clamp(13px, 1.02vw, 18px);
  color: rgba(255,255,255,.92);
}
.hs + .hs::before { content: ""; position: absolute; inset-inline-start: 0; top: -.2vw; bottom: -.4vw; width: 1px; background: rgba(255,255,255,.28); }
.hs svg { width: clamp(30px, 2.55vw, 48px); height: auto; color: var(--gold); filter: drop-shadow(0 0 6px rgba(227,181,98,.35)); transition: transform .35s var(--ease); }
.hs:hover svg { transform: translateY(-5px) scale(1.06); }

.scroll {
  position: absolute; inset-inline-end: 3.4vw; bottom: 4.4vw;
  display: flex; align-items: center; gap: 1.4vw;
  font-size: clamp(13px, 1.02vw, 18px); color: rgba(255,255,255,.9);
  opacity: calc(1 - var(--hp) * 3);
}
.scroll__line { position: absolute; inset-inline-start: 3.8vw; top: -2.9vw; bottom: -1.9vw; width: 1px; background: linear-gradient(180deg, transparent, rgba(255,255,255,.5) 25%, rgba(255,255,255,.5) 75%, transparent); }
.scroll__mouse { width: clamp(20px, 1.65vw, 30px); height: clamp(34px, 2.75vw, 48px); border: 1.5px solid rgba(255,255,255,.9); border-radius: 999px; display: flex; justify-content: center; }
.scroll__mouse span { width: 2px; height: 28%; margin-top: 22%; background: #fff; border-radius: 2px; animation: wheel 1.8s ease-in-out infinite; }
@keyframes wheel { 0% { opacity: 0; transform: translateY(-3px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(7px); } }

.hero__phases, .hero__lead, .hero__ctas { animation: rise .9s var(--ease) both; }
/* The main heading is the page's largest element. It slides up without fading in: an element that starts
   invisible doesn't count as painted, which would delay the page's "largest paint" by the length of the fade. */
.hero__title { animation: rise-solid .9s var(--ease) both; }
@keyframes rise-solid { from { transform: translateY(22px); } to { transform: none; } }
.hero__phases { animation-delay: .12s; } .hero__lead { animation-delay: .22s; } .hero__ctas { animation-delay: .32s; }
.hero__services > * { animation: rise .9s var(--ease) both; }
.hero__services > *:nth-child(1) { animation-delay: .45s; } .hero__services > *:nth-child(2) { animation-delay: .52s; }
.hero__services > *:nth-child(3) { animation-delay: .59s; } .hero__services > *:nth-child(4) { animation-delay: .66s; }
.nav { animation: drop .8s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes drop { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }

/* ---------- Sections over the fixed stage ---------- */
.section { position: relative; padding: clamp(80px, 8vw, 140px) 0; }
.container { width: min(1240px, 90vw); margin: 0 auto; }
.head { text-align: center; max-width: 780px; margin: 0 auto clamp(40px, 4vw, 64px); }
.head--left { text-align: start; margin: 0; }
.eyebrow { display: block; color: var(--gold); font-size: 13px; letter-spacing: .22em; text-transform: uppercase; font-weight: 500; margin-bottom: 16px; }
html[lang="ar"] .eyebrow { letter-spacing: 0; font-size: 15px; }
h2 { font-size: var(--fs-h2, clamp(30px, 3.1vw, 52px)); font-weight: var(--fw-h2, 500); line-height: 1.15; letter-spacing: -.01em; }
html[lang="ar"] h2 { line-height: 1.35; font-weight: var(--fw-h2, 600); letter-spacing: 0; }
h3 { font-size: var(--fs-h3, 21px); font-weight: var(--fw-h3, 500); }
.lead { color: var(--muted); line-height: 1.7; font-size: var(--fs-body, clamp(16px, 1.1vw, 18px)); font-weight: var(--fw-body, 300); margin-top: 16px; }

.reveal { opacity: 0; transform: translateY(40px) scale(.98); transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); transition-delay: var(--d, 0ms); }
.reveal.shown { opacity: 1; transform: none; filter: none; }
/* Optional animation chosen per item in the admin. Without one, an item uses the slide-up above. */
.reveal[data-anim="none"]:not(.shown) { opacity: 1; transform: none; transition: none; }
.reveal[data-anim="fade"]:not(.shown) { transform: none; }
.reveal[data-anim="zoom"]:not(.shown) { transform: scale(.82); }
.reveal[data-anim="flip"]:not(.shown) { transform: perspective(900px) rotateX(22deg) translateY(30px); transform-origin: 50% 0; }
.reveal[data-anim="blur"]:not(.shown) { transform: scale(1.04); filter: blur(14px); }
.reveal[data-anim="tilt"]:not(.shown) { transform: rotate(-3deg) translateY(50px); transform-origin: 0 100%; }
.reveal[data-anim="rise"] { transition-timing-function: cubic-bezier(.34, 1.56, .64, 1); } /* overshoots a little, then settles */
.reveal[data-anim="rise"]:not(.shown) { transform: translateY(90px) scale(.94); }

.reveal[data-anim="side"]:not(.shown) { transform: translateX(70px); }
[dir="rtl"] .reveal[data-anim="side"]:not(.shown) { transform: translateX(-70px); }

/* ---------- Bento grid ---------- */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(200px, 17vw, 260px);
  gap: 18px;
}
.tile {
  position: relative; overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: var(--glass);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  padding: clamp(20px, 2vw, 30px);
  display: flex; flex-direction: column; justify-content: flex-end;
  isolation: isolate;
  transition: border-color .4s, box-shadow .4s, transform .9s var(--ease), opacity .9s var(--ease);
}
.tile.shown { transform: translateY(var(--dy, 0)); }
.tile--xl { grid-column: span 2; grid-row: span 2; }
.tile--wide { grid-column: span 2; }
.tile--tall { grid-row: span 2; }
.tile--full { grid-column: 1 / -1; }
div.tile { cursor: default; } /* a display-only service */
.tile--stat { grid-column: span var(--stat-span, 1); }
.tile--portals { grid-column: span var(--portal-span, 3); }
.tile__media {
  position: absolute; inset: 0; z-index: -1;
  background-size: cover; background-position: center;
  opacity: .55;
  transition: transform 1.2s var(--ease), opacity .5s;
}
.tile__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,13,26,.05) 0%, rgba(7,13,26,.55) 50%, rgba(7,13,26,.94) 100%); }
a.tile:hover { border-color: rgba(63,162,255,.5); box-shadow: 0 20px 60px rgba(46,139,255,.16); }
a.tile:hover .tile__media { transform: scale(1.06); opacity: .75; }
.tile__icon {
  position: absolute; top: clamp(18px, 1.8vw, 26px); inset-inline-start: clamp(18px, 1.8vw, 26px);
  width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center;
  background: rgba(7,13,26,.55); border: 1px solid rgba(227,181,98,.3); color: var(--gold);
  backdrop-filter: blur(8px);
}
.tile__icon svg { width: 28px; }
.tile h3 { font-size: var(--fs-h3, clamp(19px, 1.5vw, 26px)); }
.tile--xl h3 { font-size: var(--fs-h3, clamp(24px, 2.2vw, 36px)); }
.tile p { color: var(--muted); font-size: var(--fs-body, 15px); line-height: 1.55; margin-top: 8px; max-width: 46ch; }
.tile__more { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--gold); font-weight: 500; font-size: 15px; }
.tile__more svg { width: 20px; transition: transform .3s; }
a.tile:hover .tile__more svg { transform: translateX(5px); }
[dir="rtl"] a.tile:hover .tile__more svg { transform: scaleX(-1) translateX(5px); }

.tile--stat { justify-content: space-around; gap: 10px; }
.tile--stat strong { font-size: clamp(34px, 3vw, 50px); font-weight: 600; line-height: 1; }
.tile--stat em { font-style: normal; color: var(--gold); font-size: 26px; font-weight: 600; }
.tile--stat span { display: block; color: var(--muted); font-size: 14px; margin-top: 6px; }

.tile--portals { justify-content: center; }
.tile--portals .eyebrow { margin-bottom: 14px; }
.portal-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.portal-link {
  display: flex; align-items: center; gap: 12px;
  padding: 14px; border-radius: 16px;
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07);
  transition: background .3s, border-color .3s, transform .3s var(--ease);
}
/* Each portal link has its own entrance animation, so it needs the fade as well as its hover. */
.portal-link.reveal { transition: opacity .8s var(--ease), transform .6s var(--ease), filter .8s var(--ease), background .3s, border-color .3s, box-shadow .3s; }
.portal-link:hover { background: rgba(46,139,255,.12); border-color: rgba(63,162,255,.4); transform: translateY(-3px); }
.portal-link__icon { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(46,139,255,.14); color: var(--blue-glow); }
.portal-link__icon svg { width: 24px; }
.portal-link b { display: block; font-weight: 500; font-size: 15px; line-height: 1.3; }
.portal-link small { color: var(--muted); font-size: 13px; }
.portal-link__go { width: 18px; margin-inline-start: auto; flex: none; color: var(--muted); }
.soon { margin-inline-start: auto; font-style: normal; font-size: 11px; padding: 4px 9px; border-radius: 999px; background: rgba(227,181,98,.15); color: var(--gold); white-space: nowrap; }

/* ---------- Before / After ---------- */
.ba-wrap { display: grid; grid-template-columns: .8fr 1.6fr; gap: clamp(30px, 4vw, 70px); align-items: center; }
.ba {
  position: relative; aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--stroke); box-shadow: 0 30px 80px rgba(0,0,0,.45);
  user-select: none; direction: ltr;
}
.ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 14px rgba(255,255,255,.6); pointer-events: none; }
.ba__handle span {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(7,13,26,.55); border: 2px solid #fff; backdrop-filter: blur(8px);
}
.ba__range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.ba__tag { position: absolute; top: 16px; padding: 7px 14px; border-radius: 999px; font-size: 13px; background: rgba(7,13,26,.6); backdrop-filter: blur(8px); border: 1px solid var(--stroke); pointer-events: none; }
.ba__tag--before { left: 16px; } .ba__tag--after { right: 16px; color: var(--gold); }

/* ---------- Packages ---------- */
.packages { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 20px; align-items: stretch; }
.pkg { position: relative; border-radius: var(--radius); padding: 34px 30px; display: flex; flex-direction: column; gap: 22px; transition: transform .9s var(--ease), opacity .9s var(--ease), border-color .3s; }
.pkg:hover { border-color: rgba(255,255,255,.25); }
.pkg--hot { border-color: rgba(227,181,98,.5); box-shadow: 0 0 0 1px rgba(227,181,98,.15), 0 26px 70px rgba(227,181,98,.12); }
.pkg__badge { position: absolute; top: -13px; inset-inline-start: 30px; padding: 5px 13px; border-radius: 999px; background: var(--gold); color: #1a1407; font-size: 12px; font-weight: 600; }
.pkg h3 { font-size: var(--fs-h3, 26px); }
/* align-content: start keeps the list at the top when a neighbouring card is taller. */
.pkg ul { list-style: none; display: grid; gap: 12px; flex: 1; align-content: start; }
.pkg li { display: flex; gap: 10px; color: rgba(255,255,255,.86); font-size: var(--fs-body, 15.5px); line-height: 1.45; }
.pkg li svg { width: 20px; height: 20px; flex: none; color: var(--gold); margin-top: 1px; }
.pkg .btn-gold, .pkg .btn-ghost { width: 100%; }

/* ---------- ROI ---------- */
.roi { border-radius: 28px; padding: clamp(28px, 4vw, 60px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 4vw, 70px); }
.roi__results { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 30px; }
.roi__results div { padding: 16px 18px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); }
.roi__results span { display: block; color: var(--muted); font-size: 13.5px; }
.roi__results strong { display: block; font-size: 24px; font-weight: 600; margin-top: 4px; font-variant-numeric: tabular-nums; }
.roi__results strong.neg { color: #ff8a8a; }
.roi__big { grid-column: span 2; background: linear-gradient(120deg, rgba(227,181,98,.16), rgba(227,181,98,.04)) !important; border-color: rgba(227,181,98,.35) !important; }
.roi__big strong { font-size: 40px; color: var(--gold); }
.roi__note { color: var(--muted); font-size: 13px; margin-top: 14px; opacity: .8; }
.roi__form { display: grid; gap: 26px; align-content: center; }
.roi__form label { display: grid; grid-template-columns: 1fr auto; gap: 12px 10px; font-size: 15px; color: rgba(255,255,255,.85); }
.roi__form output { font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.roi__form input { grid-column: span 2; }
input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 6px;
  background: linear-gradient(90deg, var(--blue) var(--fill, 50%), rgba(255,255,255,.12) var(--fill, 50%));
  outline: none;
}
[dir="rtl"] .roi__form input[type=range] { background: linear-gradient(270deg, var(--blue) var(--fill, 50%), rgba(255,255,255,.12) var(--fill, 50%)); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 4px solid var(--blue); box-shadow: 0 0 12px rgba(63,162,255,.7); cursor: pointer; }
input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 4px solid var(--blue); box-shadow: 0 0 12px rgba(63,162,255,.7); cursor: pointer; }

/* ---------- CTA + footer ---------- */
.cta { border-radius: 28px; padding: clamp(40px, 5vw, 80px); text-align: center; }
.cta .lead { max-width: 560px; margin: 16px auto 30px; }
.footer { position: relative; background: rgba(5,10,21,.92); border-top: 1px solid rgba(255,255,255,.06); padding: 50px 0 40px; }
.footer__grid { display: grid; grid-template-columns: 2fr repeat(var(--fcols, 2), 1fr); gap: 30px; }
.footer__tagline { color: var(--muted); margin-top: 14px; max-width: 42ch; line-height: 1.6; }
.phone__label { margin-inline-end: 8px; color: var(--gold); font-size: 13px; }
.phone [dir="ltr"], a.phone[dir="ltr"] { white-space: nowrap; }
.social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #fff; background: rgba(255,255,255,.06); border: 1px solid var(--stroke); transition: background .25s, border-color .25s, transform .25s var(--ease); }
.social a:hover { background: rgba(46,139,255,.22); border-color: rgba(63,162,255,.55); transform: translateY(-2px); }
.social svg, .social img { width: 19px; height: 19px; object-fit: contain; }
/* Column titles are h3 (they follow the page's h2 sections), styled as the small gold labels they've always been. */
.footer h4, .footer h3.footer__title { font-size: 14px; color: var(--gold); font-weight: 500; margin-bottom: 14px; }
.footer__grid > div:not(:first-child) a { display: block; color: var(--muted); padding: 5px 0; font-size: 15px; transition: color .2s; }
.footer__grid a:hover { color: #fff; }
.footer__copy { color: var(--muted); font-size: 14px; margin-top: 16px; }

/* ---------- Glass modal (sub-pages) ---------- */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; visibility: hidden; pointer-events: none; }
.modal.open { visibility: visible; pointer-events: auto; }
.modal__veil {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 40%, rgba(46,139,255,.12), rgba(5,10,21,.55) 70%);
  backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px);
  opacity: 0; transition: opacity .45s var(--ease), backdrop-filter .45s var(--ease), -webkit-backdrop-filter .45s var(--ease);
}
.modal.open .modal__veil { opacity: 1; backdrop-filter: blur(16px) saturate(120%); -webkit-backdrop-filter: blur(16px) saturate(120%); }
.modal__win {
  position: relative;
  width: min(84vw, 1400px); height: 85vh; height: 85dvh;
  border-radius: 28px;
  display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02)), rgba(9,17,33,.78);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 0 0 1px rgba(63,162,255,.08), 0 0 80px rgba(46,139,255,.18), 0 40px 120px rgba(0,0,0,.6);
  opacity: 0; transform: translateY(26px) scale(.97);
  transition: opacity .45s var(--ease), transform .55s var(--ease);
}
.modal.open .modal__win { opacity: 1; transform: none; }
.modal__bar { position: absolute; inset: 0 0 auto 0; z-index: 5; display: flex; justify-content: space-between; padding: 16px; pointer-events: none; }
.modal__bar > * { pointer-events: auto; }
.modal__close, .modal__back {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: 999px;
  background: rgba(7,13,26,.6); border: 1px solid var(--stroke); backdrop-filter: blur(10px);
  font-size: 14px; transition: background .2s;
}
.modal__close { width: 44px; padding: 0; justify-content: center; margin-inline-start: auto; }
.modal__close:hover, .modal__back:hover { background: rgba(255,255,255,.14); }
.modal__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; }

.mp { padding: clamp(24px, 3.5vw, 56px); padding-top: 76px; display: grid; gap: 26px; animation: rise .6s var(--ease) both; }
.mp__hero { position: relative; border-radius: 22px; overflow: hidden; padding: clamp(28px, 4vw, 60px); min-height: 300px; display: flex; flex-direction: column; justify-content: flex-end; isolation: isolate; }
.mp__bg { position: absolute; inset: 0; z-index: -1; background-size: cover; background-position: center; }
.mp__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7,13,26,.95) 10%, rgba(7,13,26,.35) 100%); }
[dir="ltr"] .mp__bg::after { background: linear-gradient(0deg, rgba(7,13,26,.95) 10%, rgba(7,13,26,.35) 100%); }
.mp__hero .lead, .mp__head .lead { max-width: 70ch; }
.mp__head { max-width: 820px; }
.mp__head--row { max-width: none; display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; }
.mp__icon { width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; background: rgba(227,181,98,.12); border: 1px solid rgba(227,181,98,.3); color: var(--gold); margin-bottom: 18px; }
.mp__icon svg { width: 32px; }
.mp__icon--sm { width: 46px; height: 46px; border-radius: 13px; margin-bottom: 14px; }
.mp__icon--sm svg { width: 25px; }
.mp__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.mp__cols--3 { grid-template-columns: repeat(3, 1fr); }
.mp__card { padding: 26px; border-radius: 20px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.mp__card h4 { font-size: var(--fs-h3, 19px); font-weight: var(--fw-h3, 500); }
.mp__card p { color: var(--muted); line-height: 1.6; }

/* Content blocks inside services and projects */
.item-img { width: 28px; height: 28px; object-fit: contain; }
.item-emoji { font-size: 24px; line-height: 1; }
.blk h3 + .lead { margin-top: 8px; }
.blk figure { margin: 0; }
.blk figcaption { margin-top: 8px; color: var(--muted); font-size: 14px; }
.blk__imgs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.blk__imgs img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; border: 1px solid var(--stroke); }
.blk__imgs[data-single="true"] { grid-template-columns: 1fr; }
.blk__imgs[data-single="true"] img { aspect-ratio: auto; }
.blk__video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 18px; border: 1px solid var(--stroke); background: #000; }
.blk__video iframe, .blk__video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: contain; }

/* ---------- MediaBlock (js/media.js): one set of rules for every media slot ----------
   Untouched blocks look like the design; --nv-* variables appear only when the owner sets a value. */
.nv-media { position: relative; margin: 0; max-width: var(--nv-width, 100%); }
.nv-media[data-align="center"] { margin-inline: auto; }
.nv-media[data-align="end"] { margin-inline-start: auto; }
.nv-media img { width: 100%; height: auto; } /* width/height attributes only reserve the space */
.nv-media[data-ratio] > img, .nv-media[data-ratio] > a > img { aspect-ratio: var(--nv-ratio); object-fit: var(--nv-fit, cover); object-position: var(--nv-pos, center); }
.nv-media[data-height] > img, .nv-media[data-height] > a > img { height: var(--nv-height); object-fit: var(--nv-fit, cover); object-position: var(--nv-pos, center); }
.nv-media--image > img, .nv-media--image > a > img { border-radius: 16px; }
.nv-media[data-ratio] > .blk__video { aspect-ratio: var(--nv-ratio); }
.nv-media[data-height] > .blk__video { aspect-ratio: auto; height: var(--nv-height); }
.nv-media .blk__video video { object-fit: var(--nv-fit, contain); object-position: var(--nv-pos, center); }
.nv-media[data-failed] { display: none; }
.nv-media--grid { max-width: var(--nv-width, 100%); }

/* A cover filling a card or page header (tiles, project cards, page heroes): image, video or slideshow.
   The box's own gradient (::after) still sits on top, so text stays readable. */
.cover-fill, .cover-fill > .nv-media { position: absolute; inset: 0; max-width: none; margin: 0; }
.cover-fill .nv-media img, .cover-fill video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: var(--nv-fit, cover); object-position: var(--nv-pos, center); border-radius: 0; }
.cover-fill .blk__video { position: absolute; inset: 0; aspect-ratio: auto; border: 0; border-radius: 0; background: none; }
.cover-fill .nv-media--slider { border: 0; border-radius: 0; background: none; }
.cover-fill .nv-slides { aspect-ratio: auto; height: 100%; }
.cover-fill .nv-dots, .cover-fill figcaption { display: none; }

/* Tour slots: a tour (or embed, video, image) with its own heading, text and buttons */
.tour-slot { display: grid; gap: 14px; }
.tour-slot > h3 + .lead { margin-top: -6px; }
.tour-slot__links { display: flex; flex-wrap: wrap; gap: 12px; }
.tour[data-align="center"] { margin-inline: auto; }
.tour[style*="--nv-width"] { max-width: var(--nv-width); }
.tour[data-ratio] .tour__frame { aspect-ratio: var(--nv-ratio); }
.tour[data-height] .tour__frame { aspect-ratio: auto; height: var(--nv-height); }

/* Custom fields: name / value rows */
.cf { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; border-radius: 18px; overflow: hidden; border: 1px solid var(--stroke); background: var(--stroke); }
.cf > div { padding: 16px 20px; background: rgba(11,20,38,.92); }
.cf dt { color: var(--gold); font-size: 13px; letter-spacing: .04em; margin-bottom: 4px; }
.cf dd { margin: 0; line-height: 1.55; }
.cf dd a { color: var(--blue-glow); text-decoration: underline; text-underline-offset: .2em; }

/* Click-to-load player: nothing from YouTube, Vimeo or the embed loads before the click */
.nv-facade { position: absolute; inset: 0; width: 100%; display: grid; place-content: center; background: #000 center / cover no-repeat; }
.nv-facade::before { content: ""; position: absolute; inset: 0; background: rgba(7,13,26,.35); transition: background .3s; }
.nv-facade:hover::before { background: rgba(7,13,26,.15); }
.nv-facade .tour__play { position: relative; }
.nv-facade:hover .tour__play { transform: scale(1.08); }

/* Slideshow: slides are stacked in a box of fixed ratio, so changing slides never moves the page */
.nv-media--slider { border-radius: 18px; overflow: hidden; border: 1px solid var(--stroke); background: #000; }
.nv-slides { position: relative; aspect-ratio: var(--nv-ratio, 16/9); }
.nv-media[data-height] .nv-slides { aspect-ratio: auto; height: var(--nv-height); }
.nv-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .9s var(--ease), transform 1.1s var(--ease), visibility 0s .9s; }
.nv-slide.on { opacity: 1; visibility: visible; transform: none; transition: opacity .9s var(--ease), transform 1.1s var(--ease); }
.nv-slides[data-transition="slide"] .nv-slide:not(.on) { transform: translateX(8%); }
[dir="rtl"] .nv-slides[data-transition="slide"] .nv-slide:not(.on) { transform: translateX(-8%); }
.nv-slides[data-transition="zoom"] .nv-slide:not(.on) { transform: scale(1.08); }
.nv-slide > .nv-media, .nv-slide .blk__video { position: absolute; inset: 0; max-width: none; aspect-ratio: auto; height: 100%; border: 0; border-radius: 0; }
.nv-slide img, .nv-slide video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: var(--nv-fit, cover); object-position: var(--nv-pos, center); border-radius: 0; }
.nv-slide figcaption { position: absolute; inset: auto 0 0; margin: 0; padding: 30px 18px 14px; background: linear-gradient(0deg, rgba(7,13,26,.85), transparent); color: #fff; }
.nv-dots { position: absolute; inset: auto 0 12px; z-index: 2; display: flex; justify-content: center; gap: 8px; }
.nv-dots button { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.45); transition: width .3s, background .3s; }
.nv-dots button.on { width: 22px; border-radius: 99px; background: var(--gold); }

/* Sections and pages added from the admin */
.cs--text { max-width: 820px; }
.cs--text[data-align="center"], .cs__head[data-align="center"] { margin-inline: auto; text-align: center; }
.cs__head { max-width: 780px; margin-bottom: clamp(30px, 3.5vw, 54px); }
.cs__body { white-space: pre-line; }
.portal-files { margin-top: 14px; }
.portal-files .btn-ghost { margin-top: auto; }
.cs__action { margin-top: 26px; }
.cs--split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 4vw, 70px); align-items: center; }
.cs--flip > :first-child { order: 2; }
.cs__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--stroke); }
.cs__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.cs__card { padding: 28px; border-radius: var(--radius); }
.cs__card p { color: var(--muted); line-height: 1.6; margin-top: 10px; white-space: pre-line; }
.ticks { list-style: none; display: grid; gap: 11px; }
.ticks li { display: flex; gap: 10px; color: rgba(255,255,255,.88); }
.ticks svg { width: 20px; flex: none; color: var(--gold); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.chips span { padding: 7px 13px; border-radius: 999px; font-size: 14px; background: rgba(46,139,255,.12); border: 1px solid rgba(63,162,255,.25); }
.mp__more { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mini { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07); transition: .3s var(--ease); }
.mini:hover { background: rgba(46,139,255,.12); border-color: rgba(63,162,255,.4); }
.mini svg { width: 26px; color: var(--gold); flex: none; }
.stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.stats-row div { padding: 22px; border-radius: 18px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.stats-row strong { font-size: 40px; font-weight: 600; }
.stats-row em { font-style: normal; color: var(--gold); }
.stats-row span { display: block; color: var(--muted); }

/* Matterport tour */
.tour { display: grid; grid-template-columns: 1fr 250px; gap: 16px; }
.tour__frame { position: relative; aspect-ratio: 16/9; border-radius: 20px; overflow: hidden; background: #000; border: 1px solid var(--stroke); }
.tour__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.tour--solo { grid-template-columns: 1fr; }
.tour__frame.is-loading::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(100deg, #070d1a 30%, #14233d 50%, #070d1a 70%); background-size: 220% 100%; animation: tour-shimmer 1.4s linear infinite; }
@keyframes tour-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.tour__rooms, .tour__sdk { display: flex; flex-direction: column; gap: 10px; }
.tour__roomlist { display: grid; gap: 6px; }
.tour__side button.on { background: rgba(46,139,255,.22); border-color: rgba(63,162,255,.6); }
.tour__facade { position: absolute; inset: 0; background-size: cover; background-position: center; display: grid; place-content: center; justify-items: center; gap: 14px; }
.tour__facade::before { content: ""; position: absolute; inset: 0; background: rgba(7,13,26,.45); transition: background .3s; }
.tour__facade:hover::before { background: rgba(7,13,26,.25); }
.tour__play { position: relative; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.12); border: 2px solid #fff; backdrop-filter: blur(8px); transition: transform .3s var(--ease); }
.tour__play svg { width: 36px; margin-inline-start: 4px; }
.tour__facade:hover .tour__play { transform: scale(1.08); }
.tour__label { position: relative; font-weight: 500; }
.tour__side { padding: 16px; border-radius: 20px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; gap: 12px; }
.tour__modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tour__side .tour__modes button { padding: 9px 3px; font-size: 12.5px; }
.tour__side button { padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); font-size: 14px; text-align: start; transition: .2s; display: flex; align-items: center; gap: 8px; justify-content: center; }
.tour__side button:hover { background: rgba(46,139,255,.18); border-color: rgba(63,162,255,.45); }
.tour__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tour__nav svg { width: 16px; flex: none; }
.tour__mm-title { font-size: 13px; color: var(--muted); }
.tour__minimap { width: 100%; aspect-ratio: 3 / 2; border-radius: 14px; background: rgba(7,13,26,.6) repeating-linear-gradient(0deg, transparent 0 19px, rgba(63,162,255,.07) 19px 20px), rgba(7,13,26,.6); border: 1px solid rgba(255,255,255,.07); }
.tour__minimap circle { fill: rgba(255,255,255,.45); cursor: pointer; transition: r .2s; }
.tour__minimap circle:hover { fill: #fff; }
.tour__minimap circle.on { fill: var(--gold); filter: drop-shadow(0 0 3px var(--gold)); }

/* Projects */
.proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.proj { position: relative; aspect-ratio: 4/3; border-radius: 20px; overflow: hidden; border: 1px solid var(--stroke); display: flex; align-items: flex-end; padding: 22px; isolation: isolate; }
.proj__img { position: absolute; inset: 0; z-index: -1; background-size: cover; background-position: center; transition: transform 1s var(--ease); }
.proj::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 40%, rgba(7,13,26,.9)); }
.proj:hover .proj__img { transform: scale(1.06); }
.proj__meta small { display: block; color: var(--gold); font-size: 13px; }
.proj__meta b { font-size: 22px; font-weight: 500; }

.mp--project { padding-bottom: 130px; }
.seg { display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid var(--stroke); }
.seg button { padding: 9px 18px; border-radius: 999px; font-size: 14px; color: var(--muted); transition: .25s; }
.seg button.on { background: #fff; color: var(--navy-900); font-weight: 600; }
.tm { position: relative; aspect-ratio: var(--tm-ratio, 16/9); border-radius: 22px; overflow: hidden; border: 1px solid var(--stroke); background: #000; }
.tm__layer { position: absolute; inset: 0; opacity: 0; transform: scale(1.015); transition: opacity .7s var(--ease), transform 1.2s var(--ease); }
.tm__layer.on { opacity: 1; transform: none; }
.tm__layer img, .tm__layer video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stage-extra { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; margin-top: 18px; }
.stage-extra .blk { margin: 0; }

/* Sticky Reality bar */
.reality {
  position: sticky; bottom: 18px; z-index: 4;
  margin: 0 auto; width: min(100%, 900px);
  border-radius: 999px; padding: 8px 8px 8px 22px;
  display: flex; align-items: center; gap: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,.45), 0 0 30px rgba(46,139,255,.12);
}
[dir="rtl"] .reality { padding: 8px 22px 8px 8px; }
.reality__label { font-size: 13px; color: var(--gold); white-space: nowrap; }
.reality__steps { position: relative; flex: 1; display: grid; grid-template-columns: repeat(var(--n), 1fr); }
.reality__pill { position: absolute; top: 0; bottom: 0; inset-inline-start: calc(100% / var(--n) * var(--i)); width: calc(100% / var(--n)); border-radius: 999px; background: linear-gradient(180deg, rgba(63,162,255,.35), rgba(46,139,255,.2)); border: 1px solid rgba(63,162,255,.6); box-shadow: 0 0 18px rgba(63,162,255,.35); transition: inset-inline-start .5s var(--ease); }
.reality button { position: relative; padding: 11px 8px; border-radius: 999px; font-size: 13.5px; color: var(--muted); display: flex; align-items: center; justify-content: center; gap: 7px; transition: color .3s; line-height: 1.2; }
.reality button b { width: 20px; height: 20px; border-radius: 50%; font-size: 11px; display: grid; place-items: center; background: rgba(255,255,255,.1); flex: none; }
.reality button.on { color: #fff; }
.reality button.on b { background: var(--gold); color: #1a1407; }

/* Contact */
.contact { align-items: start; }
.info { list-style: none; display: grid; gap: 14px; margin-top: 26px; }
.info li { display: flex; gap: 16px; }
.info span { min-width: 70px; color: var(--gold); font-size: 14px; }
.form { display: grid; gap: 16px; padding: 28px; border-radius: 22px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.08); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form label { display: grid; gap: 8px; font-size: 14px; color: var(--muted); }
.form input, .form select, .form textarea { font: inherit; font-size: 16px; color: #fff; background: rgba(7,13,26,.6); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 13px 15px; outline: none; transition: border-color .2s, box-shadow .2s; }
[dir="rtl"] .form input[dir="ltr"] { text-align: right; }
.form select option { background: var(--navy-800); }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--blue-glow); box-shadow: 0 0 0 3px rgba(63,162,255,.18); }
.form .btn-gold { justify-self: start; }
.form__ok { color: var(--gold); }

/* Farms map */
.farm-map { position: relative; aspect-ratio: 16/8; border-radius: 22px; overflow: hidden; border: 1px solid var(--stroke); background: radial-gradient(ellipse at 30% 40%, #18324a, #0b1626 70%); }
.farm-map__bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.farm-map__bg path { vector-effect: non-scaling-stroke; }
.farm-map__bg .r { fill: none; stroke: rgba(227,181,98,.35); stroke-width: 2; stroke-dasharray: 8 7; }
.farm-map__bg .w { fill: none; stroke: rgba(63,162,255,.45); stroke-width: 6; }
.pin { position: absolute; transform: translate(-50%, -100%); width: 22px; height: 22px; border-radius: 50% 50% 50% 0; rotate: -45deg; background: var(--gold); box-shadow: 0 0 0 6px rgba(227,181,98,.18); }
.pin span { position: absolute; rotate: 45deg; left: 30px; top: -10px; white-space: nowrap; font-size: 13px; padding: 5px 10px; border-radius: 999px; background: rgba(7,13,26,.75); opacity: 0; transition: opacity .2s; pointer-events: none; }
.pin:hover span, .pin:focus span { opacity: 1; }
.soon--big { position: absolute; top: 16px; inset-inline-end: 16px; font-size: 13px; padding: 7px 14px; }

.video { padding: 70px 24px 24px; height: 100%; display: grid; place-items: center; }
.video iframe { width: 100%; height: 100%; border: 0; border-radius: 18px; }
.video p { color: var(--muted); text-align: center; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .nav__links > a, .dropdown__toggle { padding: .55em .75em; }
  .nav__links > a::after { inset-inline: .75em; }
}
@media (max-width: 1024px) {
  .nav { padding: 14px 20px; }
  .nav.past-hero { padding-top: 14px; }
  .logo { font-size: 20px; }
  /* A long logo gives way; the menu button must always stay reachable. */
  .nav .logo { font-size: var(--logo-size-m, 20px); min-width: 0; }
  .nav .logo__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; padding-block: .1em; }
  .nav__burger { flex: none; }
  .logo__img { height: var(--logo-img-m, 34px); }
  .logo-center .nav .logo { max-width: 58vw; } /* leaves room for the menu button */
  .nav__tools { display: none; }
  .nav__burger { display: block; }
  .nav__links {
    position: fixed; top: 0; inset-inline-end: 0; height: 100vh; height: 100dvh; width: min(340px, 86vw);
    flex-direction: column; align-items: stretch; gap: 4px; margin: 0;
    padding: 90px 22px 28px;
    background: rgba(7,13,26,.94); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-inline-start: 1px solid rgba(255,255,255,.08);
    font-size: 18px;
    transform: translateX(105%); transition: transform .45s var(--ease);
  }
  [dir="rtl"] .nav__links { transform: translateX(-105%); }
  .nav.menu-open .nav__links { transform: none; }
  .nav__links > a, .dropdown__toggle { padding: 12px 14px; width: 100%; justify-content: space-between; }
  .nav__links > a::after { display: none; }
  .dropdown__menu { position: static; display: none; opacity: 1; visibility: visible; transform: none; box-shadow: none; background: none; border: 0; backdrop-filter: none; min-width: 0; padding: 0 0 0 6px; }
  .dropdown.open .dropdown__menu { display: block; }
  .nav__mobile-tools { display: flex; gap: 12px; margin-top: 20px; align-items: center; }

  .hero { height: auto; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 120px 24px 40px; }
  .stage__img { background-position: 68% center; }
  [dir="rtl"] .stage__img { background-position: 68% center; }
  .stage__video, [dir="rtl"] .stage__video { object-position: 68% center; }
  .stage__shade, [dir="rtl"] .stage__shade { background: linear-gradient(180deg, rgba(7,13,26,.55) 0%, rgba(7,13,26,.3) 35%, rgba(7,13,26,.88) 100%); }
  .hero__content { position: relative; inset: auto; max-width: 640px; }
  .hero__phases { gap: 14px; margin-top: 16px; }
  .hero__lead { margin-top: 16px; }
  .hero__ctas { margin-top: 26px; gap: 22px; flex-wrap: wrap; }
  .btn-play { gap: 12px; }
  .hero__services { position: relative; inset: auto; margin-top: 44px; display: grid; grid-template-columns: repeat(4, 1fr); }
  .hs { width: auto; gap: 10px; padding: 0 6px; }
  .hs + .hs::before { top: 0; bottom: 0; }
  .scroll { display: none; }

  .cs--split { grid-template-columns: 1fr; }
  .cs--flip > :first-child { order: 0; }
  .bento { grid-template-columns: repeat(2, 1fr); grid-auto-flow: dense; }
  .tile--portals { grid-column: span 2; }
  .tile--stat { grid-column: span 2; flex-direction: row; justify-content: space-around; align-items: center; }
  .ba-wrap, .roi { grid-template-columns: 1fr; }
  .packages { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  .portal-links { grid-template-columns: 1fr; }
  .modal__win { width: 94vw; height: 90dvh; border-radius: 22px; }
  .tour { grid-template-columns: 1fr; }
  .tour__minimap { aspect-ratio: 2/1; }
  .mp__cols, .mp__cols--3, .mp__more { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .hero { padding: 104px 16px 30px; }
  .hero__title br, .hero__lead br { display: none; }
  .hero__services { grid-template-columns: repeat(2, 1fr); row-gap: 24px; }
  .hs:nth-child(3)::before { display: none; }
  .container { width: auto; margin: 0 16px; }
  .bento { grid-template-columns: 1fr; grid-auto-rows: minmax(220px, auto); }
  .tile--xl, .tile--wide, .tile--tall, .tile--full, .tile--portals, .tile--stat { grid-column: auto; grid-row: auto; }
  .tile--xl, .tile--tall { min-height: 340px; }
  .roi__results { grid-template-columns: 1fr; }
  .roi__big { grid-column: auto; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .phone__label { display: block; }
  .cs__grid { grid-template-columns: 1fr; }
  .footer__grid > div:first-child { grid-column: span 2; }
  .form__row, .stats-row { grid-template-columns: 1fr; }
  .modal__win { width: 100vw; height: 92dvh; border-radius: 22px 22px 0 0; align-self: end; }
  .modal { place-items: end center; }
  .reality { border-radius: 20px; flex-direction: column; align-items: stretch; padding: 10px; gap: 8px; bottom: 10px; }
  [dir="rtl"] .reality { padding: 10px; }
  .reality__label { text-align: center; }
  .reality button { flex-direction: column; font-size: 11.5px; gap: 4px; padding: 8px 4px; }
  .reality__pill { border-radius: 14px; }
  .reality button { border-radius: 14px; }
  .mp { padding: 70px 16px 24px; }
  .mp--project { padding-bottom: 170px; }
  .proj-grid { grid-template-columns: 1fr; }
}
/* Inside the admin preview, re-renders must not replay the entrance animations. */
.preview .reveal, .preview .reveal[data-anim]:not(.shown) { opacity: 1; transform: none; transition: none; }
.preview-flash { outline: 3px solid var(--gold) !important; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .reveal, .reveal[data-anim]:not(.shown) { opacity: 1; transform: none; }
}

/* ---------- Badges: symbols pinned to a card's corners ----------
   start/end follow the reading direction; --ix / --iy turn a positive offset into "inwards" for each corner. */
.badges { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.badges__corner { position: absolute; display: flex; flex-direction: column; gap: 6px; --pad: 14px; --ix: 1; --iy: 1; }
.badges__corner--top-start { top: var(--pad); inset-inline-start: var(--pad); align-items: flex-start; }
.badges__corner--top-end { top: var(--pad); inset-inline-end: var(--pad); align-items: flex-end; --ix: -1; }
.badges__corner--bottom-start { bottom: var(--pad); inset-inline-start: var(--pad); align-items: flex-start; --iy: -1; }
.badges__corner--bottom-end { bottom: var(--pad); inset-inline-end: var(--pad); align-items: flex-end; --ix: -1; --iy: -1; }
[dir="rtl"] .badges__corner--top-start, [dir="rtl"] .badges__corner--bottom-start { --ix: -1; }
[dir="rtl"] .badges__corner--top-end, [dir="rtl"] .badges__corner--bottom-end { --ix: 1; }
.badges__corner--top-center { top: var(--pad); left: 50%; transform: translateX(-50%); align-items: center; }
.badges__corner--bottom-center { bottom: var(--pad); left: 50%; transform: translateX(-50%); align-items: center; --iy: -1; }
.badges__corner--center { top: 50%; left: 50%; transform: translate(-50%, -50%); align-items: center; }
.badge {
  --bd-size: 20px;
  display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  color: var(--bd-color, var(--gold)); background: var(--bd-bg, rgba(7,13,26,.72));
  border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
  font-size: calc(var(--bd-size) * .66); font-weight: 600; line-height: 1;
  transform: translate(calc(var(--bd-dx, 0px) * var(--ix)), calc(var(--bd-dy, 0px) * var(--iy)));
}
.badge svg { width: var(--bd-size); height: var(--bd-size); flex: none; }
.badge--circle { padding: calc(var(--bd-size) * .38); border-radius: 50%; }
.badge--square { padding: calc(var(--bd-size) * .34); border-radius: calc(var(--bd-size) * .4); }
.badge--pill { padding: calc(var(--bd-size) * .32) calc(var(--bd-size) * .62) calc(var(--bd-size) * .32) calc(var(--bd-size) * .42); border-radius: 999px; }
.badge--plain { background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; filter: drop-shadow(0 1px 6px rgba(0,0,0,.75)); }
.badge b { font-weight: 600; white-space: nowrap; }

/* ---------- Packages ---------- */
.pkg__head { display: grid; gap: 6px; }
.pkg__price { font-size: clamp(26px, 2.2vw, 34px); font-weight: 600; color: var(--gold); line-height: 1.1; }
.pkg__note { color: var(--muted); font-size: 14px; line-height: 1.5; }
.pkg__media .blk + .blk { margin-top: 12px; }
.info__note { display: block; color: var(--muted); font-size: 13px; margin-top: 3px; }

/* ---------- Partner and supporting companies ---------- */
.partners { margin-top: 20px; }
.partners .partners__title { font-size: 14px; color: var(--gold); font-weight: 500; margin-bottom: 10px; }
.partners__list { display: flex; flex-wrap: wrap; gap: 10px; }
.footer__grid .partners__list a.partner, .partner {
  display: inline-flex; align-items: center; gap: 9px; padding: 6px 14px 6px 6px; border-radius: 999px;
  background: rgba(255,255,255,.05); border: 1px solid var(--stroke); color: rgba(255,255,255,.88); font-size: 13.5px; transition: background .25s, border-color .25s;
}
.partner:hover { background: rgba(46,139,255,.16); border-color: rgba(63,162,255,.45); }
.partner img, .partner svg { width: 28px; height: 28px; object-fit: contain; flex: none; border-radius: 50%; }
.partner svg { padding: 5px; background: rgba(255,255,255,.08); }

/* ---------- Floating contact icons ---------- */
.floaty { position: fixed; z-index: 110; display: flex; flex-direction: column; gap: var(--fl-gap, 10px); }
.floaty[data-direction="row"] { flex-direction: row; }
.floaty[data-side="end"] { inset-inline-end: 18px; }
.floaty[data-side="start"] { inset-inline-start: 18px; }
.floaty[data-side="left"] { left: 18px; }
.floaty[data-side="right"] { right: 18px; }
.floaty[data-vertical="bottom"] { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
.floaty[data-vertical="top"] { top: 96px; } /* under the header */
.floaty[data-vertical="center"] { top: 50%; transform: translateY(-50%); }
.floaty__btn {
  width: var(--fl-size, 52px); height: var(--fl-size, 52px); border-radius: 50%; display: grid; place-items: center;
  background: var(--fl-bg); color: var(--fl-fg); box-shadow: 0 10px 26px rgba(0,0,0,.35); transition: transform .25s var(--ease), box-shadow .25s;
}
.floaty__btn:hover { transform: translateY(-3px) scale(1.06); box-shadow: 0 14px 32px rgba(0,0,0,.45); }
.floaty__btn svg, .floaty__btn img { width: 46%; height: 46%; object-fit: contain; }
.floaty[data-style="glass"] .floaty__btn { background: rgba(7,13,26,.62); color: #fff; border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

/* ---------- Back and Home buttons ---------- */
.navbtns { position: fixed; z-index: 110; display: flex; gap: 8px; }
.navbtns[data-pos^="bottom"] { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
.navbtns[data-pos^="top"] { top: 96px; }
.navbtns[data-pos$="start"] { inset-inline-start: 18px; }
.navbtns[data-pos$="end"] { inset-inline-end: 18px; }
.navbtn {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 999px;
  background: rgba(7,13,26,.62); border: 1px solid rgba(255,255,255,.16); color: #fff; font-size: 14px; font-weight: 500;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background .25s;
}
.navbtn:hover { background: rgba(46,139,255,.32); }
.navbtn svg { width: 18px; height: 18px; flex: none; }
.navbtns[data-labels="false"] .navbtn { width: 44px; padding: 0; justify-content: center; }
.navbtns[data-labels="false"] .navbtn span { display: none; }
@media (max-width: 640px) {
  .floaty__btn { width: min(var(--fl-size, 52px), 48px); height: min(var(--fl-size, 52px), 48px); }
  .floaty[data-vertical="top"], .navbtns[data-pos^="top"] { top: 78px; }
}

/* ---------- Hover presets ----------
   Last in the file on purpose: they must win over each card's own :hover rule, which has the same specificity. */
a[data-hover="none"]:hover, a[data-hover="none"]:hover .tile__media, a[data-hover="none"]:hover .proj__img { transform: none; box-shadow: none; }
a.tile[data-hover="none"]:hover { border-color: var(--stroke); }
a.tile[data-hover="none"]:hover .tile__media { opacity: .55; }
a[data-hover="lift"]:hover { transform: translateY(-8px); box-shadow: 0 24px 50px rgba(0,0,0,.45); }
a.tile.shown[data-hover="lift"]:hover { transform: translateY(calc(var(--dy, 0px) - 8px)); }
a[data-hover="glow"]:hover { border-color: rgba(227,181,98,.7); box-shadow: 0 0 0 1px rgba(227,181,98,.5), 0 0 46px rgba(227,181,98,.35); }
a[data-hover="tilt"]:hover { transform: perspective(900px) rotateX(4deg) rotateY(-5deg) translateY(-4px); }
[dir="rtl"] a[data-hover="tilt"]:hover { transform: perspective(900px) rotateX(4deg) rotateY(5deg) translateY(-4px); }
a[data-hover="zoom"]:hover { transform: scale(1.035); }
a[data-hover="zoom"]:hover .tile__media, a[data-hover="zoom"]:hover .proj__img { transform: scale(1.1); }
/* A sweep of light crosses the card */
[data-hover="shine"] { background-image: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.16) 50%, transparent 65%); background-size: 260% 100%; background-position: 140% 0; background-repeat: no-repeat; }
a[data-hover="shine"]:hover { background-position: -40% 0; transition: background-position .9s var(--ease), border-color .4s, box-shadow .4s; }