/* ============================================================
   S J LOGISTICS — services.css
   Enriched service pages. Every component has explicit light and
   dark treatment; light remains the default theme.
   ============================================================ */

/* ---- section shells ---- */
.sv-sec { position: relative; padding: var(--sec-pad) var(--gut); }
.sv-light { background: #ffffff; }
[data-theme="dark"] .sv-light { background: #0d0719; }
.sv-tint { background: linear-gradient(180deg, #f6f3fc, #ffffff); }
[data-theme="dark"] .sv-tint { background: linear-gradient(180deg, #160f28, #0d0719); }

/* ---- jump nav ---- */
.sv-jump { position: sticky; top: 78px; z-index: 30; background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--border); }
[data-theme="dark"] .sv-jump { background: rgba(13,7,25,.86); }
.sv-jump-in { max-width: 1180px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 8px;
  overflow-x: auto; scrollbar-width: none; }
.sv-jump-in::-webkit-scrollbar { display: none; }
.sv-jump-k { flex: none; font-family: "JetBrains Mono", monospace; font-size: 10px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--faint); padding-right: 6px; }
.sv-jump a { flex: none; font-size: 13px; font-weight: 600; color: var(--muted); padding: 7px 14px; border-radius: 999px;
  border: 1px solid transparent; transition: background .2s ease, color .2s ease, border-color .2s ease; white-space: nowrap; }
.sv-jump a:hover { color: var(--ink); background: rgba(139,92,246,.09); border-color: rgba(139,92,246,.25); }
.sv-jump a.on { color: #fff; background: linear-gradient(135deg, #3c2b5d, #8b5cf6); border-color: transparent; }

/* ---- what it is ---- */
.sv-def { font-family: "Space Grotesk"; font-weight: 700; letter-spacing: -.02em;
  font-size: clamp(23px, 3.1vw, 34px); line-height: 1.28; color: var(--ink); margin: 16px 0 0; max-width: 26ch; }
.sv-def::after { content: ""; display: block; width: 68px; height: 3px; margin-top: 20px; border-radius: 3px;
  background: linear-gradient(90deg, #633599, #8b5cf6, #d946ef); }

/* documents checklist in the rail */
.sv-docs { border-radius: 16px; padding: 18px; background: #fff; border: 1px solid var(--border);
  box-shadow: 0 16px 36px -30px rgba(60,43,93,.5); }
[data-theme="dark"] .sv-docs { background: rgba(255,255,255,.04); border-color: rgba(196,181,253,.18); }
.sv-docs .k { display: block; font-family: "JetBrains Mono", monospace; font-size: 10px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: #7c46c9; margin-bottom: 12px; }
[data-theme="dark"] .sv-docs .k { color: #c4a5ff; }
.sv-docs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.sv-docs li { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--muted); }
.sv-docs li svg { flex: none; width: 13px; height: 13px; margin-top: 4px; stroke: #8b5cf6; fill: none; }
[data-theme="dark"] .sv-docs li svg { stroke: #c4a5ff; }

/* ---- who it's for ---- */
.sv-who-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: clamp(26px, 3.6vw, 38px); }
.sv-who { display: flex; gap: 14px; align-items: flex-start; padding: 20px; border-radius: 18px;
  background: #fff; border: 1px solid var(--border); box-shadow: 0 18px 40px -34px rgba(60,43,93,.45);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
[data-theme="dark"] .sv-who { background: rgba(255,255,255,.04); border-color: rgba(196,181,253,.16); }
.sv-who:hover { transform: translateY(-4px); border-color: rgba(139,92,246,.42);
  box-shadow: 0 26px 50px -30px rgba(99,53,153,.45); }
.sv-who .tick { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  color: #fff; background: linear-gradient(140deg, #633599, #8b5cf6); box-shadow: 0 8px 18px -8px rgba(139,92,246,.6); }
.sv-who .tick svg { width: 16px; height: 16px; }
.sv-who b { font-family: "Space Grotesk"; font-weight: 700; font-size: 16px; color: var(--ink); display: block; line-height: 1.3; }
.sv-who p { margin: 7px 0 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
@media (max-width: 760px) { .sv-who-grid { grid-template-columns: 1fr; } }

/* ---- how it works (dark band) ---- */
.sv-dark { overflow: hidden; background: linear-gradient(165deg, #2a2140 0%, #3c2b5d 50%, #221a30 100%); }
[data-theme="dark"] .sv-dark { background: linear-gradient(165deg, #1b1430 0%, #2a1f45 50%, #150f24 100%); }
.sv-dark-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.sv-dark-bg .orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .4; }
.sv-dark-bg .orb.a { width: 340px; height: 340px; background: #8b5cf6; left: -110px; top: -120px; }
.sv-dark-bg .orb.b { width: 300px; height: 300px; background: #d946ef; right: -90px; bottom: -110px; }
.sv-dark-bg .floor { position: absolute; left: -50%; right: -50%; bottom: -34%; height: 88%;
  background-image: linear-gradient(to right, rgba(196,181,253,.09) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(196,181,253,.09) 1px, transparent 1px);
  background-size: 56px 56px; transform: perspective(560px) rotateX(67deg); transform-origin: center bottom;
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,.6), transparent 72%);
  mask-image: linear-gradient(to top, rgba(0,0,0,.6), transparent 72%); }
.sv-dark .sx-inner { position: relative; z-index: 2; }
.sv-eyebrow-l { display: inline-flex; align-items: center; gap: 9px; font-family: "JetBrains Mono", monospace;
  font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #fff; }
.sv-eyebrow-l::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #c084fc;
  box-shadow: 0 0 0 4px rgba(168,85,247,.22); }
.sv-h2-l { font-family: "Space Grotesk"; font-weight: 700; letter-spacing: -.02em;
  font-size: clamp(26px, 4vw, 44px); line-height: 1.06; margin: 16px 0 0; color: #fff; }
.sv-h2-l .g { background: linear-gradient(100deg, #c4a5ff, #8b5cf6); -webkit-background-clip: text;
  background-clip: text; color: transparent; filter: drop-shadow(0 0 14px rgba(139,92,246,.4)); }
.sv-steps { list-style: none; margin: clamp(28px, 4vw, 42px) 0 0; padding: 0; position: relative;
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sv-steps li { display: flex; gap: 15px; align-items: flex-start; padding: 20px; border-radius: 18px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(196,181,253,.16);
  transition: background .3s ease, border-color .3s ease, transform .3s ease; }
.sv-steps li:hover { background: rgba(255,255,255,.085); border-color: rgba(139,92,246,.45); transform: translateY(-3px); }
.sv-steps .n { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 13px; color: #fff;
  background: linear-gradient(140deg, #633599, #8b5cf6); box-shadow: 0 10px 20px -10px rgba(139,92,246,.75); }
.sv-steps .tx b { font-family: "Space Grotesk"; font-weight: 600; font-size: 16px; color: #fff; display: block; line-height: 1.3; }
.sv-steps .tx p { margin: 7px 0 0; font-size: 13.5px; line-height: 1.6; color: rgba(225,216,250,.75); }
@media (max-width: 820px) { .sv-steps { grid-template-columns: 1fr; } }

/* ---- benefits ---- */
.sv-ben-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: clamp(26px, 3.6vw, 38px); }
.sv-ben { position: relative; padding: 24px 20px 20px; border-radius: 18px; background: #fff; border: 1px solid var(--border);
  box-shadow: 0 18px 40px -34px rgba(60,43,93,.45); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
[data-theme="dark"] .sv-ben { background: rgba(255,255,255,.04); border-color: rgba(196,181,253,.16); }
.sv-ben:hover { transform: translateY(-5px); border-color: rgba(139,92,246,.42); box-shadow: 0 28px 52px -30px rgba(99,53,153,.45); }
.sv-ben .n { position: absolute; top: 16px; right: 18px; font-family: "Space Grotesk"; font-weight: 700; font-size: 34px;
  line-height: 1; color: rgba(139,92,246,.13); }
[data-theme="dark"] .sv-ben .n { color: rgba(196,181,253,.16); }
.sv-ben b { display: block; font-family: "Space Grotesk"; font-weight: 700; font-size: 16.5px; line-height: 1.3;
  color: var(--ink); max-width: 15ch; }
.sv-ben p { margin: 9px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
@media (max-width: 940px) { .sv-ben-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .sv-ben-grid { grid-template-columns: 1fr; } }

/* ---- myth vs fact ---- */
.sv-myths { display: flex; flex-direction: column; gap: 14px; margin-top: clamp(26px, 3.6vw, 38px); }
.sv-myth { display: grid; grid-template-columns: 1fr 1.25fr; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--border); background: #fff; box-shadow: 0 18px 40px -34px rgba(60,43,93,.45); }
[data-theme="dark"] .sv-myth { background: rgba(255,255,255,.04); border-color: rgba(196,181,253,.16); }
.sv-myth .side { padding: 22px; }
.sv-myth .side.myth { background: rgba(217,70,239,.05); border-right: 1px dashed var(--border); }
[data-theme="dark"] .sv-myth .side.myth { background: rgba(217,70,239,.08); }
.sv-myth .side.fact { background: rgba(139,92,246,.05); }
[data-theme="dark"] .sv-myth .side.fact { background: rgba(139,92,246,.09); }
.sv-myth .lbl { display: inline-flex; align-items: center; gap: 8px; font-family: "JetBrains Mono", monospace;
  font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; padding: 5px 11px;
  border-radius: 999px; margin-bottom: 12px; }
.sv-myth .lbl svg { width: 12px; height: 12px; }
.sv-myth .myth .lbl { color: #b8309b; background: rgba(217,70,239,.12); border: 1px solid rgba(217,70,239,.3); }
[data-theme="dark"] .sv-myth .myth .lbl { color: #f0a6e8; }
.sv-myth .fact .lbl { color: #6b3aad; background: rgba(139,92,246,.13); border: 1px solid rgba(139,92,246,.32); }
[data-theme="dark"] .sv-myth .fact .lbl { color: #c4a5ff; }
.sv-myth p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--muted); }
.sv-myth .myth p { font-family: "Space Grotesk"; font-weight: 600; font-size: 16px; color: var(--ink);
  text-decoration: line-through; text-decoration-color: rgba(217,70,239,.45); text-decoration-thickness: 2px; }
.sv-myth .fact p { color: var(--ink); }
[data-theme="dark"] .sv-myth .fact p { color: rgba(231,224,250,.86); }
@media (max-width: 760px) {
  .sv-myth { grid-template-columns: 1fr; }
  .sv-myth .side.myth { border-right: none; border-bottom: 1px dashed var(--border); }
}

/* ---- FAQ ---- */
.sv-faq-inner { max-width: 880px; margin: 0 auto; }
.sv-faq-head { text-align: center; margin-bottom: clamp(26px, 3.6vw, 38px); }
.sv-faq-head .sx-sub { margin-left: auto; margin-right: auto; }
.sv-faq-list { display: flex; flex-direction: column; gap: 10px; }
.sv-faq-item { border: 1px solid var(--border); border-radius: 16px; background: #fff; overflow: hidden;
  transition: border-color .3s ease, box-shadow .3s ease; }
[data-theme="dark"] .sv-faq-item { background: rgba(255,255,255,.04); border-color: rgba(196,181,253,.16); }
.sv-faq-item.open { border-color: rgba(139,92,246,.45); box-shadow: 0 18px 36px -26px rgba(99,53,153,.4); }
.sv-faq-q { width: 100%; display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: none;
  border: 0; cursor: pointer; text-align: left; font-family: inherit; color: var(--ink); }
.sv-faq-q .qn { flex: none; font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 700; color: #7c46c9; }
[data-theme="dark"] .sv-faq-q .qn { color: #c4a5ff; }
.sv-faq-q .qt { flex: 1; font-family: "Space Grotesk"; font-weight: 600; font-size: clamp(15px, 1.7vw, 17px); line-height: 1.35; }
.sv-faq-q .chev { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; background: linear-gradient(140deg, #633599, #8b5cf6); transition: transform .35s ease; }
.sv-faq-q .chev svg { width: 14px; height: 14px; }
.sv-faq-item.open .chev { transform: rotate(180deg); }
.sv-faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .38s cubic-bezier(.4,0,.2,1); }
.sv-faq-item.open .sv-faq-a { grid-template-rows: 1fr; }
.sv-faq-a .in { overflow: hidden; }
.sv-faq-a p { margin: 0; padding: 0 20px 20px 45px; font-size: 15px; line-height: 1.7; color: var(--muted); max-width: 68ch; }
.sv-faq-more { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; text-align: center;
  margin-top: 26px; padding: 22px; border-radius: 18px; border: 1.5px dashed rgba(139,92,246,.35); }
.sv-faq-more b { font-family: "Space Grotesk"; font-weight: 700; font-size: 16px; color: var(--ink); }
.sv-faq-more span { font-size: 14px; color: var(--muted); }
.sv-faq-more a { display: inline-flex; align-items: center; gap: 8px; margin-left: 6px; font-weight: 700; font-size: 14px; color: #7c46c9; }
[data-theme="dark"] .sv-faq-more a { color: #c4a5ff; }
.sv-faq-more a svg { width: 15px; height: 15px; transition: transform .25s ease; }
.sv-faq-more a:hover svg { transform: translateX(4px); }
@media (max-width: 560px) { .sv-faq-a p { padding-left: 20px; } }

@media (prefers-reduced-motion: reduce) {
  .sv-dark-bg .floor { animation: none !important; }
}