/* ==========================================================================
   Services hub.

   The old page was a menu: three rows of cards, a tagline each, and nothing a
   visitor could not have guessed from the nav. Everything here exists to answer
   the question that menu never did, which is why this firm rather than any other.

   Prefix is sv- throughout. A generic class name on a page that also loads
   main.css and pages.css will eventually collide with one of them.
   ========================================================================== */

/* --- hero ---------------------------------------------------------------- */
/* Two columns because one was 860px of type in a 1200px wrap: a 4-line headline,
   340px of dead space beside it, 882px tall, and no call to action anywhere. */
.sv-hero{position:relative;padding:clamp(72px,8vw,104px) 0 clamp(40px,5vw,60px)}
.sv-hero-in{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,4.5vw,64px);
  align-items:center;margin-bottom:clamp(34px,4vw,48px);
}
.sv-hero h1{margin:20px 0 18px;font-size:clamp(36px,4.6vw,60px);line-height:1.06}
.sv-hero .lead{max-width:560px;margin-bottom:28px}

/* The six engines, stated in the first screen. It is the page's own canon, it
   previews the services below, and it fills a column an illustration would only
   have decorated. */
.sv-eng{
  border:1px solid var(--line-dark);border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));
  backdrop-filter:blur(6px);box-shadow:0 24px 70px rgba(0,0,0,.45);
}
.sv-eng-h{padding:18px 22px 15px;border-bottom:1px solid var(--line-dark-2)}
.sv-eng-h span{display:block;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--violet-2)}
.sv-eng-h b{display:block;margin-top:5px;font-size:16px;font-weight:700;color:#fff}
.sv-eng ul{list-style:none;margin:0;padding:6px 0}
.sv-eng li{
  display:flex;align-items:center;gap:13px;padding:11px 22px;
  transition:background .2s ease;
}
.sv-eng li:hover{background:rgba(255,255,255,.04)}
.sv-eng li i{
  flex:none;width:9px;height:9px;border-radius:50%;background:var(--ac);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--ac) 18%,transparent);
}
.sv-eng li b{display:block;font-size:14.5px;font-weight:650;color:#fff;line-height:1.3}
.sv-eng li em{display:block;font-style:normal;font-size:12.5px;color:var(--night-ink-2);margin-top:2px}
.sv-eng-f{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 22px;border-top:1px solid var(--line-dark-2);
  background:rgba(124,108,255,.1);font-size:13.5px;font-weight:650;color:var(--violet-2);
}
.sv-eng-f:hover{background:rgba(124,108,255,.18)}
.sv-eng-f .ar{transition:transform .22s ease}
.sv-eng-f:hover .ar{transform:translateX(4px)}

/* Factual counts only. Every one is checkable on this site, which is the point:
   the page argues against invented numbers two screens later. */
.sv-rail{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line-dark);border:1px solid var(--line-dark);border-radius:var(--r-lg);overflow:hidden;
}
.sv-rail div{background:#0B0F1F;padding:18px 22px;display:flex;align-items:baseline;gap:13px}
.sv-rail b{
  flex:none;font-size:clamp(24px,2.6vw,32px);font-weight:800;letter-spacing:-.02em;
  color:var(--violet-2);line-height:1;
}
.sv-rail span{font-size:12.5px;line-height:1.45;color:var(--night-ink-2)}

/* --- research ------------------------------------------------------------ */
.sv-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4.6vw,68px);align-items:start}
.sv-figs{display:grid;gap:14px}
.sv-fig{
  display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;
  padding:20px 22px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);
  box-shadow:var(--shadow-sm);
}
.sv-fig b{font-size:clamp(28px,3.6vw,40px);font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.sv-fig b i{font-style:normal;font-size:.55em;font-weight:700;color:var(--ink-3)}
.sv-fig span{font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.sv-fig.is-lead{background:linear-gradient(180deg,#F7F5FF,#FFF);border-color:rgba(124,108,255,.3)}
.sv-fig.is-lead b{color:var(--violet)}
.sv-src{margin-top:16px;font-size:12.5px;line-height:1.6;color:var(--ink-3)}
.sv-src a{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}
.sv-src a:hover{color:var(--violet)}
.sv-note{
  margin-top:22px;padding:18px 20px;border-left:3px solid var(--violet);
  background:var(--paper-2);border-radius:0 var(--r) var(--r) 0;font-size:15px;line-height:1.6;color:var(--ink-2);
}

/* --- the difference table ------------------------------------------------ */
.sv-vs{border:1px solid var(--line-dark);border-radius:var(--r-lg);overflow:hidden;background:#0B0F1F}
.sv-vs-head,.sv-vs-row{display:grid;grid-template-columns:1.05fr 1fr 1.15fr}
.sv-vs-head > *{
  padding:15px 22px;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--night-ink-2);background:rgba(255,255,255,.045);border-bottom:1px solid var(--line-dark);
}
.sv-vs-head .sv-us{color:var(--violet-2);background:rgba(124,108,255,.14)}
.sv-vs-row{border-bottom:1px solid var(--line-dark-2)}
.sv-vs-row:last-child{border-bottom:0}
.sv-vs-row > *{padding:17px 22px;font-size:14.5px;line-height:1.55}
.sv-vs-what{font-weight:650;color:#fff}
.sv-vs-them{color:var(--night-ink-2)}
.sv-vs-them::before{content:'\2715';margin-right:9px;color:#FF7A7A;font-size:12px;vertical-align:1px}
.sv-vs-us{color:#DDE2F5;background:rgba(124,108,255,.08);border-left:1px solid var(--line-dark)}
.sv-vs-us::before{content:'\2713';margin-right:9px;color:var(--green);font-weight:700;font-size:13px;vertical-align:1px}

/* --- method -------------------------------------------------------------- */
.sv-steps{counter-reset:sv;display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,1.6vw,20px)}
.sv-step{position:relative;padding-top:34px}
.sv-step::before{
  counter-increment:sv;content:counter(sv,decimal-leading-zero);
  position:absolute;top:0;left:0;font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--violet);
}
.sv-step::after{
  content:'';position:absolute;top:7px;left:30px;right:-10px;height:1px;
  background:linear-gradient(90deg,var(--line),transparent);
}
.sv-step:last-child::after{display:none}
.sv-step h3{font-size:17px;margin-bottom:8px}
.sv-step p{font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.sv-step em{
  display:inline-block;margin-top:10px;font-style:normal;font-size:11.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);
  padding:4px 9px;border:1px solid var(--line);border-radius:100px;background:var(--paper-2);
}

/* --- service rows -------------------------------------------------------- */
.sv-group{margin-bottom:clamp(40px,5vw,64px)}
.sv-group:last-child{margin-bottom:0}
.sv-gh{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:8px}
.sv-gh h3{font-size:clamp(21px,2.4vw,27px);margin:0}
.sv-gh span{
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
}
.sv-glead{font-size:15.5px;line-height:1.6;color:var(--ink-2);max-width:760px;margin:0 0 22px}

.sv-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.6vw,20px)}
.sv-card{
  position:relative;display:flex;flex-direction:column;
  padding:24px 24px 20px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);
  box-shadow:var(--shadow-sm);
  transition:transform .25s cubic-bezier(.2,.8,.3,1),box-shadow .25s ease,border-color .25s ease;
}
.sv-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:transparent}
.sv-card::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:0 0 var(--r-lg) var(--r-lg);
  background:var(--ac);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.8,.3,1);
}
.sv-card:hover::after{transform:scaleX(1)}
.sv-ctop{display:flex;gap:14px;align-items:flex-start}
.sv-cic{
  flex:none;width:42px;height:42px;display:grid;place-items:center;border-radius:12px;
  color:var(--ac);background:color-mix(in srgb,var(--ac) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--ac) 26%,transparent);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.sv-card:hover .sv-cic{transform:translateY(-2px) scale(1.08) rotate(-5deg)}
.sv-card h4{font-size:17.5px;margin:0 0 3px;line-height:1.25}
.sv-csub{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11.5px;letter-spacing:.03em;color:var(--ink-3);margin:0}
.sv-ctag{margin:14px 0 0;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.sv-clist{list-style:none;margin:14px 0 0;padding:14px 0 0;border-top:1px solid var(--line-2);display:grid;gap:8px}
.sv-clist li{position:relative;padding-left:19px;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.sv-clist li::before{
  content:'';position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:2px;
  background:var(--ac);opacity:.55;
}
.sv-clink{
  display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:18px;
  font-size:14.5px;font-weight:650;color:var(--ac);
}
.sv-clink .ar{transition:transform .22s ease}
.sv-card:hover .sv-clink .ar{transform:translateX(4px)}

/* The lead group runs on the dark ground and takes the full row. */
.sv-cards.is-solo{grid-template-columns:1fr}
.night .sv-gh h3{color:#fff}
.night .sv-gh span,.night .sv-glead{color:var(--night-ink-2)}
.night .sv-card{background:rgba(255,255,255,.045);border-color:var(--line-dark);box-shadow:none}
.night .sv-card:hover{background:rgba(255,255,255,.07);border-color:var(--line-dark)}
.night .sv-card h4{color:#fff}
.night .sv-ctag,.night .sv-clist li,.night .sv-csub{color:var(--night-ink-2)}
.night .sv-clist{border-top-color:var(--line-dark-2)}

/* --- commitments --------------------------------------------------------- */
.sv-vow{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.7vw,20px)}
.sv-vow > div{padding:24px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);box-shadow:var(--shadow-sm)}
.sv-vow h3{font-size:17.5px;margin-bottom:9px;display:flex;align-items:center;gap:10px}
.sv-vow h3 i{
  font-style:normal;flex:none;width:24px;height:24px;display:grid;place-items:center;border-radius:7px;
  font-size:13px;background:rgba(58,223,165,.14);color:#0F9B72;border:1px solid rgba(58,223,165,.36);
}
.sv-vow p{font-size:14.5px;line-height:1.6;color:var(--ink-2)}

/* --- fit ----------------------------------------------------------------- */
.sv-fit{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,24px)}
.sv-fit > div{padding:26px;border:1px solid var(--line-dark);border-radius:var(--r-lg);background:rgba(255,255,255,.04)}
.sv-fit .sv-yes{border-color:rgba(58,223,165,.34);background:rgba(58,223,165,.07)}
.sv-fit h3{font-size:18px;margin-bottom:16px}
.sv-fit ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.sv-fit li{position:relative;padding-left:26px;font-size:14.5px;line-height:1.55;color:var(--night-ink-2)}
.sv-fit li::before{position:absolute;left:0;top:0;font-weight:700;font-size:13px}
.sv-yes li::before{content:'\2713';color:var(--green)}
.sv-no li::before{content:'\2013';color:var(--night-ink-2);opacity:.7}

/* --- responsive ---------------------------------------------------------- */
@media (max-width:1000px){
  .sv-steps{grid-template-columns:repeat(2,1fr);gap:26px}
  .sv-step::after{display:none}
}
@media (max-width:900px){
  .sv-hero-in{grid-template-columns:1fr;gap:34px}
  .sv-hero .lead{max-width:none}
  .sv-split{grid-template-columns:1fr}
  .sv-rail{grid-template-columns:repeat(2,1fr)}
  .sv-cards,.sv-vow,.sv-fit{grid-template-columns:1fr}

  /* The three-column comparison cannot just shrink: at this width every cell is
     a four-word column. It becomes a stack of labelled pairs instead. */
  .sv-vs-head{display:none}
  .sv-vs-row{grid-template-columns:1fr;border-bottom:0;padding:4px 0 14px}
  .sv-vs-row + .sv-vs-row{border-top:1px solid var(--line-dark-2);padding-top:16px}
  .sv-vs-what{padding:14px 18px 8px;font-size:16px}
  .sv-vs-them,.sv-vs-us{margin:0 18px;padding:12px 14px;border-radius:10px;border-left:0;font-size:14px}
  .sv-vs-them{background:rgba(255,255,255,.035);margin-bottom:8px}
  .sv-vs-us{background:rgba(124,108,255,.12);border:1px solid rgba(124,108,255,.24)}
  .sv-vs-them::after,.sv-vs-us::after{
    display:block;margin-top:6px;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  }
  .sv-vs-them::after{content:'the usual';color:var(--night-ink-2);opacity:.7}
  .sv-vs-us::after{content:'citelx';color:var(--violet-2)}
}
@media (max-width:560px){
  .sv-steps{grid-template-columns:1fr;gap:22px}
  .sv-rail{grid-template-columns:1fr}
  .sv-hero .btns .btn{flex:1 1 100%;justify-content:center}
  .sv-fig{grid-template-columns:1fr;gap:6px}
  .sv-card{padding:20px 20px 18px}
}