/* Services: a violet hero, then one section per discipline whose name stays pinned while its services scroll past */
main{display:block}
.cs-crumb{display:flex;gap:10px;align-items:center;font-size:14px;color:var(--muted);margin-bottom:clamp(28px,4vw,56px)}
.cs-crumb a{color:inherit;text-decoration:none}
.cs-crumb a:hover{color:var(--fg)}
.cs-crumb i{font-style:normal;opacity:.5}

.svc-hero{padding:calc(var(--annc,0px) + 150px) 0 clamp(72px,9vw,140px)}
.sv-hrow{display:grid;grid-template-columns:minmax(0,1fr);gap:56px;align-items:end}
.sv-kicker{font-size:clamp(15px,1.2vw,18px);color:var(--accent);margin:0 0 18px;font-weight:500}
.sv-title{font-size:clamp(54px,8.6vw,150px);font-stretch:82%;line-height:.9;letter-spacing:-.05em;max-width:11ch;text-wrap:balance}
.svc-lead{font-size:clamp(20px,1.8vw,26px);line-height:1.35;letter-spacing:-.015em;color:var(--muted);max-width:30ch;margin:32px 0 0}
.sv-act{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;margin-top:36px}
.sv-rate{display:inline-flex;align-items:center;gap:10px;font-size:15px;color:var(--muted)}
.sv-rate .rv-stars{margin:0}
.sv-index{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.sv-index a{display:grid;grid-template-columns:44px 1fr auto;align-items:baseline;gap:12px;padding:22px 0;border-bottom:1px solid var(--line);color:inherit;text-decoration:none;position:relative;overflow:hidden}
.sv-index small{font-size:13px;color:var(--muted)}
.sv-index b,
.sv-index .t-b{font-weight:500;font-size:clamp(30px,3vw,48px);letter-spacing:-.035em;line-height:1;transition:transform .6s var(--out)}
.sv-index em,
.sv-index .t-em{font-style:normal;font-size:14px;color:var(--muted)}
.sv-index a::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--out)}
.sv-index a:hover b,
.sv-index a:hover .t-b,.sv-index a:focus-visible b,.sv-index a:focus-visible .t-b{transform:translateX(10px)}
.sv-index a:hover::after,.sv-index a:focus-visible::after{transform:scaleX(1)}

/* Rail: follows the reader through the four disciplines */
.sv-rail{position:sticky;top:calc(var(--annc,0px) + 70px);z-index:40;background:var(--bg);border-bottom:1px solid var(--line);transition:background-color .6s var(--ease)}
.sv-rail-in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.sv-rail a{position:relative;display:flex;align-items:center;gap:10px;padding:16px 0;color:var(--muted);text-decoration:none;font-size:15px;font-weight:500;transition:color .4s}
.sv-rail a .sv-rn{font-size:12px;opacity:.7}
.sv-rail a i{position:absolute;left:0;right:8px;bottom:-1px;height:2px;background:var(--accent);transform:scaleX(var(--p,0));transform-origin:0 50%}
.sv-rail a.on{color:var(--fg)}

/* Discipline */
.sv-d{padding:clamp(80px,10vw,160px) 0}
.sv-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:48px}
.sv-side-in .idx{display:block;margin-bottom:18px}
.sv-name{font-size:clamp(76px,13vw,220px);font-weight:500;font-stretch:82%;letter-spacing:-.055em;line-height:.85;margin:0;padding-bottom:.14em;margin-bottom:-.14em;--h:-70%}
html.js .sv-name{clip-path:polygon(0 calc(var(--h) + 70%),100% var(--h),100% 100%,0 100%);--h:100%}
.sv-tag{font-size:clamp(24px,2.3vw,36px);line-height:1.1;letter-spacing:-.03em;font-weight:500;margin:28px 0 0;max-width:16ch;text-wrap:balance}
.sv-intro{font-size:clamp(17px,1.25vw,19px);line-height:1.55;color:var(--muted);max-width:36ch;margin:18px 0 0}
.sv-body{display:grid;gap:0;border-top:1px solid var(--line)}
.sv-s{padding:clamp(32px,3.4vw,48px) 0;border-bottom:1px solid var(--line)}
.sv-sh{display:flex;align-items:baseline;gap:18px;margin-bottom:16px}
.sv-n{font-size:13px;color:var(--accent);font-variant-numeric:tabular-nums;min-width:28px}
.sv-s h3{font-size:clamp(28px,2.6vw,42px);font-weight:500;letter-spacing:-.035em;line-height:1;margin:0}
.sv-s p{font-size:clamp(17px,1.25vw,19px);line-height:1.55;margin:0 0 22px 46px;max-width:52ch}
.sv-s .ws-tags{margin-left:46px}
.sv-s .ws-tags .t-span{background:transparent;border:1px solid var(--line);color:var(--fg)}

/* Proof: one real client per discipline, linked to its case study */
.svc-proof{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;margin-top:clamp(40px,4vw,64px);color:inherit;text-decoration:none}
.sv-shot{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:1312/800;background:var(--soft);clip-path:polygon(0 0,100% 0,100% 100%,0 100%);transition:clip-path .9s var(--ease)}
.sv-shot img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;transform:scale(1.04);transition:transform 1.2s var(--out)}
.svc-proof:hover .sv-shot{clip-path:polygon(0 0,100% 0,100% 74%,88% 100%,0 100%)}
.svc-proof:hover .sv-shot img{transform:scale(1)}
.sv-pm{display:flex;flex-direction:column;gap:8px}
.sv-pk{font-size:13px;color:var(--muted)}
.sv-pn{font-size:clamp(28px,2.6vw,40px);font-weight:500;letter-spacing:-.035em;line-height:1;display:inline-flex;align-items:center;gap:14px}
.sv-pn svg{width:.6em;height:.6em;transition:transform .6s var(--out)}
.svc-proof:hover .sv-pn svg,.svc-proof:focus-visible .sv-pn svg{transform:translateX(6px)}
.sv-pc{font-size:15px;color:var(--muted)}
.sv-pq{margin:14px 0 0;padding:16px 0 0;border-top:1px solid var(--line);font-size:clamp(17px,1.3vw,20px);line-height:1.45;letter-spacing:-.01em;max-width:46ch}
.sv-pq p{margin:0}.sv-pq p::before{content:"\201C"}.sv-pq p::after{content:"\201D"}
.sv-pq cite{display:block;margin-top:10px;font-style:normal;font-size:14px;color:var(--muted)}

/* Process */
.sv-proc{padding:clamp(96px,11vw,180px) 0;position:relative}
.sv-ph{display:grid;gap:22px;margin-bottom:clamp(48px,6vw,96px)}
.svc-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:36px;position:relative;z-index:1}
.svc-steps li{border-top:1px solid var(--line);padding-top:24px}
.sv-sn{display:block;font-size:clamp(48px,5vw,84px);font-weight:500;letter-spacing:-.05em;line-height:.9;color:var(--accent);font-variant-numeric:tabular-nums;margin-bottom:22px}
.svc-steps h3{font-size:clamp(22px,1.8vw,28px);font-weight:500;letter-spacing:-.025em;margin:0 0 12px}
.svc-steps p{margin:0;color:var(--muted);line-height:1.55;max-width:32ch}
.sv-line{display:none}

/* Platforms */
.sv-plat{padding:clamp(80px,9vw,140px) 0}
.sv-plat-in{display:grid;gap:28px}
.sv-plat-h{font-size:14px;font-weight:500;color:var(--muted);margin:0;letter-spacing:0}
.sv-plats{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sv-plats li{font-size:clamp(34px,5.4vw,92px);font-weight:500;font-stretch:82%;letter-spacing:-.05em;line-height:1.05;padding:18px 0;margin-right:.6em;position:relative}
.sv-plats li:not(:last-child)::after{content:"/";position:absolute;right:-.42em;color:var(--muted);opacity:.5;font-weight:400}
.sv-plat-note{margin:0;color:var(--muted);font-size:17px}
.sv-plat-note .ulink{color:var(--fg)}

@media (min-width:900px){
  .sv-hrow{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(48px,7vw,140px)}
  .sv-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(48px,7vw,140px);align-items:start}
  .sv-side{position:sticky;top:calc(var(--annc,0px) + 150px)}
  .sv-pm{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);column-gap:40px;align-items:start}
  .sv-pk,.sv-pn,.sv-pc{grid-column:1}
  .sv-pq{grid-column:2;grid-row:1/span 3;margin:0;padding:0 0 0 28px;border-top:0;border-left:1px solid var(--line)}
  .svc-steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3vw,48px)}
  .svc-steps li{border-top:0;padding-top:34px}
  .sv-line{display:block;position:relative;height:1px;background:var(--line);margin-top:calc(-1 * var(--lh,0px))}
  .sv-proc .wrap{position:relative}
  .sv-line{position:absolute;left:var(--gl);right:var(--gr);top:var(--lt,0);margin:0}
  .sv-line i{position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:0 50%}
}
@media (max-width:899px){
  .sv-rail{top:calc(var(--annc,0px) + 62px)}
  .sv-rail a{font-size:13px;gap:6px;padding:13px 0}
  .sv-rail a .sv-rn{display:none}
  .sv-s p,.sv-s .ws-tags{margin-left:0}
}
@media (prefers-reduced-motion:reduce){html.js .sv-name{clip-path:none}}

/* Headline words rise inside masks: give the masks room for apostrophes and descenders */
.sv-title .hm-mask{padding:.1em .06em .2em;margin:-.1em -.06em -.2em}