/* escortsdubai9.com
   Card-led, and every visible decision pushes in one direction: near-black with
   a spring-green accent, a hamburger that hides navigation entirely, an
   auto-fill grid that reflows, and tall PORTRAIT cards whose caption sits over
   the photograph.

   utility-generated with an n9- prefix, so the namespace belongs to this
   stylesheet alone and collides with nothing.

   Card images are cropped server-side to cardAspect 3:4. */

:root{--n9-void:#101214;--n9-slab:#181b1e;--n9-slab2:#1f2327;--n9-edge:#2b3035;
--n9-text:#e8ecef;--n9-mute:#8d979e;--n9-faint:#5f696f;--n9-spring:#3ddc84;--n9-spring2:#2bb56a}
*,::before,::after{box-sizing:border-box}
body{margin:0;background:var(--n9-void);color:var(--n9-text);font:15px/1.55 Inter,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}

.n9-hood{border-bottom:1px solid var(--n9-edge);position:sticky;top:0;background:rgba(16,18,20,.94);backdrop-filter:blur(8px);z-index:30}
.n9-hood-in{max-width:1400px;margin:0 auto;padding:14px 22px;display:flex;align-items:center;gap:18px}
.n9-sign{font-size:18px;font-weight:700;letter-spacing:-.02em}
.n9-sign b{color:var(--n9-spring)}
.n9-burger{margin-left:auto;width:42px;height:38px;border:1px solid var(--n9-edge);background:transparent;cursor:pointer;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border-radius:6px}
.n9-burger span{display:block;width:16px;height:1.5px;background:var(--n9-text)}
.n9-panel{display:none;border-top:1px solid var(--n9-edge);background:var(--n9-slab)}
.n9-panel[data-open]{display:block}
.n9-panel-in{max-width:1400px;margin:0 auto;padding:10px 22px 20px;display:flex;flex-direction:column;gap:1px}
.n9-panel-in a{padding:12px 0;font-size:19px;font-weight:600;border-bottom:1px solid var(--n9-edge)}
.n9-panel-in a:hover{color:var(--n9-spring)}

.n9-plot{max-width:1400px;margin:0 auto;padding:30px 22px 70px}
.n9-h1{font-size:27px;font-weight:700;margin:0 0 10px;letter-spacing:-.02em}
.n9-h2{font-size:17px;font-weight:700;margin:36px 0 14px}
.n9-say{color:var(--n9-mute);max-width:92ch;margin:0 0 22px;font-size:14px;line-height:1.7}
.n9-say b{color:var(--n9-text);font-weight:600}

/* categories row, above the grid */
.n9-cats{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.n9-cat{background:var(--n9-slab);border:1px solid var(--n9-edge);color:var(--n9-mute);font-size:13px;padding:8px 15px;border-radius:20px;line-height:1.3;white-space:nowrap}
.n9-cat:hover{border-color:var(--n9-spring);color:var(--n9-text)}
.n9-sift{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 24px}
.n9-sift button{background:var(--n9-slab);border:1px solid var(--n9-edge);color:var(--n9-mute);font:inherit;font-size:13px;font-weight:600;padding:8px 16px;border-radius:20px;cursor:pointer;line-height:1.3;white-space:nowrap}
.n9-sift button:hover{border-color:var(--n9-spring);color:var(--n9-text)}
.n9-sift button[aria-pressed=true]{background:var(--n9-spring);border-color:var(--n9-spring);color:#062314}
.n9-sift i{font-style:normal;opacity:.7;margin-left:6px;font-variant-numeric:tabular-nums}
.n9-shown{margin-left:auto;color:var(--n9-faint);font-size:12.5px}

/* auto-fill grid of tall portrait cards */
.n9-mosaic{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.n9-slab{display:block;position:relative;border-radius:12px;overflow:hidden;background:var(--n9-slab)}
.n9-slab:hover{outline:1px solid var(--n9-spring);outline-offset:-1px}
.n9-slab img{width:100%}
.n9-slab-cap{position:absolute;left:0;right:0;bottom:0;padding:34px 12px 11px;background:linear-gradient(to top,rgba(8,10,11,.95),rgba(8,10,11,.55) 55%,transparent)}
.n9-slab-nm{display:block;font-size:16px;font-weight:700;line-height:1.25;margin:0 0 2px}
.n9-slab-sub{display:block;font-size:12px;color:#b6c0c6;line-height:1.4}
.n9-slab-cost{position:absolute;top:10px;left:10px;background:var(--n9-spring);color:#062314;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:20px;line-height:1.5}
.n9-slab-mark{position:absolute;top:10px;right:10px;background:rgba(8,10,11,.8);color:var(--n9-text);font-size:11px;padding:3px 8px;border-radius:20px;line-height:1.5}

/* profile */
.n9-trail{font-size:12.5px;color:var(--n9-faint);margin:0 0 16px}
.n9-trail a{color:var(--n9-spring2)}
.n9-view{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:28px;align-items:start}
@media(max-width:900px){.n9-view{grid-template-columns:1fr}}
.n9-gal{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.n9-gal a{line-height:0;border-radius:8px;overflow:hidden;cursor:zoom-in}
.n9-gal a:first-child{grid-column:1/-1}
.n9-gal img{width:100%}
.n9-box{background:var(--n9-slab);border:1px solid var(--n9-edge);border-radius:10px;padding:15px 17px;margin:0 0 12px}
.n9-box h1,.n9-box h2{margin:0 0 10px;font-size:15px;font-weight:700}
.n9-tablet{width:100%;border-collapse:collapse;font-size:13.5px}
.n9-tablet th{text-align:left;font-weight:400;color:var(--n9-mute);padding:7px 0;border-bottom:1px solid var(--n9-edge)}
.n9-tablet td{padding:7px 0;border-bottom:1px solid var(--n9-edge);text-align:right;font-variant-numeric:tabular-nums}
.n9-tablet tr:last-child th,.n9-tablet tr:last-child td{border-bottom:0}
.n9-tablet .hot td{color:var(--n9-spring);font-weight:700}
.n9-beads{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.n9-beads li{font-size:12.5px;background:var(--n9-slab2);border:1px solid var(--n9-edge);color:var(--n9-mute);padding:4px 11px;border-radius:20px;line-height:1.5}
.n9-note{color:var(--n9-mute);font-size:13px;line-height:1.7;margin:0}
.n9-spots{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px 18px;font-size:13px;color:var(--n9-faint)}
.n9-tail{border-top:1px solid var(--n9-edge);margin-top:40px;padding-top:18px;font-size:12px;color:var(--n9-faint);line-height:1.75}

.n9-blowup{position:fixed;inset:0;background:rgba(6,8,9,.95);display:none;align-items:center;justify-content:center;padding:24px;z-index:60}
.n9-blowup[data-open]{display:flex}
.n9-blowup img{max-width:100%;max-height:100%;width:auto}

/* contacts; class name is registry-owned (dna.contactClass) */
.callbox{display:flex;flex-wrap:wrap;gap:6px 20px;margin:0 0 12px;font-size:12px}
.callbox__ph{color:#8a8a8a}
.callbox__link{color:#fff;font-weight:700}

/* agePopup: modal */
.n9-age{position:fixed;inset:0;z-index:90;background:rgba(10,10,14,.94);display:flex;align-items:center;justify-content:center;padding:24px}
.n9-age[hidden]{display:none}
.n9-age-in{max-width:44ch;background:#16161c;border:1px solid #2c2c36;padding:24px}
.n9-age-in p{margin:0 0 16px;font-size:14px;line-height:1.65;color:#c9c9d2}
.n9-age-in button{background:#e8355f;border:0;color:#fff;font:inherit;font-weight:700;padding:10px 22px;cursor:pointer}

/* long-form pages and the copy under a listing */
.n9-prose{max-width:72ch}
.n9-prose h2{font-size:16px;margin:26px 0 8px;color:#fff}
.n9-prose h3{font-size:14px;margin:20px 0 6px;color:#fff}
.n9-prose p,.n9-prose li{font-size:14px;line-height:1.72;margin:0 0 11px;color:#b6b6c0}
.n9-prose a{color:#e8355f}
.n9-cat i{opacity:.6;font-style:normal;margin-left:6px}

/* ── mark ─────────────────────────────────────────────────────────────── */
.n9-sign img { display: block; height: 34px; width: auto; }
@media (max-width: 700px) {
  .n9-hood-in { padding: 11px 14px; }
  .n9-sign img { height: 27px; }
  .n9-panel { max-height: 74vh; overflow-y: auto; }
}

/* ── contact buttons ──────────────────────────────────────────────────── */
.callbox-act { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.callbox-act__ph, .callbox-act__link {
  display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 22px;
  font-size: 13px; font-weight: 600; border: 1px solid #2b3035; background: #181b1e; color: #7c848c;
}
.callbox-act__link { color: #e8ecef; }
.callbox-act__link--whatsapp { background: #062314; border-color: #1f7a4a; color: #6ee79f; }
.callbox-act__link--telegram { background: #2a0b14; border-color: #e8355f; color: #ff8ca8; }
.callbox-act__link--whatsapp::before, .callbox-act__link--telegram::before {
  content: ""; width: 17px; height: 17px; flex: 0 0 17px; background-repeat: no-repeat; background-size: contain;
}
.callbox-act__link--whatsapp::before { background-image: url("/assets/wa9.svg"); }
.callbox-act__link--telegram::before { background-image: url("/assets/tg9.svg"); }

.callbox__ph--whatsapp, .callbox__ph--telegram { color: #7c848c; }
.callbox__link--whatsapp { color: #6ee79f; }
.callbox__link--telegram { color: #ff8ca8; }
.callbox-act__ph--whatsapp { background: #062314; border-color: #1f7a4a; color: #3f7a5b; }
.callbox-act__ph--telegram { background: #2a0b14; border-color: #e8355f; color: #8c5364; }

/* ── the session tariff and the area list ────────────────────────────── */
.n9-tariff { width: 100%; border-collapse: collapse; font-size: 14px; margin: 0 0 8px; }
.n9-tariff thead th, .n9-tariff thead td { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #7c848c; font-weight: 500; padding: 0 0 9px; border-bottom: 1px solid #2b3035; text-align: right; }
.n9-tariff thead th { text-align: left; }
.n9-tariff tbody th { text-align: left; font-weight: 500; padding: 10px 0; border-bottom: 1px solid #2b3035; }
.n9-tariff tbody td { text-align: right; padding: 10px 0; border-bottom: 1px solid #2b3035; color: #e8ecef; font-variant-numeric: tabular-nums; }
.n9-areas { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 0 22px; }
.n9-areas li { display: flex; flex-direction: column; gap: 2px; padding: 9px 0; border-bottom: 1px solid #2b3035; }
.n9-areas b { font-size: 14.5px; font-weight: 600; }
.n9-areas span { font-size: 12px; color: #7c848c; }
@media (max-width: 560px) { .n9-areas { grid-template-columns: 1fr; } .n9-tariff { font-size: 13px; } }

/* ── the footer, out of <main> and carrying the lists ──────────────────── */
.n9-tail { max-width: 1280px; margin: 0 auto; padding: 26px 22px 44px; border-top: 1px solid #2b3035; color: #7c848c; font-size: 13px; }
.n9-tailnav { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 14px; }
.n9-tailnav a { color: #e8ecef; font-weight: 600; }
.n9-tailnav a:hover { color: #e8355f; }
.n9-tailnav--minor { font-weight: 400; font-size: 12.5px; }
.n9-tailnav--minor a { color: #9aa3ab; font-weight: 400; }

/* ── landing rate table and area list ─────────────────────────────────── */
.n9-rates { width: 100%; border-collapse: collapse; font-size: 14px; margin: 0 0 10px; }
.n9-rates thead th, .n9-rates thead td { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #7c848c; font-weight: 500; padding: 0 0 9px; border-bottom: 1px solid #2b3035; text-align: right; }
.n9-rates thead th { text-align: left; }
.n9-rates tbody th { text-align: left; font-weight: 500; padding: 10px 0; border-bottom: 1px solid #2b3035; }
.n9-rates tbody td { text-align: right; padding: 10px 0; border-bottom: 1px solid #2b3035; font-variant-numeric: tabular-nums; color: #e8355f; }
.n9-zones { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0 22px; }
.n9-zones li { display: flex; flex-direction: column; gap: 2px; padding: 9px 0; border-bottom: 1px solid #2b3035; }
.n9-zones b { font-size: 14.5px; font-weight: 600; }
.n9-zones span { font-size: 12px; color: #7c848c; }
@media (max-width: 560px) { .n9-zones { grid-template-columns: 1fr; } }
