/* ---------- the services stack ----------
   Each card pins at the top and the next rides up over it. The card has to be
   shorter than the space below the header or it can never finish pinning, so
   its height is capped against the viewport rather than set to a fixed number. */
.svcs{
  --stick:92px;
  display:flex;flex-direction:column;gap:10px;
  margin-top:clamp(30px,4vw,54px);
}
.sk{
  position:sticky;top:var(--stick);
  display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);gap:10px;
  height:min(580px, calc(100vh - var(--stick) - 22px));
  transform-origin:50% 0;
  will-change:transform;
}
/* the veil is what makes a covered card read as underneath rather than gone */
.sk-veil{
  position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:16px;
  background:var(--mist);opacity:0;
}
.sk-body,.sk-shot{position:relative;border-radius:16px;overflow:hidden}
.sk-body{
  background:#fff;border:1px solid var(--rule);
  padding:clamp(26px,3vw,44px);
  display:flex;flex-direction:column;
}
.sk-kick{
  display:flex;align-items:center;gap:10px;
  font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);
  margin-bottom:14px;
}
.sk-kick b{color:var(--blue);font-weight:600;font-variant-numeric:tabular-nums}
.sk h2{
  margin:0;font-size:clamp(26px,3vw,40px);font-weight:600;letter-spacing:-.038em;
  line-height:1.04;color:var(--ink);text-wrap:balance;
}
.sk-line{
  margin-top:13px;font-size:15.5px;line-height:1.55;color:var(--ink-2);max-width:44ch;
}
/* The rows sit high in the card, not pinned to its foot. Bottom-aligned they
   looked tidier, but the next card rides up from below — so the links, which
   are the whole point of the page, were the first thing to be covered. */
.sk-rows{
  list-style:none;margin:clamp(24px,3.6vh,44px) 0 auto;padding:0;
  border-top:1px solid var(--rule);
}
.sk-rows li{border-bottom:1px solid var(--rule)}
.sk-rows a{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:10px 18px;
  padding:13px 4px;color:var(--ink);transition:padding-left .18s,background-color .18s;
}
.sk-rows a:hover,.sk-rows a:focus-visible{
  text-decoration:none;background:var(--mist);padding-left:12px;
}
.sk-rows .nm{font-size:16.5px;font-weight:500;letter-spacing:-.02em}
.sk-rows a:hover .nm{color:var(--blue)}
.sk-rows .qz{
  font-size:13.5px;color:var(--ink-3);text-align:right;
  display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
}
.sk-rows .qz svg{width:13px;height:13px;opacity:0;transform:translateX(-5px);
  transition:opacity .18s,transform .18s;color:var(--blue)}
.sk-rows a:hover .qz svg,.sk-rows a:focus-visible .qz svg{opacity:1;transform:none}

.sk-shot{background:var(--ink-blue)}
.sk-shot img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.12);will-change:transform;
}
.sk-shot::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top, rgba(6,14,30,.72) 0%, rgba(6,14,30,.18) 40%, rgba(6,14,30,.02) 62%),
             linear-gradient(to bottom, rgba(6,14,30,.60) 0%, rgba(6,14,30,.18) 16%, rgba(6,14,30,0) 30%);
}
.sk-tag{
  position:absolute;z-index:2;left:20px;bottom:18px;
  display:inline-flex;align-items:center;gap:10px;
  font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#fff;
  text-shadow:0 1px 3px rgba(6,11,17,.6);
}
.sk-credit{
  position:absolute;z-index:2;right:16px;top:14px;
  font-size:12px;font-weight:300;color:rgba(255,255,255,.82);
  text-align:right;max-width:56%;
  text-shadow:0 1px 3px rgba(6,11,17,.55);
}
.sk-credit a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.sk-tag{max-width:58%}

/* Below the breakpoint the cards stop pinning: a pinned card on a phone leaves
   no room for the list it exists to show. */
/* Below this the name and its qualifier stop sharing a line: side by side in a
   narrow card the name was squeezed into a third of the width and broke across
   three lines while the qualifier sat on one. */
@media (max-width:620px){
  .sk-rows a{grid-template-columns:minmax(0,1fr);gap:4px}
  .sk-rows .qz{text-align:left;white-space:normal;justify-content:flex-start}
  .sk-rows .qz svg{opacity:1;transform:none;margin-left:auto}
}
@media (max-width:900px){
  .svcs{gap:20px}
  .sk-rows a{padding:15px 4px}
  .sk{position:static;grid-template-columns:minmax(0,1fr);height:auto;transform:none!important}
  .sk-veil{display:none}
  .sk-shot{height:min(48vh,340px);order:-1}
  .sk-rows{margin-top:26px}
}
@media (prefers-reduced-motion: reduce){
  .sk{transform:none!important}
  .sk-veil{opacity:0!important}
  .sk-shot img{transform:scale(1.02)!important}
}