/* Jabur Media public site, direction C "Midnight Signature" (owner-approved 2026-10-27;
   reference: docs/superpowers/specs/2026-10-27-jabur-luxury-mockups/c-midnight-signature.html
   in the ERP repo). Dark navy pages, ivory text, Bodoni Moda display over Manrope text,
   20 px cards with hairline borders, pill buttons (the primary one ivory on navy).
   The logo cyan is a hairline or a small accent only: never the fill of a large area or
   a button. Dark only. Direction-aware through logical properties, so Arabic (dir=rtl)
   mirrors. The design tokens live here, in :root, and nowhere else; home.css,
   home-sections.css, locations.css and shortlist.css only read them.
   (/sheet/ is white-label: it loads sheet.css alone and none of this.) */

:root {
  /* Colour. Contrast on --night: ivory 16.9:1, pearl 14.0:1, mute 6.5:1, cyan 7.9:1. */
  --night: #08131f;
  --night-2: #0e1c2c;
  --night-3: #152739;
  --line: rgba(226, 234, 242, .12);
  --line-strong: rgba(226, 234, 242, .26);
  --ivory: #eef1f4;
  --pearl: #d9e3ec;
  --mute: #8b9aab;
  --cyan: #3fb4e6;
  --cyan-line: rgba(63, 180, 230, .55);
  --glass: rgba(14, 28, 44, .72);
  --scrim: rgba(8, 19, 31, .72);
  --shadow: 0 24px 60px rgba(0, 0, 0, .45);

  /* Type: display serif (headings, large numerals), text sans, Arabic text. */
  --serif: "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif;
  --sans: "Manrope", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --arabic: "IBM Plex Sans Arabic", "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-display: clamp(2.75rem, 5.4vw, 5.5rem); /* 44 → 88 */
  --fs-h1: clamp(2.5rem, 5vw, 4rem);           /* 40 → 64 */
  --fs-h2: clamp(2.25rem, 4vw, 3.75rem);       /* 36 → 60 */
  --fs-h3: 1.375rem;                            /* 22 */
  --fs-lead: 1.0625rem;                         /* 17 */
  --fs-small: .8125rem;                         /* 13 */
  --fs-tag: .6875rem;                           /* 11 */

  /* Shape, space, motion. */
  --r-card: 20px;
  --r-inner: 12px;
  --r-pill: 999px;
  --wrap: 1300px;
  --gutter: 20px;
  --header-h: 72px;
  --section: clamp(80px, 10vw, 130px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: .2s var(--ease);
  --t: .45s var(--ease);
  color-scheme: dark;
}
@media (min-width: 768px) { :root { --gutter: 32px; --header-h: 76px; } }
@media (min-width: 1200px) { :root { --gutter: 44px; } }
/* Bodoni has no Arabic: Arabic words fall through to Plex, its numerals stay in Bodoni. */
html[lang="ar"] { --serif: "Bodoni Moda", "IBM Plex Sans Arabic", serif; --sans: var(--arabic); }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; background: var(--night); }
body {
  margin: 0;
  background: var(--night);
  color: var(--ivory);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 400; line-height: 1.05; letter-spacing: -.015em; }
html[lang="ar"] :is(h1, h2, h3) { font-weight: 500; letter-spacing: 0; line-height: 1.3; }
button { font: inherit; color: inherit; cursor: pointer; }
::selection { background: var(--pearl); color: var(--night); }

:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

.skip {
  position: absolute; inset-inline-start: 16px; top: -100px; z-index: 100;
  background: var(--ivory); color: var(--night); padding: 10px 18px; border-radius: var(--r-pill); font-weight: 600;
}
.skip:focus { top: 12px; }

/* ---- Tag line: small caps in cyan, a 48 px hairline before it ---- */
.tag {
  display: flex; align-items: center; margin: 0;
  font-family: var(--sans); font-size: var(--fs-tag); font-weight: 600; line-height: 1.4;
  letter-spacing: .26em; text-transform: uppercase; color: var(--cyan);
}
.tag::before {
  content: ""; flex: none; width: 48px; height: 1px; margin-inline-end: 14px; background: var(--cyan);
}
/* Arabic letters must join: no tracking on Arabic text. */
html[lang="ar"] .tag { letter-spacing: 0; font-size: .8125rem; }
.lead, .head-text { color: var(--mute); font-size: var(--fs-lead); line-height: 1.75; max-width: 34rem; }

/* ---- Buttons: pills. Primary ivory on navy; the others a hairline outline. ---- */
.btn, .pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: var(--r-pill); font-weight: 600; text-decoration: none; white-space: nowrap;
}
.btn {
  min-height: 52px; padding: 15px 28px; font-size: .875rem; letter-spacing: .02em;
  border: 1px solid var(--line-strong); background: transparent; color: var(--ivory);
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.btn:hover { border-color: var(--cyan); }
.btn:active { transform: translateY(1px); }
/* .btn-cyan / .btn-white are the former names of the primary button, kept for the inner pages. */
.btn-primary, .btn-cyan, .btn-white { background: var(--ivory); border-color: var(--ivory); color: var(--night); }
.btn-primary:hover, .btn-cyan:hover, .btn-white:hover {
  background: #fff; border-color: #fff; box-shadow: 0 0 0 4px rgba(63, 180, 230, .22);
}
.btn-line, .btn-ghost, .btn-wa, .btn-wa-line { background: transparent; color: var(--ivory); }
.btn-line:hover, .btn-ghost:hover, .btn-wa:hover, .btn-wa-line:hover { background: rgba(226, 234, 242, .05); }
.pill { padding: 9px 18px; border: 1px solid var(--line); font-size: var(--fs-small); }
.pill:hover { border-color: var(--line-strong); }
.acts { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---- Header: a frosted bar over the page ---- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(8, 19, 31, .78); border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
}
.header-bar { display: flex; align-items: center; gap: 10px; min-height: var(--header-h); }
.header-gap { flex: 1; }
.wordmark { display: inline-flex; flex-shrink: 0; line-height: 0; border-radius: var(--r-pill); }
.wordmark img { height: 34px; width: auto; }
@media (max-width: 479px) { .wordmark img { height: 28px; } } /* room for Login + ☰ */
.wordmark-full img { height: auto; width: 180px; }
.header-nav, .lang-toggle, .header-sales { display: none; }
.burger {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); background: transparent;
  color: var(--ivory); font-size: 1.0625rem; display: inline-flex; align-items: center; justify-content: center;
  transition: border-color var(--t-fast);
}
.burger:hover { border-color: var(--cyan); }
/* The bar holds wordmark + 3 links + language + "Contact us" from 1080 px; below, the ☰ menu. */
@media (min-width: 1080px) {
  .header-nav { display: flex; gap: 6px; }
  .header-nav a, .lang-toggle {
    position: relative; padding: 10px 12px; text-decoration: none; font-weight: 500; font-size: var(--fs-small);
    letter-spacing: .02em; color: var(--pearl); transition: color var(--t-fast);
  }
  .header-nav a::after {
    content: ""; position: absolute; inset-inline: 12px; bottom: 4px; height: 1px; background: var(--cyan);
    transform: scaleX(0); transform-origin: var(--origin, left); transition: transform var(--t);
  }
  [dir="rtl"] .header-nav a::after { --origin: right; }
  .header-nav a:hover, .lang-toggle:hover { color: #fff; }
  .header-nav a:hover::after, .header-nav a[aria-current="page"]::after { transform: scaleX(1); }
  .header-nav a[aria-current="page"] { color: var(--ivory); }
  .lang-toggle { display: inline-block; margin-inline-start: 4px; border: 0; background: none; }
  .lang-toggle:lang(ar) { font-family: var(--arabic); font-size: .875rem; letter-spacing: 0; }
  .header-sales { display: inline-flex; margin-inline-start: 8px; min-height: 42px; padding: 10px 20px; font-size: var(--fs-small); }
  .burger { display: none; }
}
/* The shortlist count: shown once a board is in the shortlist, on every width. */
.header-shortlist {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 7px 8px 7px 16px;
  border: 1px solid var(--line); border-radius: var(--r-pill); text-decoration: none;
  font-weight: 500; font-size: var(--fs-small); color: var(--pearl); transition: border-color var(--t-fast), color var(--t-fast);
}
[dir="rtl"] .header-shortlist { padding: 7px 16px 7px 8px; }
.header-shortlist:hover { border-color: var(--cyan); color: #fff; }
.shortlist-count {
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-pill); background: var(--cyan); color: var(--night);
  font-size: .6875rem; font-weight: 700; line-height: 22px; text-align: center;
}
@media (min-width: 1080px) { .header-shortlist { margin-inline-start: 8px; } }
.menu {
  position: absolute; top: calc(100% + 8px); inset-inline-end: var(--gutter);
  width: min(320px, calc(100vw - 32px));
  background: var(--night-2); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--shadow); padding: 12px;
}
.menu-nav { display: flex; flex-direction: column; }
.menu-nav a {
  padding: 12px 16px; border-radius: var(--r-inner); text-decoration: none;
  font-family: var(--serif); font-size: 1.375rem; transition: background-color var(--t-fast);
}
.menu-nav a:hover { background: var(--night-3); }
.menu-nav a[aria-current="page"] { color: var(--cyan); }
.lang-switch {
  margin: 10px 16px 6px; min-height: 40px; padding: 8px 20px; border-radius: var(--r-pill); border: 1px solid var(--line-strong);
  background: transparent; font-weight: 600; font-size: .9375rem;
}
.lang-switch:lang(ar) { font-family: var(--arabic); }

/* ---- Shared: placeholders, the board card, map pins and the map frame ---- */
.placeholder { background: linear-gradient(135deg, var(--night-3), var(--night-2)); }

.board-card {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px;
  background: var(--night-2); border: 1px solid var(--line); border-radius: 16px;
  text-decoration: none; color: inherit; text-align: start; font: inherit;
  transition: border-color var(--t-fast), background-color var(--t-fast), transform var(--t);
}
.board-card:hover { border-color: var(--line-strong); background: var(--night-3); }
.board-card-thumb { flex: none; width: 72px; height: 72px; border-radius: 10px; object-fit: cover; }
.board-card-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.board-card-title { font-weight: 600; font-size: .9375rem; line-height: 1.35; }
.board-card-code { color: var(--cyan); font-weight: 600; letter-spacing: .04em; unicode-bidi: isolate; }
.board-card-meta { color: var(--mute); font-size: var(--fs-small); }
.board-card-note { color: var(--cyan); font-size: .75rem; font-weight: 600; }

.pin { background: none; border: 0; }
.pin-dot {
  display: flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: 50%; background: var(--night); border: 2px solid var(--cyan);
  box-shadow: 0 0 0 4px rgba(63, 180, 230, .22), 0 4px 12px rgba(0, 0, 0, .4);
  color: var(--ivory); font: 700 11px/1 "Manrope", sans-serif; transition: transform var(--t-fast);
}
.pin-dot:empty::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); }
.leaflet-container { font-family: var(--sans); background: var(--night-2); }
.leaflet-control-attribution { background: rgba(8, 19, 31, .78) !important; color: var(--mute) !important; }
.leaflet-control-attribution a { color: var(--pearl) !important; }
.leaflet-bar a, .leaflet-bar a:hover { background: var(--night-2); color: var(--ivory); border-color: var(--line); }
.leaflet-bar { border: 1px solid var(--line) !important; border-radius: var(--r-inner) !important; overflow: hidden; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: var(--night-2); color: var(--ivory); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.leaflet-popup-content-wrapper { border-radius: 16px; }
.leaflet-container a.leaflet-popup-close-button { color: var(--mute); }
.map-frame, .map-box { border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--line); background: var(--night-2); }

/* "Talk to us" side tab (physical sides: vertical writing-mode remaps logical ones). */
.talk-tab {
  position: fixed; right: 0; top: 42%; z-index: 40;
  writing-mode: vertical-rl; padding: 20px 11px; border-radius: 14px 0 0 14px;
  background: var(--glass); color: var(--ivory); border: 1px solid var(--line); border-right: 0;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font-weight: 600; font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; text-decoration: none;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.talk-tab:hover { border-color: var(--cyan); color: #fff; }
html[lang="ar"] .talk-tab { letter-spacing: 0; font-size: .875rem; }
@media (max-width: 767px) { .talk-tab { top: auto; bottom: 22%; } } /* clear of the opening text */
[dir="rtl"] .talk-tab { right: auto; left: 0; border-radius: 0 14px 14px 0; border-right: 1px solid var(--line); border-left: 0; }

/* ---- Inner pages ---- */
.page { padding-block: clamp(48px, 7vw, 96px) clamp(72px, 9vw, 120px); }
.narrow { max-width: calc(46rem + 2 * var(--gutter)); }
.page h1 { font-size: var(--fs-h1); margin-top: 22px; }
.page .tag + h1 { margin-top: 22px; }
.page > .wrap > h1:first-child { margin-top: 0; }
.page .lead { margin: 22px 0 0; max-width: 40rem; }
.page p { font-size: var(--fs-lead); line-height: 1.75; max-width: 42rem; color: var(--pearl); }
.page p.lead { color: var(--mute); }
.page p.tag { max-width: none; font-size: var(--fs-tag); line-height: 1.4; color: var(--cyan); }
html[lang="ar"] .page p.tag { font-size: .8125rem; }
.page .btn { margin-top: 16px; }
.page-acts { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.page .page-acts .btn { margin-top: 0; }

/* ---- Specifications ---- */
.specs-block { margin-top: clamp(56px, 7vw, 88px); }
.specs-block h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); margin-bottom: 14px; }
.page p.specs-note { color: var(--mute); margin: 0 0 28px; }
.size-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.size-card {
  padding: 26px 26px 18px; border: 1px solid var(--line); border-radius: var(--r-card);
  background: linear-gradient(160deg, var(--night-2), var(--night));
}
.size-card h3 { font-size: 1.5rem; margin-bottom: 14px; }
.size-card table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.size-card th {
  text-align: start; color: var(--mute); font-weight: 600; font-size: .6875rem; letter-spacing: .18em;
  text-transform: uppercase; padding: 6px 0 10px;
}
html[lang="ar"] .size-card th { letter-spacing: 0; font-size: .8125rem; }
.size-card td { padding: 11px 0; border-top: 1px solid var(--line); font-weight: 500; }
.size-card th:last-child, .size-card td:last-child { text-align: end; }
.size-card td:last-child { font-family: var(--serif); font-size: 1.125rem; }
.size-card td.size-unknown { color: var(--mute); font-weight: 400; font-style: italic; }
.specs-cols { display: grid; gap: 48px; }
@media (min-width: 800px) { .specs-cols { grid-template-columns: 1fr 1fr; } }
.specs-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.specs-list li {
  position: relative; padding: 14px 0 14px 28px; border-top: 1px solid var(--line); color: var(--pearl); line-height: 1.65;
}
[dir="rtl"] .specs-list li { padding: 14px 28px 14px 0; }
.specs-list li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 1.55em; width: 14px; height: 1px; background: var(--cyan);
}
.specs-cta {
  margin-top: clamp(56px, 7vw, 88px); padding: clamp(28px, 4vw, 44px); border-radius: var(--r-card);
  border: 1px solid var(--line); background: radial-gradient(600px 240px at 90% 0%, rgba(63, 180, 230, .10), transparent 70%), var(--night-2);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
}
.page .specs-cta p { margin: 0; font-family: var(--serif); font-size: clamp(1.375rem, 2.4vw, 1.875rem); line-height: 1.25; color: var(--ivory); }
.page .specs-cta .btn { margin-top: 0; }

/* ---- Contact ---- */
.page p.contact-sellers {
  margin: 28px 0 0; padding-inline-start: 18px; border-inline-start: 1px solid var(--cyan);
  font-family: var(--serif); font-size: clamp(1.25rem, 2.2vw, 1.625rem); line-height: 1.35; color: var(--ivory);
}
.contact-list { margin: 40px 0 0; display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.contact-row { display: grid; gap: 4px; padding: 22px 26px; background: var(--night-2); }
.contact-row + .contact-row { border-top: 1px solid var(--line); }
@media (min-width: 600px) { .contact-row { grid-template-columns: 11rem 1fr; align-items: baseline; } }
.contact-row dt { color: var(--mute); font-weight: 600; font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase; }
html[lang="ar"] .contact-row dt { letter-spacing: 0; font-size: .875rem; }
.contact-row dd { margin: 0; font-family: var(--serif); font-size: 1.375rem; }
.contact-row dd a { color: var(--ivory); text-decoration: none; background: linear-gradient(var(--cyan), var(--cyan)) 0 100% / 0 1px no-repeat; transition: background-size var(--t); }
.contact-row dd a:hover { background-size: 100% 1px; }
.coming-soon { color: var(--mute); font-family: var(--sans); font-size: 1rem; font-style: italic; }
.office-map { margin-top: 48px; }
.office-map h2 { font-size: 1.75rem; margin-bottom: 16px; }
.map-box { height: 340px; }

/* ---- Footer ---- */
.site-footer { border-top: 1px solid var(--line); padding-block: clamp(56px, 7vw, 80px) 28px; color: var(--mute); }
.footer-grid { display: grid; gap: 36px; }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } }
.footer-tagline, .footer-sellers { margin: 18px 0 0; max-width: 26rem; font-size: .9375rem; }
.footer-sellers { margin-top: 6px; color: var(--pearl); }
.footer-nav, .footer-contact { display: flex; flex-direction: column; gap: 10px; font-size: .9375rem; }
.footer-nav a, .footer-contact a { text-decoration: none; color: var(--pearl); width: fit-content; transition: color var(--t-fast); }
.footer-nav a:hover, .footer-contact a:hover { color: #fff; }
.footer-rights {
  margin-top: 48px; margin-bottom: 0; padding-top: 22px; border-top: 1px solid var(--line);
  font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
}
html[lang="ar"] .footer-rights { letter-spacing: 0; font-size: .8125rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important; transition: none !important; scroll-behavior: auto !important;
  }
}