/* ==========================================================================
   Law & Order Management — "Justice Command" AUTHORITY design.
   Deliberately new: centered shield-emblem hero on a security-guilloche
   texture, a live Kanban CASE BOARD, statute-style module clauses, and a
   vertical case-lifecycle timeline. Slate-navy + steel + justice brass +
   crimson signal. Scoped under .lo-scope (+ page-only .lo-header-bg).
   ========================================================================== */
.lo-scope {
    --lo-ink: #16233d;
    --lo: #2c4a7a;
    --lo-2: #3b5f96;
    --lo-3: #1c3355;
    --lo-brass: #b8912e;
    --lo-brass-2: #d4ad45;
    --lo-crimson: #c0392b;
    --lo-green: #2f8a5b;
    --lo-steel: #64748b;
    --lo-soft: #eef2f8;
    --lo-soft-2: #f6f8fc;
    --lo-line: #dbe3ee;
    --lo-muted: #58657f;
    --lo-paper: #fbfcfe;
    --lo-grad: linear-gradient(135deg, #3b5f96 0%, #2c4a7a 55%, #1c3355 100%);
    --lo-grad-brass: linear-gradient(135deg, #d4ad45 0%, #b8912e 100%);
    --lo-mono: ui-monospace, "SFMono-Regular", Menlo, monospace;
    color: #3c465c;
}
.lo-scope section { overflow: hidden; }
.lo-header-bg { background: radial-gradient(1100px 320px at 85% 130%, #dfe7f3 0%, rgba(223,231,243,0) 70%), #eef2f8; }

/* ---- shared ---- */
.lo-eyebrow { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--lo-mono); font-size: .74rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--lo); }
.lo-eyebrow::before, .lo-eyebrow.center::after { content: ""; width: 1.6rem; height: 2px; background: var(--lo-brass); }
.lo-eyebrow.on-dark { color: var(--lo-brass-2); } .lo-eyebrow.on-dark::before { background: var(--lo-brass-2); }
.lo-h { font-weight: 800; letter-spacing: -.015em; color: var(--lo-ink); line-height: 1.1; }
.lo-lead { color: var(--lo-muted); font-size: 1.08rem; line-height: 1.7; }
.lo-brass-txt { color: var(--lo-brass); }
.lo-head { max-width: 760px; margin: 0 auto 3.2rem; text-align: center; }
.lo-head h2 { font-size: clamp(1.95rem, 3.6vw, 2.8rem); margin: 1rem 0 .9rem; }
.lo-head p { margin: 0; }

.lo-btn { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; padding: .9rem 1.6rem; border-radius: .5rem; border: 0; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease; text-decoration: none; }
.lo-btn i { transition: transform .25s ease; } .lo-btn:hover i { transform: translate(2px,-2px); }
.lo-btn-primary { background: var(--lo-grad); color: #fff; box-shadow: 0 .7rem 1.6rem rgba(28,51,85,.32); }
.lo-btn-primary:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 1.1rem 2.2rem rgba(28,51,85,.44); }
.lo-btn-brass { background: var(--lo-grad-brass); color: #2e2408; box-shadow: 0 .7rem 1.6rem rgba(184,145,46,.3); }
.lo-btn-brass:hover { color: #2e2408; transform: translateY(-3px); }
.lo-btn-ghost { background: transparent; color: var(--lo-3); border: 1.5px solid var(--lo-line); }
.lo-btn-ghost:hover { color: #fff; background: var(--lo-3); border-color: var(--lo-3); transform: translateY(-3px); }
.lo-btn-light { background: #fff; color: var(--lo-3); box-shadow: 0 .7rem 1.6rem rgba(0,0,0,.25); }
.lo-btn-light:hover { color: var(--lo-3); transform: translateY(-3px); }

/* ==========================================================================
   HERO — centered shield emblem on security guilloche
   ========================================================================== */
.lo-hero { position: relative; text-align: center; background: radial-gradient(900px 520px at 50% -10%, #e3ebf7 0%, rgba(227,235,247,0) 62%), #eef2f8; }
.lo-hero::before {
    content: ""; position: absolute; inset: 0;
    background-image:
        repeating-radial-gradient(circle at 50% 38%, transparent 0 12px, rgba(44,74,122,.05) 12px 13px),
        repeating-linear-gradient(45deg, rgba(44,74,122,.028) 0 9px, transparent 9px 18px),
        repeating-linear-gradient(-45deg, rgba(184,145,46,.03) 0 9px, transparent 9px 18px);
    -webkit-mask-image: radial-gradient(circle at 50% 36%, #000, transparent 70%);
    mask-image: radial-gradient(circle at 50% 36%, #000, transparent 70%);
}
.lo-hero .container { position: relative; z-index: 2; }
.lo-hero h1 { font-size: clamp(2.3rem, 4.8vw, 3.8rem); max-width: 18ch; margin: 0 auto 1.3rem; }
.lo-hero .lo-lead { max-width: 640px; margin: 0 auto 2rem; }
.lo-emblem { width: 5.4rem; height: 6rem; margin: 0 auto 1.6rem; position: relative; filter: drop-shadow(0 1rem 1.8rem rgba(22,35,61,.3)); }
.lo-emblem .sh { position: absolute; inset: 0; background: var(--lo-grad); clip-path: polygon(50% 0, 100% 14%, 100% 58%, 50% 100%, 0 58%, 0 14%); }
.lo-emblem .sh::before { content: ""; position: absolute; inset: 4px; border: 1.5px solid rgba(212,173,69,.75); clip-path: polygon(50% 0, 100% 14%, 100% 58%, 50% 100%, 0 58%, 0 14%); }
.lo-emblem i { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--lo-brass-2); font-size: 2.1rem; z-index: 2; padding-bottom: .5rem; }
.lo-hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.lo-hero-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem 1.8rem; margin-top: 1.8rem; }
.lo-hero-trust span { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; font-size: .92rem; color: var(--lo-ink); }
.lo-hero-trust i { color: var(--lo); font-size: 1.05rem; }

/* ==========================================================================
   STAT BAND (authority)
   ========================================================================== */
.lo-band { background: var(--lo-ink); border-top: 2px solid var(--lo-brass); }
.lo-band .l { text-align: center; padding: 1.5rem .5rem; position: relative; }
.lo-band .col + .col .l::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: rgba(255,255,255,.1); }
.lo-band b { display: block; font-family: var(--lo-mono); font-size: clamp(1.6rem,3vw,2.15rem); font-weight: 700; color: #fff; line-height: 1; }
.lo-band b em { font-style: normal; color: var(--lo-brass-2); }
.lo-band span { display: block; margin-top: .45rem; font-size: .8rem; color: #9fb0cc; }
@media (max-width: 767px) { .lo-band .col:nth-child(odd) .l::before { display: none; } }

/* ==========================================================================
   CASE BOARD (Kanban)
   ========================================================================== */
.lo-command { background: linear-gradient(180deg, #fff, var(--lo-soft-2)); }
.lo-board { background: #fff; border: 1px solid var(--lo-line); border-radius: 1rem; box-shadow: 0 1.8rem 4.2rem rgba(22,35,61,.12); padding: 1.3rem; }
.lo-board__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.lo-col__hd { display: flex; align-items: center; gap: .5rem; font-weight: 800; color: var(--lo-ink); font-size: .9rem; padding: .1rem .2rem .8rem; border-bottom: 2px solid; margin-bottom: .8rem; }
.lo-col__hd .ct { margin-left: auto; font-family: var(--lo-mono); font-size: .72rem; font-weight: 700; background: var(--lo-soft); color: var(--lo); padding: .1rem .5rem; border-radius: 2rem; }
.lo-col--reg .lo-col__hd { border-color: var(--lo-steel); } .lo-col--reg .lo-col__hd .dot { color: var(--lo-steel); }
.lo-col--inv .lo-col__hd { border-color: var(--lo-brass); }
.lo-col--crt .lo-col__hd { border-color: var(--lo); }
.lo-col--dis .lo-col__hd { border-color: var(--lo-green); }
.lo-case { background: var(--lo-soft-2); border: 1px solid var(--lo-line); border-radius: .6rem; padding: .8rem; margin-bottom: .7rem; border-left: 3px solid var(--lo-steel); }
.lo-col--inv .lo-case { border-left-color: var(--lo-brass); } .lo-col--crt .lo-case { border-left-color: var(--lo); } .lo-col--dis .lo-case { border-left-color: var(--lo-green); }
.lo-case__t { display: flex; align-items: center; gap: .4rem; margin-bottom: .4rem; }
.lo-case__no { font-family: var(--lo-mono); font-size: .72rem; font-weight: 700; color: var(--lo-ink); }
.lo-case__pri { margin-left: auto; font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: .12rem .45rem; border-radius: 2rem; }
.lo-case__pri.high { color: #fff; background: var(--lo-crimson); } .lo-case__pri.med { color: #8a5a00; background: #fbeccb; } .lo-case__pri.low { color: var(--lo); background: var(--lo-soft); }
.lo-case h5 { font-size: .84rem; font-weight: 800; color: var(--lo-ink); margin: 0 0 .3rem; }
.lo-case .mt { display: flex; align-items: center; gap: .35rem; font-size: .72rem; color: var(--lo-muted); }
.lo-case .mt i { color: var(--lo); }

/* ==========================================================================
   MODULES — statute clauses
   ========================================================================== */
.lo-mod { position: relative; background: var(--lo-paper); border: 1px solid var(--lo-line); border-left: 3px solid var(--lo-brass); border-radius: .5rem; padding: 1.5rem 1.5rem 1.4rem; height: 100%; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.lo-mod:hover { transform: translateY(-.4rem); box-shadow: 0 1.4rem 3rem rgba(22,35,61,.12); border-left-color: var(--lo); }
.lo-mod__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .9rem; }
.lo-mod .ic { width: 2.9rem; height: 2.9rem; border-radius: .5rem; background: var(--lo-soft); color: var(--lo); display: flex; align-items: center; justify-content: center; font-size: 1.35rem; }
.lo-mod .cl { font-family: var(--lo-mono); font-weight: 700; font-size: .84rem; color: var(--lo-brass); }
.lo-mod h3 { font-size: 1.06rem; font-weight: 800; color: var(--lo-ink); margin-bottom: .4rem; }
.lo-mod p { font-size: .87rem; color: var(--lo-muted); margin: 0; line-height: 1.55; }

/* ==========================================================================
   CASE LIFECYCLE (vertical timeline)
   ========================================================================== */
.lo-life { background: var(--lo-ink); position: relative; color: #c6d2e6; }
.lo-life::before { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 380px at 88% -8%, rgba(184,145,46,.18), transparent 60%), radial-gradient(680px 400px at 6% 108%, rgba(59,95,150,.35), transparent 60%); }
.lo-life .container { position: relative; z-index: 2; }
.lo-life .lo-head h2 { color: #fff; } .lo-life .lo-head p { color: #9fb0cc; }
.lo-time { position: relative; max-width: 760px; margin: 0 auto; }
/* line runs through the node centres (node is 3.5rem wide → centre at 1.75rem) */
.lo-time::before { content: ""; position: absolute; left: 1.75rem; margin-left: -1px; top: 1.75rem; bottom: 1.75rem; width: 2px; background: linear-gradient(var(--lo-brass), rgba(184,145,46,.2)); z-index: 0; }
.lo-tstep { position: relative; z-index: 1; display: flex; gap: 1.2rem; padding-bottom: 2rem; }
.lo-tstep:last-child { padding-bottom: 0; }
.lo-tstep .n { flex: none; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: #1e2f4d; border: 2px solid var(--lo-brass); color: var(--lo-brass-2); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; position: relative; z-index: 2; box-shadow: 0 0 0 5px var(--lo-ink); }
.lo-tstep h4 { color: #fff; font-size: 1.1rem; font-weight: 800; margin-bottom: .3rem; }
.lo-tstep h4 small { font-family: var(--lo-mono); font-size: .72rem; color: var(--lo-brass-2); font-weight: 700; margin-right: .5rem; }
.lo-tstep p { font-size: .9rem; color: #9fb0cc; margin: 0; line-height: 1.55; }

/* ==========================================================================
   MARKET REQUIREMENTS
   ========================================================================== */
.lo-req { background: var(--lo-paper); border: 1px solid var(--lo-line); border-radius: .6rem; padding: 1.5rem; height: 100%; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.lo-req:hover { transform: translateY(-.4rem); box-shadow: 0 1.3rem 2.8rem rgba(22,35,61,.1); border-color: var(--lo-brass); }
.lo-req .ic { width: 3.1rem; height: 3.1rem; border-radius: .6rem; background: var(--lo-grad); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: 1rem; box-shadow: 0 .5rem 1.1rem rgba(28,51,85,.26); }
.lo-req:nth-child(3n+2) .ic { background: var(--lo-grad-brass); color: #2e2408; }
.lo-req:nth-child(3n) .ic { background: linear-gradient(135deg,#d15a4e,#c0392b); }
.lo-req h3 { font-size: 1.04rem; font-weight: 800; color: var(--lo-ink); margin-bottom: .4rem; }
.lo-req p { font-size: .87rem; color: var(--lo-muted); margin: 0; line-height: 1.55; }

/* ==========================================================================
   AUDIENCES
   ========================================================================== */
.lo-aud { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; }
.lo-audchip { display: inline-flex; align-items: center; gap: .55rem; background: var(--lo-paper); border: 1px solid var(--lo-line); border-radius: .5rem; padding: .7rem 1.3rem; font-weight: 700; color: var(--lo-ink); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.lo-audchip i { color: var(--lo-brass); font-size: 1.15rem; }
.lo-audchip:hover { transform: translateY(-.25rem); border-color: var(--lo); box-shadow: 0 .8rem 1.8rem rgba(22,35,61,.1); }

/* ==========================================================================
   WHY US
   ========================================================================== */
.lo-why { background: var(--lo-soft); }
.lo-val { display: flex; gap: 1rem; padding: 1.3rem 0; border-bottom: 1px solid var(--lo-line); }
.lo-val:last-child { border-bottom: 0; }
.lo-val .ic { flex: none; width: 3rem; height: 3rem; border-radius: .5rem; background: var(--lo-grad); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; box-shadow: 0 .5rem 1.1rem rgba(28,51,85,.26); }
.lo-val h3 { font-size: 1.08rem; font-weight: 800; color: var(--lo-ink); margin-bottom: .25rem; }
.lo-val p { font-size: .9rem; color: var(--lo-muted); margin: 0; line-height: 1.55; }
.lo-sealbox { background: var(--lo-grad); color: #dbe6f5; border-radius: .8rem; padding: 2.2rem; position: relative; overflow: hidden; }
.lo-sealbox::before { content: ""; position: absolute; right: -3rem; top: -3rem; width: 12rem; height: 12rem; border: 2px dashed rgba(212,173,69,.35); border-radius: 50%; }
.lo-sealbox .lo-emblem { margin: 0 0 1.3rem; }
.lo-sealbox p { position: relative; z-index: 2; font-size: 1.12rem; line-height: 1.6; color: #eaf1fa; font-style: italic; margin-bottom: 1.2rem; }
.lo-sealbox .by b { color: #fff; display: block; font-size: .95rem; } .lo-sealbox .by span { font-size: .8rem; color: #a9bcd8; }

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.lo-quote { background: var(--lo-paper); border: 1px solid var(--lo-line); border-top: 3px solid var(--lo-brass); border-radius: .6rem; padding: 1.8rem; height: 100%; display: flex; flex-direction: column; }
.lo-quote .stars { color: var(--lo-brass); letter-spacing: .1em; margin-bottom: .9rem; }
.lo-quote p.tx { font-size: .98rem; color: #3c465c; line-height: 1.65; flex: 1; }
.lo-quote .who { display: flex; align-items: center; gap: .8rem; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--lo-line); }
.lo-quote .who .av { width: 2.7rem; height: 2.7rem; border-radius: .5rem; background: var(--lo-grad); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none; }
.lo-quote .who h6 { margin: 0; font-weight: 800; color: var(--lo-ink); font-size: .92rem; } .lo-quote .who span { font-size: .78rem; color: var(--lo-muted); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.lo-faq .accordion-item { position: relative; background: var(--lo-paper); border: 1px solid var(--lo-line) !important; border-left: 3px solid var(--lo-brass) !important; border-radius: .4rem !important; margin-bottom: .7rem; overflow: hidden; }
.lo-faq .card-header { background: transparent; }
.lo-faq .accordion-item .card-header button { font-weight: 800; color: var(--lo-ink); font-size: 1rem; padding: 1.15rem 3rem 1.15rem 1.3rem; background: var(--lo-paper); display: flex; align-items: center; width: 100%; text-align: left; }
.lo-faq .accordion-item .card-header button::before { display: none !important; }
.lo-faq .accordion-item .card-header button::after { content: "+"; position: absolute; right: 1.4rem; top: 50%; transform: translateY(-50%); font-family: var(--lo-mono); font-size: 1.3rem; color: var(--lo); }
.lo-faq .accordion-item .card-header button:not(.collapsed) { color: var(--lo-3); background: var(--lo-soft-2); }
.lo-faq .accordion-item .card-header button:not(.collapsed)::after { content: "\2013"; }
.lo-faq .card-body { padding: 0 1.3rem 1.3rem; color: var(--lo-muted); }
.lo-faq .card-body p { margin: 0; line-height: 1.65; }

/* ==========================================================================
   CTA + LEAD FORM
   ========================================================================== */
.lo-cta { position: relative; background: var(--lo-ink); color: #d5deec; border-top: 2px solid var(--lo-brass); }
.lo-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 360px at 15% 0%, rgba(59,95,150,.5), transparent 60%), radial-gradient(700px 400px at 92% 100%, rgba(184,145,46,.3), transparent 60%); }
.lo-cta .container { position: relative; z-index: 2; }
.lo-cta h2 { color: #fff; font-size: clamp(1.9rem,3.2vw,2.6rem); }
.lo-cta .lead { color: #b8c5da; }
.lo-cta .trust { list-style: none; padding: 0; margin: 1.6rem 0 0; display: flex; flex-direction: column; gap: .75rem; }
.lo-cta .trust li { display: flex; align-items: center; gap: .7rem; color: #e4ebf5; font-weight: 600; }
.lo-cta .trust li i { color: var(--lo-brass-2); font-size: 1.2rem; }
.lo-callbox { margin-top: 1.7rem; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); border-radius: .5rem; padding: 1.1rem 1.3rem; }
.lo-callbox b { color: #fff; } .lo-callbox a { color: var(--lo-brass-2); font-weight: 700; text-decoration: none; }
.lo-formcard { background: var(--lo-paper); border-radius: .8rem; padding: 2rem; box-shadow: 0 1.4rem 3.4rem rgba(0,0,0,.3); }
.lo-formcard h3 { color: var(--lo-ink); }
.lo-formcard .form-control { border-radius: .5rem; }
.lo-ta { height: 120px; }
.lo-privacy { font-size: .78rem; color: var(--lo-muted); text-align: center; margin-top: .3rem; }

@media (max-width: 991px) { .lo-board__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .lo-board__grid { grid-template-columns: 1fr; } .lo-board { padding: 1rem; } }