/* the delivery list links through to each service page */
.sv-svc{color:inherit;text-decoration:none;border-bottom:1px solid transparent;
  transition:color .25s var(--ease),border-color .25s var(--ease)}
.sv-svc:hover{color:#e8944b;border-bottom-color:#e8944b}

/* section 7, the commercial versus customer due diligence table. Kept as a real
   table because its shape is what wins the snippet, but built as two contrasting
   columns so the answer reads at a glance rather than as a wall of cells.
   border-collapse:separate is required for the radius to survive. */
.sv-cmp{width:100%;border-collapse:separate;border-spacing:0;margin-top:44px;
  table-layout:fixed}
.sv-cmp .c-lab{width:20%}
.sv-cmp .c-col{width:40%}
.sv-cmp th,.sv-cmp td{padding:20px 24px;text-align:left;vertical-align:top;
  font-size:14.5px;font-weight:300;line-height:1.64;color:var(--muted);
  border-bottom:1px solid var(--line)}

/* headers get an eyebrow over a display heading. The old single mono line had to
   carry the whole label, so the longer one wrapped into an unreadable stack. */
.sv-cmp thead th{vertical-align:bottom;padding-bottom:18px;
  font-family:var(--display);font-size:16.5px;font-weight:500;letter-spacing:-.014em;
  line-height:1.3;color:var(--txt);border-bottom:1px solid var(--line-2)}
.sv-cmp thead .tag{display:block;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;font-weight:400;color:var(--muted);
  margin-bottom:11px}
/* --muted resolves to solid black under .at--light, so it cannot carry the
   contrast this section needs. Set the de-emphasis explicitly instead. */
.sv-cmp thead .tag{color:rgba(0,0,0,.45)}
.sv-cmp thead th.yes .tag{color:var(--warm)}
.sv-cmp .corner{border-bottom:1px solid var(--line-2);padding:0}

/* the supported column is tinted the full height, so which one we do is obvious
   before a word is read */
.sv-cmp .yes{background:rgba(200,16,46,.035)}
.sv-cmp thead th.yes{border-top:2px solid var(--warm);
  border-radius:12px 12px 0 0}
.sv-cmp tbody tr:last-child td.yes{border-radius:0 0 12px 12px}
.sv-cmp tbody td.yes{color:var(--txt)}
.sv-cmp tbody td:not(.yes),.sv-cmp thead th:not(.yes){color:rgba(0,0,0,.62)}

.sv-cmp tbody th{font-family:var(--display);font-size:14.5px;font-weight:500;
  color:var(--txt);padding-left:0}
.sv-cmp tbody tr:last-child th,.sv-cmp tbody tr:last-child td{border-bottom:0}
.sv-cmp-note{margin-top:22px;font-size:14.5px;font-weight:300;line-height:1.68;
  color:var(--muted);max-width:70ch}
.sv-cmp-note b{font-weight:500;color:var(--txt)}

/* ---- capabilities list ---------------------------------------------------
   The FAQ accordion at list density. The FAQ's .at-q is a 26px headline with
   28px of padding, which is right for a question and far too loud for a
   scannable capability name, so the type and the rhythm come down and the plus
   marker moves up with them. Everything else, the borders, the open and close
   animation, the orange hover, is inherited. */
.sv-caps{max-width:none;margin:38px 0 0}
.sv-caps .at-q{font-family:var(--display);font-size:17px;font-weight:500;
  line-height:1.34;letter-spacing:-.012em;padding:17px 46px 17px 0}
.sv-caps .at-q .pm{top:22px}
.sv-caps .at-a .in{padding:0 46px 18px 0;font-size:14.5px;font-weight:300;
  line-height:1.62;color:var(--muted);max-width:74ch}
/* The divider belongs between items, not between a name and its own answer.
   The FAQ hangs it off .at-q, which is right there because a question and its
   answer are separate thoughts. Here they are one, so it moves to the item. */
.sv-caps .at-q{border-bottom:0}
.sv-caps .at-acc-item{border-bottom:1px solid var(--line)}

/* The accordion draws a rule across its own top, which is right for the FAQ
   where the first thing under it is a question. Here the first thing under it
   is a group label, so the rule was fencing the label off from the heading
   above it. The list starts at the first capability instead. */
.sv-caps{border-top:0}

/* the two halves of the list: what the experts decide, and where they sit */
.sv-caps-group{display:block;margin:34px 0 8px;font-family:var(--mono);
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--warm)}
.sv-caps-group:first-child{margin-top:0}

/* ---- the CTA that sits under them ----------------------------------------
   Deliberately not at the foot of the page: this is the point where a reader
   has just seen the thing they came for named.

   Navy, wearing the same treatment as the page's own bands: the #152647 base
   with the header photograph over it and the two layer scrim on top. It is the
   band recipe scaled down to a box, so this reads as part of the system rather
   than as a panel that happens to be blue. */
.sv-cap-cta{position:relative;isolation:isolate;overflow:hidden;
  display:flex;align-items:center;justify-content:space-between;
  gap:36px;flex-wrap:wrap;margin-top:40px;padding:34px 36px;
  border:1px solid rgba(255,255,255,.14);border-radius:12px;
  background-color:#152647;
  background-image:
    radial-gradient(70% 60% at 24% 46%, rgba(4,10,20,.42) 0%,
      rgba(4,10,20,.22) 56%, rgba(4,10,20,0) 88%),
    linear-gradient(90deg, rgba(4,10,20,.40) 0%, rgba(4,10,20,.20) 50%,
      rgba(4,10,20,.06) 100%),
    var(--nx-mesh,none);
  background-size:auto,auto,cover;
  background-position:50% 50%,50% 50%,50% 50%;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),
             0 26px 60px -34px rgba(0,0,0,.55)}
.sv-cap-say h3{font-family:var(--display);font-size:20px;font-weight:500;
  letter-spacing:-.018em;margin-bottom:8px;color:#fff}
.sv-cap-say p{font-size:14.5px;font-weight:300;line-height:1.62;
  color:#fff;opacity:.82;max-width:56ch}
.sv-cap-btns{display:flex;gap:12px;flex-wrap:wrap;flex:none}
/* On navy the secondary is the house ghost: white ink, translucent white edge.
   The crimson outline it wore on the light panel would go muddy here. */
.sv-cap-cta .at-btn--line{background:transparent;color:#fff;
  border:1px solid rgba(255,255,255,.45)}
.sv-cap-cta .at-btn--line:hover{border-color:#fff;background:rgba(255,255,255,.10);
  color:#fff;transform:translateY(-1px)}
@media(max-width:760px){
  .sv-cap-cta{flex-direction:column;align-items:flex-start;gap:22px}
  .sv-cap-btns{width:100%}
  .sv-cap-btns .at-btn{flex:1 1 auto;justify-content:center}
}

/* the one slot on this page with no real content yet */
.sv-slot{margin-top:42px;border:1px dashed var(--line-2);border-radius:12px;
  padding:34px 30px;background:var(--void)}
.sv-slot .lab{font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--warm);display:block;margin-bottom:10px}
.sv-slot p{font-size:14.5px;font-weight:300;line-height:1.68;color:var(--muted);max-width:74ch}

/* Stacked, the header row is gone, so each cell has to name its own column.
   data-l carries the label the thead was providing. */
@media(max-width:760px){
  .sv-cmp,.sv-cmp tbody,.sv-cmp tr,.sv-cmp th,.sv-cmp td{display:block;width:auto}
  .sv-cmp thead,.sv-cmp colgroup{display:none}
  .sv-cmp tbody tr{border:1px solid var(--line);border-radius:12px;
    overflow:hidden;margin-bottom:14px}
  .sv-cmp tbody th{background:var(--slate);padding:14px 18px;
    border-bottom:1px solid var(--line)}
  .sv-cmp tbody td{padding:16px 18px;border-bottom:1px solid var(--line)}
  .sv-cmp tbody tr td:last-child{border-bottom:0}
  .sv-cmp tbody td::before{content:attr(data-l);display:block;font-family:var(--mono);
    font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(0,0,0,.45);
    margin-bottom:7px}
  .sv-cmp tbody td.yes::before{color:var(--warm)}
  .sv-cmp .yes{border-radius:0}
}