/* ═══════════════════════════════════════════════════
   HOME BLADE — COMPLETE MERGED CSS
   kpp-tokens.css, kpp-home.css, kpp-navbar.css,
   kpp-topbar.css + all professional fixes merged in
═══════════════════════════════════════════════════ */

/* ── Root tokens ── */
:root {
    --red:      #BE1E2D;
    --red-dark: #8E0F1B;
    --red-deep: #5C0811;
    --navy:     #0f1f3d;
    --navy-mid: #1a3a6e;
    --navy-lt:  #1e4080;
    --gold:     #C9A236;
    --gold-lt:  #e6b820;
    --ink:      #0f172a;
    --ink-2:    #1e293b;
    --ink-3:    #475569;
    --ink-4:    #94a3b8;
    --line:     #e2e8f0;
    --bg:       #f8f9fc;
}

*, *::before, *::after {
    box-sizing: border-box; margin: 0; padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
html { scroll-behavior: smooth; }
body { font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-weight: 500; background: var(--bg); color: var(--ink); overflow-x: hidden; }
img  { max-width: 100%; }
a    { text-decoration: none; }

/* ════════════════════════════════════════
   LANG SWITCHER
════════════════════════════════════════ */
.lang-switcher { display:flex; align-items:center; gap:4px; margin-right:8px; }
.lang-btn {
    color: rgba(255,255,255,.6);
    font-size: .7rem; font-weight: 700;
    padding: 3px 8px; border-radius: 4px;
    transition: all .2s; letter-spacing: .06em;
    font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
}
.lang-btn:hover        { color: #fff; background: rgba(255,255,255,.12); }
.lang-btn-active       { color: #fff; background: var(--red); }
.lang-divider          { color: rgba(255,255,255,.2); font-size: .75rem; }

/* ════════════════════════════════════════
   URDU OVERRIDES
════════════════════════════════════════ */
[lang="ur"] body {
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif !important;
    font-size: 1.05rem !important; line-height: 2.8 !important;
    letter-spacing: 0 !important; word-spacing: 2px !important;
}
[lang="ur"] p,
[lang="ur"] span:not(.lang-btn):not(.lang-divider),
[lang="ur"] li, [lang="ur"] td, [lang="ur"] th, [lang="ur"] label,
[lang="ur"] .news-item h4, [lang="ur"] .news-item p,
[lang="ur"] .dpo-message p, [lang="ur"] .ticker-inner span,
[lang="ur"] .about-text p, [lang="ur"] .aboutus-card p,
[lang="ur"] .psmis-card p, [lang="ur"] .footer-about p {
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif !important;
    letter-spacing: 0 !important; word-spacing: 2px !important; line-height: 2.6 !important;
}

/* Stat labels, about fact labels, footer bar — Urdu font */
[lang="ur"] .stat-lbl {
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif !important;
    font-size: .78rem !important; line-height: 2 !important;
    letter-spacing: 0 !important; text-transform: none !important;
    color: #4b5563 !important;
}
[lang="ur"] .stat-num {
    font-family: 'Barlow Condensed', sans-serif !important;
    letter-spacing: -.5px !important;
}
[lang="ur"] .about-fact-val {
    font-family: 'Barlow Condensed', sans-serif !important;
}
[lang="ur"] .nd,
[lang="ur"] .nm {
    font-family: 'Barlow Condensed', sans-serif !important;
}
[lang="ur"] .header-text h1 {
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: clamp(1rem, 3.5vw, 1.7rem) !important;
    line-height: 1.2 !important; letter-spacing: .3px !important;
    display: block !important; visibility: visible !important; color: #fff !important;
}
[lang="ur"] .header-text h1 em {
    font-family: 'Barlow Condensed', sans-serif !important;
    font-style: normal !important; color: var(--gold) !important;
}
[lang="ur"] .header-text p {
    font-family: 'Barlow', sans-serif !important; font-size: .72rem !important;
    line-height: 1.4 !important; color: rgba(255,255,255,.55) !important;
    display: block !important; visibility: visible !important;
}
[lang="ur"] .section-title h3 {
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif !important;
    color: #0f1f3d !important; font-size: 1.15rem !important;
    line-height: 2.2 !important; letter-spacing: 0 !important; text-transform: none !important;
}
[lang="ur"] .panel-head h3 {
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif !important;
    color: #fff !important; font-size: 1.05rem !important;
    line-height: 2 !important; letter-spacing: 0 !important; text-transform: none !important;
}
[lang="ur"] .dpo-card-head h3 {
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif !important;
    color: #fff !important; font-size: 1.1rem !important;
    line-height: 2.2 !important; letter-spacing: 0 !important; text-transform: none !important;
}
[lang="ur"] .sb-head h4 {
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif !important;
    color: #111827 !important; font-size: 1rem !important;
    line-height: 2.2 !important; letter-spacing: 0 !important; text-transform: none !important;
}
[lang="ur"] .psmis-card h4 {
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif !important;
    color: #fff !important; font-size: 1.1rem !important;
    line-height: 2.2 !important; letter-spacing: 0 !important; text-transform: none !important;
}
[lang="ur"] .aboutus-card h4 {
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif !important;
    color: #0f1f3d !important; font-size: 1.2rem !important;
    line-height: 2.4 !important; letter-spacing: 0 !important; text-transform: none !important;
}
[lang="ur"] .aboutus-card p {
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif !important;
    color: #374151 !important; font-size: 1rem !important;
    line-height: 2.6 !important; letter-spacing: 0 !important;
    direction: rtl !important; text-align: right !important;
}
[lang="ur"] .aboutus-title h3 { color: #ffffff !important; }
[lang="ur"] .footer-col h5 {
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif !important;
    color: #fff !important; font-size: 1.05rem !important;
    line-height: 2.2 !important; letter-spacing: 0 !important; text-transform: none !important;
}
[lang="ur"] .footer-about h4 {
    font-family: 'Barlow Condensed', sans-serif !important; color: #fff !important;
}
[lang="ur"] .footer-about p,
[lang="ur"] .footer-about-value {
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif !important;
    font-size: 1rem !important; line-height: 2.5 !important; color: #d1d5db !important;
    direction: rtl !important; text-align: right !important;
}
[lang="ur"] .footer-col a {
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif !important;
    font-size: .98rem !important; color: #d1d5db !important;
    line-height: 2.2 !important; letter-spacing: 0 !important;
    justify-content: flex-end !important; direction: rtl !important;
}
[lang="ur"] .footer-col a:hover { color: #fff !important; }
[lang="ur"] .footer-bar p { font-size: .75rem !important; color: #6b7280 !important; direction: ltr !important; }
[lang="ur"] .nav-item, [lang="ur"] .nav-psmis,
[lang="ur"] .pub-nav-dd-trigger, [lang="ur"] .topbar-link {
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif !important;
    font-size: .82rem !important; line-height: 1 !important; letter-spacing: 0 !important;
}
[lang="ur"] .ticker-bar {
    direction: ltr !important;
}
[lang="ur"] .ticker-track {
    direction: ltr !important;
}
[lang="ur"] .ticker-inner {
    direction: rtl !important;
    animation: ticker 42s linear infinite !important;
}
[lang="ur"] .ticker-inner span {
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif !important;
    font-size: .85rem !important;
    line-height: 34px !important;
    padding: 0 24px !important;
    display: inline-block !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}
[lang="ur"] .ticker-inner span::before {
    content: '◆' !important;
    margin-left: 10px !important;
    margin-right: 0 !important;
    color: var(--gold) !important;
    font-size: .55rem !important;
}
[lang="ur"] .hero-text {
    text-align: left !important;
    direction: ltr !important;
}
[lang="ur"] .hero-text h2 {
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: clamp(2rem, 5vw, 3.5rem) !important;
    font-weight: 900 !important;
    line-height: 1.02 !important;
    letter-spacing: -.01em !important;
    text-transform: uppercase !important;
    text-align: left !important;
    direction: ltr !important;
    word-spacing: normal !important;
}
[lang="ur"] .hero-text h2 span {
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: .62em !important;
    font-weight: 700 !important;
    line-height: 1.02 !important;
    text-align: left !important;
    direction: ltr !important;
}
[lang="ur"] .hero-eyebrow {
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif !important;
    font-size: .95rem !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    line-height: 2 !important;
    direction: rtl !important;
    text-align: right !important;
    word-spacing: 2px !important;
    justify-content: flex-end !important;
}
[lang="ur"] .hero-text p {
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif !important;
    font-size: clamp(.88rem, 2.2vw, .95rem) !important;
    line-height: 1.8 !important;
    text-align: left !important;
    direction: ltr !important;
    word-spacing: normal !important;
}
[lang="ur"] .hero-btns {
    direction: ltr !important;
    justify-content: flex-start !important;
}

/* ════════════════════════════════════════
   URDU — HERO SPLIT LAYOUT FIX
   Restore proper spacing between text & slider
════════════════════════════════════════ */
[lang="ur"] .hero-split {
    gap: 0 !important;
    padding: 0 !important;
    align-items: stretch !important;
}
[lang="ur"] .hero-split .hero-text {
    flex: 0 0 46% !important;
    padding: 40px 44px 40px 40px !important;
    direction: ltr !important;
    text-align: left !important;
}
[lang="ur"] .hero-slider-col {
    margin-left: 20px !important;
    flex: 1 !important;
    border-radius: 14px !important;
    height: 420px !important;
}

/* Tablet */
@media (max-width: 900px) {
    [lang="ur"] .hero-split .hero-text {
        flex: 0 0 50% !important;
        padding: 32px 28px 32px 24px !important;
    }
    [lang="ur"] .hero-slider-col { margin-left: 0 !important; }
}

/* Mobile — stack vertically, no overlap */
@media (max-width: 768px) {
    [lang="ur"] .hero-split .hero-text {
        flex: none !important;
        width: 100% !important;
        padding: 28px 16px 20px !important;
    }
    [lang="ur"] .hero-slider-col {
        margin-left: 0 !important;
        width: 100% !important;
    }
}
[lang="ur"] .dpo-message p {
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif !important;
    color: #1f2937 !important; font-size: 1.3rem !important;
    line-height: 1.8 !important; letter-spacing: 0 !important;
    margin-bottom: 2px !important;
    direction: rtl !important;
    text-align: justify !important;
    text-justify: inter-word !important;
    hyphens: auto !important;
}
/* ════════════════════════════════════════
   URDU — DPO SIGNATURE FOOTER SWAP
   Polygon → left, Moon/Star → right
════════════════════════════════════════ */
[lang="ur"] .dpo-message-footer {
    flex-direction: row-reverse !important;
    direction: rtl !important;
}
[lang="ur"] .dpo-sig {
    text-align: right !important;
    direction: rtl !important;
}
[lang="ur"] .dpo-sig strong {
    font-family: 'Barlow Condensed', sans-serif !important;
    text-align: right !important;
    direction: ltr !important;
    display: block !important;
}
[lang="ur"] .dpo-sig span {
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif !important;
    font-size: .85rem !important;
    line-height: 2 !important;
    direction: rtl !important;
    text-align: right !important;
    display: block !important;
}
[lang="ur"] .psmis-card p {
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif !important;
    font-size: 1rem !important; line-height: 2.5 !important;
    color: rgba(255,255,255,.85) !important;
    direction: rtl !important; text-align: right !important;
}
[lang="ur"] .news-item h4 {
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif !important;
    color: #111827 !important; font-size: 1.05rem !important;
    line-height: 2.3 !important; letter-spacing: 0 !important;
    direction: rtl !important; text-align: right !important;
}
[lang="ur"] .news-item p {
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif !important;
    color: #4b5563 !important; font-size: .95rem !important;
    line-height: 2.4 !important; direction: rtl !important; text-align: right !important;
}
[lang="ur"] .sb-link-text span {
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif !important;
    font-size: .95rem !important; color: #1f2937 !important;
    line-height: 2.2 !important; direction: rtl !important;
}
[lang="ur"] .sb-link-text small {
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif !important;
    font-size: .72rem !important; color: #6b7280 !important; direction: ltr !important;
}
[lang="ur"] .about-text p {
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif !important;
    color: #1f2937 !important; font-size: 1.3rem !important;
    line-height: 1.8 !important; direction: rtl !important;
    margin-bottom: 2px !important;
    text-align: justify !important;
    text-justify: inter-word !important;
    hyphens: auto !important;
}
[lang="ur"] .about-fact-lbl {
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif !important;
    font-size: .85rem !important; line-height: 2 !important;
    color: #4b5563 !important; letter-spacing: 0 !important; text-transform: none !important;
}
[lang="ur"] .lang-btn {
    font-family: 'Barlow Condensed', sans-serif !important;
    letter-spacing: .5px !important; line-height: 1 !important;
}
[lang="ur"] .hero-btn, [lang="ur"] .psmis-btn, [lang="ur"] .header-login-btn {
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif !important;
    letter-spacing: 0 !important; line-height: 2 !important; font-size: .95rem !important;
}
[lang="ur"] .hero-btn {
    padding-top: 10px !important; padding-bottom: 10px !important; min-height: 46px !important;
}
[lang="ur"] .nav-drawer-item {
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif !important;
    text-transform: none !important; letter-spacing: 0 !important;
    font-size: 1rem !important; line-height: 2.2 !important;
}
[lang="ur"] .nav-drawer-accordion-trigger {
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif !important;
    text-transform: none !important; letter-spacing: 0 !important;
    font-size: 1rem !important; line-height: 2.2 !important;
}
[lang="ur"] .nav-drawer-item-sub {
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif !important;
    text-transform: none !important; letter-spacing: 0 !important;
    font-size: .95rem !important; line-height: 2.2 !important;
}
[lang="ur"] .nav-drawer-psmis {
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif !important;
    text-transform: none !important; letter-spacing: 0 !important;
}
[lang="ur"] .pub-dd-item,
[lang="ur"] .pub-dd-menu .pub-dd-item {
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif !important;
    text-transform: none !important; letter-spacing: 0 !important;
    font-size: 1rem !important; line-height: 2.2 !important;
}
@media (max-width: 480px) {
    [lang="ur"] .hero-text h2 { font-size: clamp(1.6rem, 8vw, 2.2rem) !important; }
    [lang="ur"] .dpo-message p { font-size: 1.15rem !important; line-height: 1.8 !important; }
    [lang="ur"] .about-text p  { font-size: 1.15rem !important; line-height: 1.8 !important; }
}

/* ════════════════════════════════════════
   PUBLIC NAV DROPDOWN
════════════════════════════════════════ */
.pub-nav-dropdown { position: relative; }
.pub-nav-dd-trigger {
    display: flex; align-items: center; gap: 5px;
    background: none; border: none; cursor: pointer;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: .85rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    color: rgba(255,255,255,.92); padding: 0 1.15rem; height: 46px;
    border-right: 1px solid rgba(255,255,255,.1);
    transition: background .15s, color .15s; white-space: nowrap;
}
.pub-nav-dd-trigger:hover { background: var(--red-dark); color: #fff; }
.pub-nav-dd-trigger svg:first-child { width: 14px; height: 14px; fill: currentColor; opacity: .8; }
.pub-dd-caret { width: 16px; height: 16px; fill: currentColor; transition: transform .2s; }
.pub-nav-dropdown:hover .pub-dd-caret { transform: rotate(180deg); }
.pub-dd-menu {
    display: none; position: absolute; top: 100%; left: 0;
    z-index: 999; min-width: 230px; background: var(--navy);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 16px 40px rgba(0,0,0,.4);
    padding: 6px 0; margin-top: 0;
}
.pub-nav-dropdown:hover .pub-dd-menu { display: block; }
.pub-dd-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px; color: rgba(255,255,255,.8);
    font-family: 'Barlow Condensed', sans-serif;
    font-size: .8rem; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase;
    transition: background .15s, color .15s;
    border-bottom: 1px solid rgba(255,255,255,.05);
}
.pub-dd-item:last-child { border-bottom: none; }
.pub-dd-item svg { width: 13px; height: 13px; fill: rgba(255,255,255,.4); flex-shrink: 0; }
.pub-dd-item:hover { background: rgba(255,255,255,.06); color: var(--gold); }
.pub-dd-item:hover svg { fill: var(--gold); }

/* ════════════════════════════════════════
   TOPBAR
════════════════════════════════════════ */
.topbar {
    background: var(--navy); height: 36px;
    display: flex; align-items: center;
    border-bottom: 1px solid rgba(255,255,255,.05);
}
.topbar > .topbar-left,
.topbar > .topbar-right { padding: 0 20px; }
.topbar-left  { display: flex; align-items: center; gap: 0; flex: 1; }
.topbar-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.topbar-link {
    display: inline-flex; align-items: center; gap: 5px;
    color: rgba(255,255,255,.65); font-size: .72rem; font-weight: 600;
    letter-spacing: .06em; padding: 0 10px; height: 36px;
    text-transform: uppercase; transition: color .15s;
    font-family: 'Barlow Condensed', sans-serif;
}
.topbar-link:hover { color: var(--gold); }
.topbar-link svg { width: 12px; height: 12px; fill: currentColor; opacity: .7; }
.topbar-divider { width: 1px; height: 16px; background: rgba(255,255,255,.1); flex-shrink: 0; }
.topbar-social {
    display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 5px;
    color: rgba(255,255,255,.45); transition: all .15s;
}
.topbar-social svg { width: 12px; height: 12px; fill: currentColor; }
.topbar-social:hover { background: rgba(255,255,255,.1); color: #fff; }

/* ════════════════════════════════════════
   SITE HEADER
════════════════════════════════════════ */
.site-header {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 55%, var(--navy-lt) 100%);
    padding: 14px 24px;
    display: flex; align-items: center; gap: 18px;
    position: relative; overflow: hidden;
    border-bottom: 3px solid var(--red);
    min-height: 78px;
}
.site-header::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 60% 120% at 15% 50%, rgba(255,255,255,.04) 0%, transparent 65%),
        radial-gradient(ellipse 30% 80% at 85% 50%, rgba(201,162,54,.05) 0%, transparent 60%);
    pointer-events: none;
}
.logo-badge {
    width: 68px; height: 68px;
    background: rgba(255,255,255,.08);
    border: 2px solid rgba(255,255,255,.15);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; position: relative; z-index: 1;
    min-width: 68px; transition: border-color .2s;
}
.logo-badge:hover { border-color: rgba(201,162,54,.4); }
.logo-badge img { width: 56px; height: 56px; object-fit: contain; }
.header-text {
    flex: 1; min-width: 0;
    position: relative; z-index: 1;
    display: block !important; visibility: visible !important;
}
.header-text h1 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(1.1rem, 2.8vw, 1.65rem);
    font-weight: 800; color: #fff;
    letter-spacing: .04em; text-transform: uppercase;
    line-height: 1.15;
    display: block !important; visibility: visible !important;
    white-space: nowrap;
}
.header-text h1 em { color: var(--gold); font-style: normal; }
.header-text p {
    font-size: .68rem; color: rgba(255,255,255,.45);
    letter-spacing: .1em; text-transform: uppercase; margin-top: 4px;
    font-family: 'Barlow Condensed', sans-serif;
}
.subtitle-short { display: none; }
.header-right {
    display: flex; align-items: center; gap: 8px;
    position: relative; z-index: 1;
    flex-wrap: wrap; justify-content: flex-end;
}
.header-date {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: .72rem; color: rgba(255,255,255,.4);
    letter-spacing: .06em; white-space: nowrap;
}
.header-login-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: 6px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: .78rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    color: rgba(255,255,255,.8);
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    transition: all .2s; white-space: nowrap;
}
.header-login-btn svg { width: 14px; height: 14px; fill: currentColor; }
.header-login-btn:hover {
    background: rgba(255,255,255,.14);
    color: #fff; border-color: rgba(255,255,255,.25);
    transform: translateY(-1px);
}

/* ════════════════════════════════════════
   NAVBAR
════════════════════════════════════════ */
.navbar-wrap {
    background: var(--red);
    position: sticky; top: 0; z-index: 200;
    box-shadow: 0 3px 16px rgba(94,12,22,.45);
}
.navbar {
    display: flex; align-items: stretch;
    height: 46px; max-width: 100%; padding: 0 4px;
}
.nav-item {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 0 1.1rem; height: 46px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: .82rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    color: rgba(255,255,255,.85);
    border-right: 1px solid rgba(255,255,255,.08);
    transition: background .15s, color .15s; white-space: nowrap;
}
.nav-item svg { width: 13px; height: 13px; fill: currentColor; opacity: .75; }
.nav-item:hover { background: var(--red-dark); color: #fff; }
.nav-item.active {
    background: var(--red-dark); color: #fff;
    border-bottom: 2px solid var(--gold);
}
.nav-spacer { flex: 1; }
.nav-psmis {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0 1.2rem; height: 46px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: .8rem; font-weight: 800;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--gold); background: rgba(0,0,0,.2);
    border-left: 1px solid rgba(255,255,255,.1);
    transition: all .15s; white-space: nowrap;
}
.nav-psmis svg { width: 14px; height: 14px; fill: currentColor; }
.nav-psmis:hover { background: rgba(6,12,24,.7); color: var(--gold-lt); }

/* Hamburger */
.nav-hamburger {
    display: none; align-items: center; justify-content: center;
    width: 46px; height: 46px;
    background: none; border: none; cursor: pointer; color: #fff; flex-shrink: 0;
}
.nav-hamburger-icon { display: flex; flex-direction: column; gap: 5px; }
.nav-hamburger-icon span {
    display: block; width: 22px; height: 2px;
    background: #fff; border-radius: 2px;
    transition: transform .25s ease, opacity .25s ease;
    transform-origin: center;
}

/* ════════════════════════════════════════
   NAV DRAWER
════════════════════════════════════════ */
.nav-drawer {
    display: none; position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.65); z-index: 999999;
}
.nav-drawer-inner {
    position: fixed; left: 0; top: 0; bottom: 0;
    width: 280px; max-width: 85vw;
    background: #fff; overflow-y: auto; z-index: 1000000;
    box-shadow: 6px 0 32px rgba(0,0,0,.3);
}
.nav-drawer-header {
    background: linear-gradient(135deg, var(--navy), var(--navy-mid));
    padding: 16px 18px; border-bottom: 3px solid var(--red);
    display: flex; align-items: center; gap: 12px;
}
.nav-drawer-header-logo { width: 38px; height: 38px; flex-shrink: 0; }
.nav-drawer-header-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: .95rem; font-weight: 800;
    color: #fff; text-transform: uppercase;
    letter-spacing: .06em; line-height: 1.2;
}
.nav-drawer-header-title em { color: var(--gold); font-style: normal; }
.nav-drawer-item {
    display: flex; align-items: center; gap: 10px; padding: 13px 18px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: .9rem; font-weight: 700; color: var(--ink-2);
    border-bottom: 1px solid var(--line); text-decoration: none;
    transition: background .12s; letter-spacing: .06em; text-transform: uppercase;
}
.nav-drawer-item svg { width: 16px; height: 16px; fill: var(--red); flex-shrink: 0; }
.nav-drawer-item.active { background: #fef2f2; color: var(--red); border-left: 3px solid var(--red); }
.nav-drawer-item.active svg { fill: var(--red); }
.nav-drawer-item:hover  { background: var(--bg); }
.nav-drawer-accordion-trigger {
    display: flex; align-items: center; gap: 10px; padding: 13px 18px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: .9rem; font-weight: 700; color: var(--ink-2);
    border-bottom: 1px solid var(--line); cursor: pointer; width: 100%;
    background: none; border-left: none; border-right: none; border-top: none;
    text-align: left; transition: background .12s;
    letter-spacing: .06em; text-transform: uppercase;
}
.nav-drawer-accordion-trigger svg:first-child { width: 16px; height: 16px; fill: var(--red); flex-shrink: 0; }
.nav-drawer-accordion-trigger:hover { background: var(--bg); }
.nav-drawer-accordion-caret {
    margin-left: auto; width: 18px; height: 18px; fill: var(--ink-4);
    transition: transform .25s ease; flex-shrink: 0;
}
.nav-drawer-accordion-trigger.open .nav-drawer-accordion-caret { transform: rotate(180deg); }
.nav-drawer-accordion-trigger.open { background: #fef2f2; color: var(--red); }
.nav-drawer-accordion-trigger.open svg:first-child { fill: var(--red); }
.nav-drawer-sub { display: none; background: #fafafa; border-bottom: 1px solid var(--line); }
.nav-drawer-sub.open { display: block; }
.nav-drawer-item-sub {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 18px 10px 38px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: .82rem; font-weight: 600; color: var(--ink-3);
    border-bottom: 1px solid rgba(226,232,240,.6); text-decoration: none;
    border-left: 3px solid var(--red); transition: background .12s;
    letter-spacing: .04em; text-transform: uppercase;
}
.nav-drawer-item-sub:last-child { border-bottom: none; }
.nav-drawer-item-sub svg { width: 13px; height: 13px; fill: var(--red); flex-shrink: 0; }
.nav-drawer-item-sub:hover { background: #fef2f2; color: var(--red); }
.nav-drawer-psmis {
    display: flex; align-items: center; gap: 10px; padding: 14px 18px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: .9rem; font-weight: 800; color: var(--red);
    border-top: 2px solid var(--red); text-decoration: none;
    background: #fef2f2; letter-spacing: .06em; text-transform: uppercase;
}
.nav-drawer-psmis svg { width: 16px; height: 16px; fill: currentColor; }

/* ════════════════════════════════════════
   TICKER
════════════════════════════════════════ */
.ticker-bar {
    background: var(--navy);
    display: flex; align-items: stretch;
    height: 34px; overflow: hidden;
    border-bottom: 1px solid rgba(255,255,255,.04);
}
.ticker-label {
    display: flex; align-items: center; gap: 6px; padding: 0 14px;
    background: var(--gold); color: var(--navy);
    font-family: 'Barlow Condensed', sans-serif;
    font-size: .7rem; font-weight: 800;
    letter-spacing: .1em; text-transform: uppercase;
    white-space: nowrap; flex-shrink: 0;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
    padding-right: 24px;
}
.ticker-label-icon { width: 12px; height: 12px; fill: var(--navy); }
.ticker-track  { flex: 1; overflow: hidden; display: flex; align-items: center; }
.ticker-inner  { display: flex; gap: 0; white-space: nowrap; animation: ticker 42s linear infinite; }
.ticker-inner span {
    color: rgba(255,255,255,.65); font-size: .72rem;
    padding: 0 34px; font-family: 'Barlow', sans-serif;
    font-weight: 400; letter-spacing: .02em;
}
.ticker-inner span::before {
    content: '◆'; margin-right: 10px;
    color: var(--gold); font-size: .55rem;
}
@keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ════════════════════════════════════════
   HERO
════════════════════════════════════════ */
.hero {
    background: linear-gradient(135deg, #3a0010 0%, #6b0018 28%, #9b001f 55%, #be1e2d 80%, #c9363e 100%);
    position: relative; overflow: hidden;
    padding: 28px 24px 44px;
}
.hero::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 55% 100% at 0% 55%, rgba(0,0,0,.32) 0%, transparent 65%),
        radial-gradient(ellipse 40% 60% at 92% 10%, rgba(201,162,54,.13) 0%, transparent 55%),
        radial-gradient(ellipse 30% 50% at 75% 90%, rgba(255,80,80,.09) 0%, transparent 60%);
    pointer-events: none;
}
.hero::after {
    content: '';
    position: absolute; inset: 0;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 60px,
            rgba(255,255,255,.018) 60px, rgba(255,255,255,.018) 61px),
        repeating-linear-gradient(90deg, transparent, transparent 80px,
            rgba(255,255,255,.008) 80px, rgba(255,255,255,.008) 81px);
    pointer-events: none;
}
.hero-content {
    max-width: 1200px; margin: 0 auto;
    display: flex; align-items: center; gap: 48px;
    position: relative; z-index: 1;
}
.hero-text { flex: 1; min-width: 0; }
.hero-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: .7rem; font-weight: 800;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--gold); margin-bottom: 16px;
}
.hero-eyebrow svg { width: 13px; height: 13px; fill: currentColor; }
.hero-eyebrow::before {
    content: ''; display: block;
    width: 20px; height: 2px; background: var(--gold);
}
.hero-text h2 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 900; color: #fff;
    line-height: 1.02; letter-spacing: -.01em;
    text-transform: uppercase; margin-bottom: 16px;
    text-shadow: 0 2px 12px rgba(0,0,0,.3);
}
.hero-text h2 span { display: block; color: var(--gold); font-size: .62em; font-weight: 700; }
.hero-text p {
    font-size: clamp(.88rem, 2.2vw, .95rem);
    color: rgba(255,255,255,.82); line-height: 1.8;
    max-width: 500px; margin-bottom: 30px;
    font-weight: 400;
}
.hero-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 26px; border-radius: 6px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(.82rem, 2.2vw, .92rem);
    font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    transition: all .22s; position: relative; overflow: hidden;
}
.hero-btn::before {
    content: ''; position: absolute; inset: 0;
    background: rgba(255,255,255,0); transition: background .2s;
}
.hero-btn:hover::before { background: rgba(255,255,255,.06); }
.hero-btn svg { width: 16px; height: 16px; fill: currentColor; position: relative; }
.hero-btn-red {
    background: #fff; color: var(--red);
    box-shadow: 0 4px 20px rgba(0,0,0,.25), 0 1px 0 rgba(255,255,255,.15) inset;
}
.hero-btn-red:hover {
    background: var(--gold); color: var(--navy);
    box-shadow: 0 8px 28px rgba(201,162,54,.4);
    transform: translateY(-2px);
}
.hero-btn-outline {
    background: rgba(255,255,255,.08); color: #fff;
    border: 1.5px solid rgba(255,255,255,.28);
    backdrop-filter: blur(4px);
}
.hero-btn-outline:hover {
    background: rgba(255,255,255,.16);
    border-color: rgba(255,255,255,.55);
    transform: translateY(-2px);
}
.hero-badge-wrap { flex-shrink: 0; position: relative; }
.hero-badge-outer { width: 210px; height: 210px; display: flex; align-items: center; justify-content: center; }
.hero-badge-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.hero-badge-img { width: 185px; height: 185px; object-fit: contain; }
.hero-badge-inner p {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: .68rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: rgba(255,255,255,.55);
    text-align: center; line-height: 1.5;
}

/* Hero split */
.hero-split { align-items: stretch; gap: 0; padding: 0; }
.hero-split .hero-text {
    flex: 0 0 42%;
    display: flex; flex-direction: column; justify-content: center;
    padding: 32px 36px 32px 36px;
    position: relative; z-index: 2;
}
.hero-split .hero-text::after {
    content: ''; position: absolute; right: -1px; top: 8%;
    height: 84%; width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,.15), transparent);
}
.hero-slider-col {
    flex: 1; min-width: 0; position: relative;
    border-radius: 14px; overflow: hidden; min-height: 420px;
    box-shadow: none; margin-left: 20px;
    height: 420px;
}
.hsl-track {
    display: flex; height: 100%; width: 100%;
    transition: transform .55s cubic-bezier(.77,0,.18,1);
    will-change: transform;
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
}
.hero-slider-col, .hsl-track, .hsl-slide { direction: ltr !important; }
.hsl-slide { flex: 0 0 100%; height: 100%; position: relative; overflow: hidden; min-height: 0; }
.hsl-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; transition: transform 6.5s ease; max-height: 100%; position: absolute; top: 0; left: 0; }
.hsl-slide.is-active img { transform: scale(1.07); }
.hsl-slide::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(92,8,17,.35) 0%, transparent 55%);
    pointer-events: none; z-index: 1;
}
.hsl-caption {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: linear-gradient(to top, rgba(0,0,0,.8) 0%, transparent 100%);
    padding: 40px 18px 14px; pointer-events: none;
}
.hsl-caption span {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: .8rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: rgba(255,255,255,.9);
}
.hsl-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.18);
    color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background .2s, transform .2s; z-index: 10;
}
.hsl-arrow svg { width: 18px; height: 18px; fill: currentColor; }
.hsl-arrow:hover { background: var(--red); transform: translateY(-50%) scale(1.1); }
.hsl-prev { left: 10px; } .hsl-next { right: 10px; }
.hsl-dots {
    position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 6px; z-index: 10;
}
.hsl-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: rgba(255,255,255,.4); border: none;
    cursor: pointer; transition: all .25s; padding: 0;
}
.hsl-dot.active { background: var(--gold); width: 20px; border-radius: 4px; }
.hsl-counter {
    position: absolute; top: 10px; right: 12px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: .68rem; font-weight: 700;
    color: rgba(255,255,255,.65); background: rgba(0,0,0,.45);
    padding: 2px 9px; border-radius: 20px;
    letter-spacing: .06em; z-index: 10;
}

/* ════════════════════════════════════════
   QUICK LINKS
════════════════════════════════════════ */
.quick-links { background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 4px 24px rgba(0,0,0,.06); }
.quick-links-inner { max-width: 1200px; margin: 0 auto; display: flex; }
.quick-link-item {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 8px; padding: 18px 10px;
    color: var(--ink-2); border-right: 1px solid var(--line);
    transition: all .18s;
}
.quick-link-item:last-child { border-right: none; }
.quick-link-item:hover { background: var(--bg); color: var(--red); }
.ql-icon {
    width: 42px; height: 42px; border-radius: 10px;
    background: #f1f5f9;
    display: flex; align-items: center; justify-content: center; transition: all .18s;
}
.ql-icon svg { width: 20px; height: 20px; fill: var(--red); }
.quick-link-item:hover .ql-icon { background: var(--red); transform: translateY(-2px); }
.quick-link-item:hover .ql-icon svg { fill: #fff; }
.quick-link-item span {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(.68rem, 1.8vw, .78rem);
    font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-align: center;
}

/* ════════════════════════════════════════
   MAIN GRID
════════════════════════════════════════ */
.main-grid {
    max-width: 1200px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr 310px;
    gap: 24px; padding: 28px 20px 0;
    align-items: start;
}
.main-left { min-width: 0; display: flex; flex-direction: column; }

/* Section titles */
.section-title { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; margin-top: 8px; }
.section-title-bar { width: 3px; height: 22px; background: var(--red); border-radius: 2px; flex-shrink: 0; }
.section-title h3 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.08rem; font-weight: 800; color: var(--ink);
    letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.section-title-line { flex: 1; height: 1px; background: linear-gradient(to right, var(--line), transparent); }

/* ════════════════════════════════════════
   DPO CARD
════════════════════════════════════════ */
.dpo-card {
    background: #fff; border: 1px solid var(--line);
    border-radius: 10px; overflow: hidden;
    margin-bottom: 24px; box-shadow: 0 4px 24px rgba(0,0,0,.07);
}
.dpo-card-head {
    display: flex; align-items: center; gap: 10px; padding: 12px 18px;
    background: linear-gradient(135deg, var(--navy), var(--navy-mid));
    border-bottom: 2px solid var(--red);
}
.dpo-card-head-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--gold); flex-shrink: 0;
    animation: blink 2s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.35} }
.dpo-card-head h3 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: .95rem; font-weight: 800; color: #fff;
    letter-spacing: .08em; text-transform: uppercase;
}
.dpo-card-body { padding: 20px; display: flex; gap: 22px; flex-wrap: wrap; }
.dpo-photo-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; flex-shrink: 0; }
.dpo-photo {
    width: 155px; height: 195px; border-radius: 8px; overflow: hidden;
    background: linear-gradient(135deg, var(--navy), var(--navy-mid));
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    border: 2px solid var(--line);
}
.dpo-photo img { width: 100%; height: 100%; object-fit: cover; }
.dpo-photo svg { width: 38px; height: 38px; fill: rgba(255,255,255,.25); }
.dpo-photo-label { font-size: .68rem; color: rgba(255,255,255,.45); margin-top: 4px; }
.dpo-photo-caption {
    text-align: center;
    line-height: 1.2;
}
.dpo-photo-caption strong {
    display: block; font-family: 'Barlow Condensed', sans-serif;
    font-size: .95rem; font-weight: 800; color: #111827; letter-spacing: .02em;
    margin-bottom: 2px;
}
.dpo-photo-caption span {
    display: inline-block;
    font-size: .72rem; color: #6b7280;
    line-height: 1.3; margin: 0; padding: 0;
}
.dpo-photo-caption br { display: none; }
.dpo-rank-badge {
    display: inline-block; background: var(--red); color: #fff;
    font-size: .65rem; font-weight: 700; padding: 2px 8px;
    border-radius: 4px; letter-spacing: .06em; text-transform: uppercase;
    margin-top: 4px !important;
}
/* dpo-rank-badge defined in caption block above */
.dpo-message { flex: 1; min-width: 180px; }
.dpo-message p {
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    font-size: .9rem; color: #1f2937;
    line-height: 1.88; margin-bottom: 6px;
    font-weight: 500; letter-spacing: .015em;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
}
.dpo-message-footer {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: nowrap; padding-top: 10px;
    border-top: 1px solid var(--line); margin-top: 2px;
}
.dpo-sig { flex: 0 0 auto; }
.dpo-sig strong {
    display: block; font-family: 'Barlow Condensed', sans-serif;
    font-size: .92rem; font-weight: 800; color: #0f1f3d;
    letter-spacing: .04em; text-transform: uppercase;
}
.dpo-sig span { font-size: .75rem; color: #6b7280; font-weight: 500; }

/* ════════════════════════════════════════
   STATS BAND
════════════════════════════════════════ */
.stats-band {
    display: grid; grid-template-columns: repeat(4,1fr);
    margin-bottom: 24px; border-radius: 10px; overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,.08); border: 1px solid var(--line);
}
.stat-item {
    padding: 20px 14px; text-align: center; background: #fff;
    border-right: 1px solid var(--line); transition: background .15s;
    position: relative;
}
.stat-item:last-child { border-right: none; }
.stat-item:hover { background: var(--bg); }
.stat-item::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0;
    height: 3px; background: var(--red); transform: scaleX(0);
    transform-origin: left; transition: transform .25s;
}
.stat-item:hover::before { transform: scaleX(1); }
.stat-num {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 2.2rem; font-weight: 900;
    color: var(--red); line-height: 1; letter-spacing: -.5px;
}
.stat-lbl {
    font-size: .7rem; color: #4b5563;
    text-transform: uppercase; letter-spacing: .07em;
    margin-top: 6px; font-weight: 800;
    font-family: 'Barlow Condensed', sans-serif;
}

/* ════════════════════════════════════════
   NEWS PANEL
════════════════════════════════════════ */
.news-panel {
    background: #fff; border: 1px solid var(--line);
    border-radius: 10px; overflow: hidden;
    margin-bottom: 0; flex: 1;
    box-shadow: 0 4px 20px rgba(0,0,0,.06);
}
.panel-head {
    display: flex; align-items: center; gap: 10px; padding: 13px 18px;
    background: linear-gradient(135deg, var(--navy), var(--navy-mid));
    border-bottom: 2px solid var(--red);
}
.panel-head-icon {
    width: 28px; height: 28px; border-radius: 6px;
    background: rgba(255,255,255,.1);
    display: flex; align-items: center; justify-content: center;
}
.panel-head-icon svg { width: 15px; height: 15px; fill: #fff; }
.panel-head h3 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: .95rem; font-weight: 800; color: #fff;
    letter-spacing: .08em; text-transform: uppercase;
}
.news-item {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 14px 18px; border-bottom: 1px solid var(--line);
    transition: background .15s;
}
.news-item:last-child { border-bottom: none; }
.news-item:hover { background: var(--bg); }
.news-date { flex-shrink: 0; text-align: center; width: 36px; }
.nd { font-family: 'Barlow Condensed', sans-serif; font-size: 1.35rem; font-weight: 900; color: var(--red); line-height: 1; }
.nm { font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-4); font-weight: 700; }
.news-text { flex: 1; min-width: 0; }
.news-badge {
    display: inline-block; font-size: .62rem; font-weight: 800;
    letter-spacing: .08em; text-transform: uppercase;
    padding: 2px 8px; border-radius: 4px; margin-bottom: 4px;
    font-family: 'Barlow Condensed', sans-serif;
}
.nb-red   { background: #fee2e2; color: var(--red-dark); }
.nb-blue  { background: #dbeafe; color: #1d4ed8; }
.nb-green { background: #dcfce7; color: #15803d; }
.news-item h4 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: .97rem; font-weight: 800; color: #111827;
    letter-spacing: .02em; margin-bottom: 3px; line-height: 1.35;
}
.news-item p { font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: .82rem; font-weight: 500; color: #4b5563; line-height: 1.65; }

/* ════════════════════════════════════════
   SIDEBAR
════════════════════════════════════════ */
.sidebar { display: flex; flex-direction: column; gap: 16px; }
.psmis-card {
    background: linear-gradient(160deg, var(--navy) 0%, var(--navy-mid) 100%);
    border-radius: 10px; padding: 20px;
    box-shadow: 0 6px 24px rgba(15,31,61,.3);
    border: 1px solid rgba(255,255,255,.06);
}
.psmis-icon {
    width: 44px; height: 44px; border-radius: 10px;
    background: rgba(190,30,45,.3);
    display: flex; align-items: center; justify-content: center; margin-bottom: 10px;
}
.psmis-icon svg { width: 22px; height: 22px; fill: #fff; }
.psmis-card h4 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1rem; font-weight: 800; color: #fff;
    letter-spacing: .06em; text-transform: uppercase; margin-bottom: 6px;
}
.psmis-card p {
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    font-size: .83rem; font-weight: 500; color: rgba(255,255,255,.82);
    line-height: 1.7; margin-bottom: 14px;
}
.psmis-btn {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; border-radius: 6px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: .8rem; font-weight: 800;
    letter-spacing: .06em; text-transform: uppercase;
    color: #fff; background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.18);
    transition: all .18s; text-decoration: none;
}
.psmis-btn svg { width: 14px; height: 14px; fill: currentColor; }
.psmis-btn:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.38); }
.sb-panel {
    background: #fff; border: 1px solid var(--line);
    border-radius: 10px; overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.sb-head {
    display: flex; align-items: center; gap: 8px;
    padding: 11px 14px; background: var(--bg);
    border-bottom: 1px solid var(--line);
}
.sb-head svg { width: 15px; height: 15px; fill: var(--red); flex-shrink: 0; }
.sb-head h4 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: .85rem; font-weight: 800; color: #111827;
    letter-spacing: .08em; text-transform: uppercase;
}
.sb-link {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-bottom: 1px solid var(--line);
    color: var(--ink-2); transition: background .12s;
}
.sb-link:last-child { border-bottom: none; }
.sb-link:hover { background: var(--bg); }
.sb-link-icon {
    width: 30px; height: 30px; border-radius: 6px;
    background: #f1f5f9; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: all .15s;
}
.sb-link-icon svg { width: 14px; height: 14px; fill: var(--red); }
.sb-link:hover .sb-link-icon { background: var(--red); }
.sb-link:hover .sb-link-icon svg { fill: #fff; }
.sb-link-text { flex: 1; min-width: 0; }
.sb-link-text span {
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    display: block; font-size: .83rem; font-weight: 700; color: #1f2937;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-link-text small { display: block; font-size: .73rem; font-weight: 500; color: #6b7280; }
.sb-link-arrow { width: 18px; height: 18px; fill: var(--ink-4); flex-shrink: 0; transition: fill .15s; }
.sb-link-arrow svg { width: 18px; height: 18px; fill: inherit; }
.sb-link:hover .sb-link-arrow { fill: var(--red); }

/* ════════════════════════════════════════
   ABOUT SWABI
════════════════════════════════════════ */
.about-section { background: #fff; padding: 40px 20px; border-top: 1px solid var(--line); }
.about-inner   { max-width: 1200px; margin: 0 auto; }
.about-grid    { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.about-text p  { font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: .9rem; color: #1f2937; line-height: 1.88; margin-bottom: 14px; font-weight: 500; text-align: justify; text-justify: inter-word; hyphens: auto; }
.about-facts   { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-top: 18px; }
.about-fact {
    text-align: center; padding: 14px 8px;
    background: var(--bg); border-radius: 8px; border: 1px solid var(--line);
    transition: border-color .15s, box-shadow .15s;
}
.about-fact:hover { border-color: var(--red); box-shadow: 0 4px 12px rgba(190,30,45,.1); }
.about-fact-val {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.55rem; font-weight: 900; color: var(--red); line-height: 1;
}
.about-fact-lbl {
    font-size: .68rem; color: #4b5563;
    text-transform: uppercase; letter-spacing: .07em; font-weight: 700; margin-top: 3px;
    font-family: 'Barlow Condensed', sans-serif;
}
.map-container { border-radius: 10px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 4px 20px rgba(0,0,0,.08); }
.map-header {
    display: flex; align-items: center; gap: 8px; padding: 10px 14px;
    background: linear-gradient(135deg, var(--navy), var(--navy-mid));
    border-bottom: 2px solid var(--red);
}
.map-header svg { width: 13px; height: 13px; fill: var(--gold); flex-shrink: 0; }
.map-header span {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: .78rem; font-weight: 700; color: #fff;
    letter-spacing: .06em; text-transform: uppercase; flex: 1;
}
.map-header a {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .68rem; color: rgba(255,255,255,.55);
    letter-spacing: .04em; text-transform: uppercase; font-weight: 600;
    font-family: 'Barlow Condensed', sans-serif; transition: color .15s;
}
.map-header a svg { width: 10px; height: 10px; fill: currentColor; }
.map-header a:hover { color: var(--gold); }
.map-frame { width: 100%; height: 220px; border: none; display: block; }
.map-footer {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 14px; background: var(--bg); border-top: 1px solid var(--line);
}
.map-footer svg { width: 11px; height: 11px; fill: var(--ink-4); }
.map-footer span { font-size: .68rem; color: var(--ink-4); }

/* ════════════════════════════════════════
   DOWNLOADS
════════════════════════════════════════ */
.downloads-section { background: var(--bg); padding: 40px 20px; border-top: 1px solid var(--line); }
.downloads-inner   { max-width: 1200px; margin: 0 auto; }
.downloads-grid    { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.downloads-section .sb-head h4 { color: #111827; font-size: .88rem; font-weight: 800; }
.downloads-section .sb-link-text span { color: #1f2937; font-size: .83rem; font-weight: 600; }
.downloads-section .sb-link-text small { color: #6b7280; font-size: .73rem; }

/* ════════════════════════════════════════
   FACEBOOK WIDGET — Fix oversized icon
════════════════════════════════════════ */
.fb-sidebar-panel .sb-head svg { fill: #1877f2 !important; width: 15px !important; height: 15px !important; }

.fb-widget-wrap {
    padding: 0;
    background: #f0f2f5;
    border-bottom: 1px solid var(--line);
    min-height: 380px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}
/* Kill any raw SVG that appears when SDK fails to load */
.fb-widget-wrap > svg,
.fb-widget-wrap noscript svg { display: none !important; }

/* Constrain FB iframe — fill the full panel width */
.fb-widget-wrap .fb-page {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    display: block !important;
}
.fb-widget-wrap .fb-page > span,
.fb-widget-wrap .fb-page iframe {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    display: block !important;
}

/* Responsive */
@media (max-width: 1024px) {
    .fb-widget-wrap { min-height: 340px; }
}
@media (max-width: 768px) {
    .fb-widget-wrap { min-height: 420px; }
}
@media (max-width: 480px) {
    .fb-widget-wrap { min-height: 380px; }
}

.fb-fallback-link {
    display: flex; align-items: center; gap: 8px;
    color: #1877f2; font-weight: 600; font-size: .85rem;
    padding: 16px; text-decoration: none; align-self: center;
}
.fb-fallback-link svg { display: inline-block !important; width: 18px !important; height: 18px !important; fill: #1877f2; }

.fb-widget-footer { padding: 10px 14px; background: #fff; }
.fb-visit-btn {
    display: flex; align-items: center; gap: 7px; padding: 9px 14px;
    background: #1877f2; color: #fff; border-radius: 7px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: .82rem; font-weight: 800; letter-spacing: .06em;
    text-transform: uppercase; text-decoration: none; transition: background .15s;
}
.fb-visit-btn svg { width: 14px !important; height: 14px !important; fill: #fff; display: inline-block !important; }
.fb-visit-btn:hover { background: #1565d8; }

/* ════════════════════════════════════════
   ABOUT US — Steel Blue-Grey + Segoe UI
════════════════════════════════════════ */

/* Font stack: Segoe UI (Windows), SF Pro (Mac), then system fallbacks */
:root {
    --font-pro: 'Segoe UI', 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
    --font-pro-condensed: 'Segoe UI', Arial Narrow, Arial, sans-serif;
    --steel-bg-1: #1e2a35;
    --steel-bg-2: #263544;
    --steel-bg-3: #1a2530;
    --steel-accent: #7dd3fc;
    --steel-card-border: rgba(125,211,252,.14);
    --steel-card-bg: rgba(125,211,252,.05);
}

.aboutus-section {
    background: linear-gradient(140deg, var(--steel-bg-1) 0%, var(--steel-bg-2) 50%, var(--steel-bg-3) 100%);
    padding: 64px 20px 72px;
    position: relative; overflow: hidden;
    font-family: var(--font-pro);
}

/* Background glow orbs */
.aboutus-section::before {
    content: '';
    position: absolute; top: -100px; left: -60px;
    width: 440px; height: 440px; border-radius: 50%;
    background: radial-gradient(circle, rgba(190,30,45,.12) 0%, transparent 70%);
    pointer-events: none; animation: sorb1 9s ease-in-out infinite;
}
.aboutus-section::after {
    content: '';
    position: absolute; bottom: -80px; right: -60px;
    width: 380px; height: 380px; border-radius: 50%;
    background: radial-gradient(circle, rgba(125,211,252,.08) 0%, transparent 70%);
    pointer-events: none; animation: sorb2 11s ease-in-out infinite;
}
@keyframes sorb1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(30px,25px)} }
@keyframes sorb2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-25px,-18px)} }

/* Subtle grid texture */
.aboutus-inner {
    max-width: 1200px; margin: 0 auto;
    position: relative; z-index: 2;
    font-family: var(--font-pro);
}
.aboutus-inner::before {
    content: '';
    position: absolute; inset: -40px;
    background-image:
        linear-gradient(rgba(125,211,252,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(125,211,252,.03) 1px, transparent 1px);
    background-size: 44px 44px;
    pointer-events: none; z-index: 0;
    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
}

/* Section title */
.aboutus-title .section-title-bar {
    background: var(--gold);
    box-shadow: 0 0 10px rgba(201,162,54,.5);
}
.aboutus-title h3 {
    color: #e2f4fc;
    font-family: var(--font-pro);
    font-size: 1.1rem; font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase;
}
.aboutus-title .section-title-line {
    background: linear-gradient(to right, rgba(125,211,252,.35), transparent);
}

.aboutus-grid {
    display: grid; grid-template-columns: repeat(3,1fr);
    gap: 20px; position: relative; z-index: 1;
}

/* Glass cards */
.aboutus-card {
    padding: 30px 24px;
    background: var(--steel-card-bg);
    border: 1px solid var(--steel-card-border);
    border-radius: 14px;
    position: relative; overflow: hidden;
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
    backdrop-filter: blur(10px);
    box-shadow:
        0 4px 20px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.06);
    font-family: var(--font-pro);
}

/* Top shimmer line */
.aboutus-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(125,211,252,.7) 40%,
        rgba(201,162,54,.7) 70%,
        transparent 100%);
    opacity: 0; transition: opacity .3s ease;
}

/* Inner glow orb */
.aboutus-card::after {
    content: '';
    position: absolute; top: -30px; right: -30px;
    width: 100px; height: 100px; border-radius: 50%;
    background: radial-gradient(circle, rgba(125,211,252,.1) 0%, transparent 70%);
    transition: all .4s ease; pointer-events: none;
}

.aboutus-card:hover {
    transform: translateY(-7px);
    border-color: rgba(125,211,252,.35);
    box-shadow:
        0 18px 50px rgba(0,0,0,.35),
        0 0 30px rgba(125,211,252,.1),
        0 0 60px rgba(201,162,54,.06),
        inset 0 1px 0 rgba(255,255,255,.1);
}
.aboutus-card:hover::before { opacity: 1; }
.aboutus-card:hover::after {
    transform: scale(1.6);
    background: radial-gradient(circle, rgba(125,211,252,.14) 0%, transparent 70%);
}

/* Card icon */
.aboutus-card-icon {
    width: 50px; height: 50px; border-radius: 11px;
    background: linear-gradient(135deg, #BE1E2D, #6b0000);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 18px;
    box-shadow: 0 4px 18px rgba(190,30,45,.45), inset 0 1px 0 rgba(255,255,255,.15);
    transition: box-shadow .3s, transform .3s;
}
.aboutus-card:hover .aboutus-card-icon {
    box-shadow: 0 6px 26px rgba(190,30,45,.65), 0 0 30px rgba(190,30,45,.25), inset 0 1px 0 rgba(255,255,255,.2);
    transform: scale(1.06);
}
.aboutus-card-icon svg { width: 22px; height: 22px; fill: #fff; }

/* Card heading */
.aboutus-card h4 {
    font-family: var(--font-pro);
    font-size: 1rem; font-weight: 700;
    color: #e2f4fc;
    letter-spacing: .04em; text-transform: uppercase;
    margin-bottom: 11px; line-height: 1.25;
    transition: color .3s;
}
.aboutus-card:hover h4 { color: #fff; }

/* Card body */
.aboutus-card p {
    font-family: var(--font-pro);
    font-size: .86rem; color: rgba(226,244,252,.72);
    line-height: 1.78; font-weight: 500;
    transition: color .3s;
}
.aboutus-card:hover p { color: rgba(226,244,252,.78); }

/* ════════════════════════════════════════
   FOOTER — Steel Blue-Grey to match
════════════════════════════════════════ */
.footer {
    background: #131d25;
    border-top: 1px solid rgba(255,255,255,.06);
    position: relative; overflow: hidden;
    font-family: var(--font-pro);
}

/* Glow bar at top */
.footer::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        #BE1E2D 20%,
        #7dd3fc 50%,
        #C9A236 80%,
        transparent 100%);
    box-shadow: 0 0 16px rgba(125,211,252,.3), 0 0 32px rgba(190,30,45,.2);
}

.footer-main {
    max-width: 1200px; margin: 0 auto;
    display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px; padding: 52px 24px 40px;
    position: relative; z-index: 1;
}

/* Brand column */
.footer-about h4 {
    font-family: var(--font-pro);
    font-size: 1.1rem; font-weight: 700;
    color: #e2f4fc;
    letter-spacing: .04em; text-transform: uppercase;
    margin-bottom: 13px;
}
.footer-about > p {
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    font-size: .84rem; color: rgba(226,244,252,.55);
    line-height: 1.82; margin-bottom: 16px; font-weight: 500;
}
.footer-about-address {
    border-top: 1px solid rgba(125,211,252,.1);
    padding-top: 15px; margin-top: 15px;
}
.footer-about-label {
    font-family: var(--font-pro);
    font-size: .72rem; font-weight: 700; color: #C9A236;
    letter-spacing: .08em; text-transform: uppercase;
    display: block; margin-bottom: 4px;
    text-shadow: 0 0 10px rgba(201,162,54,.35);
}
.footer-about-value {
    font-family: var(--font-pro);
    font-size: .82rem; font-weight: 500; color: rgba(226,244,252,.65); line-height: 1.65;
}

/* Column headings */
.footer-col h5 {
    font-family: var(--font-pro);
    font-size: .8rem; font-weight: 700; color: #e2f4fc;
    letter-spacing: .06em; text-transform: uppercase;
    margin-bottom: 15px; padding-bottom: 10px;
    border-bottom: 1px solid rgba(125,211,252,.1);
    position: relative;
}
.footer-col h5::after {
    content: '';
    position: absolute; bottom: -1px; left: 0;
    width: 24px; height: 1px;
    background: #7dd3fc;
    box-shadow: 0 0 6px rgba(125,211,252,.6);
}

/* Column links */
.footer-col a {
    font-family: var(--font-pro);
    display: flex; align-items: center; gap: 7px;
    font-size: .81rem; color: rgba(226,244,252,.55);
    padding: 5px 0; font-weight: 500;
    transition: all .2s; letter-spacing: .01em;
}
.footer-col a svg { width: 10px; height: 10px; fill: rgba(190,30,45,.7); flex-shrink: 0; transition: all .2s; }
.footer-col a:hover { color: rgba(226,244,252,.95); padding-left: 5px; font-weight: 600; }
.footer-col a:hover svg { fill: #7dd3fc; filter: drop-shadow(0 0 3px rgba(125,211,252,.5)); }

/* Footer bar */
.footer-bar {
    max-width: 1200px; margin: 0 auto; padding: 16px 24px;
    border-top: 1px solid rgba(125,211,252,.07);
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 8px;
    background: rgba(15,25,35,.5);
    position: relative; z-index: 1;
}
.footer-bar p {
    font-family: var(--font-pro);
    font-size: .75rem; color: rgba(226,244,252,.45);
    font-weight: 500; letter-spacing: .02em;
}
.footer-bar-right {
    font-family: var(--font-pro);
    display: flex; align-items: center; gap: 6px;
    font-size: .75rem; color: rgba(226,244,252,.45);
}
.footer-bar-right svg { width: 12px; height: 12px; fill: #C9A236; opacity: .7; filter: drop-shadow(0 0 4px rgba(201,162,54,.4)); }

/* Powered by */
.footer-powered {
    max-width: 1200px; margin: 0 auto;
    padding: 13px 24px 20px;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    border-top: 1px solid rgba(125,211,252,.05);
    background: rgba(15,25,35,.6);
    position: relative; z-index: 1;
}
.footer-powered-text {
    font-family: var(--font-pro);
    font-size: .72rem; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase;
    color: rgba(226,244,252,.2);
}
.footer-powered-name {
    font-family: var(--font-pro);
    font-size: .76rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    color: #C9A236;
    background: rgba(201,162,54,.07);
    border: 1px solid rgba(201,162,54,.2);
    padding: 3px 13px; border-radius: 4px;
    transition: all .25s;
    box-shadow: 0 0 10px rgba(201,162,54,.08);
}
.footer-powered-name:hover {
    background: rgba(201,162,54,.15);
    border-color: rgba(201,162,54,.45);
    color: #e6b820;
    box-shadow: 0 0 18px rgba(201,162,54,.22);
}
.footer-powered-dot {
    width: 4px; height: 4px; border-radius: 50%;
    background: var(--gold); opacity: .35; flex-shrink: 0;
}

/* Urdu overrides */
[lang="ur"] .aboutus-card h4 {
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif !important;
    color: #e2f4fc !important; font-size: 1.2rem !important;
    line-height: 2.4 !important; letter-spacing: 0 !important; text-transform: none !important;
}
[lang="ur"] .aboutus-card p {
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif !important;
    color: rgba(226,244,252,.65) !important; font-size: 1rem !important;
    line-height: 2.6 !important; direction: rtl !important; text-align: right !important;
}
[lang="ur"] .aboutus-title h3 { color: #e2f4fc !important; }
[lang="ur"] .footer-about h4 { font-family: 'Barlow Condensed', sans-serif !important; color: #e2f4fc !important; }
[lang="ur"] .footer-about > p,
[lang="ur"] .footer-about-value {
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif !important;
    font-size: 1rem !important; line-height: 2.5 !important;
    color: rgba(226,244,252,.55) !important;
    direction: rtl !important; text-align: right !important;
}
[lang="ur"] .footer-col h5 {
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif !important;
    color: #e2f4fc !important; font-size: 1.05rem !important;
    line-height: 2.2 !important; letter-spacing: 0 !important; text-transform: none !important;
}
[lang="ur"] .footer-col a {
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif !important;
    font-size: .98rem !important; color: rgba(226,244,252,.45) !important;
    line-height: 2.2 !important; direction: rtl !important; justify-content: flex-end !important;
}
[lang="ur"] .footer-col a:hover { color: rgba(226,244,252,.9) !important; }

/* Responsive */
@media (max-width: 768px) {
    .aboutus-grid { grid-template-columns: 1fr; gap: 14px; }
    .footer-main  { grid-template-columns: 1fr; gap: 22px; }
    .aboutus-section { padding: 42px 16px 50px; }
    .footer-main  { padding: 36px 16px 28px; }
}
@media (max-width: 480px) {
    .aboutus-card { padding: 22px 16px; }
    .footer-main  { padding: 28px 14px 20px; }
}

/* ════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════ */
@media (max-width: 1024px) {
    .main-grid { grid-template-columns: 1fr; align-items: start; }
    .sidebar   { display: grid; grid-template-columns: repeat(2,1fr); }
    .fb-sidebar-panel { grid-column: 1 / -1; }
    .footer-main { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
    .hero-split .hero-text  { flex: 0 0 50%; padding: 28px 24px 28px 24px; }
    .hero-slider-col { margin-left: 0; height: clamp(240px, 40vw, 380px); }
}
@media (max-width: 768px) {
    .nav-hamburger { display: flex; }
    .nav-item, .pub-nav-dropdown, .pub-nav-dd-trigger, .nav-psmis { display: none !important; }
    .hero { padding: 32px 16px 28px; }
    .hero-content { flex-direction: column; gap: 24px; }
    .hero-split   { flex-direction: column; gap: 20px; }
    .hero-split .hero-text { flex: none; padding-right: 0; }
    .hero-split .hero-text::after { display: none; }
    .hero-slider-col { margin-left: 0; height: 260px; border-radius: 10px; width: 100%; }
    .hero-badge-wrap { display: none; }
    .hero-text p { max-width: 100%; }
    .hero-btns   { gap: 10px; }
    .hero-btn    { padding: 11px 18px; }
    .site-header { padding: 12px 14px; gap: 12px; min-height: 64px; }
    .logo-badge  { width: 52px; height: 52px; min-width: 52px; }
    .logo-badge img { width: 42px; height: 42px; }
    .header-text h1 { font-size: clamp(.88rem, 4vw, 1.1rem) !important; white-space: normal; line-height: 1.2 !important; }
    .subtitle-full  { display: none; }
    .subtitle-short { display: inline; }
    .header-right   { display: none; }
    .topbar { height: auto; min-height: 34px; flex-wrap: wrap; }
    .topbar-left { flex-wrap: wrap; }
    .topbar-link { font-size: .62rem; padding: 0 6px; height: 34px; }
    .quick-links-inner { display: grid; grid-template-columns: repeat(3,1fr); }
    .quick-link-item { border-bottom: 1px solid var(--line); padding: 14px 8px; }
    .ql-icon { width: 34px; height: 34px; }
    .ql-icon svg { width: 17px; height: 17px; }
    .stats-band { grid-template-columns: repeat(2,1fr); }
    .stat-item  { padding: 14px 8px; }
    .dpo-card-body { flex-direction: column; align-items: center; }
    .dpo-message   { min-width: 0; width: 100%; }
    .dpo-photo     { width: 220px !important; height: 275px !important; }
    .about-grid    { grid-template-columns: 1fr; }
    .about-facts   { grid-template-columns: repeat(2,1fr); }
    .downloads-grid { grid-template-columns: 1fr; }
    .aboutus-grid   { grid-template-columns: 1fr; }
    .footer-main    { grid-template-columns: 1fr; gap: 20px; }
    .sidebar        { grid-template-columns: 1fr; }
    .fb-sidebar-panel { grid-column: 1 / -1; }
    .ticker-label   { font-size: .62rem; padding: 0 10px 0 10px; padding-right: 20px; }
}
@media (max-width: 480px) {
    .hero { padding: 24px 14px 22px; }
    .hero-text h2    { font-size: clamp(1.6rem, 8vw, 2.2rem); }
    .hero-slider-col { height: 210px; }
    .dpo-photo       { width: 270px !important; height: 330px !important; }
    .stats-band { grid-template-columns: repeat(2,1fr); }
    .quick-links-inner { grid-template-columns: repeat(2,1fr); }
    .quick-link-item:nth-child(5) { border-right: none; }
    .about-facts { grid-template-columns: repeat(2,1fr); }
    /* dpo-photo size set with !important in responsive blocks above */
    .news-item   { gap: 10px; padding: 12px 14px; }
    .nd          { font-size: 1.2rem; }
    .psmis-card  { padding: 16px; }
    .footer-main { padding: 24px 16px 20px; }
    .footer-bar  { flex-direction: column; align-items: flex-start; gap: 4px; }
    .logo-badge  { width: 44px; height: 44px; min-width: 44px; }
    .logo-badge img { width: 36px; height: 36px; }
    .header-text h1 { font-size: clamp(.8rem, 4.5vw, .98rem) !important; }
}

/* ════════════════════════════════════════
   MISSING MOBILE FIXES
════════════════════════════════════════ */
@media (max-width: 1024px) {
    .main-grid { grid-template-columns: 1fr; }
    .sidebar   { display: grid; grid-template-columns: repeat(2,1fr); }
    .fb-sidebar-panel { grid-column: 1 / -1; }
    .footer-main { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    .main-grid { padding: 16px 12px 0; gap: 16px; }
    .sidebar   { grid-template-columns: 1fr; gap: 14px; }
    .topbar-left { flex-wrap: wrap; flex: 1; min-width: 0; padding: 0 8px; }
    .topbar-right { padding: 0 8px; }
    .topbar-link { font-size: .6rem; padding: 0 5px; height: 32px; }

    /* DPO card */
    .dpo-card-body { flex-direction: column; align-items: center; gap: 16px; }
    .dpo-message   { width: 100%; min-width: 0; }
    .dpo-photo     { width: 200px !important; height: 250px !important; }
    .dpo-message-footer { flex-wrap: wrap; gap: 10px; }
    .dpo-insignia-wrap  { width: 60px !important; height: 60px !important; }

    /* Stats */
    .stats-band  { grid-template-columns: repeat(2,1fr); }
    .stat-item   { padding: 14px 8px; }
    .stat-num    { font-size: 1.8rem; }

    /* About section */
    .about-grid  { grid-template-columns: 1fr; gap: 20px; }
    .about-facts { grid-template-columns: repeat(2,1fr); }
    .about-section { padding: 28px 14px; }

    /* Downloads */
    .downloads-grid    { grid-template-columns: 1fr; }
    .downloads-section { padding: 28px 14px; }

    /* Footer */
    .footer-main { grid-template-columns: 1fr; gap: 20px; padding: 32px 16px 24px; }
    .footer-bar  { flex-direction: column; align-items: flex-start; gap: 4px; }

   /* Topbar — always visible on mobile */
    .topbar { display: flex !important; height: auto !important; min-height: 36px !important; flex-wrap: wrap !important; }
    /* Nav hamburger */
    .nav-hamburger { display: flex; }
    .nav-item, .pub-nav-dropdown, .pub-nav-dd-trigger, .nav-psmis { display: none !important; }

    /* Header */
    .site-header { padding: 10px 12px; gap: 10px; min-height: 58px; }
    .logo-badge  { width: 48px; height: 48px; min-width: 48px; }
    .logo-badge img { width: 38px; height: 38px; }
    .header-text h1 { font-size: clamp(.82rem, 4vw, 1rem) !important; white-space: normal; }
    .subtitle-full  { display: none; }
    .subtitle-short { display: inline; }
    .header-right   { display: none; }

    /* Hero */
    .hero { padding: 24px 14px 28px; }
    .hero-content { flex-direction: column; gap: 20px; }
    .hero-split   { flex-direction: column; }
    .hero-split .hero-text { flex: none; width: 100%; padding: 22px 16px; }
    .hero-split .hero-text::after { display: none; }
    .hero-slider-col { width: 100%; height: 240px; margin-left: 0; border-radius: 10px; }
    .hero-badge-wrap { display: none; }
    .hero-text h2 { font-size: clamp(1.7rem, 6vw, 2.4rem); }
    .hero-text p  { max-width: 100%; font-size: .88rem; margin-bottom: 20px; }
    .hero-btns    { gap: 10px; }
    .hero-btn     { padding: 10px 16px; font-size: .82rem; }

    /* Ticker */
    .ticker-label { font-size: .6rem; padding: 0 10px 0 10px; padding-right: 18px; }
    .ticker-inner span { font-size: .68rem; padding: 0 20px; }

    /* Quick links */
    .quick-links-inner { grid-template-columns: repeat(3,1fr); }
    .quick-link-item   { padding: 12px 6px; }
    .ql-icon { width: 32px; height: 32px; }
    .ql-icon svg { width: 15px; height: 15px; }
    .quick-link-item span { font-size: .62rem; }

    /* News */
    .news-item { gap: 10px; padding: 12px 14px; }
    .nd { font-size: 1.2rem; }

    /* Sidebar panels */
    .psmis-card { padding: 16px; }
    .sb-link    { padding: 9px 12px; }

    /* About us section */
    .aboutus-section { padding: 36px 14px 44px; }
    .aboutus-grid    { grid-template-columns: 1fr; gap: 12px; }
    .aboutus-card    { padding: 22px 16px; }
}

@media (max-width: 480px) {
    .main-grid { padding: 12px 10px 0; }
    .hero-slider-col { height: 200px; }
    .hero-text h2 { font-size: clamp(1.5rem, 7vw, 2rem); }
    .stats-band { grid-template-columns: repeat(2,1fr); }
    .stat-num   { font-size: 1.6rem; }
    .about-facts { grid-template-columns: repeat(2,1fr); }
    .quick-links-inner { grid-template-columns: repeat(2,1fr); }
    .dpo-photo { width: 180px !important; height: 225px !important; }
    .footer-main { padding: 24px 12px 18px; }
    .logo-badge { width: 42px; height: 42px; min-width: 42px; }
    .logo-badge img { width: 34px; height: 34px; }
}