/* ════════════════════════════════════════════════════════════
   QARAAR DESIGN TOKENS
   Use --green-* for brand accent, --ink-* for chrome,
   --paper-* for parchment surfaces, --stone-* for neutrals.
   ════════════════════════════════════════════════════════════ */
:root {
    /* ── INK · navy chrome ────────────────────────────────── */
    --ink-900: #0e1b2e;
    --ink-800: #16243a;
    --ink-700: #1d2f49;
    --ink-600: #2a3f5c;
    --ink-500: #3d557a;
    --ink-400: #5e739a;

    /* ── GREEN · forest green brand accent ────────────────── */
    --green-900: #0c3d2e;
    --green-800: #114e3b;
    --green-700: #15795f;
    --green-600: #1a8b6c;
    --green-500: #2aa17f;
    --green-200: #bfe3d6;
    --green-100: #e1f1ea;
    --green-050: #f0f8f4;

    /* ── PAPER · warm parchment ───────────────────────────── */
    --paper-000: #ffffff;
    --paper-050: #faf8f2;
    --paper-100: #f4f0e6;
    --paper-200: #ece6d6;
    --paper-300: #ddd5c2;

    /* ── STONE · true neutral greys ───────────────────────── */
    --stone-900: #1c2430;
    --stone-700: #3b4757;
    --stone-600: #586473;
    --stone-500: #78828f;
    --stone-400: #9aa3ad;
    --stone-300: #c7ccd3;
    --stone-200: #e2e5e9;
    --stone-100: #f1f2f4;

    /* ── STATUS · project lifecycle ───────────────────────── */
    --status-done-fg:    #114e3b; --status-done-bg:    #def0e7;
    --status-build-fg:   #8a5a12; --status-build-bg:   #f8ecd3;
    --status-announce-fg:#3a3a8a; --status-announce-bg:#e6e6f5;
    --status-feat-fg:    #16243a; --status-feat-bg:    #e7ebf2;

    /* ── SEMANTIC FACTS ───────────────────────────────────── */
    --gold-700: #a9791f;
    --gold-600: #c08a2d;
    --gold-100: #f8ecd3;
    --danger-700: #9a2c25; --danger-100: #f7e3e1;

    /* ── SEMANTIC ALIASES ─────────────────────────────────── */
    --bg-page:         var(--stone-100);
    --bg-section:      var(--paper-200);
    --surface-card:    var(--paper-000);
    --surface-raised:  var(--paper-050);
    --surface-inset:   var(--paper-100);
    --surface-ink:     var(--ink-800);
    --text-strong:     var(--stone-900);
    --text-body:       var(--stone-700);
    --text-muted:      var(--stone-600);
    --text-subtle:     var(--stone-500);
    --text-on-ink:     #eef1f6;
    --text-on-ink-mut: #9fb0c8;
    --text-link:       var(--green-700);
    --brand:           var(--green-700);
    --brand-hover:     var(--green-600);
    --on-brand:        #ffffff;
    --border-soft:     var(--stone-200);
    --border-default:  var(--stone-300);
    --border-strong:   var(--ink-400);
    --border-paper:    var(--paper-300);
    --focus-ring: color-mix(in oklab, var(--green-600) 55%, transparent);

    /* ── TYPOGRAPHY ───────────────────────────────────────── */
    --font-sans:    'Cairo', system-ui, sans-serif;
    --font-display: 'Markazi Text', 'Cairo', serif;
    --fw-regular: 400; --fw-medium:  500; --fw-semibold: 600;
    --fw-bold:    700; --fw-extra:   800; --fw-black:    900;
    --fs-3xs: 11px; --fs-2xs: 12px; --fs-xs:   13px;
    --fs-sm:  14px; --fs-base: 15px; --fs-md:  16px;
    --fs-lg:  18px; --fs-xl:  22px; --fs-2xl:  28px;
    --fs-d-sm:30px; --fs-d-md: 40px; --fs-d-lg:56px;
    --lh-tight: 1.15; --lh-snug: 1.3;
    --lh-normal:1.55; --lh-relaxed:1.75;
    --num-tabular: 'tnum' 1, 'lnum' 1;

    /* ── SPACING (4 px base) ──────────────────────────────── */
    --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
    --sp-5: 20px; --sp-6: 24px;  --sp-7: 32px;  --sp-8: 40px;
    --sp-9: 48px; --sp-10: 64px; --sp-11: 80px; --sp-12: 96px;

    /* ── RADII ────────────────────────────────────────────── */
    --r-xs: 3px; --r-sm: 5px; --r-md: 8px;
    --r-lg:12px; --r-xl:16px; --r-pill:999px;

    /* ── SHADOWS ──────────────────────────────────────────── */
    --shadow-xs:  0 1px 2px rgba(14,27,46,.05);
    --shadow-sm:  0 1px 3px rgba(14,27,46,.07), 0 1px 2px rgba(14,27,46,.04);
    --shadow-md:  0 4px 12px rgba(14,27,46,.08), 0 1px 3px rgba(14,27,46,.05);
    --shadow-lg:  0 12px 28px rgba(14,27,46,.12), 0 4px 8px rgba(14,27,46,.06);
    --shadow-pop: 0 16px 40px rgba(14,27,46,.18);

    /* ── MOTION ───────────────────────────────────────────── */
    --ease:     cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms;

    /* ── LAYOUT ───────────────────────────────────────────── */
    --container: 1240px;
    --gutter:    24px;
    --header-h:  64px;

    /* ════════════════════════════════════════════════════════
       BACKWARD-COMPAT ALIASES — keep existing CSS working
       ════════════════════════════════════════════════════════ */
    --navy:      var(--ink-800);
    --navy-mid:  var(--ink-600);
    --navy-dark: var(--ink-900);
    --navy-lite: var(--stone-100);
    --teal:      var(--green-700);
    --teal-lite: var(--green-100);
    --amber:     var(--gold-700);
    --amber-lite:var(--gold-100);
    --paper:     var(--bg-page);
    --line:      var(--border-default);
    --ink:       var(--stone-900);
    --ink-2:     var(--stone-700);
    --ink-3:     var(--stone-600);
    --ink-4:     var(--stone-500);
}

* {
    box-sizing: border-box;
}

a {
    text-decoration: none;
    color: inherit;
}

a:hover,
a:focus {
    text-decoration: none;
    color: inherit;
}

body {
    font-family: var(--font-sans);
    background: var(--bg-page);
    color: var(--text-body);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-feature-settings: var(--num-tabular);
}

.page-content { flex: 1; }

/* ── CONTAINER WIDTH CAP ──
   كل الأقسام تستخدم container-fluid كطبقة داخلية للـ padding فقط
   داخل عنصر أب بخلفية full-bleed — لكن بدون حد أقصى للعرض كانت
   البطاقات والعناصر تتمدد بشكل غير متناسق على الشاشات الكبيرة. */
.container-fluid {
    max-width: var(--container);
    margin-inline: auto;
}

/* ── GALLERY LIGHTBOX ── */
.qr-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(14, 27, 46, .92);
    z-index: 1080;
    align-items: center;
    justify-content: center;
}

.qr-lightbox-img {
    max-width: min(92vw, 1400px);
    max-height: 86vh;
    object-fit: contain;
    border-radius: var(--r-md);
    box-shadow: var(--shadow-pop);
}

.qr-lightbox-close,
.qr-lightbox-nav {
    position: absolute;
    border: none;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .12);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--dur-1) var(--ease);
}

.qr-lightbox-close:hover,
.qr-lightbox-nav:hover {
    background: rgba(255, 255, 255, .22);
}

.qr-lightbox-close {
    top: 20px;
    inset-inline-end: 24px;
    width: 44px;
    height: 44px;
    font-size: 18px;
}

.qr-lightbox-nav {
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    font-size: 18px;
}

.qr-lightbox-prev { inset-inline-start: 24px; }
.qr-lightbox-next { inset-inline-end: 24px; }

.qr-lightbox-counter {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    background: rgba(255, 255, 255, .12);
    padding: 6px 14px;
    border-radius: var(--r-pill);
    font: var(--fw-semibold) 13px/1 var(--font-sans);
    direction: ltr;
    unicode-bidi: isolate;
}

/* ── NAV ── */
.navbar {
    background: var(--ink-800) !important;
    min-height: var(--header-h);
}

.navbar-brand {
    font-weight: 800;
    font-size: 18px;
    color: #fff !important;
}

.nav-link {
    color: rgba(255, 255, 255, .6) !important;
    font-weight: 500;
    font-size: 14px;
}

.nav-link:hover {
    color: #fff !important;
}

.navbar-toggler {
    border-color: rgba(255, 255, 255, .3);
}

.navbar-toggler-icon {
    filter: invert(1);
}

.btn-nav-login,
.btn-nav-login:visited,
.btn-nav-login:hover,
.btn-nav-login:active {
    color: rgba(255, 255, 255, .8);
    text-decoration: none;
}

.btn-nav-login {
    font-size: 14px;
    font-weight: 700;
    background: none;
    border: 1.5px solid rgba(255, 255, 255, .8);
    border-radius: 6px;
    padding: 6px 17px;
    font-family: 'Cairo', sans-serif;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

.btn-nav-login:hover {
    color: #fff;
    border-color: #fff;
}

.btn-nav-signup,
.btn-nav-signup:visited,
.btn-nav-signup:hover,
.btn-nav-signup:active {
    color: #fff;
    text-decoration: none;
}

.btn-nav-signup {
    background: var(--green-700);
    font-size: 13px;
    font-weight: 700;
    border-radius: var(--r-md);
    padding: 7px 18px;
    border: none;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: background var(--dur-1) var(--ease);
}

.btn-nav-signup:hover {
    background: var(--green-600);
}

/* ── HERO ── */
.hero-section {
    background: linear-gradient(165deg, var(--ink-700), var(--ink-900));
    padding: clamp(40px, 6vw, 80px) 0 0;
    position: relative;
    overflow: hidden;
}

.hero-grid {
    position: absolute;
    inset: 0;
    opacity: .04;
    background-image: linear-gradient(rgba(255, 255, 255, 1) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 1) 1px, transparent 1px);
    background-size: 56px 56px;
}

.hero-glow {
    position: absolute;
    top: -40%;
    left: -10%;
    width: 60%;
    height: 160%;
    background: radial-gradient(circle, rgba(26, 53, 80, .7) 0%, transparent 70%);
    pointer-events: none;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .15);
    color: rgba(255, 255, 255, .8);
    font-size: 12px;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 99px;
    margin-bottom: 20px;
}

.hero-eyebrow span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green-500);
    display: inline-block;
}

.hero-title {
    font-size: clamp(28px, 5.5vw, 54px);
    font-weight: 900;
    color: #fff;
    line-height: 1.15;
    letter-spacing: -.03em;
    margin-bottom: 16px;
}

.hero-title em {
    font-style: normal;
    color: rgba(255, 255, 255, .4);
}

.hero-subtitle {
    font-size: clamp(14px, 1.8vw, 17px);
    color: rgba(255, 255, 255, .65);
    line-height: 1.75;
    margin-bottom: 32px;
}

/* SEARCH BOX */
.hero-search {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 16px 56px rgba(0, 0, 0, .35);
}

.hero-search .hs-input {
    border: none;
    outline: none;
    font-family: 'Cairo', sans-serif;
    font-size: 15px;
    padding: 15px 18px;
    width: 100%;
    color: var(--ink);
}

.hero-search .hs-input::placeholder {
    color: var(--ink-4);
}

.hs-bottom {
    display: flex;
    border-top: 1px solid var(--line);
}

.hs-city {
    flex: 1;
    border: none;
    outline: none;
    font-family: 'Cairo', sans-serif;
    font-size: 14px;
    color: var(--ink-2);
    padding: 12px 16px;
    background: #fff;
    border-left: 1px solid var(--line);
}

.hs-btn {
    background: var(--navy);
    color: #fff;
    border: none;
    font-family: 'Cairo', sans-serif;
    font-size: 14px;
    font-weight: 700;
    padding: 12px 28px;
    cursor: pointer;
    white-space: nowrap;
}

.hs-btn:hover {
    background: var(--navy-mid);
}

/* QUICK CHIPS */
.hero-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.hero-chip {
    background: rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .8);
    padding: 4px 14px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, .15);
    transition: all .15s;
}

.hero-chip:hover {
    background: rgba(255, 255, 255, .2);
    color: #fff;
}

/* HERO STATS STRIP */
.hero-stats {
    margin-top: 48px;
    background: rgba(255, 255, 255, .05);
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.hs-stat {
    padding: 18px 12px;
    text-align: center;
    border-left: 1px solid rgba(255, 255, 255, .07);
}

.hs-stat:last-child {
    border-left: none;
}

.hs-stat-val {
    font-size: clamp(18px, 2.5vw, 26px);
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

.hs-stat-lbl {
    font-size: 11px;
    color: rgba(255, 255, 255, .45);
    margin-top: 4px;
}

/* ── SECTIONS ── */
.sec-title {
    font-size: clamp(18px, 2.5vw, 22px);
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -.02em;
}

.sec-title span {
    color: var(--ink-4);
    font-weight: 400;
    font-size: 85%;
}

.sec-link {
    font-size: 13px;
    color: var(--navy);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.sec-link:hover {
    color: var(--navy-mid);
}

/* ── HOW IT WORKS ── */
.step-card {
    background: #fff;
    border-radius: 14px;
    padding: 24px 20px;
    height: 100%;
    border: 1px solid var(--line);
    position: relative;
}

.step-num {
    font-size: 52px;
    font-weight: 900;
    color: var(--line);
    line-height: 1;
    margin-bottom: 10px;
}

.step-icon {
    font-size: 26px;
    margin-bottom: 10px;
}

.step-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 6px;
}

.step-desc {
    font-size: 13px;
    color: var(--ink-3);
    line-height: 1.6;
}

.step-arrow {
    display: none;
}

@media (min-width: 768px) {
    .step-arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        color: var(--ink-4);
        padding-top: 40px;
    }
}

/* ── PROJECT CARDS ── */
.pcard {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow .2s, transform .18s;
    height: 100%;
}

.pcard:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, .1);
    transform: translateY(-3px);
}

.pcard-img {
    height: 175px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: rgba(255, 255, 255, .25);
}

.pcard-img.b1 {
    background: linear-gradient(145deg, #1A3550, #2D5F8A);
}

.pcard-img.b2 {
    background: linear-gradient(145deg, #0C4A3A, #1A7A5E);
}

.pcard-img.b3 {
    background: linear-gradient(145deg, #3D2A0A, #7A5520);
}

.pcard-img.b4 {
    background: linear-gradient(145deg, #2A0A3D, #5A2080);
}

.pcard-status {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 99px;
}

.pcard-featured {
    background: rgba(255, 255, 255, .92);
    color: var(--navy);
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 99px;
}

.pcard-body {
    padding: 14px 16px;
}

.pcard-type {
    font-size: 11px;
    color: var(--ink-4);
    margin-bottom: 3px;
}

.pcard-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 3px;
}

.pcard-loc {
    font-size: 12px;
    color: var(--ink-3);
    margin-bottom: 10px;
}

.pcard-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid var(--line);
}

.pcard-dev {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--ink-2);
}

.pcard-dev-logo {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background: var(--navy-lite);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 800;
    color: var(--navy);
}

.pcard-prog {
    font-size: 12px;
    color: var(--navy);
    font-weight: 700;
}

.s-c {
    background: var(--amber-lite);
    color: var(--amber);
}

.s-d {
    background: var(--teal-lite);
    color: var(--teal);
}

.s-a {
    background: var(--navy-lite);
    color: var(--navy);
}

/* ── DEVELOPER CARDS ── */
.dev-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    cursor: pointer;
    transition: box-shadow .18s, transform .15s;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dev-card:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, .08);
    transform: translateY(-2px);
}

.dev-card-cover {
    height: 64px;
    flex-shrink: 0;
    background: linear-gradient(145deg, rgba(26, 53, 80, .08), rgba(26, 53, 80, .02));
}

.dev-card-avatar-wrap {
    padding: 0 16px;
    margin-top: -32px;
}

.dev-card-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .14);
    background: var(--navy-lite);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 800;
    color: var(--navy);
}

.dev-card-body {
    padding: 10px 16px 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.dev-card-sub {
    font-size: 12px;
    color: var(--ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 6px;
}

.dev-card-about {
    font-size: 12px;
    color: var(--ink-3);
    line-height: 1.6;
    margin-top: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dev-card-divider {
    border-top: 1px solid var(--line);
    margin: 12px 0;
}

.dc-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
}

.dc-verified {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: var(--teal-lite);
    color: var(--teal);
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 99px;
}

.dev-card-price {
    color: var(--green-700);
    font-weight: 700;
}

.card-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 7px 14px;
    border: 1.5px solid var(--line);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-2);
    transition: border-color .18s, color .18s;
}

.dev-card:hover .card-cta,
.pcard:hover .card-cta {
    border-color: var(--green-700);
    color: var(--green-700);
}

.city-tag {
    font-size: 11px;
    background: var(--navy-lite);
    color: var(--navy);
    padding: 2px 10px;
    border-radius: 99px;
    font-weight: 600;
}

.logo-img-fit {
    object-fit: contain;
    background: #fff;
}

/* ── WHY US ── */
.why-card {
    background: var(--paper);
    border-radius: 14px;
    padding: 22px 20px;
    height: 100%;
    border: 1px solid var(--line);
}

.why-icon {
    font-size: 28px;
    margin-bottom: 12px;
}

.why-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 6px;
}

.why-desc {
    font-size: 13px;
    color: var(--ink-3);
    line-height: 1.6;
}

/* ── CTA BAND ── */
.cta-band {
    background: var(--green-800);
    padding: clamp(40px, 6vw, 72px) 0;
}

.cta-title {
    font-size: clamp(20px, 3vw, 28px);
    font-weight: 800;
    color: #fff;
    margin-bottom: 6px;
}

.cta-sub {
    font-size: 14px;
    color: rgba(255, 255, 255, .6);
    margin: 0;
}

.btn-cta-w,
.btn-cta-w:visited {
    background: #fff;
    color: var(--navy);
    padding: 13px 28px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    border: none;
    font-family: 'Cairo', sans-serif;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: background .2s ease, transform .15s ease;
}

.btn-cta-w:hover {
    background: var(--paper-100);
    color: var(--navy);
    text-decoration: none;
    transform: translateY(-1px);
}

.btn-cta-o,
.btn-cta-o:visited,
.btn-cta-o:focus {
    background: transparent;
    color: #fff;
    padding: 13px 28px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    border: 1.5px solid rgba(255, 255, 255, .65);
    font-family: 'Cairo', sans-serif;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, transform .15s ease;
    text-decoration: none;
    display: inline-block;
}

.btn-cta-o:hover {
    background: rgba(255, 255, 255, .1);
    border-color: #fff;
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}

/* ── FOOTER ── */
.footer {
    background: var(--navy-dark);
    padding: clamp(36px, 5vw, 60px) 0 24px;
}

.footer-logo {
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 10px;
}

.footer-desc {
    font-size: 13px;
    color: rgba(255, 255, 255, .4);
    line-height: 1.7;
}

.footer-heading {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, .45);
    letter-spacing: .05em;
    margin-bottom: 12px;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-links a {
    font-size: 13px;
    color: rgba(255, 255, 255, .5);
    text-decoration: none;
}

.footer-links a:hover {
    color: #fff;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .07);
    padding-top: 20px;
    margin-top: 36px;
}

.footer-copy {
    font-size: 12px;
    color: rgba(255, 255, 255, .3);
}

.footer-note {
    font-size: 12px;
    color: rgba(255, 255, 255, .3);
}

.dev-note {
    background: #FFFBEB;
    border-bottom: 1px solid #FDE68A;
    padding: 7px 20px;
    font-size: 12px;
    color: #92400E;
}

/* ── SEARCH STRIP ── standalone between hero and content */
.search-strip {
    background: #fff;
    border-bottom: 1px solid var(--line);
    padding: 20px 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .07);
    position: sticky;
    top: var(--header-h);
    z-index: 90;
}

.search-strip .ss-wrap {
    display: flex;
    gap: 10px;
    align-items: stretch;
    flex-wrap: wrap;
}

.ss-input-wrap {
    flex: 1;
    min-width: 200px;
    position: relative;
}

.ss-input-wrap .ss-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: var(--ink-4);
    pointer-events: none;
}

.ss-input {
    width: 100%;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    padding: 13px 40px 13px 16px;
    font-family: 'Cairo', sans-serif;
    font-size: 15px;
    color: var(--ink);
    outline: none;
    transition: border-color .15s;
}

.ss-input:focus {
    border-color: var(--navy);
}

.ss-input::placeholder {
    color: var(--ink-4);
}

.ss-city {
    border: 1.5px solid var(--line);
    border-radius: 10px;
    padding: 13px 16px;
    font-family: 'Cairo', sans-serif;
    font-size: 14px;
    color: var(--ink-2);
    background: #fff;
    outline: none;
    cursor: pointer;
    min-width: 130px;
    transition: border-color .15s;
}

.ss-city:focus {
    border-color: var(--navy);
}

.ss-btn {
    background: var(--teal);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 13px 28px;
    font-family: 'Cairo', sans-serif;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ss-btn:hover {
    background: var(--teal);
    filter: brightness(1.1);
}

.ss-chips {
    width: 100%;
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    padding-top: 12px;
    align-items: center;
}

.ss-chips-label {
    font-size: 12px;
    color: var(--ink-4);
    font-weight: 600;
    white-space: nowrap;
}

.ss-chip {
    padding: 4px 14px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid var(--line);
    color: var(--ink-3);
    background: #fff;
    transition: all .15s;
}

.ss-chip:hover {
    border-color: var(--navy);
    color: var(--navy);
}

.ss-chip.on {
    background: var(--navy-lite);
    color: var(--navy);
    border-color: var(--navy);
}

@media (max-width: 575px) {
    .ss-city {
        min-width: 100%;
    }

    .ss-btn {
        width: 100%;
        justify-content: center;
    }

    .search-strip {
        position: relative;
        top: 0;
    }
}

/* Comparison Styles */
.page-header {
    background: #E6EAF0;
    border-bottom: 1px solid var(--line);
    padding: 24px 0;
}

.page-header h1 {
    font-size: clamp(18px, 3vw, 22px);
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 4px;
}

.page-header p {
    font-size: 14px;
    color: var(--ink-3);
    margin: 0;
}

.mode-bar {
    background: var(--surface-card);
    border-bottom: 1px solid var(--border-default);
    padding: 12px 0;
}

.toggle-mode {
    border-radius: var(--r-md);
    overflow: hidden;
    border: 1.5px solid var(--border-default);
    display: inline-flex;
}

.toggle-mode button {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    padding: 7px 20px;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.toggle-mode button.active {
    background: var(--ink-800);
    color: #fff;
}

.selector-card {
    background: #fff;
    border: 1.5px solid var(--border-default);
    border-radius: var(--r-lg);
    padding: 18px;
    min-height: 110px;
    transition: border-color .15s;
}

.selector-card.filled {
    border-color: var(--green-700);
}

.sel-dropdown {
    width: 100%;
    padding: 10px 14px;
    font-family: var(--font-sans);
    font-size: 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: #fff;
    color: var(--text-strong);
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

.sel-dropdown:focus {
    outline: none;
    border-color: var(--stone-300);
    box-shadow: 0 0 0 2px var(--stone-200);
}

.empty-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink-3);
}

.unit-comp-section .sec-title {
    margin-bottom: 16px;
}

.selector-card.empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
}

.selector-card.empty:hover {
    border-color: var(--green-700);
}

.vs-badge {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--ink-800);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    font-family: var(--font-sans);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    box-shadow: var(--shadow-sm);
}

.sel-img {
    width: 72px;
    height: 54px;
    border-radius: 8px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: rgba(255, 255, 255, .3);
    overflow: hidden;
}

.sel-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sel-img.b1 { background: linear-gradient(145deg, #1A3550, #2D5F8A); }
.sel-img.b2 { background: linear-gradient(145deg, #0C4A3A, #1A7A5E); }
.sel-img.b3 { background: linear-gradient(145deg, #3D2A0A, #7A5520); }
.sel-img.b4 { background: linear-gradient(145deg, #3D0A1A, #7A2040); }
.sel-img.b5 { background: linear-gradient(145deg, #1A0A3D, #402080); }
.sel-img.b6 { background: linear-gradient(145deg, #0A3D2A, #157A50); }

.sel-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
}

.sel-loc {
    font-size: 12px;
    color: var(--ink-3);
}

.sel-dev-logo {
    width: 18px;
    height: 18px;
    border-radius: 3px;
    background: var(--surface-inset);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 800;
    color: var(--ink-700);
}

.btn-remove {
    background: none;
    border: none;
    color: var(--ink-4);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.btn-remove:hover {
    color: #dc3545;
}

.badge-construction {
    background: var(--amber-lite);
    color: var(--amber);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 99px;
}

.badge-done {
    background: var(--teal-lite);
    color: var(--teal);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 99px;
}

.compare-table-wrap {
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-sm);
}

.compare-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    margin: 0;
    font-family: var(--font-sans);
}

.compare-table td {
    padding: 13px 18px;
    border-bottom: 1px solid var(--border-soft);
    font-size: 14px;
    color: var(--text-body);
    vertical-align: middle;
}

.compare-table tbody tr:last-child td {
    border-bottom: none;
}

.compare-table tbody tr:not(.section-head):hover td {
    background: var(--paper);
}

.col-label {
    width: 22%;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

.col-sep {
    width: 4%;
    text-align: center;
    color: var(--text-subtle);
}

.section-head td {
    background: var(--paper);
    padding: 0;
    border-bottom: 1px solid var(--border-soft);
    font-size: 0;
}

.section-head td .sh-inner {
    display: flex;
    flex-direction: column;
}

.sh-project {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    padding: 9px 18px;
    letter-spacing: .04em;
    font-family: var(--font-sans);
}

.sh-label {
    display: none;
}

.section-head .col-sep {
    font-size: 0;
    background: var(--paper);
}

.section-head .col-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-subtle);
    letter-spacing: .06em;
    background: var(--paper);
    padding: 9px 18px;
    vertical-align: middle;
}

.win-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: rgba(26, 139, 108, .12);
    color: var(--green-700);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--r-pill);
    margin-left: 6px;
    font-family: var(--font-sans);
}

.text-win {
    color: var(--green-700) !important;
    font-weight: 700;
}

.text-good {
    color: var(--green-700) !important;
    font-weight: 700;
}

.text-warn {
    color: var(--amber) !important;
    font-weight: 700;
}

.text-na {
    color: var(--text-subtle);
}

.prog-sm {
    height: 6px;
    border-radius: 99px;
}

/* CTA CARDS — أسفل صفحة المقارنة */
.cta-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.cta-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 2px;
}

.cta-dev {
    font-size: 12px;
    color: var(--ink-3);
}

.cta-card .btn-contact {
    width: auto;
    flex-shrink: 0;
    padding: 10px 20px;
    font-size: 13px;
}

/* STICKY BOTTOM BAR — صفحة المقارنة */
.sticky-bottom-bar {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    background: #fff;
    border-top: 1px solid var(--line);
    padding: 10px 0;
    z-index: 900;
    box-shadow: 0 -2px 12px rgba(0,0,0,.06);
}

.btn-new {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--navy);
    color: #fff;
    padding: 9px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    transition: opacity .2s;
}

.btn-new:hover,
.btn-new:visited,
.btn-new:focus {
    opacity: .85;
    color: #fff;
}

.unit-compare-wrap {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--line);
}

.unit-compare-header {
    background: #E6EAF0;
    padding: 14px 20px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.unit-compare-header h6 {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
}

.unit-select {
    padding: 6px 12px;
    border: 1.5px solid var(--line);
    border-radius: 8px;
    font-family: 'Cairo', sans-serif;
    font-size: 13px;
    color: var(--ink-2);
    background: #fff;
    outline: none;
    cursor: pointer;
}

.unit-select:focus {
    border-color: var(--navy);
}

.unit-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

.unit-table td {
    padding: 13px 18px;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
    color: var(--ink);
    vertical-align: middle;
}

.unit-table tbody tr:last-child td {
    border-bottom: none;
}

.unit-table tbody tr:not(.unit-head):hover td {
    background: #EEF1F6;
}

.unit-col-label {
    width: 22%;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-2);
}

.unit-col-sep {
    width: 4%;
    text-align: center;
    color: var(--ink-4);
}

.unit-head td {
    background: #E6EAF0;
    padding: 0;
    border-bottom: 1px solid var(--line);
    border-top: 2px solid var(--line);
    font-size: 0;
}

.unit-compare-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 18px 20px;
    background: #fff;
    border-top: 1px solid var(--line);
}

.unit-compare-footer p {
    margin: 0;
    font-size: 13px;
    color: var(--ink-3);
}

.unit-compare-footer .btn {
    min-width: 150px;
}

.compare-takeaway {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 20px;
}

.compare-takeaway h5 {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 8px;
}

.compare-takeaway p {
    margin: 0;
    color: var(--ink-3);
    font-size: 14px;
    line-height: 1.7;
}

@media (max-width: 575px) {
    .compare-takeaway {
        padding: 16px;
    }
}

/* Developers Styles */
/* BREADCRUMB */
.breadcrumb-bar {
    background: #fff;
    border-bottom: 1px solid var(--line);
    padding: 11px 0;
}

.breadcrumb {
    margin: 0;
    font-size: 13px;
}

.breadcrumb-item a {
    color: var(--ink-4);
    text-decoration: none;
}

.breadcrumb-item a:hover {
    color: var(--navy);
}

.breadcrumb-item.active {
    color: var(--ink-2);
    font-weight: 600;
}

.breadcrumb-item+.breadcrumb-item::before {
    color: var(--ink-4);
}

/* COVER */
.dev-cover {
    width: 100%;
    height: clamp(140px, 16vw, 220px);
    background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 60%, var(--navy-mid) 100%);
    position: relative;
    overflow: hidden;
}

.cover-pattern {
    position: absolute;
    inset: 0;
    opacity: .04;
    background-image: repeating-linear-gradient(45deg, #fff 0, #fff 1px, transparent 0, transparent 50%);
    background-size: 20px 20px;
}

.cover-geo {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 40%;
    opacity: .04;
    background: repeating-linear-gradient(-45deg, transparent, transparent 20px, #fff 20px, #fff 21px);
}

/* PROFILE STRIP */
.profile-strip {
    background: #fff;
    border-bottom: 1px solid var(--line);
}

.dev-logo-wrap {
    width: 84px;
    height: 84px;
    border-radius: 14px;
    background: #fff;
    border: 3px solid #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 800;
    color: var(--navy);
    flex-shrink: 0;
    margin-top: -42px;
    position: relative;
    z-index: 1;
}

.dev-name {
    font-size: clamp(18px, 3vw, 24px);
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -.02em;
}

.badge-verified {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: var(--teal-lite);
    color: var(--teal);
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 99px;
}

.badge-featured {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: var(--navy-lite);
    color: var(--navy);
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 99px;
}

.badge-wafi {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: var(--green-100);
    color: var(--green-700);
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 99px;
}

.dev-meta-item {
    font-size: 13px;
    color: var(--ink-3);
    display: flex;
    align-items: center;
    gap: 5px;
}

.btn-outline-nav {
    padding: 8px 16px;
    border: 1.5px solid var(--line);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-2);
    background: #fff;
    cursor: pointer;
    font-family: 'Cairo', sans-serif;
    white-space: nowrap;
}

.btn-outline-nav:hover {
    border-color: var(--navy);
    color: var(--navy);
}

.btn-primary-nav {
    padding: 8px 18px;
    background: var(--navy);
    color: #fff;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    font-family: 'Cairo', sans-serif;
    white-space: nowrap;
}

/* KPI BAR */
.kpi-bar {
    background: #fff;
    border-bottom: 2px solid var(--line);
}

.kpi-item {
    padding: 16px 12px;
    text-align: center;
    border-left: 1px solid var(--line);
}

.kpi-item:last-child {
    border-left: none;
}

.kpi-val {
    font-size: clamp(18px, 2.5vw, 26px);
    font-weight: 800;
    color: var(--ink);
    line-height: 1;
}

.kpi-val.good {
    color: var(--teal);
}

.kpi-lbl {
    font-size: 11px;
    color: var(--ink-4);
    margin-top: 4px;
}

/* TABS */
.page-tabs {
    border-bottom: 2px solid var(--line);
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
}

.page-tab {
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-3);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    font-family: 'Cairo', sans-serif;
    white-space: nowrap;
}

.page-tab.on {
    color: var(--navy);
    border-bottom-color: var(--navy);
    font-weight: 700;
}

/* SECTIONS */
.sec-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sec-link {
    font-size: 13px;
    color: var(--navy);
    font-weight: 600;
    cursor: pointer;
}

/* ABOUT */
.about-text {
    font-size: 14px;
    color: var(--ink-2);
    line-height: 1.8;
}

.city-chip {
    display: inline-block;
    background: var(--navy-lite);
    color: var(--navy);
    font-size: 13px;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 99px;
}

/* DELIVERY SCORE */
.score-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 20px;
}

.score-ring-wrap {
    position: relative;
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}

.score-ring-wrap svg {
    transform: rotate(-90deg);
}

.score-ring-text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.score-ring-num {
    font-size: 16px;
    font-weight: 800;
    color: var(--teal);
    line-height: 1;
}

.score-ring-sub {
    font-size: 9px;
    color: var(--teal);
}

.score-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 4px;
}

.score-desc {
    font-size: 13px;
    color: var(--ink-3);
    margin-bottom: 10px;
}

.score-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--ink-2);
    margin-bottom: 6px;
}

.score-bar-row:last-child {
    margin-bottom: 0;
}

.score-bar-label {
    min-width: 70px;
}

.score-bar-count {
    min-width: 60px;
    text-align: left;
    color: var(--teal);
    font-weight: 700;
}

.status-stat-card {
    flex: 1 1 0;
    min-width: 140px;
    border-radius: 14px;
    padding: 16px;
}

.status-stat-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    margin-bottom: 10px;
}

.status-stat-count {
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 4px;
}

.status-stat-desc {
    font-size: 12px;
    color: var(--ink-3);
}

.status-stat-card.announced { background: #e4e9f2; }
.status-stat-card.announced .status-stat-icon,
.status-stat-card.announced .status-stat-count { color: var(--navy); }

.status-stat-card.active { background: var(--amber-lite); }
.status-stat-card.active .status-stat-icon,
.status-stat-card.active .status-stat-count { color: var(--amber); }

.status-stat-card.completed { background: var(--teal-lite); }
.status-stat-card.completed .status-stat-icon,
.status-stat-card.completed .status-stat-count { color: var(--teal); }

/* PROJECT FILTER */
.proj-filter {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.pf-chip {
    padding: 5px 14px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid var(--line);
    color: var(--ink-3);
    background: #fff;
    transition: all .15s;
}

.pf-chip.on {
    background: var(--navy);
    color: #fff;
    border-color: var(--navy);
}

/* PROJECT ROWS */
.proj-row {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    gap: 14px;
    cursor: pointer;
    transition: box-shadow .18s, transform .15s;
    margin-bottom: 10px;
}

.proj-row:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, .07);
    transform: translateY(-1px);
}

.proj-row:last-child {
    margin-bottom: 0;
}

.proj-thumb {
    width: 88px;
    height: 66px;
    border-radius: 8px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: rgba(255, 255, 255, .3);
}

.proj-thumb.b1 { background: linear-gradient(145deg, #1A3550, #2D5F8A); }
.proj-thumb.b2 { background: linear-gradient(145deg, #0C4A3A, #1A7A5E); }
.proj-thumb.b3 { background: linear-gradient(145deg, #3D2A0A, #7A5520); }
.proj-thumb.b4 { background: linear-gradient(145deg, #3D0A1A, #7A2040); }
.proj-thumb.b5 { background: linear-gradient(145deg, #1A0A3D, #402080); }
.proj-thumb.b6 { background: linear-gradient(145deg, #0A3D2A, #157A50); }

.pt1 {
    background: linear-gradient(135deg, #1A3550, #2D5F8A);
}

.pt2 {
    background: linear-gradient(135deg, #0C4A3A, #1A7A5E);
}

.pt3 {
    background: linear-gradient(135deg, #3D2A0A, #7A5520);
}

.pt4 {
    background: linear-gradient(135deg, #2A0A3D, #5A2080);
}

.proj-body {
    flex: 1;
    min-width: 0;
}

.proj-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 3px;
}

.proj-meta {
    font-size: 12px;
    color: var(--ink-4);
    margin-bottom: 6px;
}

.proj-stat {
    font-size: 12px;
    color: var(--ink-2);
}

.proj-stat strong {
    color: var(--ink);
}

.proj-right {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    min-width: 110px;
}

.proj-delivery {
    font-size: 12px;
    color: var(--ink-3);
    text-align: left;
}

.proj-delivery.ontime {
    color: var(--teal);
    font-weight: 700;
}

.proj-delivery.late {
    color: var(--red);
    font-weight: 700;
}

.proj-prog {
    font-size: 11px;
    color: var(--navy);
    font-weight: 700;
    text-align: left;
}

.prog-mini {
    height: 4px;
    border-radius: 99px;
    margin-top: 3px;
    width: 90px;
}

.status-pill {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 99px;
}

.s-c {
    background: var(--amber-lite);
    color: var(--amber);
}

.s-d {
    background: var(--teal-lite);
    color: var(--teal);
}

.s-a {
    background: var(--navy-lite);
    color: var(--navy);
}

.proj-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.proj-card {
    display: flex;
    gap: 16px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 12px;
    transition: box-shadow .15s, transform .15s;
}

.proj-card:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, .07);
    transform: translateY(-1px);
}

.proj-card:last-child {
    margin-bottom: 0;
}

.proj-card-thumb {
    width: 130px;
    height: 130px;
    border-radius: 10px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: rgba(255, 255, 255, .6);
    font-size: 42px;
    overflow: hidden;
}

.proj-card-thumb::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: .08;
    background-image: repeating-linear-gradient(45deg, #fff 0, #fff 1px, transparent 0, transparent 50%);
    background-size: 20px 20px;
}

.proj-card-thumb img,
.proj-card-thumb i {
    position: relative;
}

.proj-card-thumb.b1 { background: linear-gradient(145deg, #1A3550, #2D5F8A); }
.proj-card-thumb.b2 { background: linear-gradient(145deg, #0C4A3A, #1A7A5E); }
.proj-card-thumb.b3 { background: linear-gradient(145deg, #3D2A0A, #7A5520); }
.proj-card-thumb.b4 { background: linear-gradient(145deg, #3D0A1A, #7A2040); }
.proj-card-thumb.b5 { background: linear-gradient(145deg, #1A0A3D, #402080); }
.proj-card-thumb.b6 { background: linear-gradient(145deg, #0A3D2A, #157A50); }

.proj-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.proj-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.proj-card-meta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--ink-3);
    margin: 4px 0 8px;
}

.proj-card-meta i {
    font-size: 11px;
    margin-left: 4px;
}

.proj-card-desc {
    font-size: 13px;
    color: var(--ink-2);
    line-height: 1.6;
    margin-bottom: 10px;
}

.proj-card-divider {
    border-top: 1px dashed var(--line);
    margin-bottom: 10px;
}

.proj-card-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: auto;
}

.proj-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 99px;
}

.proj-chip.verified {
    background: var(--teal-lite);
    color: var(--teal);
}

.proj-chip.delivery {
    background: var(--stone-100);
    color: var(--ink-3);
    font-weight: 600;
}

/* PROFILE TABS */
.profile-tab {
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 10px 18px;
    font-family: 'Cairo', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-3);
    cursor: pointer;
    margin-bottom: -2px;
    transition: color .15s, border-color .15s;
}

.profile-tab:hover { color: var(--ink); }

.profile-tab.active {
    color: var(--navy);
    border-bottom-color: var(--navy);
}

/* SIDEBAR */
.side-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 14px;
}

.side-card:last-child {
    margin-bottom: 0;
}

.side-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-4);
    letter-spacing: .06em;
    margin-bottom: 12px;
}

.btn-contact {
    width: 100%;
    background: var(--navy);
    color: #fff;
    padding: 12px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    border: none;
    font-family: 'Cairo', sans-serif;
    cursor: pointer;
    display: block;
    text-align: center;
    margin-bottom: 8px;
    transition: opacity .2s;
}

.btn-contact:hover,
.btn-contact:visited,
.btn-contact:focus {
    color: #fff;
    opacity: .85;
}

.btn-website {
    width: 100%;
    background: #fff;
    color: var(--navy);
    padding: 10px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    border: 1.5px solid var(--navy);
    font-family: 'Cairo', sans-serif;
    cursor: pointer;
    margin-bottom: 8px;
}

.btn-compare-dev {
    width: 100%;
    background: #fff;
    color: var(--ink-2);
    padding: 10px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    border: 1.5px solid var(--line);
    font-family: 'Cairo', sans-serif;
    cursor: pointer;
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
}

.info-row:last-child {
    border-bottom: none;
}

.info-row .lbl {
    color: var(--ink-3);
}

.info-row .val {
    font-weight: 700;
    color: var(--ink);
}

.type-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--ink-2);
    margin-bottom: 8px;
}

.type-bar-row:last-child {
    margin-bottom: 0;
}

.type-bar-label {
    min-width: 72px;
}

.type-pct {
    min-width: 30px;
    text-align: left;
    color: var(--ink-3);
    font-size: 11px;
}

.other-dev {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    transition: opacity .15s;
}

.other-dev:hover {
    opacity: .75;
}

.other-dev:last-child {
    border-bottom: none;
}

.od-logo {
    width: 36px;
    height: 36px;
    border-radius: 7px;
    background: var(--navy-lite);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: var(--navy);
    flex-shrink: 0;
}

.od-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
}

.od-meta {
    font-size: 11px;
    color: var(--ink-3);
}

/* Project Styles */
/* BREADCRUMB */
.breadcrumb-bar {
    background: #fff;
    border-bottom: 1px solid var(--line);
    padding: 11px 0;
}

.breadcrumb {
    margin: 0;
    font-size: 13px;
}

.breadcrumb-item a {
    color: var(--ink-4);
    text-decoration: none;
}

.breadcrumb-item a:hover {
    color: var(--navy);
}

.breadcrumb-item.active {
    color: var(--ink-2);
    font-weight: 600;
}

.breadcrumb-item+.breadcrumb-item::before {
    color: var(--ink-4);
}

/* HERO IMAGE */
.hero-img {
    width: 100%;
    height: clamp(260px, 40vw, 520px);
    background: linear-gradient(145deg, #1A3550, #0D2035);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}

.hero-img.b1 { background: linear-gradient(145deg, #1A3550, #2D5F8A); }
.hero-img.b2 { background: linear-gradient(145deg, #0C4A3A, #1A7A5E); }
.hero-img.b3 { background: linear-gradient(145deg, #3D2A0A, #7A5520); }
.hero-img.b4 { background: linear-gradient(145deg, #3D0A1A, #7A2040); }
.hero-img.b5 { background: linear-gradient(145deg, #1A0A3D, #402080); }
.hero-img.b6 { background: linear-gradient(145deg, #0A3D2A, #157A50); }

.hero-img-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255, 255, 255, .15);
    font-size: 16px;
}

.hero-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: linear-gradient(to top, rgba(10, 18, 28, .8) 0%, transparent 100%);
}

.hero-status {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 99px;
    z-index: 2;
}

.hero-thumbs {
    position: absolute;
    bottom: 16px;
    left: 16px;
    display: flex;
    gap: 8px;
    z-index: 2;
}

.hero-thumb {
    width: 58px;
    height: 42px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .15);
    border: 2px solid rgba(255, 255, 255, .2);
    cursor: pointer;
}

.hero-thumb.on {
    border-color: #fff;
}

.hero-count {
    background: rgba(0, 0, 0, .5);
    color: #fff;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 99px;
    display: flex;
    align-items: center;
    height: 42px;
}

.hero-bottom {
    position: relative;
    z-index: 2;
    padding: 0 16px 20px;
}

.hero-type-tag {
    display: inline-block;
    background: rgba(255, 255, 255, .15);
    color: rgba(255, 255, 255, .9);
    font-size: 11px;
    font-weight: 600;
    padding: 3px 12px;
    border-radius: 99px;
    margin-bottom: 8px;
    border: 1px solid rgba(255, 255, 255, .2);
}

.hero-title {
    font-size: clamp(20px, 4vw, 34px);
    font-weight: 800;
    color: #fff;
    margin-bottom: 6px;
    line-height: 1.2;
    letter-spacing: -.02em;
}

.hero-loc {
    font-size: 13px;
    color: rgba(255, 255, 255, .75);
    display: flex;
    align-items: center;
    gap: 5px;
}

/* STATUS BADGES */
.s-c {
    background: var(--amber-lite);
    color: var(--amber);
}

.s-d {
    background: var(--teal-lite);
    color: var(--teal);
}

.s-a {
    background: var(--navy-lite);
    color: var(--navy);
}

/* DEV STRIP */
.dev-strip {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    text-decoration: none;
    transition: box-shadow .15s;
}

.dev-strip:hover {
    box-shadow: 0 3px 12px rgba(0, 0, 0, .07);
}

.dev-logo {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: var(--navy-lite);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    color: var(--navy);
    flex-shrink: 0;
}

.dev-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
}

.dev-meta {
    font-size: 12px;
    color: var(--ink-3);
}

.verified {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: var(--teal-lite);
    color: var(--teal);
    font-size: 10px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 99px;
}

/* TABS */
.page-tabs {
    border-bottom: 2px solid var(--line);
    margin-bottom: 20px;
}

.page-tab {
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-3);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    font-family: 'Cairo', sans-serif;
}

.page-tab.on {
    color: var(--navy);
    border-bottom-color: var(--navy);
    font-weight: 700;
}

/* SECTION */
.sec-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 14px;
}

.desc-text {
    font-size: 14px;
    color: var(--ink-2);
    line-height: 1.8;
}

/* SPECS */
.spec-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px 16px;
    height: 100%;
}

.spec-icon {
    font-size: 20px;
    margin-bottom: 6px;
}

.spec-val {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
}

.spec-lbl {
    font-size: 11px;
    color: var(--ink-4);
    margin-top: 2px;
}

/* MAP */
.map-box {
    width: 100%;
    height: clamp(180px, 25vw, 280px);
    background: linear-gradient(135deg, #D8D4CA, #E8E4DA);
    border-radius: 12px;
    border: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--ink-3);
    font-size: 14px;
}

/* TIMELINE */
.tl-item {
    display: flex;
    gap: 14px;
    padding-bottom: 20px;
}

.tl-item:last-child {
    padding-bottom: 0;
}

.tl-left {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tl-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid var(--line);
    background: #fff;
}

.tl-dot.done {
    background: var(--teal);
    border-color: var(--teal);
}

.tl-dot.now {
    background: var(--navy);
    border-color: var(--navy);
    box-shadow: 0 0 0 4px var(--navy-lite);
}

.tl-line {
    width: 2px;
    flex: 1;
    background: var(--line);
    margin: 4px 0;
}

.tl-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
}

.tl-date {
    font-size: 12px;
    color: var(--ink-3);
    margin-top: 2px;
}

/* SIMILAR */
.sim-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow .18s, transform .15s;
    height: 100%;
}

.sim-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
    transform: translateY(-2px);
}

.sim-img {
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: rgba(255, 255, 255, .3);
}

.sim-img.b1 {
    background: linear-gradient(135deg, #1A3550, #2D5F8A);
}

.sim-img.b2 {
    background: linear-gradient(135deg, #0C4A3A, #1A7A5E);
}

.sim-img.b3 {
    background: linear-gradient(135deg, #3D2A0A, #7A5520);
}

.sim-img.b4 {
    background: linear-gradient(135deg, #3D0A1A, #7A2040);
}

.sim-img.b5 {
    background: linear-gradient(135deg, #1A0A3D, #402080);
}

.sim-img.b6 {
    background: linear-gradient(135deg, #0A3D2A, #157A50);
}

.sim-body {
    padding: 11px 13px;
}

.sim-name {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 3px;
}

.sim-meta {
    font-size: 11px;
    color: var(--ink-3);
}

.sim-status {
    display: inline-block;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 99px;
    margin-top: 5px;
    font-weight: 600;
}

/* SIDEBAR CARDS */
.side-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 14px;
}

.side-card:last-child {
    margin-bottom: 0;
}

.side-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-4);
    letter-spacing: .06em;
    margin-bottom: 12px;
}

.kpi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.kpi {
    background: var(--paper);
    border-radius: 8px;
    padding: 11px;
}

.kpi-val {
    font-size: 20px;
    font-weight: 800;
    color: var(--ink);
    line-height: 1;
}

.kpi-lbl {
    font-size: 11px;
    color: var(--ink-4);
    margin-top: 3px;
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
}

.info-row:last-child {
    border-bottom: none;
}

.info-row .lbl {
    color: var(--ink-3);
}

.info-row .val {
    font-weight: 700;
    color: var(--ink);
}

.info-row .val.warn {
    color: var(--amber);
}

.btn-compare {
    width: 100%;
    background: #fff;
    color: var(--navy);
    padding: 10px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    border: 1.5px solid var(--navy);
    font-family: 'Cairo', sans-serif;
    cursor: pointer;
}

.btn-compare:hover,
.btn-compare:visited,
.btn-compare:focus { color: var(--navy); opacity: .85; }

.source-note {
    font-size: 11px;
    color: var(--ink-4);
    line-height: 1.5;
}

.source-note strong {
    color: var(--teal);
}

/* STICKY BOTTOM BAR */
.sticky-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid var(--line);
    padding: 12px 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, .08);
    z-index: 100;
}

.sb-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
}

.sb-loc {
    font-size: 12px;
    color: var(--ink-3);
}

.btn-sb-contact {
    background: var(--navy);
    color: #fff;
    padding: 9px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    border: none;
    font-family: 'Cairo', sans-serif;
    cursor: pointer;
    white-space: nowrap;
}

.btn-sb-contact:hover,
.btn-sb-contact:visited,
.btn-sb-contact:focus { color: #fff; opacity: .85; }

.btn-sb-compare {
    background: #fff;
    color: var(--navy);
    padding: 9px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    border: 1.5px solid var(--navy);
    font-family: 'Cairo', sans-serif;
    cursor: pointer;
    white-space: nowrap;
}

.btn-sb-compare:hover,
.btn-sb-compare:visited,
.btn-sb-compare:focus { color: var(--navy); opacity: .85; }

/* UNIT CARDS */
.unit-card {
    display: block;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    transition: box-shadow .2s, transform .2s;
}

.unit-card:hover {
    box-shadow: 0 6px 24px rgba(26,53,80,.1);
    transform: translateY(-2px);
}

.unit-card-img {
    height: 160px;
    position: relative;
    overflow: hidden;
}

.unit-card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: rgba(255,255,255,.4);
}

.unit-card-body { padding: 14px; }

.unit-card-type {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 2px;
}

.unit-card-num {
    font-size: 12px;
    color: var(--ink-3);
    margin-bottom: 6px;
}

.unit-card-price {
    font-size: 15px;
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 8px;
}

.unit-card-specs {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--ink-3);
}

.unit-card-specs i { color: var(--ink-4); margin-inline-end: 3px; }

.unit-card-hidden { display: none; }

/* Unit card image placeholders (b1–b6) */
.unit-card-img.b1, .unit-gallery-placeholder.b1 { background: linear-gradient(145deg, #1A3550, #2D5F8A); }
.unit-card-img.b2, .unit-gallery-placeholder.b2 { background: linear-gradient(145deg, #0C4A3A, #1A7A5E); }
.unit-card-img.b3, .unit-gallery-placeholder.b3 { background: linear-gradient(145deg, #3D2A0A, #7A5520); }
.unit-card-img.b4, .unit-gallery-placeholder.b4 { background: linear-gradient(145deg, #3D0A1A, #7A2040); }
.unit-card-img.b5, .unit-gallery-placeholder.b5 { background: linear-gradient(145deg, #1A0A3D, #402080); }
.unit-card-img.b6, .unit-gallery-placeholder.b6 { background: linear-gradient(145deg, #0A3D2A, #157A50); }

/* UNIT DETAIL PAGE */
.unit-gallery { display: flex; gap: 10px; flex-direction: column; }

.unit-gallery-main {
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    height: clamp(280px, 40vw, 560px);
    background: var(--navy-dark);
}

.unit-gallery-main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.unit-gallery-thumbs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.unit-thumb {
    flex-shrink: 0;
    width: 88px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color .2s;
}

.unit-thumb img { width: 100%; height: 100%; object-fit: cover; }

.unit-thumb.active { border-color: var(--navy); }

.unit-gallery-placeholder {
    height: 320px;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 48px;
    color: rgba(255,255,255,.3);
}

.unit-gallery-placeholder span {
    font-size: 14px;
    font-family: 'Cairo', sans-serif;
    color: rgba(255,255,255,.5);
}

.badge-unit-type {
    display: inline-block;
    background: var(--navy-lite);
    color: var(--navy);
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 99px;
}

.unit-detail-price {
    font-size: 28px;
    font-weight: 800;
    color: var(--navy);
}

.unit-detail-price span { font-size: 16px; font-weight: 600; color: var(--ink-3); }


/* UNITS TABLE */
.units-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--line);
}

.units-table th {
    background: var(--navy);
    color: #fff;
    padding: 11px 14px;
    font-size: 13px;
    font-weight: 600;
    text-align: right;
}

.units-table td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
    color: var(--ink);
    vertical-align: middle;
}

.units-table tbody tr:last-child td {
    border-bottom: none;
}

.units-table tbody tr:hover td {
    background: var(--paper);
}

.units-table .unit-type {
    font-weight: 700;
}

.unit-feat-tags {
    min-width: 160px;
}

.feat-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--navy-lite);
    color: var(--navy);
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 99px;
    margin: 2px;
    white-space: nowrap;
}

.feat-tag i {
    font-size: 10px;
}

.amenity-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 13px;
    color: var(--ink-2);
}

.amenity-row i {
    color: var(--navy);
    font-size: 13px;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

.units-table tbody tr.unit-row-hidden {
    display: none;
}

.btn-expand-units {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 10px;
    background: none;
    border: 1px dashed var(--line);
    border-radius: 10px;
    color: var(--navy);
    font-family: 'Cairo', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
}

.btn-expand-units:hover {
    background: var(--navy-lite);
}

.dir-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 99px;
    margin-left: 4px;
    margin-bottom: 3px;
}

.dir-e {
    background: #FEF3C7;
    color: #92400E;
}

.dir-w {
    background: #EDE9FE;
    color: #4C1D95;
}

.dir-n {
    background: #DCFCE7;
    color: #14532D;
}

.dir-s {
    background: #FFE4E6;
    color: #9F1239;
}

/* COMPASS */
.compass-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.compass-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 14px;
    flex: 1;
    min-width: 130px;
}

.compass-icon {
    font-size: 22px;
    flex-shrink: 0;
}

.compass-dir {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
}

.compass-count {
    font-size: 11px;
    color: var(--ink-3);
    margin-top: 1px;
}

.compass-item.avail {
    border-color: var(--teal);
    background: var(--teal-lite);
}

.compass-item.avail .compass-dir {
    color: var(--teal);
}

/* PDF DOWNLOAD */
.pdf-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.pdf-icon {
    width: 46px;
    height: 46px;
    background: #FEE2E2;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.pdf-info {
    flex: 1;
}

.pdf-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 2px;
}

.pdf-meta {
    font-size: 12px;
    color: var(--ink-3);
}

.btn-pdf {
    background: var(--navy);
    color: #fff;
    padding: 9px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    border: none;
    font-family: "Cairo", sans-serif;
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

@media (max-width: 575px) {
    .pdf-card {
        flex-wrap: wrap;
    }

    .btn-pdf {
        width: 100%;
        justify-content: center;
    }

    .units-table {
        font-size: 12px;
    }

    .units-table th,
    .units-table td {
        padding: 9px 10px;
    }
}

/* Search Page Styles */
/* FILTER TOGGLE BTN — mobile only */
.btn-filter-toggle {
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    padding: 9px 16px;
    font-family: 'Cairo', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-2);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 7px;
}

.filter-badge {
    background: var(--navy);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 99px;
}

/* RESULTS TOOLBAR */
.results-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.results-count {
    font-size: 14px;
    color: var(--ink-2);
}

.results-count strong {
    font-size: 16px;
    color: var(--ink);
    font-weight: 800;
}

.sort-select {
    border: 1.5px solid var(--line);
    border-radius: 8px;
    padding: 7px 12px;
    font-family: 'Cairo', sans-serif;
    font-size: 13px;
    color: var(--ink-2);
    background: #fff;
    outline: none;
    cursor: pointer;
}

.view-toggle {
    display: flex;
    border: 1.5px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
}

.view-btn {
    padding: 6px 11px;
    font-size: 15px;
    cursor: pointer;
    background: #fff;
    border: none;
    color: var(--ink-4);
    transition: all .15s;
}

.view-btn.on {
    background: var(--navy);
    color: #fff;
}

/* ACTIVE FILTER TAGS */
.active-tags {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 16px;
}

.a-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--navy-lite);
    color: var(--navy);
    padding: 4px 10px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
}

.a-tag .x {
    cursor: pointer;
    opacity: .6;
    font-size: 14px;
}

.a-tag .x:hover {
    opacity: 1;
}

.a-tag-label {
    font-size: 12px;
    color: var(--ink-4);
}

/* FILTERS SIDEBAR */
.filters-sidebar {
    background: #fff;
    border-radius: 14px;
    border: 1px solid var(--line);
    padding: 18px;
    position: sticky;
    top: 140px;
}

.filters-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.filters-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
}

.filters-reset {
    font-size: 12px;
    color: var(--navy);
    font-weight: 600;
    cursor: pointer;
}

.filter-section {
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}

.filter-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.filter-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-4);
    letter-spacing: .06em;
    margin-bottom: 10px;
}

.filter-opts {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.filter-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ink-2);
    cursor: pointer;
}

.filter-opt input[type=checkbox] {
    accent-color: var(--navy);
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.filter-opt .cnt {
    margin-right: auto;
    background: var(--paper);
    color: var(--ink-4);
    font-size: 11px;
    padding: 1px 7px;
    border-radius: 99px;
}

.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.f-chip {
    padding: 4px 12px;
    border-radius: 99px;
    font-size: 12px;
    cursor: pointer;
    border: 1.5px solid var(--line);
    color: var(--ink-3);
    background: #fff;
    transition: all .15s;
}

.f-chip.on {
    background: var(--navy-lite);
    color: var(--navy);
    border-color: var(--navy);
    font-weight: 600;
}

.range-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.range-in {
    flex: 1;
    padding: 7px 10px;
    border: 1.5px solid var(--line);
    border-radius: 8px;
    font-family: 'Cairo', sans-serif;
    font-size: 13px;
    outline: none;
    color: var(--ink);
}

.range-in:focus {
    border-color: var(--navy);
}

/* PROJECT CARDS */
.pcard {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow .2s, transform .18s;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.pcard:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, .1);
    transform: translateY(-2px);
}

.pcard-img {
    height: 170px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: rgba(255, 255, 255, .25);
    overflow: hidden;
}

.pcard-img.b1 {
    background: linear-gradient(145deg, #1A3550, #2D5F8A);
}

.pcard-img.b2 {
    background: linear-gradient(145deg, #0C4A3A, #1A7A5E);
}

.pcard-img.b3 {
    background: linear-gradient(145deg, #3D0A1A, #7A2040);
}

.pcard-img.b4 {
    background: linear-gradient(145deg, #2A0A3D, #5A2080);
}

.pcard-img.b5 {
    background: linear-gradient(145deg, #0A2A3D, #205A7A);
}

.pcard-img.b6 {
    background: linear-gradient(145deg, #3D0A1A, #7A2040);
}

.pcard-status {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 99px;
}

.pcard-badges-top {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.pcard-featured,
.pcard-wafi {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    background: rgba(255, 255, 255, .92);
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 99px;
}

.pcard-featured {
    color: var(--navy);
}

.pcard-wafi {
    color: var(--green-700);
}

.pcard-compare-btn {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(255, 255, 255, .9);
    color: var(--navy);
    padding: 4px 10px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    font-family: 'Cairo', sans-serif;
    opacity: 0;
    transition: opacity .18s;
}

.pcard:hover .pcard-compare-btn {
    opacity: 1;
}

.pcard-body {
    padding: 14px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.pcard-type {
    font-size: 11px;
    color: var(--ink-4);
    margin-bottom: 3px;
}

.pcard-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 3px;
}

.pcard-loc {
    font-size: 12px;
    color: var(--ink-3);
    margin-bottom: 9px;
}

.pcard-stats {
    display: flex;
    gap: 12px;
    margin-bottom: 9px;
    flex-wrap: wrap;
}

.pcard-stat {
    font-size: 12px;
    color: var(--ink-2);
}

.pcard-stat strong {
    color: var(--ink);
    font-weight: 700;
}

.pcard-price,
.pcard-price strong {
    color: var(--green-700);
}

.prog-bar-wrap {
    margin-bottom: 9px;
}

.prog-top {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--ink-3);
    margin-bottom: 4px;
}

.prog-top .pct {
    font-weight: 700;
    color: var(--navy);
}

.prog-bar {
    height: 5px;
    border-radius: 99px;
}

.pcard-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid var(--line);
    margin-top: auto;
}

.pcard-dev {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--ink-2);
}

.pcard-dev-logo {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background: var(--navy-lite);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 800;
    color: var(--navy);
}

.pcard-date {
    font-size: 12px;
    color: var(--ink-3);
}

.pcard-date.done {
    color: var(--teal);
    font-weight: 700;
}

/* COMPARE FLOATER */
.compare-floater {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ink);
    color: #fff;
    padding: 10px 10px 10px 20px;
    border-radius: 99px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .25);
    z-index: 200;
    white-space: nowrap;
}

.cf-label {
    font-size: 13px;
    color: rgba(255, 255, 255, .7);
}

.cf-slots {
    display: flex;
    gap: 8px;
}

.cf-slot {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
}

.cf-slot.filled {
    background: rgba(255, 255, 255, .15);
    color: #fff;
}

.cf-slot.empty {
    border: 2px dashed rgba(255, 255, 255, .3);
    color: rgba(255, 255, 255, .3);
    font-size: 18px;
}

.cf-go {
    background: var(--teal);
    color: #fff;
    padding: 8px 18px;
    border-radius: 99px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    font-family: 'Cairo', sans-serif;
}

.cf-clear {
    color: rgba(255, 255, 255, .5);
    font-size: 14px;
    cursor: pointer;
    padding: 0 6px;
}

/* OFFCANVAS FILTERS — mobile */
.offcanvas-title {
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
}

/* PAGINATION */
.page-btn {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1.5px solid var(--line);
    font-size: 13px;
    cursor: pointer;
    color: var(--ink-2);
    background: #fff;
    transition: all .15s;
    font-family: 'Cairo', sans-serif;
}

.page-btn:hover:not(.on) {
    border-color: var(--navy);
    color: var(--navy);
}

.page-btn.on {
    background: var(--navy);
    color: #fff;
    border-color: var(--navy);
    font-weight: 700;
}

/* ── FRONTEND AUTH (login / register) ── */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: var(--navy-dark);
    position: relative;
    overflow: hidden;
}

.auth-page::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
    background-size: 48px 48px;
}

.auth-page::after {
    content: '';
    position: absolute;
    top: -30%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(35, 72, 112, .5) 0%, transparent 65%);
    pointer-events: none;
}

.auth-card {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 20px;
    padding: 44px 40px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .35);
}

.auth-logo {
    text-align: center;
    margin-bottom: 32px;
}

.auth-logo-mark {
    width: 52px;
    height: 52px;
    background: var(--navy-dark);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin: 0 auto 16px;
}

.auth-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 4px;
}

.auth-sub {
    font-size: 13px;
    color: var(--ink-3);
}

.auth-field {
    margin-bottom: 18px;
}

.auth-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-2);
    margin-bottom: 6px;
    display: block;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.auth-forgot {
    font-size: 12px;
    color: var(--navy);
    text-decoration: none;
    transition: color .15s ease;
}

.auth-forgot:hover {
    color: var(--navy-mid);
    text-decoration: underline;
}

.auth-input {
    width: 100%;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    padding: 12px 14px;
    font-family: 'Cairo', sans-serif;
    font-size: 14px;
    color: var(--ink);
    background: #FAFAF9;
    outline: none;
    transition: border-color .15s, background .15s;
}

.auth-input:focus {
    border-color: var(--navy);
    background: #fff;
}

.auth-input::placeholder {
    color: var(--ink-4);
}

.auth-input.is-invalid {
    border-color: #DC2626;
}

.auth-field .invalid-feedback {
    display: block;
    font-size: 12px;
    color: #DC2626;
    margin-top: 6px;
}

.auth-check-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    font-size: 13px;
    color: var(--ink-2);
}

.auth-btn {
    width: 100%;
    background: var(--navy);
    color: #fff;
    font-family: 'Cairo', sans-serif;
    font-size: 14px;
    font-weight: 700;
    border: none;
    border-radius: 10px;
    padding: 14px;
    cursor: pointer;
    transition: background .15s, transform .1s;
    margin-top: 8px;
    letter-spacing: .02em;
}

.auth-btn:hover {
    background: var(--navy-mid);
}

.auth-btn:active {
    transform: scale(.99);
}

.auth-footer {
    text-align: center;
    margin-top: 24px;
    font-size: 13px;
    color: var(--ink-3);
}

.auth-footer a {
    color: var(--navy);
    font-weight: 700;
    text-decoration: none;
    transition: color .15s ease;
}

.auth-footer a:hover {
    color: var(--navy-mid);
    text-decoration: underline;
}

/* ── NAVBAR USER DROPDOWN ── */
.user-nav-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 8px;
    padding: 5px 14px 5px 6px;
    color: #fff;
    font-family: 'Cairo', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}

.user-nav-btn:hover {
    background: rgba(255, 255, 255, .15);
}

.user-nav-avatar {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #3B82F6;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}

.user-nav-btn-wrap {
    position: relative;
}

.user-nav-dropdown {
    border: none;
    border-radius: 8px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .18);
    padding: 8px;
    min-width: 240px;
}

.dropdown-menu.user-nav-dropdown[data-bs-popper] {
    left: 0;
    right: auto;
}

.user-nav-dropdown .dropdown-header {
    padding: 10px 12px 8px;
}

.user-nav-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
}

.user-nav-email {
    font-size: 12px;
    color: var(--ink-3);
    margin-top: 2px;
}

.user-nav-divider {
    height: 1px;
    margin: 4px 0;
    border: none;
    background-color: var(--line);
    opacity: .5;
}

.user-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    border: none;
    background: none;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--ink-2);
    font-family: 'Cairo', sans-serif;
    font-size: 13px;
    line-height: 16px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.user-nav-item:hover {
    background: var(--navy-lite);
    color: var(--navy);
}

.user-nav-item-icon {
    width: 16px;
    display: inline-flex;
    justify-content: center;
    font-size: 13px;
    color: #8B5CF6;
}

.user-nav-item.danger {
    color: #DC2626;
}

.user-nav-item.danger .user-nav-item-icon {
    color: #F59E0B;
}

.user-nav-item.danger:hover {
    background: #FEF2F2;
    color: #DC2626;
}

/* ════════════════════════════════════════════════════════════
   QARAAR DESIGN SYSTEM — NEW COMPONENT STYLES
   ════════════════════════════════════════════════════════════ */

/* ── QR HEADER / NAVBAR ────────────────────────────────────── */
.qr-header {
    background: var(--ink-800);
    border-bottom: 1px solid var(--ink-700);
    position: sticky;
    top: 0;
    z-index: 100;
}

.qr-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-h);
    gap: 24px;
}

.qr-logo-link {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    flex-shrink: 0;
}

.qr-logo-img {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .15);
}

.qr-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.qr-logo-name {
    font: var(--fw-black) 19px/1 var(--font-sans);
    color: #fff;
}

.qr-logo-sub {
    font: var(--fw-medium) 10px/1.4 var(--font-sans);
    color: var(--text-on-ink-mut);
    margin-top: 2px;
}

.qr-nav {
    display: flex;
    gap: 26px;
    align-items: center;
}

.qr-nav-link {
    font: var(--fw-medium) 15px/1 var(--font-sans);
    color: var(--text-on-ink-mut);
    text-decoration: none;
    padding: 4px 0 6px;
    border-bottom: 2px solid transparent;
    transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
    white-space: nowrap;
}

.qr-nav-link:hover,
.qr-nav-link:focus { color: #fff; border-color: rgba(255,255,255,.2); text-decoration: none; }

.qr-nav-link.active {
    color: #fff;
    font-weight: var(--fw-bold);
    border-bottom-color: var(--green-500);
}

.qr-nav-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.qr-auth-login,
.qr-auth-login:visited {
    font: var(--fw-medium) 14px/1 var(--font-sans);
    color: var(--text-on-ink-mut);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    white-space: nowrap;
    transition: color var(--dur-1) var(--ease);
}

.qr-auth-login:hover { color: #fff; text-decoration: none; }

.qr-auth-signup,
.qr-auth-signup:visited {
    background: var(--green-700);
    color: #fff;
    font: var(--fw-semibold) 13px/1 var(--font-sans);
    padding: 8px 18px;
    border-radius: var(--r-md);
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background var(--dur-1) var(--ease);
    white-space: nowrap;
    display: inline-block;
}

.qr-auth-signup:hover,
.qr-auth-signup:focus { background: var(--green-600); color: #fff; text-decoration: none; }

.qr-toggler {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: var(--r-sm);
    color: rgba(255,255,255,.8);
    padding: 7px 11px;
    cursor: pointer;
    font-size: 15px;
    transition: background var(--dur-1) var(--ease);
    line-height: 1;
}

.qr-toggler:hover { background: rgba(255,255,255,.14); }

.qr-mobile-nav {
    padding: 8px 0 16px;
    border-top: 1px solid var(--ink-700);
}

.qr-mobile-nav .qr-nav-link {
    display: block;
    padding: 10px 0;
    font-size: var(--fs-md);
    border-bottom: none;
    border-top: 1px solid rgba(255,255,255,.06);
}

.qr-mobile-nav .qr-nav-link:first-child { border-top: none; }

.qr-mobile-auth {
    display: flex;
    gap: 10px;
    padding-top: 14px;
    flex-wrap: wrap;
}

/* ── QR FOOTER ─────────────────────────────────────────────── */
.qr-footer {
    background: var(--ink-900);
    margin-top: var(--sp-11);
}

.qr-footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 40px;
    padding: var(--sp-9) 0 var(--sp-7);
    border-bottom: 1px solid var(--ink-700);
}

.qr-footer-desc {
    font: var(--fw-regular) 13px/1.7 var(--font-sans);
    color: var(--text-on-ink-mut);
    margin-top: 16px;
    max-width: 320px;
}

.qr-footer-col-heading {
    font: var(--fw-bold) 13px/1 var(--font-sans);
    color: #fff;
    margin-bottom: 14px;
}

.qr-footer-links {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.qr-footer-links a,
.qr-footer-links a:visited {
    font: var(--fw-regular) 13px/1 var(--font-sans);
    color: var(--text-on-ink-mut);
    text-decoration: none;
    transition: color var(--dur-1) var(--ease);
}

.qr-footer-links a:hover { color: #fff; text-decoration: none; }

.qr-footer-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    margin-top: 16px;
}

.qr-footer-contact-item,
.qr-footer-contact-item:visited {
    display: flex;
    align-items: center;
    gap: 6px;
    font: var(--fw-regular) 13px/1 var(--font-sans);
    color: var(--text-on-ink-mut);
    text-decoration: none;
}

a.qr-footer-contact-item:hover { color: #fff; text-decoration: none; }

.qr-footer-social {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.qr-footer-social a {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: var(--text-on-ink-mut);
    transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

.qr-footer-social a:hover {
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

.qr-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sp-5) 0;
    font: var(--fw-regular) 12px/1 var(--font-sans);
    color: var(--stone-500);
    flex-wrap: wrap;
    gap: 8px;
}

@media (max-width: 767px) {
    .qr-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 24px 16px;
        padding-top: var(--sp-7);
    }
    .qr-footer-desc { max-width: 100%; }
}

/* ── SECTION HEADINGS ──────────────────────────────────────── */
.qr-section-heading {
    margin-bottom: var(--sp-6);
}

.qr-section-eyebrow {
    font: var(--fw-semibold) 12px/1 var(--font-sans);
    color: var(--green-700);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 6px;
}

.qr-section-title {
    font: var(--fw-bold) var(--fs-xl)/var(--lh-snug) var(--font-sans);
    color: var(--text-strong);
    margin: 0;
}

.qr-section-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

/* ── HERO SEARCH BAR ───────────────────────────────────────── */
.hero-search-bar {
    display: flex;
    gap: 8px;
    padding: 8px;
    background: #fff;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    max-width: 620px;
    margin-top: var(--sp-7);
}

.hero-search-bar .hs-input-wrap {
    position: relative;
    flex: 1;
}

.hero-search-bar .hs-input-wrap i {
    position: absolute;
    inset-inline-end: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-subtle);
    pointer-events: none;
}

.hero-search-bar input {
    width: 100%;
    height: 46px;
    padding: 0 44px 0 14px;
    border: none;
    font: var(--fw-regular) 15px/1 var(--font-sans);
    background: transparent;
    outline: none;
    color: var(--text-strong);
}

.hero-search-bar input::placeholder { color: var(--text-subtle); }

.hero-search-bar .hs-submit {
    background: var(--green-700);
    color: #fff;
    font: var(--fw-semibold) 14px/1 var(--font-sans);
    padding: 0 22px;
    height: 46px;
    border-radius: var(--r-md);
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--dur-1) var(--ease);
    display: flex;
    align-items: center;
    gap: 8px;
}

.hero-search-bar .hs-submit:hover { background: var(--green-600); }

/* ── STEP CARDS ────────────────────────────────────────────── */
.step-card {
    position: relative;
}

.step-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.step-num-badge {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--surface-inset);
    color: var(--green-700);
    font: var(--fw-bold) 13px/1 var(--font-sans);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.step-icon-wrap {
    font-size: 24px;
    color: var(--green-700);
}

/* ── LEGAL NOTICE ──────────────────────────────────────────── */
.qr-legal-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--gold-100);
    border: 1px solid var(--gold-600);
    border-right: 3px solid var(--gold-700);
    border-radius: var(--r-md);
    padding: 12px 14px;
    font-size: 12px;
    line-height: 1.7;
    color: var(--ink-2);
}

.qr-legal-notice i {
    color: var(--gold-700);
    font-size: 15px;
    margin-top: 2px;
    flex-shrink: 0;
}

.qr-legal-notice strong {
    color: var(--text-strong);
}

/* ── DATA SOURCE LINE ──────────────────────────────────────── */
.qr-source {
    font-size: var(--fs-3xs);
    color: var(--text-subtle);
    margin-top: var(--sp-2);
    display: flex;
    align-items: center;
    gap: 5px;
}

.qr-source-green {
    color: var(--green-700);
}

/* ── PROJECT DETAIL HERO ───────────────────────────────────── */
.qr-proj-hero {
    background: linear-gradient(180deg, var(--ink-800), var(--ink-900));
    padding: 20px 0 28px;
}

.qr-proj-hero-bc {
    display: flex;
    gap: 5px;
    font: var(--fw-medium) 12px/1 var(--font-sans);
    color: var(--text-on-ink-mut);
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
}

.qr-proj-hero-bc a {
    color: var(--text-on-ink-mut);
    text-decoration: none;
    transition: color var(--dur-1) var(--ease);
}

.qr-proj-hero-bc a:hover { color: #fff; }
.qr-proj-hero-bc .bc-sep { opacity: .35; margin: 0 1px; }
.qr-proj-hero-bc .bc-current { color: rgba(255,255,255,.7); }

.qr-proj-title {
    font: var(--fw-bold) clamp(22px, 3vw, 34px)/1.1 var(--font-display);
    color: #fff;
    margin: 12px 0 10px;
}

.qr-proj-loc {
    display: flex;
    align-items: center;
    gap: 8px;
    font: var(--fw-medium) 15px/1 var(--font-sans);
    color: var(--text-on-ink-mut);
    margin-bottom: 20px;
}

.qr-proj-dev-chip {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--r-md);
    text-decoration: none;
    transition: background var(--dur-1) var(--ease);
    max-width: 100%;
}

.qr-proj-dev-chip:hover { background: rgba(255,255,255,.1); text-decoration: none; }

.qr-proj-dev-init {
    width: 36px;
    height: 36px;
    border-radius: var(--r-sm);
    background: var(--ink-600);
    color: rgba(255,255,255,.85);
    font: var(--fw-bold) 13px/1 var(--font-sans);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qr-proj-dev-name {
    font: var(--fw-bold) 14px/1 var(--font-sans);
    color: #fff;
}

.qr-proj-dev-meta {
    font: var(--fw-regular) 11px/1 var(--font-sans);
    color: var(--text-on-ink-mut);
    margin-top: 3px;
}

/* ── SIDEBAR CARD ──────────────────────────────────────────── */
.qr-card {
    background: #fff;
    border: 1px solid var(--border-default);
    border-radius: var(--r-lg);
    padding: 16px 18px;
}

.qr-card-label {
    font: var(--fw-semibold) 12px/1 var(--font-sans);
    color: var(--text-subtle);
    margin-bottom: 8px;
}

.qr-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-soft);
}

.qr-stat-row:last-of-type { border-bottom: none; }

.qr-stat-row-lbl {
    font: var(--fw-medium) 13px/1 var(--font-sans);
    color: var(--text-muted);
}

.qr-stat-row-val {
    font: var(--fw-bold) 16px/1 var(--font-display);
    color: var(--text-strong);
    font-feature-settings: var(--num-tabular);
}

.qr-delivery-hl {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    margin-top: 8px;
    background: var(--gold-100);
    border-radius: var(--r-sm);
    font: var(--fw-bold) 13px/1 var(--font-sans);
    color: var(--gold-700);
}

.qr-delivery-hl.done {
    background: var(--green-900);
    color: #fff;
}

/* ── SIDEBAR BUTTONS ───────────────────────────────────────── */
.qr-btn-ink {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: var(--ink-800);
    color: #fff;
    font: var(--fw-semibold) 14px/1 var(--font-sans);
    padding: 13px 20px;
    border-radius: var(--r-md);
    border: none;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: background var(--dur-1) var(--ease);
}

.qr-btn-ink:hover,
.qr-btn-ink:focus { background: var(--ink-700); color: #fff; text-decoration: none; }

.qr-btn-sec {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: transparent;
    color: var(--text-strong);
    font: var(--fw-semibold) 14px/1 var(--font-sans);
    padding: 12px 20px;
    border-radius: var(--r-md);
    border: 1px solid var(--border-default);
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}

.qr-btn-sec:hover,
.qr-btn-sec:focus { background: var(--stone-100); border-color: var(--border-strong); color: var(--text-strong); text-decoration: none; }

/* ── BOOTSTRAP OUTLINE BUTTONS ─────────────────────────────── */
.btn-outline-navy {
    color: var(--navy);
    border-color: var(--navy);
}

.btn-outline-navy:hover,
.btn-outline-navy:focus {
    color: #fff;
    background-color: var(--navy);
    border-color: var(--navy);
}

.btn-outline-navy,
.btn-outline-secondary {
    border-radius: 8px;
}

/* ── PAGINATION ────────────────────────────────────────────── */
.qr-pagination {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.qr-page-item .qr-page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
}

.qr-page-item a.qr-page-link:hover {
    border-color: var(--navy);
    color: var(--navy);
    text-decoration: none;
}

.qr-page-item.active .qr-page-link {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

.qr-page-item.disabled .qr-page-link {
    color: var(--ink-4);
    background: var(--paper);
    cursor: default;
}

.qr-pagination-summary {
    font-size: 12px;
    color: var(--ink-3);
}

/* fix sticky top for filter sidebar and project sidebar */
.filters-sidebar { top: calc(var(--header-h) + 20px); }

/* PASSWORD TOGGLE */

.password-field-wrap {
    position: relative;
}

.password-field-wrap input {
    padding-left: 40px;
}

.password-toggle-btn {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 4px;
    color: var(--ink-4);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
}

.password-toggle-btn:hover {
    color: var(--ink-2);
}