/* The Arbitrator & Law Associates
   Black and gold, matching the firm's printed stationery.
   Loaded after Bootstrap; only what Bootstrap does not already give us. */

:root {
  --ink: #17140f;
  --ink-soft: #4b443a;
  --gold: #9a7622;
  --gold-bright: #b58e32;
  --gold-wash: #f7f0de;
  --rule: #e4ddd0;
  --ground: #faf8f5;
  --surface: #fff;

  --bs-body-color: var(--ink-soft);
  --bs-body-bg: var(--ground);
  --bs-link-color: var(--gold);
  --bs-link-hover-color: var(--gold-bright);
  --bs-border-color: var(--rule);
}

body {
  background: var(--ground);
  color: var(--ink-soft);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

h1, h2, h3, h4, h5 { color: var(--ink); font-weight: 600; }
.display-title { font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }

/* ---------- brand ---------- */

.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 2rem; height: 2rem;
  border: 1.5px solid var(--gold);
  color: var(--gold);
  font-weight: 700;
  font-size: 1rem;
  border-radius: 2px;
  margin-right: .6rem;
  flex: 0 0 auto;
}
.navbar-brand { display: flex; align-items: center; }
.brand-text { display: inline-flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { font-size: .95rem; font-weight: 600; }
.brand-text small { font-size: .7rem; opacity: .7; }
.site .brand-tag,
.site .footer-tag {
  font-style: italic;
  font-weight: 400;
  opacity: .85;
}

/* ---------- bars ---------- */

.site-bar, .office-bar, .portal-bar { background: var(--ink); }
.site-bar {
  position: relative;
  z-index: 40;
}
.site-bar .navbar-brand, .office-bar .navbar-brand, .portal-bar .navbar-brand { color: #fff; }
.site-bar .nav-link, .office-bar .nav-link { color: rgba(255,255,255,.78); font-size: .92rem; }
.site-bar .nav-link:hover, .office-bar .nav-link:hover { color: #fff; }
.site-bar .nav-link.active, .office-bar .nav-link.active { color: var(--gold-bright); }
.navbar-toggler {
  border-color: rgba(255,255,255,.25);
}
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.8%29' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.portal-who { color: rgba(255,255,255,.8); font-size: .9rem; }

/* ---------- buttons ---------- */

.btn-gold {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
  font-weight: 500;
}
.btn-gold:hover, .btn-gold:focus { background: var(--gold-bright); border-color: var(--gold-bright); color: #fff; }
.btn-outline-gold { border-color: var(--gold); color: var(--gold); }
.btn-outline-gold:hover { background: var(--gold); color: #fff; }

/* ---------- public site ---------- */

.hero {
  background: var(--ink);
  color: #fff;
  padding: 5rem 0 4.5rem;
  border-bottom: 3px solid var(--gold);
}
.hero h1 { color: #fff; font-size: clamp(2rem, 5vw, 3.25rem); }
.hero .lead { color: rgba(255,255,255,.82); max-width: 40rem; }
.eyebrow {
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-bright);
  font-weight: 600;
  margin-bottom: .75rem;
}
section.band { padding: 4rem 0; }
section.band.alt { background: var(--surface); border-block: 1px solid var(--rule); }

.practice-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--gold);
  border-radius: 2px;
  padding: 1.5rem;
  height: 100%;
}
.practice-card h3 { font-size: 1.05rem; margin-bottom: .5rem; }
.practice-card p { font-size: .92rem; margin: 0; color: var(--ink-soft); }

.site-footer { background: #15203a; color: rgba(255,255,255,.7); padding: 3rem 0 1.5rem; }
.site-footer a { color: var(--gold-bright); text-decoration: none; }
.footer-firm { color: #fff; font-weight: 600; margin-bottom: .25rem; }
.footer-head { color: #fff; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .5rem; }
.footer-note { font-size: .9rem; margin-bottom: .5rem; }
.footer-legal {
  border-top: 1px solid rgba(255,255,255,.12);
  margin-top: 2.5rem; padding-top: 1.25rem;
  font-size: .78rem; color: rgba(255,255,255,.45);
}

/* ---------- office ---------- */

.office { background: #f6f4f0; }
.page-head {
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; justify-content: space-between;
  margin-bottom: 1.25rem;
}
.page-head h1 { font-size: 1.5rem; margin: 0; }

.card { border-color: var(--rule); border-radius: 3px; }
.card-header {
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  font-weight: 600;
  color: var(--ink);
  font-size: .95rem;
}

.stat {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--gold);
  border-radius: 2px;
  padding: 1rem 1.1rem;
  height: 100%;
}
.stat .n { font-size: 1.85rem; font-weight: 700; color: var(--ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat .k { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: #7b7264; }
.stat.warn { border-left-color: #b4472f; }
.stat.warn .n { color: #8e2f1f; }
.stat.good { border-left-color: #2e6042; }

table.tbl { background: var(--surface); font-size: .92rem; }
table.tbl th {
  font-size: .74rem; letter-spacing: .07em; text-transform: uppercase;
  color: #7b7264; font-weight: 600; border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
table.tbl td { vertical-align: middle; border-color: #f0ebe1; }
table.tbl tbody tr:hover { background: #fbf9f5; }
table.sheet-tbl td { vertical-align: top; }
table.sheet-tbl td:nth-child(3) { min-width: 14rem; max-width: 28rem; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.pill {
  display: inline-block; font-size: .72rem; font-weight: 600;
  padding: .15rem .5rem; border-radius: 999px; white-space: nowrap;
}
.pill-active   { background: #e9f1eb; color: #2e6042; }
.pill-decided  { background: #eee; color: #555; }
.pill-today    { background: #fdecea; color: #8e2f1f; }
.pill-soon     { background: var(--gold-wash); color: #7a5c14; }
.pill-gold     { background: var(--gold-wash); color: #7a5c14; }

.empty {
  text-align: center; padding: 3rem 1rem; color: #7b7264;
  background: var(--surface); border: 1px dashed var(--rule); border-radius: 3px;
}

.detail-row { display: flex; gap: .75rem; padding: .4rem 0; border-bottom: 1px solid #f0ebe1; font-size: .92rem; }
.detail-row dt { flex: 0 0 9.5rem; color: #7b7264; font-weight: 500; margin: 0; }
.detail-row dd { margin: 0; color: var(--ink); }

.note-body { white-space: pre-wrap; font-size: .93rem; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  border-left: 2px solid var(--rule);
  padding: 0 0 1.1rem 1rem;
  margin-left: .4rem;
  position: relative;
}
.timeline li::before {
  content: ""; position: absolute; left: -.36rem; top: .35rem;
  width: .6rem; height: .6rem; border-radius: 50%;
  background: var(--gold);
}
.timeline .when { font-size: .78rem; color: #7b7264; }

.msg { border: 1px solid var(--rule); border-radius: 3px; padding: .8rem 1rem; margin-bottom: .75rem; background: var(--surface); }
.msg.from-client { border-left: 3px solid var(--gold); }
.msg.from-office { border-left: 3px solid #2e6042; background: #fbfdfb; }
.msg .who { font-size: .78rem; color: #7b7264; margin-bottom: .3rem; }
.msg audio { width: 100%; margin-top: .5rem; }

/* ---------- client portal ---------- */

.portal { background: var(--ground); }
.portal-bar { padding: .85rem 0; }
.portal-footer { padding: 2rem 0; color: #7b7264; font-size: .88rem; text-align: center; }
.case-card {
  background: var(--surface); border: 1px solid var(--rule);
  border-left: 3px solid var(--gold); border-radius: 3px;
  padding: 1.1rem 1.25rem; margin-bottom: 1rem;
  display: block; text-decoration: none; color: inherit;
}
.case-card:hover { border-color: var(--gold); background: #fffdf8; }
.case-card h3 { font-size: 1.05rem; margin-bottom: .25rem; }

.login-wrap { max-width: 24rem; margin: 4rem auto; }
.login-card { background: var(--surface); border: 1px solid var(--rule); border-top: 3px solid var(--gold); border-radius: 3px; padding: 2rem; }

/* ---------- printing: the cause list goes to paper ---------- */

@media print {
  .no-print, .navbar, footer, .btn { display: none !important; }
  body, .office { background: #fff; }
  .card, table.tbl { border: none; }
  table.tbl th { border-bottom: 1px solid #000; }
  table.tbl td { border-color: #ddd; }
  a { text-decoration: none; color: #000; }
  .print-head { display: block !important; margin-bottom: 1rem; }
}
.print-head { display: none; }
.msg-deleted { opacity: .75; }
.msg-deleted .note-body { text-decoration: line-through; }
.print-card { border: none; box-shadow: none; }
.lib-trail a { color: var(--gold-bright); text-decoration: none; }
.lib-trail a:hover { color: #fff; }
.font-monospace { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85rem; }
.api-pre {
  background: #f4f6fa;
  border-radius: .35rem;
  padding: .5rem .75rem;
  font-size: .78rem;
  overflow-x: auto;
  margin: 0;
}
.api-doc-row .pill { font-size: .72rem; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ===========================================================================
   The office sidebar
   =========================================================================== */

.office { background: #f6f4f0; }

.side {
  position: fixed;
  inset: 0 auto 0 0;
  width: 15.5rem;
  background: var(--ink);
  color: rgba(255,255,255,.72);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  z-index: 1040;
}

.side-brand {
  display: flex;
  align-items: center;
  padding: 1.15rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.09);
  text-decoration: none;
  color: #fff;
  flex: 0 0 auto;
}
.side-brand .brand-text strong { font-size: .84rem; line-height: 1.25; display: block; }
.side-brand .brand-text small { font-size: .7rem; color: var(--gold-bright); }

.side-nav { padding: .75rem 0 1rem; flex: 1 1 auto; }

.side-head {
  font-size: .66rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  margin: 1.1rem 0 .35rem;
  padding: 0 1rem;
}

.side-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .5rem 1rem;
  color: rgba(255,255,255,.74);
  text-decoration: none;
  font-size: .89rem;
  border-left: 2px solid transparent;
}
.side-link:hover { color: #fff; background: rgba(255,255,255,.05); }
.side-link.active {
  color: #fff;
  background: rgba(181,142,50,.14);
  border-left-color: var(--gold-bright);
  font-weight: 500;
}

.side-badge {
  background: var(--gold);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  min-width: 1.15rem;
  text-align: center;
  padding: .05rem .35rem;
  border-radius: 999px;
}

.side-foot {
  flex: 0 0 auto;
  border-top: 1px solid rgba(255,255,255,.09);
  padding: .9rem 1rem 1.1rem;
}
.side-who { color: #fff; font-size: .84rem; font-weight: 600; margin: 0; }
.side-role { color: var(--gold-bright); font-size: .72rem; margin: 0 0 .5rem; }
.side-acts { font-size: .76rem; margin: 0 0 .25rem; }
.side-acts a { color: rgba(255,255,255,.6); text-decoration: none; }
.side-acts a:hover { color: #fff; text-decoration: underline; }

.office-main {
  margin-left: 15.5rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.office-inner { flex: 1 0 auto; padding: 1.75rem 1.75rem 2.5rem; }

.office-credit {
  flex: 0 0 auto;
  border-top: 1px solid var(--rule);
  padding: 1rem 1.75rem;
  font-size: .78rem;
  color: #8d8474;
  text-align: right;
}
.office-credit a { color: var(--gold); text-decoration: none; }
.office-credit a:hover { text-decoration: underline; }

/* the hamburger, only below lg */
.side-toggle {
  display: none;
  position: fixed;
  top: .7rem; left: .7rem;
  z-index: 1060;
  width: 2.5rem; height: 2.5rem;
  border: none; border-radius: 3px;
  background: var(--ink);
  padding: .6rem .55rem;
}
.side-toggle span {
  display: block; height: 2px; background: #fff;
  margin: 0 0 4px; border-radius: 2px;
}
.side-toggle span:last-child { margin-bottom: 0; }

.side-scrim {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1035;
}

@media (max-width: 991.98px) {
  .side {
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: 0 0 2rem rgba(0,0,0,.3);
  }
  body.side-open .side { transform: translateX(0); }
  .side-toggle { display: block; }
  .office-main { margin-left: 0; }
  .office-inner { padding: 4rem 1rem 2rem; }
  .office-credit { padding: 1rem; text-align: center; }
}

@media print {
  .side, .side-toggle, .side-scrim, .office-credit { display: none !important; }
  .office-main { margin-left: 0; }
  .office-inner { padding: 0; }
}

/* ---------- the client's voice recorder ---------- */

.rec {
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: .85rem 1rem;
  background: #fffdf8;
}
.rec-row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.rec-dot {
  width: .6rem; height: .6rem; border-radius: 50%;
  background: #b4472f; flex: 0 0 auto;
}
body:not(.is-recording) .rec-dot { display: none; }
body.is-recording .rec-dot { animation: pulse 1.1s infinite; }
@keyframes pulse { 50% { opacity: .25; } }
.rec-time { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }
.rec-note { font-size: .82rem; color: #7b7264; margin: .6rem 0 0; }
.rec audio { width: 100%; margin-top: .6rem; }

/* ---------- roles matrix ---------- */

.caps-grid { display: grid; gap: .35rem .75rem; }
@media (min-width: 576px) { .caps-grid { grid-template-columns: 1fr 1fr; } }
.cap-group-head {
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  color: #7b7264; font-weight: 600; margin: .9rem 0 .35rem;
  grid-column: 1 / -1;
}

.footer-credit { display: block; margin-top: .5rem; }
.footer-credit a { color: var(--gold-bright); }
.portal-credit { font-size: .78rem; color: #8d8474; margin-top: .75rem; }
.portal-credit a { color: var(--gold); text-decoration: none; }
.portal-credit a:hover { text-decoration: underline; }

.qr { width: 180px; height: 180px; display: grid; place-items: center; }
.qr img, .qr canvas { max-width: 100%; height: auto; }

/* ===========================================================================
   Home page
   =========================================================================== */

.hero-home {
  padding: 6rem 0 5rem;
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(181,142,50,.18) 0%, transparent 60%),
    var(--ink);
}
.hero-home h1 {
  font-size: clamp(2rem, 4.4vw, 3.05rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  max-width: 18ch;
}
.hero-home .lead { font-size: 1.15rem; line-height: 1.65; max-width: 44rem; }
.hero-call { color: rgba(255,255,255,.62); font-size: .92rem; }
.hero-call a { color: var(--gold-bright); font-weight: 600; text-decoration: none; }
.hero-call a:hover { text-decoration: underline; }

/* the credibility strip under the hero */
.strip { background: var(--surface); border-bottom: 1px solid var(--rule); }
.strip-cell {
  padding: 1.5rem .75rem;
  border-right: 1px solid var(--rule);
}
.strip-cell:last-child { border-right: none; }
@media (max-width: 991.98px) {
  .strip-cell:nth-child(2) { border-right: none; }
  .strip-cell:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
}
.strip-n {
  display: block;
  font-size: 1.6rem; font-weight: 700; color: var(--gold);
  line-height: 1.1; font-variant-numeric: tabular-nums;
}
.strip-k {
  display: block; margin-top: .25rem;
  font-size: .78rem; color: #7b7264; line-height: 1.35;
}

.section-title { font-size: clamp(1.5rem, 3vw, 2.05rem); line-height: 1.2; text-wrap: balance; }
.lead-body { font-size: 1.08rem; line-height: 1.7; color: var(--ink); }

/* the three commitments */
.promise {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 1.75rem 1.5rem 1.5rem;
  height: 100%;
  position: relative;
}
.promise-n {
  display: block;
  font-size: .78rem; font-weight: 700; letter-spacing: .14em;
  color: var(--gold); margin-bottom: .6rem;
}
.promise h3 { font-size: 1.08rem; margin-bottom: .5rem; text-wrap: balance; }
.promise p { font-size: .93rem; margin: 0; }

/* ---------- the red alert: bring the documents ---------- */

.alert-red {
  display: flex;
  gap: 1.25rem;
  background: #fdf3f1;
  border: 1px solid #e7bfb6;
  border-left: 5px solid #b4231a;
  border-radius: 3px;
  padding: 1.75rem 1.75rem 1.6rem;
}
.alert-red-mark {
  flex: 0 0 auto;
  width: 2.5rem; height: 2.5rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #b4231a; color: #fff;
  font-size: 1.5rem; font-weight: 700; line-height: 1;
}
.alert-red-title {
  color: #8e1d15;
  font-size: 1.5rem;
  margin: 0 0 .5rem;
  letter-spacing: -.01em;
}
.alert-red-lead {
  color: #7d2c22;
  font-size: 1.02rem;
  font-weight: 500;
  margin-bottom: 1rem;
}
.alert-red p { color: #5c3a34; }
.alert-red strong { color: #8e1d15; }
.alert-red-list {
  margin: 0 0 1rem;
  padding-left: 1.1rem;
  color: #5c3a34;
  font-size: .96rem;
}
.alert-red-list li { margin-bottom: .3rem; }
.alert-red-foot {
  border-top: 1px solid #e7bfb6;
  padding-top: .9rem;
  font-size: .93rem;
}
@media (max-width: 575.98px) {
  .alert-red { flex-direction: column; gap: .9rem; padding: 1.25rem; }
}

/* ---------- closing call to action ---------- */

.cta-band {
  background: var(--ink);
  color: rgba(255,255,255,.75);
  padding: 4.5rem 0;
  border-top: 3px solid var(--gold);
}
.cta-title {
  color: #fff;
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  text-wrap: balance;
  margin-bottom: .75rem;
}
.cta-lead { max-width: 38rem; font-size: 1.05rem; line-height: 1.65; }

/* ===========================================================================
   Arabic typography, the emblem, and the two scriptural sections
   =========================================================================== */

@font-face {
  font-family: "Amiri";
  src: url("../fonts/amiri-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "Amiri";
  src: url("../fonts/amiri-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

[lang="ar"] {
  font-family: "Amiri", "Traditional Arabic", "Scheherazade New", serif;
  line-height: 2.05;
  font-feature-settings: "liga" 1, "calt" 1;
}

/* ---------- the emblem in the hero ---------- */

.hero-emblem { color: var(--gold-bright); padding-top: .5rem; }
.hero-emblem img { opacity: .95; }
.hero-firm {
  color: #fff;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .01em;
  margin: 1rem 0 .4rem;
  text-wrap: balance;
}
.hero-motto {
  color: rgba(255,255,255,.62);
  font-size: .88rem;
  line-height: 1.6;
  font-style: italic;
  margin: 0;
}
@media (max-width: 991.98px) {
  .hero-emblem { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,.12); }
  .hero-emblem img { width: 110px; height: 110px; }
}

/* ---------- the ayah band, directly under the hero ---------- */

.ayah {
  background: var(--ink);
  border-top: 1px solid rgba(181,142,50,.35);
  padding: 2.75rem 0;
  text-align: center;
}
.ayah-ar {
  color: var(--gold-bright);
  font-size: clamp(1.35rem, 3vw, 1.95rem);
  margin: 0 auto .9rem;
  max-width: 52rem;
}
.ayah-en {
  color: rgba(255,255,255,.8);
  font-size: 1rem;
  font-style: italic;
  max-width: 44rem;
  margin: 0 auto .5rem;
  line-height: 1.65;
}
.ayah-ref {
  color: rgba(255,255,255,.45);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0;
}

/* ---------- the letter of Sayyiduna Umar ---------- */

.athar { padding: .5rem 0; }

.athar-quote {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--gold);
  border-radius: 3px;
  padding: 2.25rem 2rem 1.75rem;
  margin: 0;
  text-align: center;
}
.athar-ar {
  color: var(--ink);
  font-size: clamp(1.3rem, 2.8vw, 1.85rem);
  margin: 0 auto 1.25rem;
  max-width: 46rem;
}
.athar-en {
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 40rem;
  margin: 0 auto 1.25rem;
  text-wrap: pretty;
}
.athar-src {
  border-top: 1px solid var(--rule);
  padding-top: 1rem;
  font-size: .85rem;
  color: #7b7264;
  line-height: 1.6;
  max-width: 42rem;
  margin: 0 auto;
}
.athar-src strong { color: var(--gold); }
.athar-ra { font-size: .8em; }

.athar-note {
  background: var(--gold-wash);
  border-radius: 3px;
  padding: 1rem 1.15rem;
  height: 100%;
  font-size: .92rem;
  color: #5c4d28;
  text-align: center;
}
.athar-note-ar {
  color: #7a5c14;
  font-size: 1.2rem;
  margin: 0 0 .5rem;
}

.athar-foot {
  text-align: center;
  font-size: .95rem;
  color: #7b7264;
  max-width: 40rem;
  margin: 1.75rem auto 0;
  font-style: italic;
}

@media (max-width: 575.98px) {
  .athar-quote { padding: 1.5rem 1.15rem 1.25rem; }
}

/* the scales also sit in the footer */
.footer-emblem { width: 2.5rem; height: 2.5rem; color: var(--gold-bright); margin-bottom: .75rem; }

.brand-scales { margin-right: .65rem; flex: 0 0 auto; }

.brand-badge {
  display: inline-grid;
  place-items: center;
  width: 2.6rem; height: 2.6rem;
  margin-right: .7rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #111;
  box-shadow: 0 0 0 2px #c9a227, 0 0 0 4px rgba(201,162,39,.25);
}
.brand-badge img {
  width: 62%; height: 62%;
  object-fit: contain;
  display: block;
}
.brand-badge-lg { width: 3.6rem; height: 3.6rem; }
.side-brand .brand-badge { width: 2.35rem; height: 2.35rem; margin-right: .65rem; }

/* ===========================================================================
   2026 refresh — colour, graphics, office icons, public polish
   =========================================================================== */

:root {
  --navy: #15203a;
  --navy-deep: #0d1528;
  --teal: #1a6b63;
  --rose: #b4231a;
  --amber: #c48a12;
}

.brand-logo {
  width: 2.75rem;
  height: 2.75rem;
  object-fit: cover;
  border-radius: 50%;
  margin-right: .7rem;
  flex: 0 0 auto;
  background: #12182a;
  box-shadow: 0 0 0 2px rgba(201,162,39,.55);
}
.side-brand .brand-logo { width: 2.4rem; height: 2.4rem; }
.footer-emblem {
  width: 3.5rem; height: 3.5rem;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(201,162,39,.45);
}

.site-bar {
  position: relative;
  z-index: 40;
  background: #15203a;
  box-shadow: 0 1px 0 rgba(201,162,39,.35);
}

.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-media .hero-photo,
.hero-slides .hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
}
.hero-shade {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(105deg, rgba(6,10,18,.86) 0%, rgba(6,10,18,.58) 46%, rgba(6,10,18,.42) 100%),
    linear-gradient(180deg, rgba(6,10,18,.28) 0%, rgba(6,10,18,.18) 40%, rgba(6,10,18,.55) 100%);
}
.hero-copy { position: relative; z-index: 2; }
.hero-home { padding: 6.5rem 0 5.5rem; border-bottom: 3px solid var(--gold); }
.page-hero {
  min-height: 16rem;
  padding: 0;
  display: flex;
  align-items: flex-end;
}
.page-hero .hero-copy { width: 100%; padding: 2.4rem 0 2rem; }
.page-hero .lead { color: rgba(255,255,255,.82); }

.practice-card-photo {
  padding: 0; overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.practice-card-photo:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(21,32,58,.12);
}
.practice-card-photo img {
  width: 100%; height: 11rem;
  object-fit: cover; display: block;
}
.practice-card-body { padding: 1.25rem 1.35rem 1.4rem; }
.practice-card-body h3 { margin-bottom: .4rem; }

.area-photo {
  width: 100%; height: 12rem;
  object-fit: cover; border-radius: 6px;
  display: block;
}
.area-list { padding-left: 1.1rem; font-size: 1.02rem; }

.ayah-quote { background: #f7f1e0; border-top: none; padding: 3.5rem 0; }
.quran-quote {
  max-width: 46rem; margin: 0 auto;
  background: #fff;
  border: 1px solid #e6d7a8;
  border-left: 6px solid var(--gold);
  border-radius: 4px;
  padding: 2.25rem 2rem 1.75rem;
  text-align: center;
  box-shadow: 0 10px 28px rgba(154,118,34,.08);
}
.ayah-quote .ayah-ar { color: #6e5410; }
.ayah-quote .ayah-en { color: var(--ink-soft); }
.ayah-quote .ayah-ref {
  color: #9a7622; letter-spacing: .12em;
  font-style: normal; text-transform: uppercase;
}

.review-card {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 1.4rem 1.35rem 1.2rem;
  height: 100%;
  margin: 0;
}
.review-stars { color: #d4a017; letter-spacing: .08em; margin-bottom: .5rem; }
.review-card blockquote {
  font-size: .98rem; line-height: 1.6;
  margin: 0 0 1rem; color: var(--ink);
}
.review-card figcaption { font-size: .86rem; color: #7b7264; }
.review-card figcaption strong { display: block; color: var(--ink); }
.review-card figcaption em { font-style: normal; color: var(--gold); font-size: .78rem; }

.review-slider { position: relative; }
.review-viewport { overflow: hidden; }
.review-track {
  display: flex;
  gap: 1rem;
  transition: transform .7s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}
.review-slide {
  flex: 0 0 100%;
  min-width: 0;
}
@media (min-width: 768px) {
  .review-slide { flex-basis: calc(50% - .5rem); }
}
@media (min-width: 992px) {
  .review-slide { flex-basis: calc(33.333% - .67rem); }
}
.review-slide .review-card { height: 100%; }
.review-nav {
  display: flex; align-items: center; justify-content: center; gap: .65rem;
  margin-top: 1.25rem;
}
.review-arrow {
  width: 2.2rem; height: 2.2rem;
  border: 1px solid var(--rule);
  background: #fff;
  color: var(--ink);
  border-radius: 50%;
  line-height: 1;
  font-size: 1.25rem;
  cursor: pointer;
}
.review-arrow:hover { border-color: var(--gold); color: var(--gold); }
.review-dots { display: flex; gap: .4rem; }
.review-dot {
  width: .5rem; height: .5rem;
  border: 0; padding: 0;
  border-radius: 50%;
  background: #d8d0c2;
  cursor: pointer;
}
.review-dot.is-on { background: var(--gold); }

.blog-card {
  display: block; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--rule);
  border-radius: 6px; overflow: hidden; height: 100%;
  transition: transform .2s ease, box-shadow .2s ease;
}
.blog-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(21,32,58,.12); color: inherit; }
.blog-card img { width: 100%; height: 11rem; object-fit: cover; display: block; }
.blog-card-body { padding: 1.15rem 1.25rem 1.3rem; }
.blog-card-body time { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.blog-card-body h3 { font-size: 1.08rem; margin: .35rem 0 .4rem; }
.blog-card-body p { font-size: .92rem; margin: 0; color: var(--ink-soft); }

.article-body { font-size: 1.05rem; line-height: 1.75; }

.social-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.social-btn {
  width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: var(--gold-bright);
  border: 1px solid rgba(201,162,39,.35);
}
.social-btn:hover { background: var(--gold); color: #fff; }
.social-row-light .social-btn {
  background: var(--gold-wash);
  color: var(--gold);
  border-color: #e6d7a8;
}

.wa-float {
  position: fixed;
  right: 1.25rem; bottom: 1.25rem;
  z-index: 1080;
  display: inline-flex; align-items: center; gap: .5rem;
  height: 3.15rem; padding: 0 1.05rem 0 .85rem;
  background: #25d366; color: #fff;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 650; font-size: .95rem;
  box-shadow: 0 8px 22px rgba(37,211,102,.45);
}
.wa-float:hover { color: #fff; background: #1ebe5d; transform: scale(1.04); }
.wa-float .ico { width: 1.35rem; height: 1.35rem; }
.btn-wa {
  display: inline-flex; align-items: center; gap: .45rem;
  background: #25d366; color: #fff; border: 0;
  font-weight: 650;
}
.btn-wa:hover { background: #1ebe5d; color: #fff; }
.footer-wa { color: #4fda7b !important; font-weight: 650; }
.contact-follow {
  margin: 1.25rem 0 .5rem;
  font-size: .78rem; letter-spacing: .12em;
  text-transform: uppercase; color: #7b7264; font-weight: 650;
}
.detail-row.last { border-bottom: none; }

.mobile-dock { display: none; }

@media (max-width: 991.98px) {
  .no-mobile-dock { display: none !important; }
  .site { padding-bottom: 4.8rem; }
  .mobile-dock {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1090;
    background: #15203a;
    border-top: 1px solid rgba(201,162,39,.35);
    padding: .5rem .55rem calc(.5rem + env(safe-area-inset-bottom));
    gap: .4rem;
    box-shadow: 0 -8px 24px rgba(0,0,0,.25);
  }
  .dock-btn {
    flex: 1;
    display: flex; align-items: center; justify-content: center; gap: .3rem;
    min-height: 2.75rem;
    border-radius: 8px;
    font-weight: 650; font-size: .78rem;
    text-decoration: none; color: #fff;
  }
  .dock-dir { background: #c9a227; color: #15203a; }
  .dock-dir:hover { color: #15203a; background: #e2c36a; }
  .dock-call { background: #1c4d9c; }
  .dock-call:hover { color: #fff; background: #163d7a; }
  .dock-wa { background: #25d366; }
  .dock-wa:hover { color: #fff; background: #1ebe5d; }
  .dock-btn .ico { width: 1.05rem; height: 1.05rem; }
}

.map-frame {
  border-radius: 8px; overflow: hidden;
  border: 1px solid var(--rule);
  box-shadow: 0 12px 28px rgba(21,32,58,.08);
  aspect-ratio: 16 / 9;
}
.map-frame iframe { width: 100%; height: 100%; border: 0; }

.hp {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

.shadow-soft { box-shadow: 0 8px 22px rgba(21,32,58,.06); }

/* ---- colourful office ---- */

.office { background: #eef2f7; }
.side {
  background: linear-gradient(180deg, #15203a 0%, #0d1528 100%);
}
.side-link {
  justify-content: flex-start;
}
.side-link .ico {
  flex: 0 0 auto;
  color: #c9a227;
  opacity: .9;
}
.side-link span { flex: 1 1 auto; }
.side-link.active {
  background: linear-gradient(90deg, rgba(201,162,39,.22), rgba(201,162,39,.06));
}
.side-head { color: #c9a227; }

.stat { position: relative; overflow: hidden; border-left-width: 4px; }
.stat-ico {
  position: absolute; top: .85rem; right: .9rem;
  opacity: .28;
}
.stat-navy { background: #eef3fb; border-left-color: #2a4a8a; }
.stat-navy .n { color: #1c3568; }
.stat-teal { background: #e8f6f3; border-left-color: #1a6b63; }
.stat-teal .n { color: #145850; }
.stat-rose { background: #fdecea; border-left-color: #b4231a; }
.stat-amber { background: #fff6e0; border-left-color: #c48a12; }
.stat-amber .n { color: #8a5f08; }

.dashboard-tabs-wrap { overflow-x: auto; }
.dashboard-tabs { flex-wrap: wrap; gap: .35rem; }
.dashboard-tabs .btn { min-width: 5.5rem; }
@media (max-width: 575.98px) {
  .dashboard-tabs { display: flex; width: max-content; min-width: 100%; flex-wrap: nowrap; }
  .dashboard-tabs .btn { flex: 0 0 auto; min-width: 0; padding-left: .65rem; padding-right: .65rem; }
}

.dashboard-custom-card .card-body { padding: .9rem 1.15rem; }
.dashboard-custom-form {
  display: flex; flex-wrap: wrap; align-items: center; gap: .65rem 1rem;
}
.dashboard-custom-title {
  font-size: .82rem; font-weight: 600; color: #4a5168; white-space: nowrap; margin: 0;
}
.dashboard-custom-fields {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: .45rem .75rem; flex: 1 1 16rem;
}
.dashboard-custom-field { display: flex; flex-direction: column; gap: .25rem; }
.dashboard-custom-field label {
  font-size: .72rem; font-weight: 600; color: #7a8194; margin: 0;
  text-transform: uppercase; letter-spacing: .04em;
}
.dashboard-custom-opt { font-weight: 500; text-transform: none; letter-spacing: 0; opacity: .85; }
.dashboard-custom-field input[type="date"] { width: 10.75rem; max-width: 100%; }
.dashboard-custom-sep {
  color: #9a7622; font-size: .82rem; font-weight: 600; padding-bottom: .45rem; line-height: 1;
}
.dashboard-custom-btn { margin-bottom: 1px; white-space: nowrap; }
.dashboard-custom-badge { margin-left: auto; }
.dashboard-custom-hint {
  flex: 1 1 100%; font-size: .78rem; color: #7a8194; margin: 0; padding-top: .15rem;
}
@media (max-width: 575.98px) {
  .dashboard-custom-form { align-items: stretch; }
  .dashboard-custom-fields { width: 100%; }
  .dashboard-custom-sep { display: none; }
  .dashboard-custom-field { flex: 1 1 calc(50% - .4rem); min-width: 7.5rem; }
  .dashboard-custom-field input[type="date"] { width: 100%; }
  .dashboard-custom-btn { width: 100%; margin-top: .15rem; }
  .dashboard-custom-badge { margin-left: 0; }
}

.office .card {
  border: none;
  box-shadow: 0 8px 22px rgba(21,32,58,.06);
  border-radius: 8px;
}
.office .card-header {
  background: linear-gradient(90deg, #fff, #f7f1e0);
  border-bottom: 1px solid #efe6c8;
}

.ico { display: inline-block; vertical-align: -3px; }

@media (max-width: 575.98px) {
  .brand-text strong { font-size: .78rem; }
  .hero-home { padding: 4.6rem 0 5.4rem; min-height: 28rem; }
  .quran-quote { padding: 1.5rem 1.1rem 1.25rem; }
}

/* ---------- hero slider (Peshawar High Court) ---------- */

.hero-slides { position: absolute; inset: 0; z-index: 0; }
.hero-slides .hero-photo {
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 1.6s ease, transform 8s ease;
}
.hero-slides .hero-photo:first-child { object-position: center 62%; }
.hero-slides .hero-photo:nth-child(2) { object-position: center 42%; }
.hero-slides .hero-photo.is-on {
  opacity: 1;
  transform: scale(1);
}
/* Runs even if JavaScript is late or blocked — both photographs take a turn. */
.hero-home:not(.is-js) .hero-slides .hero-photo:nth-child(1) {
  animation: heroA 12s ease-in-out infinite;
}
.hero-home:not(.is-js) .hero-slides .hero-photo:nth-child(2) {
  animation: heroB 12s ease-in-out infinite;
}
@keyframes heroA {
  0%, 8%   { opacity: 1; transform: scale(1); }
  42%      { opacity: 1; transform: scale(1.08); }
  50%, 92% { opacity: 0; transform: scale(1.1); }
  100%     { opacity: 1; transform: scale(1); }
}
@keyframes heroB {
  0%, 42%  { opacity: 0; transform: scale(1.08); }
  50%      { opacity: 1; transform: scale(1); }
  92%      { opacity: 1; transform: scale(1.08); }
  100%     { opacity: 0; transform: scale(1.1); }
}
.hero-home {
  min-height: 34rem;
  padding: 7rem 0 6.2rem;
}
.hero-copy .eyebrow,
.hero-copy .display-title,
.hero-copy .lead,
.hero-call {
  text-shadow: 0 2px 18px rgba(0,0,0,.45);
}
.hero-shade {
  background:
    linear-gradient(105deg, rgba(6,10,18,.86) 0%, rgba(6,10,18,.58) 46%, rgba(6,10,18,.42) 100%),
    linear-gradient(180deg, rgba(6,10,18,.28) 0%, rgba(6,10,18,.18) 40%, rgba(6,10,18,.55) 100%);
}
.hero-place {
  position: absolute;
  left: 0; right: 0; bottom: 3.4rem;
  z-index: 2;
  text-align: center;
  margin: 0;
  color: rgba(255,255,255,.78);
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.hero-nav {
  position: absolute;
  left: 0; right: 0; bottom: .85rem;
  z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: .75rem;
}
.hero-arrow {
  width: 2rem; height: 2rem;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.28);
  color: #fff;
  border-radius: 50%;
  line-height: 1;
  font-size: 1.2rem;
  cursor: pointer;
}
.hero-dots { display: flex; gap: .4rem; }
.hero-dot {
  width: .55rem; height: .55rem;
  border: 0; padding: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.4);
  cursor: pointer;
}
.hero-dot.is-on { background: #c9a227; }

/* ---------- attention announcement ---------- */

.attn-band { padding-top: 2.5rem; }
.attn {
  background: #fff8ee;
  border: 1px solid #e8c48a;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(180, 90, 20, .08);
}
.attn-banner {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  background: linear-gradient(90deg, #9a1b14, #c2410c);
  color: #fff;
  padding: .7rem 1.15rem;
}
.attn-flag {
  display: inline-block;
  background: #fff;
  color: #9a1b14;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .22rem .55rem;
  border-radius: 3px;
}
.attn-banner strong {
  font-size: 1.15rem;
  letter-spacing: .01em;
}
.attn-body { padding: 1.25rem 1.25rem 1.2rem; }
.attn-lead { color: #6b2a16; font-weight: 550; margin-bottom: .75rem; }
.attn-sub { font-weight: 650; color: #8e1d15; margin-bottom: .4rem; }
.attn-list { margin: 0 0 1rem; padding-left: 1.15rem; color: #5c3a34; }
.attn-list li { margin-bottom: .28rem; }
.attn-foot {
  border-top: 1px dashed #e8c48a;
  padding-top: .85rem;
  font-size: .92rem;
  color: #5c3a34;
}

/* ---------- footer ---------- */

.site-footer {
  background: #15203a;
  color: rgba(255,255,255,.72);
  padding: 3.25rem 0 1.5rem;
  border-top: 3px solid #c9a227;
}
.site-footer a { color: #e2c36a; text-decoration: none; }
.site-footer a:hover { color: #fff; }
.footer-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer-brand { display: flex; align-items: center; gap: .15rem; }
.footer-firm { color: #fff; font-weight: 650; margin: 0 0 .15rem; letter-spacing: .01em; }
.footer-tag {
  margin: 0;
  font-size: .82rem;
  font-style: italic;
  color: rgba(255,255,255,.72);
}
.footer-grid { margin-bottom: .5rem; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: .35rem; }
.footer-links a { color: rgba(255,255,255,.75); }
.footer-links a:hover { color: #e2c36a; }
.footer-line {
  display: flex; align-items: center; gap: .55rem;
  color: rgba(255,255,255,.82);
  margin-bottom: .45rem;
}
.footer-dir {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 600;
}
.footer-legal {
  display: block;
  border-top: 1px solid rgba(255,255,255,.1);
  margin-top: 2rem; padding-top: 1.1rem;
  font-size: .78rem; color: rgba(255,255,255,.48);
}
.footer-legal p { margin: 0; }
.footer-credit { display: block; margin-top: .45rem; }
.footer-credit a { color: #e2c36a; }
.footer-dot { margin: 0 .35rem; color: rgba(255,255,255,.3); }
.footer-brand { margin-bottom: .85rem; }

.cta-band {
  background:
    radial-gradient(70% 80% at 50% 0%, rgba(201,162,39,.16), transparent 55%),
    #0d1528;
}
.cta-title, .cta-lead, .hero .lead, .hero h1, .footer-note {
  word-spacing: normal;
  letter-spacing: normal;
}

.login-card .brand-badge { margin-bottom: 1rem; }