/*
  /preview/services/ campaign layer (Binary Systems, Inc.)
  PREVIEW. Loaded AFTER the five live stylesheets (bsimac, reset, text, 960, mobile),
  so the header and menu bar render exactly as on the live Services page.
  Every rule here is scoped to .sv-*, so the menu bar is untouched.
  Daylight only: there is deliberately no prefers-color-scheme rule.
*/
:root {
  --sv-ink: #08315c; --sv-night: #061e39; --sv-deep: #0c4d8c; --sv-aqua: #2d78c8;
  --sv-gel-mid: #165eaa; --sv-gel-light: #6aafec; --sv-sky: #9dcef8; --sv-ice: #eef6ff;
  --sv-link: #005fa5; --sv-fiber: #6fce9f; --sv-teal: #53b0ac; --sv-red: #c1121f;
  --sv-sx: #e0322b; --sv-amber: #f5b301; --sv-amber-ink: #3a2a00; --sv-paper: #f7f3ea;
  --sv-font: "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
}

/* Preview ribbon */
.sv-ribbon { background: repeating-linear-gradient(135deg, var(--sv-amber) 0 18px, #ffc93c 18px 36px); color: var(--sv-amber-ink); font-family: var(--sv-font); font-size: 14px; line-height: 1.4; text-align: center; padding: 8px 16px; border-bottom: 2px solid #b88600; }
.sv-ribbon b { text-transform: uppercase; letter-spacing: .12em; }

.sv-skip { position: absolute; left: -9999px; top: 0; z-index: 10; }
.sv-skip:focus { left: 8px; top: 8px; padding: 8px 14px; background: #000; color: #fff; border-radius: 4px; outline: 3px solid var(--sv-fiber); }

/* Page scope */
.sv, .sv-foot { font-family: var(--sv-font); font-size: 15px; line-height: 1.6; }
.sv { display: block; outline: none; }
.sv *, .sv-foot * { box-sizing: border-box; }
.sv-wrap { width: 1000px; max-width: 100%; margin: 0 auto; padding: 0 20px; position: relative; }
.sv h1, .sv h2, .sv h3, .sv h4 { font-family: var(--sv-font); font-weight: bold; line-height: 1.15; margin: 0; color: var(--sv-ink); }
.sv h1 { font-size: 48px; letter-spacing: -.01em; margin-bottom: 20px; }
.sv h2 { font-size: 36px; letter-spacing: -.01em; margin-bottom: 18px; max-width: 820px; }
.sv h3 { font-size: 19px; margin-bottom: 8px; line-height: 1.3; }
.sv p { margin: 0 0 14px; }
.sv ul, .sv ol { list-style: none; margin: 0; padding: 0; }
.sv li { margin: 0; }
.sv a { color: var(--sv-link); }
.sv a:focus-visible, .sv-foot a:focus-visible { outline: 3px solid var(--sv-fiber); outline-offset: 2px; border-radius: 3px; }
.sv code { font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: .92em; }
.sv-sx { color: var(--sv-sx); font-weight: bold; }
.sv-dark .sv-sx { color: #ff6b5e; }

.sv-band { padding: 72px 0 56px; background: #fff; color: #333; }
.sv-ice { background: linear-gradient(180deg, var(--sv-ice), #fff); }
.sv-paper { background: linear-gradient(180deg, var(--sv-paper), #fff); }
.sv-dark { background: linear-gradient(180deg, #1c1e22 0%, #000 100%); color: #c9ced6; }
.sv-dark h1, .sv-dark h2, .sv-dark h3 { color: #fff; }
.sv-dark a { color: var(--sv-sky); }
.sv-dark a:hover { color: #fff; }

.sv-eyebrow { font-size: 13px; text-transform: uppercase; letter-spacing: .14em; color: var(--sv-link); margin-bottom: 12px !important; font-weight: bold; }
.sv-dark .sv-eyebrow { color: var(--sv-fiber); }
.sv-lede { font-size: 18px; line-height: 1.55; max-width: 760px; }
.sv-dark .sv-lede { color: #dfe4ea; }
.sv-accent { color: var(--sv-aqua); }
.sv-dark .sv-accent { color: var(--sv-sky); }
.sv-kicker { font-size: 17px; font-weight: bold; color: var(--sv-ink); margin-top: 8px; }

/* Buttons */
.sv-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 18px; }
.sv-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 24px; border-radius: 23px; text-decoration: none !important; font-size: 15px; font-weight: bold; }
.sv-btn-gel { color: #fff !important; background: linear-gradient(180deg, var(--sv-gel-light) 0%, var(--sv-aqua) 48%, var(--sv-gel-mid) 52%, var(--sv-deep) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 2px 8px rgba(0,0,0,.35); text-shadow: 0 -1px 0 rgba(0,0,0,.35); }
.sv-btn-gel:hover { filter: brightness(1.12); }
.sv-btn-glass { color: var(--sv-link) !important; border: 1px solid var(--sv-link); background: rgba(255,255,255,.6); }
.sv-dark .sv-btn-glass { color: #fff !important; border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.06); }
.sv-btn-glass:hover { background: rgba(45,120,200,.1); }

/* Hero */
.sv-hero { padding: 76px 0 64px; border-top: 1px solid #000; border-bottom: 3px solid var(--sv-aqua);
  background: radial-gradient(ellipse 60% 80% at 85% 40%, rgba(45,120,200,.38), transparent 70%),
              radial-gradient(ellipse 40% 60% at 10% 100%, rgba(111,206,159,.14), transparent 70%),
              linear-gradient(180deg, #2a2c30 0%, #0a0b0d 55%, #000 100%); }
.sv-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: center; }
.sv-hero h1 .l2 { display: block; color: var(--sv-sky); }
.sv-hero-tag { color: #8d96a3; letter-spacing: .06em; font-size: 13px; margin: 0; }
.sv-index { border-radius: 14px; padding: 18px 18px 10px; background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.02)); border: 1px solid rgba(157,206,248,.25); box-shadow: 0 20px 40px rgba(0,0,0,.45); }
.sv-index p { color: #8d96a3; font-size: 12px; text-transform: uppercase; letter-spacing: .14em; margin-bottom: 8px; }
.sv-index li { border-top: 1px solid rgba(255,255,255,.08); }
.sv-index a { display: flex; gap: 12px; align-items: baseline; padding: 11px 4px; color: #fff !important; text-decoration: none; font-weight: bold; }
.sv-index a span { color: var(--sv-fiber); font-size: 12px; letter-spacing: .1em; min-width: 22px; }
.sv-index a:hover { color: var(--sv-sky) !important; }

/* Grids and cards */
.sv-grid { display: grid; gap: 18px; margin: 26px 0 10px; }
.sv-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sv-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sv-g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sv-card { padding: 22px 22px 8px; border-radius: 12px; background: #fff; border: 1px solid #d9e3ee; border-top: 3px solid var(--sv-aqua); box-shadow: 0 1px 2px rgba(8,49,92,.06), 0 8px 20px rgba(8,49,92,.06); }
.sv-card.teal { border-top-color: var(--sv-teal); }
.sv-card.red { border-top-color: var(--sv-red); }
.sv-card .sv-tag { display: inline-block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: bold; color: var(--sv-link); margin-bottom: 8px; }
.sv-more { font-weight: bold; }
.sv-glass { padding: 22px 22px 8px; border-radius: 12px; background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); border: 1px solid rgba(157,206,248,.2); }
.sv-glass h3 { color: #fff; }

/* Evolution strip */
.sv-evo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 30px 0 8px; border-radius: 12px; overflow: hidden; border: 1px solid #d9e3ee; }
.sv-evo li { padding: 20px 22px 10px; background: #fff; position: relative; }
.sv-evo li + li { border-left: 1px solid #d9e3ee; }
.sv-evo b { display: block; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--sv-link); margin-bottom: 6px; }
.sv-evo h3 { font-size: 18px; }
.sv-evo li.now { background: linear-gradient(180deg, #0c4d8c, #08315c); color: #dfe9f5; }
.sv-evo li.now h3 { color: #fff; }
.sv-evo li.now b { color: var(--sv-fiber); }

/* V feature */
.sv-v { margin-top: 34px; display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 36px; align-items: start; padding: 32px; border-radius: 16px; background: linear-gradient(180deg, #16181c, #000); color: #c9ced6; border-left: 5px solid var(--sv-red); }
.sv-v h3 { color: #fff; font-size: 24px; margin-bottom: 12px; }
.sv-v .lockup img { display: block; width: 100%; height: auto; }
.sv-v .status { display: inline-block; margin: 16px 0 6px; padding: 2px 12px; border-radius: 12px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: bold; color: #062a1a; background: var(--sv-fiber); }
.sv-v .note { color: #8d96a3; font-size: 13px; }
.sv-v ul li { position: relative; padding-left: 22px; margin-bottom: 10px; }
.sv-v ul li::before { content: ""; position: absolute; left: 0; top: .45em; width: 10px; height: 10px; background: var(--sv-red); clip-path: polygon(0 0, 100% 0, 50% 100%); }

/* Steps */
.sv-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 26px 0 10px; counter-reset: sv-step; }
.sv-steps li { counter-increment: sv-step; padding: 18px 18px 6px; border-radius: 10px; background: linear-gradient(180deg, #3a3d42, #000); color: #c9ced6; }
.sv-steps li h3 { color: #fff; }
.sv-steps li h3::before { content: "0" counter(sv-step) " "; color: var(--sv-sky); }

/* VoxBox band */
.sv-vox { background: radial-gradient(ellipse 60% 70% at 90% 10%, rgba(45,120,200,.45), transparent 70%), linear-gradient(180deg, #08315c 0%, #061e39 60%, #000 100%); color: #dfe9f5; border-top: 3px solid var(--sv-aqua); }
.sv-vox h2, .sv-vox h3 { color: #fff; }
.sv-vox a { color: var(--sv-sky); }
.sv-vox .sv-eyebrow { color: var(--sv-fiber); }
.sv-vox .sv-lede { color: #dfe9f5; }
.sv-vox-top { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 40px; align-items: center; }
.sv-vox-mark { text-align: center; }
.sv-vox-mark img.cube { width: 150px; height: auto; filter: drop-shadow(0 12px 30px rgba(45,120,200,.6)); }
.sv-vox-mark img.word { display: block; width: 240px; max-width: 100%; height: auto; margin: 10px auto 0; }
.sv-owns { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 6px; }
.sv-owns li { padding: 6px 16px; border-radius: 18px; background: rgba(255,255,255,.08); border: 1px solid rgba(157,206,248,.35); color: #fff; font-weight: bold; }
.sv-vox .sv-card { background: rgba(255,255,255,.06); border-color: rgba(157,206,248,.2); border-top-color: var(--sv-sky); box-shadow: none; color: #dfe9f5; }
.sv-vox .sv-card .sv-tag { color: var(--sv-fiber); }
.sv-vox .sv-steps li { background: rgba(0,0,0,.35); border: 1px solid rgba(157,206,248,.18); }

/* Legacy band */
.sv-quote { margin: 28px 0 8px; padding: 22px 26px; border-left: 4px solid var(--sv-amber); background: #fffaf0; border-radius: 0 12px 12px 0; }
.sv-quote p { font-size: 20px; font-weight: bold; color: var(--sv-ink); margin-bottom: 6px; }
.sv-quote footer { color: #666; font-size: 13px; }
.sv-term { margin-top: 10px; background: #05090b; color: #7dffa8; border-radius: 10px; padding: 14px 16px; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.5; overflow-x: auto; white-space: pre; }

/* Contact */
.sv-cta { padding: 72px 0 56px; background: radial-gradient(ellipse 50% 90% at 50% 0%, rgba(45,120,200,.4), transparent 70%), linear-gradient(180deg, var(--sv-night), #000); border-top: 3px solid var(--sv-aqua); color: #c9ced6; }
.sv-cta h2 { color: #fff; }
.sv-cta .sv-card { background: rgba(255,255,255,.06); border-color: rgba(157,206,248,.2); border-top-color: var(--sv-fiber); box-shadow: none; color: #dfe4ea; }
.sv-cta .sv-card h3 { color: #fff; }
.sv-cta address { font-style: normal; margin-bottom: 14px; }

/* Footer: reverse-clear SI logo on black, no plate */
.sv-foot { padding: 40px 0 30px; background: #000; color: #8d96a3; border-top: 1px solid #222; }
.sv-foot .si-mark { display: inline-block; margin-bottom: 16px; }
.sv-foot .si-mark img { display: block; width: 410px; max-width: 100%; height: auto; }
.sv-foot-nav { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 14px; }
.sv-foot a { color: var(--sv-sky); }
.sv-foot a:hover { color: #fff; }
.sv-foot p { margin: 0 0 8px; font-size: 13px; }

/* Responsive */
/* Legacy carrier lineage lead-in (Nortel, GENBAND/Ribbon, Ericsson) */
.sv-lineage { display: grid; grid-template-columns: 1fr 330px; gap: 28px; align-items: start; margin: 26px 0 0; padding: 26px 26px 18px; border-radius: 12px; background: #fff; border: 1px solid #d9e3ee; border-left: 4px solid var(--sv-teal); box-shadow: 0 8px 20px rgba(8,49,92,.06); }
.sv-lineage .sv-tag { display: inline-block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: bold; color: var(--sv-link); margin-bottom: 8px; }
.sv-lineage h3 { font-size: 22px; margin-bottom: 10px; }
.sv-line { list-style: none; margin: 0; padding: 0 0 0 22px; border-left: 2px solid var(--sv-teal); }
.sv-line li { position: relative; margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: #2b3a4a; }
.sv-line li::before { content: ""; position: absolute; left: -29px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--sv-teal); border: 2px solid #fff; }
.sv-line b { display: block; color: var(--sv-ink); font-size: 15px; }
.sv .sv-lineage .sv-line { padding: 0 0 0 22px; margin: 0; }
@media screen and (max-width: 720px) { .sv-lineage { grid-template-columns: 1fr; padding: 22px 20px 12px; } }

@media screen and (max-width: 999px) {
  .sv-g4, .sv-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-hero-grid { grid-template-columns: minmax(0, 1fr) 280px; gap: 32px; }
  .sv-v { grid-template-columns: 1fr; }
  .sv-v .lockup { max-width: 360px; }
}
@media screen and (max-width: 720px) {
  .sv { font-size: 16px; }
  .sv-wrap { padding: 0 16px; }
  .sv-band, .sv-cta { padding: 48px 0 36px; }
  .sv-hero { padding: 44px 0 40px; }
  .sv h1 { font-size: 32px; }
  .sv h2 { font-size: 27px; }
  .sv-lede { font-size: 17px; }
  .sv-hero-grid, .sv-vox-top { grid-template-columns: 1fr; gap: 28px; }
  .sv-g2, .sv-g3, .sv-evo { grid-template-columns: 1fr; }
  .sv-evo li + li { border-left: 0; border-top: 1px solid #d9e3ee; }
  .sv-vox-mark { order: -1; }
  .sv-vox-mark img.cube { width: 110px; }
  .sv-v { padding: 22px 18px; }
}
@media screen and (max-width: 560px) {
  .sv-g4, .sv-steps { grid-template-columns: 1fr; }
  .sv-actions .sv-btn { flex: 1 1 100%; }
  .sv-quote p { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { .sv-btn-gel:hover { filter: none; } }
.sv-vox .sv-btn-glass { color: #fff !important; border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.06); }
.sv-vox .sv-btn-glass:hover { background: rgba(255,255,255,.14); }
.sv-cta a, .sv-vox .sv-card a, .sv-v a { color: var(--sv-sky); }
.sv-cta a:hover, .sv-vox .sv-card a:hover { color: #fff; }