/* =========================
   PJ CITY PLAN • style.css
   (CLEAN • ZOOM SAFE • Segoe UI Only)
   ========================= */

/* =========================
   1) TOKENS / VARIABLES
   ========================= */
:root{
  /* Fonts */
  --font-body: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --font-heading: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;

  /* Brand */
  --pj-blue:#003399;
  --pj-green:#009966;

  /* UI */
  --sv-ink:#0b1324;
  --sv-muted:#64748b;
  --sv-bg:#f6f8fc;
  --sv-card:#ffffff;
  --sv-border:rgba(15,23,42,.12);

  --radius-pill:999px;
  --radius-xl:24px;

  --shadow-soft: 0 10px 26px rgba(2,6,23,.10);
  --shadow-strong:0 18px 40px rgba(2,6,23,.10);

  /* Optional crest watermark (set from Blade) */
  --pj-crest-url: none;
}

/* =========================
   2) BASE
   ========================= */
html,body{ height:100%; }
body{
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--sv-ink);
  margin:0;
  background: var(--sv-bg);
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1,h2,h3,h4,h5,h6{
  font-family: var(--font-heading);
  color: var(--sv-ink);
  margin:0;
  text-rendering: optimizeLegibility;
}
h1{ font-weight:700; letter-spacing:-0.03em; line-height:1.05; }
h2{ font-weight:650; letter-spacing:-0.025em; line-height:1.12; }
h3{ font-weight:600; letter-spacing:-0.02em; line-height:1.18; }
h4{ font-weight:600; letter-spacing:-0.01em; line-height:1.25; }
h5,h6{ font-weight:600; letter-spacing:0; line-height:1.3; }

p{
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(11,19,36,.78);
  margin: 0 0 12px;
}

/* a11y helper */
.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

/* =========================
   3) PAGE BACKGROUND
   ========================= */
.pj-bg-solvior{
  position: relative;
  min-height: 100vh;
  background:
    radial-gradient(1200px 600px at 85% 10%, rgba(0,51,153,.14), transparent 60%),
    radial-gradient(900px 500px at 10% 0%, rgba(0,153,102,.10), transparent 55%),
    linear-gradient(180deg, #f1f5ff 0%, #f6f8fc 55%, #ffffff 100%);
  overflow:hidden;
}

/* Crest watermark (optional) */
.pj-bg-solvior::after{
  content:'';
  position:absolute;
  top:-160px;
  right:-170px;
  width:680px;
  height:680px;
  background-image: var(--pj-crest-url);
  background-repeat:no-repeat;
  background-size: contain;
  background-position:center;
  opacity:.06;
  transform: rotate(-8deg);
  z-index:1;
  pointer-events:none;
}
.pj-page{ position:relative; z-index:5; }

/* =========================
   4) NAVBAR (WIDE • ZOOM SAFE)
   ========================= */
.pj-top-pill-wrap{
  padding: 7px 24px;
  position: relative;
  z-index: 50;
}
.pj-top-pill-wrap,
.pj-top-pill{ overflow: visible; }

.pj-top-pill{
  position: relative;
  max-width: none;
  margin: 0;

  background: var(--sv-card);
  border-radius: var(--radius-pill);
  border:1px solid var(--sv-border);
  box-shadow: var(--shadow-strong);

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;

  padding: 14px 20px;
  min-height: 72px;
}

/* BRAND */
.pj-brand{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  padding-left:6px;
}
.pj-brand a{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}
.pj-brand img{
  height:56px;
  width:auto;
  display:block;
}

/* BURGER */
.pj-burger{
  display:none;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  cursor:pointer;
  width:46px;
  height:46px;
  border-radius:14px;
}
.pj-burger span{
  display:block;
  height:2px;
  background:#0f172a;
  margin:7px 12px;
  border-radius:2px;
  opacity:.9;
}

/* ACTIONS */
.pj-actions{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:10px;
  padding-right:6px;
}
.pj-mini{
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
  text-decoration:none;
  font-weight:700;
  color: rgba(11,19,36,.82);
  padding:10px 0;
}
.pj-mini:hover{ color:var(--sv-ink); }

.badge-ai{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  background:#0ea5e9;
  color:#fff;
  font-size:10px;
  padding:2px 6px;
  border-radius:999px;
  transform: translateY(-1px);
}

.pj-cta{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding: 10px 14px 10px 12px;
  border-radius:999px;
  text-decoration:none;
  background:#071428;
  color:#fff;
  font-weight:800;
  white-space:nowrap;
  box-shadow: 0 14px 36px rgba(2,6,23,.22);
}
.pj-cta-icon{
  width:40px;
  height:40px;
  border-radius:999px;
  background:#1d4ed8;
  display:grid;
  place-items:center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}

/* =========================
   4A) NAV + MEGA (CLEAN • MATCH BLADE)
   - Fix long text overlap (L2/L3 clamp + min-width:0)
   ========================= */
.pj-top-pill,
.pj-nav,
.pj-actions,
.pj-mega,
.pj-mega-btn,
.pj-l2-item,
.pj-r3-item,
.pj-r3-title,
.pj-mega-l2,
.pj-mega-r3{ min-width:0; }

/* NAV (L1) */
.pj-nav{
  flex: 1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: clamp(10px, 2.0vw, 18px);

  white-space: nowrap; /* L1 kekal 1 baris */
  overflow: visible;
  scrollbar-width:none;
  -webkit-overflow-scrolling: touch;
}
.pj-nav::-webkit-scrollbar{ display:none; }

.pj-home-icon{
  padding: 10px 6px;
  opacity:.92;
}

.pj-nav > a,
.pj-mega{ flex:0 0 auto; }

.pj-nav a,
.pj-mega-btn{
  border:0;
  background:transparent;
  cursor:pointer;

  font-family: var(--font-body);
  font-weight:600;
  color: rgba(11,19,36,.82);
  text-decoration:none;

  padding: 10px 0;
  border-radius:0;

  display:inline-flex;
  align-items:center;
  gap:8px;

  line-height:1;
  font-size:18px;
  letter-spacing:.02em;
}
.pj-nav a:hover,
.pj-mega-btn:hover{ color: var(--sv-ink); }

.pj-nav a.is-active{
  font-weight:800;
  color: var(--sv-ink);
  position:relative;
}
/* L1 label: 1 line ellipsis (pill tak naik tinggi) */
.pj-nav > a,
.pj-mega-btn > span:first-child{
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* MEGA */
.pj-mega{ position:relative; display:inline-flex; align-items:center; }
.pj-mega-caret{
  font-size:11px;
  opacity:.55;
  transform: translateY(1px);
}

/* Mega panel full width align bawah pill */
.pj-mega-panel{
  position:absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;

  background: #fff;
  border: 1px solid var(--sv-border);
  border-radius: 22px;
  box-shadow: 0 20px 50px rgba(2,6,23,.20);

  padding: 16px;
  z-index: 9999;

  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  pointer-events: none;
  transition: .25s ease;

  max-height: min(72vh, 620px);
  overflow: hidden; /* scroll dibuat di inner */
}
.pj-mega.is-open .pj-mega-panel{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

@media (hover: hover){
  body:not(.nav-collapsed) .pj-mega:hover .pj-mega-panel,
  body:not(.nav-collapsed) .pj-mega:focus-within .pj-mega-panel{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }
}

/* Mega layout */
.pj-mega-shell{
  display:grid;
  grid-template-columns: 420px 1fr; /* kiri lebih besar */
  gap:18px;
  min-height: 260px;
  height: 100%;
}

/* L2 */
.pj-mega-l2{
  background: rgba(15,23,42,.03);
  border: 1px solid rgba(15,23,42,.06);
  border-radius:14px;
  padding: 8px;
  overflow:auto;
  max-height: 100%;
}
.pj-l2-item{
  width:100%;
  border:0;
  background:transparent;
  cursor:pointer;
  text-align:left;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  padding: 11px 12px;
  border-radius:12px;

  font-family: var(--font-body);
  font-weight:700;
  color: rgba(11,19,36,.82);
  letter-spacing:.01em;
}
.pj-l2-item:hover{
  background: rgba(0,51,153,.08);
  color: var(--sv-ink);
}
.pj-l2-item.is-active{
  background: rgba(0,51,153,.12);
  color: var(--sv-ink);
}

/* clamp 2 line untuk text span pertama (caret kekal) */
.pj-l2-item > span:first-child{
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;

  line-height: 1.25;
  min-width:0;
}
.pj-l2-caret{
  flex:0 0 auto;
  opacity:.55;
  transform: translateY(1px);
}

/* R3 */
.pj-mega-r3{
  border:1px solid rgba(15,23,42,.06);
  border-radius:14px;
  padding: 10px 12px;
  max-height: 100%;
  overflow:auto;
}
.pj-r3-pane{ display:none; }
.pj-r3-pane.is-active{ display:block; }

.pj-r3-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 6px 4px 10px;
  border-bottom:1px solid rgba(15,23,42,.08);
  margin-bottom: 10px;
}
.pj-r3-title{
  font-family: var(--font-heading);
  font-weight:700;
  letter-spacing:-0.01em;
  color: var(--sv-ink);
  text-decoration:none;

  max-width:100%;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pj-r3-title:hover{ color: var(--pj-blue); }

.pj-r3-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.pj-r3-item{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;

  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.3;

  padding: 10px 12px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.08);
  background:#fff;

  text-decoration:none;
  color: rgba(11,19,36,.82);
  font-weight:700;
  letter-spacing:.01em;
}
.pj-r3-item:hover{
  border-color: rgba(0,51,153,.25);
  background: rgba(0,51,153,.06);
  color: var(--sv-ink);
}
.pj-r3-empty{ padding: 6px 4px; }

/* =========================
   4B) ZOOM/LOW-RES SAFE MODE
   - JS toggles body.nav-collapsed when nav doesn't fit
   ========================= */
body.nav-collapsed .pj-nav{ display:none !important; }
body.nav-collapsed .pj-actions{ display:none !important; }
body.nav-collapsed .pj-burger{ display:block !important; margin-left:auto; }

/* if drawer open (mobile), show nav as vertical */
body.nav-open .pj-nav{ display:flex !important; }

/* =========================
   4C) Density tuning
   ========================= */
@media (max-width: 1400px){
  .pj-top-pill{ padding: 12px 18px; min-height: 66px; }
  .pj-brand img{ height: 52px; }

  .pj-nav a,
  .pj-mega-btn{ font-size: 14px; padding: 9px 0; }

  .pj-cta-icon{ width: 38px; height: 38px; }
}

/* =======================
   5) MOBILE NAV (<=980)
   ======================= */
@media (max-width: 980px){
  .pj-top-pill-wrap{ padding:12px 14px; }

  .pj-top-pill{
    padding:10px 12px;
    min-height:0;
    border-radius:18px;
    gap:10px;
    flex-wrap:wrap;
  }

  .pj-brand img{ height:44px; }

  .pj-burger{
    display:block;
    margin-left:auto;
    width:46px;
    height:46px;
    border-radius:14px;
  }

  .pj-actions{ display:none; }

  .pj-nav{
    order:3;
    width:100%;
    display:none;

    flex-direction:column;
    align-items:stretch;
    gap:0;

    margin-top:8px;
    padding:8px 0;
    border-radius:14px;

    max-height: calc(100vh - 140px);
    overflow-y:auto;
    overflow-x:hidden;
  }

  body.nav-open .pj-nav{
    display:flex;
    background:#0b1324;
  }

  .pj-nav > a{
    display:block;
    padding:14px 16px;
    color:#fff;
    font-weight:800;
    border-bottom:1px solid rgba(255,255,255,.12);
  }

  /* Mega as accordion in mobile */
  .pj-mega{
    width:100%;
    display:flex;
    flex-direction:column;
    border-bottom:1px solid rgba(255,255,255,.12);
    position: static; /* important */
  }
  .pj-mega-btn{
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:14px 16px;
    color:#fff;
    font-weight:800;
  }
  .pj-mega-caret{ opacity:.9; transition: transform .2s ease; }
  .pj-mega.is-open .pj-mega-caret{ transform: rotate(180deg); }

  /* panel full width under pill */
  .pj-top-pill .pj-mega-panel{
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
    min-width: 0;
    border-radius: 22px;
    padding: 16px;
    z-index: 9999;
  }

  .pj-mega-shell{
    grid-template-columns: 1fr;
    gap:8px;
    min-height:0;
    padding: 0 10px;
  }
  .pj-mega-l2,
  .pj-mega-r3{
    background: transparent;
    border: 0;
    padding: 0;
    max-height:none;
  }

  .pj-l2-item{
    color: rgba(255,255,255,.92);
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    margin: 8px 0;
  }
  .pj-l2-item:hover{ background: rgba(255,255,255,.10); }

  .pj-r3-head{ border-color: rgba(255,255,255,.12); }
  .pj-r3-title{ color:#fff; }
  .pj-r3-grid{ grid-template-columns: 1fr; }

  .pj-r3-item{
    color: rgba(255,255,255,.92);
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.10);
  }
  .pj-r3-item:hover{ background: rgba(255,255,255,.10); }
}

/* =========================
   6) HERO (OPTIONAL)
   ========================= */
.pj-hero{ padding:8px 18px 34px; position:relative; z-index:5; }
.pj-hero-wrap{
  max-width:1260px;
  margin:0 auto;
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:28px;
  align-items:center;
}
.pj-hero-left h1{
  font-size: clamp(42px, 5vw, 64px);
  line-height:1.05;
  margin:0;
  color:var(--sv-ink);
  letter-spacing:-.03em;
}
.pj-hero-left h1 .accent{ color:var(--pj-blue); }
.pj-hero-left p{
  margin:18px 0 0;
  font-size:16px;
  color:rgba(11,19,36,.70);
  max-width:580px;
}
.pj-hero-media{
  width:100%;
  min-height:360px;
  background:#fff;
  border-radius: var(--radius-xl);
  overflow:hidden;
  border:1px solid var(--sv-border);
  box-shadow: var(--shadow-strong);
  position:relative;
}
.pj-hero-iframe{
  background:#fff;
  padding:10px;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-strong);
  border:1px solid var(--sv-border);
}
.pj-hero-iframe iframe{
  width:100%;
  height:420px;
  display:block;
  border:0;
  border-radius: calc(var(--radius-xl) - 6px);
  background:#000;
}
@media (min-width: 1100px){
  .pj-hero-media{ min-height:420px; }
}
@media (max-width: 980px){
  .pj-hero-wrap{ grid-template-columns:1fr; }
  .pj-hero-iframe iframe{ height:320px; }
}

/* ===============================
   PJ CITY PLAN • STATS
================================ */
.pj-stats{
  padding: 72px 70px;
  background: #1d4ed8;
}
.pj-stats__head{
  text-align: center;
  max-width: 860px;
  margin: 0 auto 34px;
}
.pj-stats__kicker{
  font-weight: 800;
  letter-spacing: .22em;
  font-size: 12px;
  color: #fff;
}
.pj-stats__title{
  margin: 12px 0;
  font-size: clamp(28px, 3vw, 44px);
  letter-spacing: -0.5px;
  color: #fff;
}
.pj-stats__sub{ color:#fff; }

.pj-stats__grid{
  background:#fff;
  border-radius:18px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  overflow:hidden;
  border:1px solid rgba(0,0,0,.06);
}
.pj-stat{
  padding:34px 28px;
  text-align:left;
  position:relative;
}
.pj-stat + .pj-stat{ border-left:1px solid rgba(0,0,0,.08); }
.pj-stat__value{
  font-size:64px;
  font-weight:900;
  line-height:1;
  color: #1d4ed8;
}
.pj-stat__label{ margin-top:8px; color:#333; }
.pj-stat__dot{
  position:absolute;
  right:-7px;
  top:50%;
  width:12px;
  height:12px;
  border-radius:50%;
  background:#fff;
  border:2px solid #003399;
}
@media(max-width:1024px){
  .pj-stats__grid{ grid-template-columns:repeat(2,1fr); }
  .pj-stat:nth-child(3),
  .pj-stat:nth-child(4){ border-top:1px solid rgba(0,0,0,.08); }
  .pj-stat__dot{ display:none; }
}
@media(max-width:600px){
  .pj-stats{ padding: 56px 18px; }
  .pj-stats__grid{ grid-template-columns:1fr; }
  .pj-stat + .pj-stat{
    border-left:0;
    border-top:1px solid rgba(0,0,0,.08);
  }
}

/* ==========================
   PJ CITY PLAN • LATEST NEWS
========================== */
.sv-news{
  padding: 70px 70px;
}
.sv-news__head{ margin-bottom: 28px; }
.sv-news__head .sv-kicker{
  display:inline-block;
  font-weight: 800;
  letter-spacing: .22em;
  font-size: 12px;
  color: #003399;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.sv-news__head .sv-title{
  margin: 0;
  font-size: clamp(34px, 4vw, 62px);
  line-height: 1.06;
  letter-spacing: -0.8px;
}

/* GRID */
.sv-news-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}
@media (max-width: 1024px){
  .sv-news{ padding: 56px 18px; }
  .sv-news-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .sv-news-grid{ grid-template-columns: 1fr; }
}

/* CARD */
.sv-news-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(10, 20, 40, .06);
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.sv-news-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(10, 20, 40, .10);
}

/* IMAGE */
.sv-news-card__media{
  aspect-ratio: 16 / 9;
  background: #f3f6fb;
  overflow: hidden;
}
.sv-news-card__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sv-news-card__placeholder{
  width: 100%;
  height: 100%;
  background:
    radial-gradient(900px 320px at 20% 20%, rgba(0,51,153,.12), transparent 60%),
    radial-gradient(600px 240px at 80% 10%, rgba(0,153,102,.10), transparent 55%),
    linear-gradient(180deg, #f6f8fc 0%, #eef3fb 100%);
}

/* BODY */
.sv-news-card__body{
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.sv-news-card__meta{
  display:flex;
  align-items:center;
  gap: 10px;
  color: rgba(11,19,36,.55);
  font-size: 13px;
  margin-bottom: 10px;
}
.sv-news-card__title{
  margin: 0 0 10px;
  font-weight: 900;
  letter-spacing: -0.3px;
  line-height: 1.18;
  font-size: 20px;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.sv-news-card__excerpt{
  margin: 0;
  color: rgba(11,19,36,.72);
  line-height: 1.6;
  font-size: 14.5px;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.sv-news-card__footer{
  margin-top: auto;
  padding-top: 14px;
}
.sv-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  color: #0b1324;
  text-decoration: none;
}
.sv-link:hover{ color: #003399; }
.sv-link:visited{ color: #0b1324; }
.sv-link:visited:hover{ color: #003399; }

/* ==========================
  PJ CITY PLAN • FOOTER
========================== */
.pj-footer{ color:#c9d6f2; background:#07162d; }

/* top strip */
.pj-footer__top{
  background:#0b51ff;
  color:#fff;
  padding-left: 70px;
  padding-right: 70px;
}
.pj-footer__topin{
  display:flex;
  gap:24px;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
  flex-wrap:wrap;
}
.pj-footer__topitem{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:220px;
}
.pj-footer__ico{
  width:34px;height:34px;
  display:grid;place-items:center;
  border-radius:10px;
  background: rgba(255,255,255,.16);
}
.pj-footer__toptext{ display:flex; flex-direction:column; line-height:1.1; }
.pj-footer__toptext strong{ font-weight:900; font-size:13px; }
.pj-footer__toptext small{ opacity:.92; }
.pj-footer__contact-link{ color:inherit; text-decoration:none; }
.pj-footer__contact-link:hover{ text-decoration:underline; }

/* main */
.pj-footer__main{ padding:54px 0 34px; }
.pj-footer__grid{
  display:grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap:34px;
  padding-left: 70px;
  padding-right: 70px;
}

/* brand */
.pj-footer__logo{
  display:flex; align-items:center; gap:12px;
  margin-bottom:14px;
}
.pj-footer__mark{
  width:44px;height:44px;
  border-radius:14px;
  background: linear-gradient(135deg, #003399 0%, #009966 100%);
  display:grid; place-items:center;
  font-weight:900;
  color:#fff;
}
.pj-footer__name{ font-weight:900; font-size:18px; color:#fff; }
.pj-footer__tag{ font-size:13px; opacity:.8; margin-top:2px; }
.pj-footer__desc{
  margin:0 0 16px;
  color: rgba(255,255,255,.72);
  line-height:1.65;
  max-width: 460px;
}

.pj-footer__social{ display:flex; gap:10px; }
.pj-soc{
  width:36px;height:36px;border-radius:12px;
  display:grid;place-items:center;
  background: rgba(255,255,255,.08);
  color:#fff;
  text-decoration:none;
  font-weight:800;
}
.pj-soc:hover{ background: rgba(255,255,255,.14); }

/* cols */
.pj-footer__h{
  color:#fff;
  font-weight:900;
  margin: 6px 0 14px;
  font-size:16px;
}
.pj-footer__links{
  list-style:none;
  padding:0;margin:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.pj-footer__links a{
  color: rgba(255,255,255,.72);
  text-decoration:none;
}
.pj-footer__links a:hover{ color:#fff; }

.pj-footer__addr{
  margin:0 0 14px;
  color: rgba(255,255,255,.72);
  line-height:1.65;
}

.pj-footer__mini{ display:flex; flex-wrap:wrap; gap:10px; }
.pj-footer__miniLink{
  font-size:13px;
  color: rgba(255,255,255,.72);
  text-decoration:none;
}
.pj-footer__miniLink:hover{ color:#fff; }

/* bottom */
.pj-footer__bottom{
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  padding-left: 70px;
  padding-right: 70px;
}
.pj-footer__bottomin{
  padding:16px 0;
  display:flex;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  color: rgba(255,255,255,.7);
}
.pj-footer__bottomlinks{ display:flex; gap:10px; align-items:center; }
.pj-footer__bottomlinks a{
  color: rgba(255,255,255,.72);
  text-decoration:none;
}
.pj-footer__bottomlinks a:hover{ color:#fff; }

/* responsive */
@media (max-width: 1024px){
  .pj-footer__top{ padding-left:18px; padding-right:18px; }
  .pj-footer__grid{ grid-template-columns: 1fr 1fr; padding-left:18px; padding-right:18px; }
  .pj-footer__bottom{ padding-left:18px; padding-right:18px; }
}
@media (max-width: 640px){
  .pj-footer__grid{ grid-template-columns: 1fr; }
  .pj-footer__topitem{ min-width: unset; }
}

/* ==========================
   PJ • Banner Strip
========================== */
.pj-bannerStrip{
  padding: 36px 0;
  background: #fff;
}
.pj-bannerStrip__box{
  background: #f4f7fb;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 12px 28px rgba(10,20,40,.06);
}
.pj-bannerStrip__box img{
  width: 100%;
  height: auto;
  display: block;
}

/* ==========================
   MA (Maklumat Asas) styles
========================== */
.pj-ma-hero{
  padding:36px 0 60px;
  background:
    radial-gradient(1200px 600px at 85% 10%, rgba(0,51,153,.10), transparent 60%),
    radial-gradient(900px 500px at 10% 0%, rgba(0,153,102,.08), transparent 55%),
    linear-gradient(180deg,#eef4ff 0%,#f7f9ff 55%,#fff 100%);
}
.pj-ma-wrap{max-width:1200px;margin:0 auto;padding:0 18px;}
.pj-ma-bc{font-size:14px;margin-bottom:14px;color:rgba(11,19,36,.65);}
.pj-ma-bc a{color:#1f5eff;text-decoration:none;}
.pj-ma-title{font-size:48px;font-weight:900;letter-spacing:-.8px;margin:0 0 10px;color:#0b1324;}
.pj-ma-sub{font-weight:800;letter-spacing:.8px;text-transform:uppercase;margin:0 0 16px;color:rgba(11,19,36,.8);}
.pj-ma-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin:12px 0 22px;}
.pj-ma-pills{display:flex;flex-wrap:wrap;gap:10px;}
.pj-ma-pill{
  padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.82);
  border:1px solid rgba(15,23,42,.08);box-shadow:0 10px 30px rgba(0,0,0,.06);
  font-size:14px;color:rgba(11,19,36,.78);
}
.pj-ma-pill b{color:rgba(11,19,36,.9);}
.pj-ma-pill.muted{opacity:.7;}

.pj-ma-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;}
.pj-ma-card{
  background:#fff;border-radius:18px;padding:18px 18px 14px;border:1px solid rgba(15,23,42,.08);
  box-shadow:0 18px 40px rgba(0,0,0,.08);transition:.25s ease;
}
.pj-ma-card:hover{transform:translateY(-5px);box-shadow:0 26px 60px rgba(0,0,0,.14);}
.pj-ma-card h3{
  margin:0 0 10px;font-size:15px;font-weight:900;letter-spacing:.3px;text-transform:uppercase;
  color:#0b1324;line-height:1.25;
}
.pj-ma-total{font-size:34px;font-weight:900;color:#003399;margin:2px 0 10px;}
.pj-ma-total small{display:block;font-size:12px;font-weight:600;color:rgba(11,19,36,.55);}

.pj-ma-kv{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:12px;}
.pj-ma-kv>div{
  background:#f4f7fb;border:1px solid rgba(15,23,42,.06);border-radius:12px;padding:10px 12px;
  display:flex;justify-content:space-between;gap:10px;font-size:14px;
}
.pj-ma-kv span{color:rgba(11,19,36,.6);}
.pj-ma-kv b{color:#0b1324;}

.pj-ma-link{
  display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:13px;font-weight:800;
  text-decoration:none;color:#009966;
}
.pj-ma-link:hover{text-decoration:underline;color:#003399;}

.pj-ma-list{margin:10px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;}
.pj-ma-list li{
  display:flex;justify-content:space-between;gap:12px;background:#f7f9ff;border:1px solid rgba(15,23,42,.06);
  border-radius:12px;padding:10px 12px;font-size:14px;
}
.pj-ma-list .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:rgba(11,19,36,.85);font-weight:700;}
.pj-ma-list .val{font-weight:900;color:#0b1324;}

.pj-ma-mini{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:12px;}
.pj-ma-mini>div{
  background:#f4f7fb;border:1px solid rgba(15,23,42,.06);border-radius:12px;padding:10px 12px;
  display:flex;justify-content:space-between;gap:10px;font-size:13px;
}
.pj-ma-mini span{color:rgba(11,19,36,.6);}
.pj-ma-mini b{color:#0b1324;}

@media(max-width:768px){
  .pj-ma-title{font-size:36px;}
  .pj-ma-kv{grid-template-columns:1fr;}
  .pj-ma-mini{grid-template-columns:1fr;}
}

/* ==========================
   CMS content table reset
========================== */
.cms-content table{
  border: 0 !important;
  border-collapse: separate;
  border-spacing: 0;
}
.cms-content table td,
.cms-content table th{
  border: 0 !important;
}

/* Preserve Quill editor text alignment on the front page */
.cms-content .ql-align-center{
  text-align:center;
}

.cms-content .ql-align-right{
  text-align:right;
}

.cms-content .ql-align-justify{
  text-align:justify;
  text-justify:inter-word;
}

/* ==========================
   Services section
========================== */
.sv-services { padding:60px 20px; }
.sv-services__head { text-align:center; margin-bottom:40px; }
.sv-services__title { font-size:42px; font-weight:800; margin-bottom:10px; }
.sv-services__sub { color:#666; }

.sv-services__grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:24px;
}
.sv-service-card {
  background:#fff;
  border-radius:20px;
  padding:28px;
  box-shadow:0 10px 30px rgba(0,0,0,.05);
  transition:.3s;
}
.sv-service-card:hover { transform:translateY(-5px); }
.sv-service-card__icon { font-size:34px; margin-bottom:16px; color:#003399; }
.sv-service-card__title { font-size:20px; font-weight:700; margin-bottom:10px; }
.sv-service-card__desc { font-size:14px; color:#666; margin-bottom:14px; }
.sv-service-card__link { font-weight:600; color:#003399; text-decoration:none; }

/* =========================
   FIX: Mega panel ikut lebar pill (desktop)
   ========================= */

/* pill jadi anchor untuk absolute panel */
.pj-top-pill{
  position: relative;
}

/* mega wrapper JANGAN jadi anchor */
.pj-top-pill .pj-mega{
  position: static; /* <-- paling penting */
}

/* panel absolute relatif kepada pill */
.pj-top-pill .pj-mega-panel{
  position: absolute;
  top: calc(100% + 10px);

  /* keep the panel safely inside the viewport/pill */
  left: clamp(6px, 1vw, 14px);
  right: clamp(6px, 1vw, 14px);

  width: auto;
  max-width: none;
  min-width: 0;

  z-index: 9999;
}
/* ===== Mega height + inner scroll (desktop) ===== */
.pj-top-pill .pj-mega-panel{
  max-height: min(72vh, 620px);
  overflow: hidden; /* scroll kita bagi dekat column */
}

/* bagi shell ikut tinggi panel */
.pj-top-pill .pj-mega-shell{
  height: calc(min(72vh, 620px) - 32px); /* 32px ~ padding panel (16+16) */
  min-height: 260px;
}

/* L2/L3 jadi scroll */
.pj-top-pill .pj-mega-l2,
.pj-top-pill .pj-mega-r3{
  max-height: 100%;
  overflow: auto;
}

.pj-top-pill .pj-mega-shell{
  grid-template-columns: minmax(240px, 32%) minmax(0, 1fr);
}

.pj-top-pill .pj-r3-title,
.pj-top-pill .pj-r3-item{
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.pj-top-pill .pj-r3-title{
  text-overflow: clip;
}

@media (max-width: 1200px){
  .pj-top-pill .pj-mega-shell{
    grid-template-columns: minmax(220px, 36%) minmax(0, 1fr);
  }

  .pj-top-pill .pj-r3-grid{
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ===== Backdrop when mega open ===== */
body.mega-open{
  overflow: hidden; /* lock scroll */
}

body.mega-open::before{
  content:"";
  position: fixed;
  inset: 0;
  background: rgba(2,6,23,.25);
  backdrop-filter: blur(2px);
  z-index: 40; /* bawah pill (pill z-index 50) */
}
.pj-nav > a,
.pj-mega-btn > span:first-child{ max-width: 260px; }

@media (max-width: 1400px){
  .pj-nav > a,
  .pj-mega-btn > span:first-child{ max-width: 210px; }
}
/* FIX: descender (g,y,p,q) terpotong pada menu atas */
.pj-nav a,
.pj-mega-btn{
  line-height: 1.25;      /* dulu 1 */
  padding-top: 10px;      /* kekalkan feel */
  padding-bottom: 12px;   /* tambah ruang bawah sikit */
}

/* pastikan container tak clip */
.pj-nav{
  overflow: visible;
}

/* =========================
   Show Page Styles (moved from Blade)
   ========================= */
.sv-page{ padding: 70px 0; }
.sv-page__wrap{ max-width: 1200px; margin: 0 auto; }

/* Grid (optional sidebar) */
.sv-page-grid{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap: 28px;
  align-items:start;
}
.sv-page-grid.no-sidebar{
  grid-template-columns: 1fr;
}
@media (max-width: 1024px){
  .sv-page-grid, .sv-page-grid.no-sidebar{ grid-template-columns: 1fr; }
}

/* Breadcrumb / title / meta */
.sv-breadcrumb{
  font-size:14px;
  color: rgba(15,23,42,.65);
  margin-bottom: 18px;
}
.sv-breadcrumb a{ color:#1d4ed8; text-decoration:none; }
.sv-breadcrumb a:hover{ text-decoration:underline; }
.sv-breadcrumb .sep{ margin: 0 8px; color: rgba(15,23,42,.35); }

.sv-page__title{
  font-size: 48px;
  line-height: 1.08;
  margin: 0 0 18px;
  font-weight: 900;
  color:#0f172a;
  letter-spacing:-.6px;
}

.sv-page__meta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom: 18px;
  color: rgba(15,23,42,.65);
  font-size: 13px;
}
.sv-tag{
  display:inline-flex;
  align-items:center;
  padding: 7px 14px;
  border:1px solid rgba(15,23,42,.12);
  border-radius:999px;
  font-weight:800;
  background:#fff;
}

/* Card */
.sv-card{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  background:#fff;
  box-shadow: 0 14px 35px rgba(2,6,23,.06);
  overflow:hidden;
}
.sv-card__body{ padding: 26px 26px; }

/* Editor */
.sv-editor{
  font-size: 16px;
  line-height: 1.75;
  color: rgba(15,23,42,.85);
}
.sv-editor h1,.sv-editor h2,.sv-editor h3{ color:#0f172a; }
.sv-editor img{ max-width:100%; height:auto; border-radius:12px; display:block; }
.sv-editor table{ width:100%; border-collapse:collapse; }
.sv-editor table td,.sv-editor table th{
  border:1px solid rgba(15,23,42,.12);
  padding:10px;
  vertical-align:top;
}
.sv-muted{
  color:#64748b;
  font-style:italic;
}

/* Cover */
.sv-cover img{
  width:100%;
  max-height:480px;
  object-fit:cover;
  display:block;
}

/* Gallery */
.sv-gallery-title{
  margin:0 0 12px;
  font-weight:900;
  color:#0f172a;
}
.sv-gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:16px;
}
.sv-gallery-item img{
  width:100%;
  height:180px;
  object-fit:cover;
  border-radius:14px;
  transition:.2s ease;
  display:block;
}
.sv-gallery-item:hover img{
  transform: scale(1.03);
}

/* Sidebar */
.sv-side{
  position: sticky;
  top: 110px;
}
@media (max-width:1024px){
  .sv-side{ position: static; top:auto; }
}

.sv-side-title{
  font-weight: 900;
  color:#0f172a;
  font-size: 14px;
  margin: 0 0 10px;
}

.sv-side-item{ margin: 6px 0; list-style:none; }
.sv-side-link{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration:none;
  color: rgba(15,23,42,.85);
  font-weight: 800;
  border: 1px solid transparent;
  transition: .15s ease;
}
.sv-side-link:hover{
  background: rgba(29,78,216,.06);
  border-color: rgba(29,78,216,.12);
}
.sv-side-link.is-active{
  background: rgba(0,51,153,.08);
  border-color: rgba(0,51,153,.18);
  color:#003399;
  box-shadow: 0 8px 18px rgba(0,51,153,.08);
}
.sv-side-link.is-parent{
  background: rgba(0,51,153,.08);
  border-color: rgba(0,51,153,.16);
  color:#003399;
}
.sv-side-caret{ opacity:.55; font-size: 12px; }

.sv-side-children{
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid rgba(15,23,42,.10);
  margin-top: 6px;
}

.sv-side-item .sv-side-children{ display:none; }
.sv-side-item.is-open > .sv-side-children{ display:block; }

.direktori-wrapper{max-width:100%;font-family:inherit}
.direktori-group{margin-bottom:34px}
.direktori-title{font-weight:800;font-size:18px;margin:0 0 12px;padding:0 0 8px;border-bottom:2px solid #e5e7eb;letter-spacing:.2px}
.direktori-card{background:#f9fafb;border:1px solid #eef2f7;border-radius:12px;padding:14px 16px;margin-bottom:10px;display:grid;grid-template-columns:1fr 1fr 150px;gap:10px;align-items:center;transition:.18s ease}
.direktori-card:hover{background:#eef2ff;border-color:#dbeafe}
.direktori-name{font-weight:700}
.direktori-email{font-size:14px;color:#4b5563;word-break:break-word}
.direktori-email a{color:inherit;text-decoration:none;border-bottom:1px dashed #cbd5e1}
.direktori-email a:hover{color:#111827;border-bottom-color:#111827}
.direktori-phone{text-align:right;font-weight:700;white-space:nowrap}
.direktori-note{font-size:13px;color:#6b7280;margin:0 0 14px}
@media(max-width:768px){
  .direktori-card{grid-template-columns:1fr;text-align:left}
  .direktori-phone{text-align:left}
}

/* PJ data card */
.pj-data-card{
  background:#ffffff;
  border-radius:14px;
  padding:20px 22px;
  border:1px solid #e5e7eb;
}
.pj-data-header{ margin-bottom:14px; }
.pj-data-header h3{ font-size:15px; font-weight:600; color:#0f172a; margin:0; }
.pj-data-table{ width:100%; border-collapse:collapse; font-size:14px; }
.pj-data-table thead th{
  text-align:left;
  padding:10px 12px;
  font-weight:600;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#475569;
  border-bottom:2px solid #e2e8f0;
}
.pj-data-table tbody td{ padding:10px 12px; border-bottom:1px solid #f1f5f9; }
.pj-data-table tbody tr:hover{ background:#f8fafc; }
.pj-data-table tbody td:first-child{ font-weight:500; color:#0f172a; }
.pj-data-table .num{ text-align:right; font-variant-numeric:tabular-nums; }
.pj-data-table tfoot th{
  padding:12px;
  font-weight:700;
  background:#f1f5f9;
  border-top:2px solid #cbd5e1;
}
@media (max-width:768px){
  .pj-data-card{padding:16px;}
}

.sv-page{ padding: 70px 0; }
.sv-page__wrap{ max-width: 1200px; margin: 0 auto; }

.sv-breadcrumb{ font-size:14px; color: rgba(15,23,42,.65); margin-bottom:18px; }
.sv-breadcrumb a{ color:#1d4ed8; text-decoration:none; }
.sv-breadcrumb a:hover{ text-decoration:underline; }
.sv-breadcrumb .sep{ margin:0 8px; color: rgba(15,23,42,.35); }

.sv-page__title{ font-size:48px; line-height:1.08; margin:0 0 18px; font-weight:900; color:#0f172a; letter-spacing:-.6px; }

.sv-page__meta{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:18px; color: rgba(15,23,42,.65); font-size:13px; }
.sv-tag{ display:inline-flex; align-items:center; padding:7px 14px; border:1px solid rgba(15,23,42,.12); border-radius:999px; font-weight:800; background:#fff; }

.sv-card{ border:1px solid rgba(15,23,42,.10); border-radius:18px; background:#fff; box-shadow:0 14px 35px rgba(2,6,23,.06); overflow:hidden; }
.sv-card__body{ padding:26px 26px; }

.sv-editor{ font-size:16px; line-height:1.75; color: rgba(15,23,42,.85); }
.sv-editor img{ max-width:100%; height:auto; border-radius:12px; display:block; }
.sv-muted{ color:#64748b; font-style:italic; }

.sv-side-link{
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration:none;
  color: rgba(15,23,42,.85);
  font-weight: 800;
  border: 1px solid rgba(15,23,42,.12);
  transition: .15s ease;
  background:#fff;
}
.sv-side-link:hover{ background: rgba(29,78,216,.06); border-color: rgba(29,78,216,.12); }
.sv-side-link.is-active{ background: rgba(0,51,153,.08); border-color: rgba(0,51,153,.18); color:#003399; }
.sv-side-link.is-parent{ background: rgba(0,51,153,.08); border-color: rgba(0,51,153,.16); color:#003399; }

/* Borang grid */
.sv-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
}
@media (max-width: 1024px){
  .sv-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .sv-grid{ grid-template-columns:1fr; }
}

.sv-mini{
  font-size:13px;
  color: rgba(15,23,42,.65);
  line-height:1.4;
}
.sv-title-sm{
  margin:10px 0 6px;
  font-weight:900;
  color:#0f172a;
  font-size:18px;
  line-height:1.25;
}
.sv-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}

.sv-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
}
@media (max-width: 1024px){
  .sv-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .sv-grid{ grid-template-columns:1fr; }
}

.sv-title-sm{
  margin:10px 0 6px;
  font-weight:900;
  color:#0f172a;
  font-size:18px;
  line-height:1.25;
}

.sv-mini{
  font-size:13px;
  color: rgba(15,23,42,.65);
  line-height:1.5;
}

.sv-borang-desc{
  max-height: 4.5em;
  overflow: hidden;
}

.sv-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}

/* Borang button style */
.sv-actions-compact{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:14px;
}

.sv-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 14px;
  font-size:13px;
  font-weight:700;
  border-radius:999px;
  text-decoration:none;
  transition:all .15s ease;
  border:1px solid transparent;
}

.sv-btn-primary{
  background:#009966;
  color:#fff;
}
.sv-btn-primary:hover{
  background:#007f55;
}

.sv-btn-outline{
  border:1px solid #003399;
  color:#003399;
}
.sv-btn-outline:hover{
  background:#003399;
  color:#fff;
}

.sv-btn-ghost{
  color:#334155;
}
.sv-btn-ghost:hover{
  background:rgba(15,23,42,.05);
}

/* Borang button fixed */
.borang-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}

.borang-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 16px;
  font-size:13px;
  font-weight:700;
  border-radius:999px;
  text-decoration:none !important;
  transition:all .2s ease;
  border:1px solid transparent;
}

.borang-btn-primary{
  background:#009966;
  color:#fff !important;
}
.borang-btn-primary:hover{
  background:#007f55;
}

.borang-btn-outline{
  border:1px solid #003399;
  color:#003399 !important;
}
.borang-btn-outline:hover{
  background:#003399;
  color:#fff !important;
}

.borang-btn-ghost{
  color:#334155 !important;
}
.borang-btn-ghost:hover{
  background:rgba(15,23,42,.06);
}

/* Sidebar readability override */
.sv-side{ margin-bottom: 18px; }
.sv-side-card{
  border-radius:16px;
  border:1px solid #e2e8f0;
  box-shadow:0 10px 24px rgba(15,23,42,.05);
  overflow:hidden;
}
.sv-side-body{ padding:18px 16px 16px !important; }
.sv-side-title{
  margin:0 0 4px;
  font-size:15px;
  font-weight:900;
  color:#0f172a;
  letter-spacing:.01em;
}
.sv-side-subtitle{
  margin:0 0 12px;
  font-size:12px;
  line-height:1.45;
  color:#64748b;
}
.sv-side-list{
  list-style:none;
  padding:0;
  margin:0;
  overflow:hidden;
}
.sv-side-item{ margin:4px 0; }
.sv-side-item.level-2{ margin-left:10px; }
.sv-side-item.level-3{ margin-left:20px; }
.sv-side-item.level-4{ margin-left:28px; }
.sv-side-link{
  display:flex;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  justify-content:space-between;
  align-items:flex-start;
  gap:8px;
  padding:9px 11px;
  font-size:14px;
  font-weight:700;
  line-height:1.4;
  border-radius:10px;
  border:1px solid transparent;
  background:transparent;
  color:#1e293b;
}
.sv-side-link .label{
  flex:1;
  min-width:0;
}
.sv-side-link:hover{
  background:#f1f5f9;
  border-color:#e2e8f0;
}
.sv-side-link.is-parent{
  background:#eff6ff;
  border-color:#bfdbfe;
  color:#1d4ed8;
}
.sv-side-link.is-active{
  background:#edf4ff;
  border-color:#cfe0ff;
  color:#003399;
  box-shadow: inset 4px 0 0 #003399, 0 6px 14px rgba(0,51,153,.08);
  font-weight:900;
}
.sv-side-caret{
  margin-top:2px;
  font-size:13px;
  line-height:1;
  opacity:.7;
  transition:transform .15s ease, opacity .15s ease;
}
.sv-side-link:focus-visible{
  outline:2px solid #0ea5e9;
  outline-offset:1px;
}
.sv-side-item.is-open > .sv-side-link .sv-side-caret{
  transform:rotate(90deg);
  opacity:1;
}
.sv-side-children{
  margin:6px 0 0;
  padding:0 0 0 12px;
  border-left:2px solid #e2e8f0;
}
.sv-side-children .sv-side-item{ margin:3px 0; }
@media (max-width:1024px){
  .sv-side-body{ padding:14px !important; }
}

/* Local page menu standardization */
.pj-l2-item,
.pj-r3-item,
.sv-side-link{
  font-size:14px;
  line-height:1.35;
  letter-spacing:0;
}

.pj-l2-item{
  border:1px solid transparent;
}

.pj-l2-item::before{
  content:"-";
  flex:0 0 14px;
  color:#64748b;
  font-weight:900;
  text-align:center;
}

.pj-l2-item > span:first-child{
  flex:1 1 auto;
}

.pj-l2-item > span:first-child::before{
  content:none;
}

.pj-l2-item:hover,
.pj-l2-item.is-active{
  border-color:#dbe4f0;
  background:#edf4ff;
}

.pj-r3-grid{
  gap:8px;
}

.pj-r3-item{
  position:relative;
  padding:10px 12px;
  border-color:#dbe4f0;
  background:#f8fafc;
  color:#1e293b;
  font-weight:700;
}

.pj-r3-item::before{
  content:none;
}

.pj-r3-item:hover{
  background:#1d4ed8;
  border-color:#1d4ed8;
  color:#fff;
}

.pj-r3-item:hover::before{
  color:#fff;
}

.sv-page{
  padding:42px 0 58px;
}

.sv-page__wrap{
  max-width:1380px;
}

.sv-page-grid{
  grid-template-columns:minmax(300px, 390px) 1fr;
  gap:24px;
}

.sv-card__body{
  padding:24px 26px;
}

.sv-editor{
  font-size:15px;
  line-height:1.78;
}

.sv-editor p{
  margin:0 0 14px;
}

.sv-editor ol,
.sv-editor ul{
  margin:10px 0 18px;
  padding-left:1.35rem;
}

.sv-editor li{
  margin:6px 0;
}

.sv-shortcode-block{
  margin:16px 0 18px;
}

.sv-shortcode-block .sv-card{
  margin:0;
}

.sv-editor a:not(.borang-btn):not(.sv-btn){
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 14px;
  border:1px solid #d7e5ff;
  border-radius:999px;
  background:#edf4ff;
  color:#0f172a;
  font-size:14px;
  font-weight:800;
  line-height:1.2;
  text-decoration:none !important;
}

.sv-editor a:not(.borang-btn):not(.sv-btn)::before{
  content:"-";
  color:#1d4ed8;
  font-weight:900;
}

.sv-editor a:not(.borang-btn):not(.sv-btn):hover{
  background:#1d4ed8;
  border-color:#1d4ed8;
  color:#fff;
}

.sv-editor a:not(.borang-btn):not(.sv-btn):hover::before{
  color:#fff;
}

.sv-side-card{
  border-radius:18px;
}

.sv-side-body{
  padding:12px !important;
}

.sv-side-title{
  margin:0 0 10px;
  padding:0 4px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#64748b;
}

.sv-side-subtitle{
  display:none;
}

.sv-side-list{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.sv-side-item,
.sv-side-children .sv-side-item{
  margin:0;
}

.sv-side-item.level-2,
.sv-side-item.level-3,
.sv-side-item.level-4{
  margin-left:0;
}

.sv-side-link{
  display:flex;
  width:100%;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  padding:11px 12px;
  border:1px solid transparent;
  border-radius:12px;
  background:transparent;
  color:#1e293b;
  font-weight:700;
}

.sv-side-link::before{
  content:none;
}

.sv-side-link .label{
  flex:1 1 auto;
  min-width:0;
}

.sv-side-link:not([data-has-children="1"])::after{
  content:"\203A";
}

.sv-side-link:hover{
  background:#f8fafc;
  border-color:#dbe4f0;
  color:#0f172a;
}

.sv-side-link:hover::before,
.sv-side-link:hover::after,
.sv-side-link:hover .sv-side-caret{
  color:#2563eb;
}

.sv-side-link.is-parent,
.sv-side-link.is-active{
  background:#edf4ff;
  border-color:#cfe0ff;
  color:#003399;
  box-shadow:none;
  font-weight:800;
}

.sv-side-link.is-parent::before,
.sv-side-link.is-active::before{
  color:#003399;
}

.sv-side-link.is-parent::after,
.sv-side-link.is-active::after,
.sv-side-link.is-parent .sv-side-caret,
.sv-side-link.is-active .sv-side-caret{
  color:#003399;
}

.sv-side-link:not([data-has-children="1"])::after,
.sv-side-caret{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 1.1rem;
  min-width:1.1rem;
  margin-top:0;
  color:#94a3b8;
  font-size:15px;
  line-height:1;
  font-weight:800;
  font-family:"Segoe UI Symbol","Arial Unicode MS",sans-serif;
}

.sv-side-item.is-open > .sv-side-link .sv-side-caret{
  transform:rotate(90deg);
}

.sv-side-children{
  margin:6px 0 0 18px;
  padding:0 0 0 10px;
  border-left:1px solid #dbe4f0;
}

@media (max-width:1024px){
  .sv-page{
    padding:28px 0 42px;
  }

  .sv-page-grid,
  .sv-page-grid.no-sidebar{
    grid-template-columns:1fr;
  }

  .sv-side-body{
    padding:12px !important;
  }
}

/* Solvior-inspired local motion layer */
@keyframes pjFloatSoft{
  0%,100%{ transform:translate3d(0,0,0) rotate(0deg); }
  50%{ transform:translate3d(0,-14px,0) rotate(2deg); }
}

@keyframes pjMenuItemIn{
  from{
    opacity:0;
    transform:translate3d(0,12px,0);
  }
  to{
    opacity:1;
    transform:translate3d(0,0,0);
  }
}

@keyframes pjShineSweep{
  from{ transform:translateX(-130%) skewX(-18deg); }
  to{ transform:translateX(160%) skewX(-18deg); }
}

.pjcp-hero{
  position:relative;
  overflow:hidden;
}

.pjcp-hero::before,
.pjcp-hero::after{
  content:"";
  position:absolute;
  border-radius:999px;
  pointer-events:none;
  z-index:0;
  filter:blur(.2px);
}

.pjcp-hero::before{
  width:180px;
  height:180px;
  right:7%;
  top:10%;
  background:radial-gradient(circle, rgba(29,78,216,.16), rgba(29,78,216,0) 70%);
  animation:pjFloatSoft 7s ease-in-out infinite;
}

.pjcp-hero::after{
  width:120px;
  height:120px;
  left:8%;
  bottom:4%;
  background:radial-gradient(circle, rgba(0,153,102,.13), rgba(0,153,102,0) 70%);
  animation:pjFloatSoft 8.5s ease-in-out infinite reverse;
}

.pjcp-hero__inner{
  position:relative;
  z-index:1;
}

.pjcp-media{
  position:relative;
  box-shadow:0 24px 70px rgba(2,6,23,.16);
  animation:pjFloatSoft 9s ease-in-out infinite;
}

.pjcp-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(100deg, transparent 0%, rgba(255,255,255,.18) 45%, transparent 70%);
  transform:translateX(-130%) skewX(-18deg);
  pointer-events:none;
}

.pjcp-media:hover::after{
  animation:pjShineSweep .9s ease both;
}

.pjcp-media--video{
  animation:none;
}

.pjcp-media--video::after{
  content:none;
}

.pjcp-slides{
  position:absolute;
  inset:0;
}

.pjcp-slide{
  position:absolute;
  inset:0;
  display:block;
  opacity:0;
  transform:scale(1.04);
  transition:opacity .9s ease, transform 5s ease;
}

.pjcp-slide.is-active{
  opacity:1;
  transform:scale(1);
  z-index:1;
}

.pjcp-slide .pjcp-media__el{
  min-height:100%;
}

.pjcp-dot{
  transition:width .25s ease, background .25s ease, transform .25s ease;
}

.pjcp-dot:hover{
  transform:scale(1.18);
}

.pj-cta,
.pjcp-btn,
.sv-btn,
.borang-btn,
.sv-link,
.sv-editor a:not(.borang-btn):not(.sv-btn),
.sv-side-link,
.pj-l2-item,
.pj-r3-item{
  transition:
    transform .25s cubic-bezier(.22,1,.36,1),
    box-shadow .25s ease,
    background .25s ease,
    border-color .25s ease,
    color .25s ease;
}

.pj-cta:hover,
.pjcp-btn:hover,
.sv-btn:hover,
.borang-btn:hover,
.sv-editor a:not(.borang-btn):not(.sv-btn):hover,
.sv-side-link:hover,
.pj-r3-item:hover{
  transform:translate3d(0,-2px,0);
}

.pj-l2-item:hover{
  transform:translate3d(4px,0,0);
}

.pj-top-pill{
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.pj-top-pill:hover{
  transform:translate3d(0,-2px,0);
  border-color:rgba(29,78,216,.18);
  box-shadow:0 24px 62px rgba(2,6,23,.14);
}

.pj-mega-panel{
  transform-origin:top center;
}

.pj-mega.is-open .pj-l2-item,
.pj-mega:hover .pj-l2-item{
  animation:pjMenuItemIn .42s cubic-bezier(.22,1,.36,1) both;
}

.pj-mega.is-open .pj-r3-pane.is-active .pj-r3-item,
.pj-mega:hover .pj-r3-pane.is-active .pj-r3-item{
  animation:pjMenuItemIn .42s cubic-bezier(.22,1,.36,1) both;
}

.pj-mega.is-open .pj-l2-item:nth-child(2),
.pj-mega:hover .pj-l2-item:nth-child(2),
.pj-mega.is-open .pj-r3-pane.is-active .pj-r3-item:nth-child(2),
.pj-mega:hover .pj-r3-pane.is-active .pj-r3-item:nth-child(2){ animation-delay:45ms; }

.pj-mega.is-open .pj-l2-item:nth-child(3),
.pj-mega:hover .pj-l2-item:nth-child(3),
.pj-mega.is-open .pj-r3-pane.is-active .pj-r3-item:nth-child(3),
.pj-mega:hover .pj-r3-pane.is-active .pj-r3-item:nth-child(3){ animation-delay:90ms; }

.pj-mega.is-open .pj-l2-item:nth-child(4),
.pj-mega:hover .pj-l2-item:nth-child(4),
.pj-mega.is-open .pj-r3-pane.is-active .pj-r3-item:nth-child(4),
.pj-mega:hover .pj-r3-pane.is-active .pj-r3-item:nth-child(4){ animation-delay:135ms; }

.pj-mega.is-open .pj-l2-item:nth-child(5),
.pj-mega:hover .pj-l2-item:nth-child(5),
.pj-mega.is-open .pj-r3-pane.is-active .pj-r3-item:nth-child(5),
.pj-mega:hover .pj-r3-pane.is-active .pj-r3-item:nth-child(5){ animation-delay:180ms; }

.pj-mega.is-open .pj-l2-item:nth-child(6),
.pj-mega:hover .pj-l2-item:nth-child(6),
.pj-mega.is-open .pj-r3-pane.is-active .pj-r3-item:nth-child(6),
.pj-mega:hover .pj-r3-pane.is-active .pj-r3-item:nth-child(6){ animation-delay:225ms; }

.sv-card,
.sv-news-card,
.pj-stat,
.pj-card,
.pj-ma-card,
.sv-service-card{
  will-change:transform;
}

.sv-card:hover,
.sv-news-card:hover,
.pj-card:hover,
.pj-ma-card:hover,
.sv-service-card:hover{
  transform:translate3d(0,-8px,0);
}

.pj-anim-ready .pj-reveal{
  opacity:0;
  filter:blur(4px);
  transform:translate3d(0,34px,0) scale(.985);
  transition:
    opacity .76s cubic-bezier(.22,1,.36,1),
    transform .76s cubic-bezier(.22,1,.36,1),
    filter .76s ease;
  transition-delay:var(--pj-reveal-delay, 0ms);
}

.pj-anim-ready .pj-reveal-left{
  transform:translate3d(-42px,0,0) scale(.985);
}

.pj-anim-ready .pj-reveal-right{
  transform:translate3d(42px,0,0) scale(.985);
}

.pj-anim-ready .pj-reveal-down{
  transform:translate3d(0,-22px,0) scale(.99);
}

.pj-anim-ready .pj-reveal.is-visible{
  opacity:1;
  filter:blur(0);
  transform:translate3d(0,0,0) scale(1);
}

.pj-text-reveal{
  overflow:visible;
}

.pj-text-reveal .pj-word-wrap{
  display:inline-block;
  overflow:hidden;
  vertical-align:baseline;
  line-height:inherit;
  padding-bottom:.18em;
  margin-bottom:-.18em;
}

.pj-text-reveal .pj-word{
  display:inline-block;
  opacity:0;
  filter:blur(4px);
  transform:translate3d(0,112%,0) rotate(2deg);
  transform-origin:left bottom;
  transition:
    opacity .76s cubic-bezier(.22,1,.36,1),
    transform .76s cubic-bezier(.22,1,.36,1),
    filter .76s ease;
  transition-delay:var(--pj-word-delay, 0ms);
}

.pj-text-reveal.is-visible .pj-word{
  opacity:1;
  filter:blur(0);
  transform:translate3d(0,0,0) rotate(0deg);
}

.pjcp-hero__title.pj-text-reveal .pj-word{
  transition-duration:.92s;
}

.pjcp-hero__title.pj-text-reveal,
.sv-title.pj-text-reveal,
.pj-stats__title.pj-text-reveal,
.sv-page__title.pj-text-reveal{
  line-height:1.14;
}

@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.001ms !important;
  }

  .pj-anim-ready .pj-reveal{
    opacity:1;
    filter:none;
    transform:none;
  }

  .pj-text-reveal .pj-word{
    opacity:1;
    filter:none;
    transform:none;
  }
}

/* Local menu sizing reset: top, left, and right menu match */
.pj-nav a,
.pj-mega-btn,
.pj-l2-item,
.pj-r3-item,
.sv-side-link{
  font-size:18px !important;
  line-height:1.35 !important;
  font-weight:600 !important;
  letter-spacing:0 !important;
}

.sv-side-link,
.sv-side-link.is-parent,
.sv-side-link.is-active{
  font-weight:600 !important;
}

.pj-nav > a,
.pj-mega-btn > span:first-child,
.pj-l2-item > span:first-child,
.pj-r3-item{
  max-width:none;
}

.pj-nav a:hover,
.pj-mega-btn:hover,
.pj-l2-item:hover,
.pj-r3-item:hover,
.sv-side-link:hover{
  color:inherit !important;
  background:transparent !important;
  border-color:transparent !important;
  box-shadow:none !important;
  transform:none !important;
}

.pj-r3-item:hover::before,
.sv-side-link:hover::before,
.sv-side-link:hover::after{
  color:inherit !important;
}

.sv-side-link.is-parent:hover{
  color:#003399 !important;
  background:#edf4ff !important;
  border-color:#cfe0ff !important;
  box-shadow:none !important;
}

.sv-side-link.is-active:hover{
  color:#003399 !important;
  background:#edf4ff !important;
  border-color:#cfe0ff !important;
  box-shadow:inset 4px 0 0 #003399, 0 6px 14px rgba(0,51,153,.08) !important;
}

.pj-cta:hover,
.pjcp-btn:hover,
.sv-btn:hover,
.borang-btn:hover,
.sv-editor a:not(.borang-btn):not(.sv-btn):hover{
  transform:none;
}

/* Match left sidebar typography to the top mega menu */
.sv-side .sv-side-link,
.sv-side .sv-side-link .label,
.sv-side .sv-side-link.is-parent,
.sv-side .sv-side-link.is-active{
  font-family:var(--font-body) !important;
  font-size:18px !important;
  font-weight:600 !important;
  line-height:1.35 !important;
  letter-spacing:0 !important;
}

/* Keep news cards stable while page reveal animation runs */
.sv-news-card__title{
  display:-webkit-box !important;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
  min-height:3.55em;
  margin-bottom:12px;
}

.sv-news-card__excerpt{
  display:-webkit-box !important;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
}

/* Footer and logo-strip motion */
.pj-bannerStrip__item,
.pj-footer__topitem,
.pj-footer__brand,
.pj-footer__col,
.pj-footer__bottomin{
  will-change:transform, opacity;
}

.pj-bannerStrip__item img{
  transition:transform .36s cubic-bezier(.22,1,.36,1), filter .36s ease;
}

.pj-bannerStrip__item:hover img{
  transform:translate3d(0,-4px,0) scale(1.03);
  filter:drop-shadow(0 12px 20px rgba(2,6,23,.12));
}

.pj-footer__ico{
  position:relative;
  overflow:hidden;
}

.pj-footer__ico::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  border:1px solid rgba(255,255,255,.36);
  transform:scale(.7);
  opacity:0;
  animation:pjFooterIconPulse 2.8s ease-out infinite;
}

@keyframes pjFooterIconPulse{
  0%{
    opacity:.55;
    transform:scale(.72);
  }
  70%,100%{
    opacity:0;
    transform:scale(1.32);
  }
}