/* Services page v2. Everything is scoped to .svx so nothing else on the site changes. */
main.sp.sp--services{padding-left:0;padding-right:0}
.svx{--svx-ink:var(--ink,#0A0A0A);--svx-bone:var(--bone,#ECECE8);--svx-paper:#FCFCFC;--svx-ox:var(--ox,#5A2E33);--svx-rule:rgba(10,10,10,.14);--svx-soft:rgba(10,10,10,.68);--svx-gutter:var(--gutter,clamp(1.15rem,3.4vw,3.25rem));--svx-mono:"Roboto Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;--svx-display:"Archivo","Arial Black","Helvetica Neue",Arial,sans-serif;color:var(--svx-ink);text-transform:none;letter-spacing:normal}
.svx .svx-wrap,.svx .svx-steps>.svx-wrap{max-width:1560px;margin-left:auto;margin-right:auto;padding-left:var(--svx-gutter);padding-right:var(--svx-gutter);box-sizing:border-box}
.svx .svx-label{font-family:var(--svx-mono);font-size:11px;line-height:1.5;letter-spacing:.18em;text-transform:uppercase;font-weight:400;margin:0;color:var(--svx-soft)}
.svx .svx-display{font-family:var(--svx-display);font-weight:900;font-stretch:125%;text-transform:uppercase;line-height:.92;letter-spacing:-.01em;margin:0;text-wrap:balance}
.svx .svx-acc{color:var(--svx-ox)}
.svx .svx-body{font-size:17px;line-height:1.6;max-width:52ch;margin:0;color:var(--svx-ink)}
.svx a{color:inherit}

/* Hero */
.svx .svx-hero{padding-top:clamp(40px,6vw,96px);padding-bottom:clamp(28px,4vw,48px);display:grid;gap:20px}
.svx .svx-h1{font-size:clamp(52px,10.5vw,168px)}
.svx .svx-lede{font-size:clamp(18px,1.6vw,22px);line-height:1.45;max-width:38ch;margin:0}

/* Index */
.svx .svx-index{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding-bottom:clamp(40px,6vw,80px)}
.svx .svx-index-item{position:relative;display:grid;gap:12px;align-content:start;padding:22px 56px 28px 0;border-top:1px solid var(--svx-ink);text-decoration:none;color:var(--svx-ink);transition:background .25s,color .25s,padding .25s}
.svx .svx-index-item+.svx-index-item{padding-left:24px;border-left:1px solid var(--svx-rule)}
.svx .svx-index-t{font-size:clamp(24px,2.4vw,36px)}
.svx .svx-index-d{font-size:15px;line-height:1.5;color:var(--svx-soft);max-width:30ch}
.svx .svx-arrow{position:absolute;right:20px;top:20px;font-family:var(--svx-mono);font-size:18px;transition:transform .25s}
.svx .svx-index-item:hover{background:var(--svx-ink);color:var(--svx-bone);padding-left:24px}
.svx .svx-index-item:hover .svx-label,.svx .svx-index-item:hover .svx-index-d{color:rgba(236,236,232,.75)}
.svx .svx-index-item:hover .svx-arrow{transform:translateX(4px)}

/* Service rows */
.svx .svx-svc{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,88px);align-items:center;padding-top:clamp(48px,7vw,104px);padding-bottom:clamp(48px,7vw,104px);border-top:1px solid var(--svx-rule);scroll-margin-top:90px}
.svx .svx-flip .svx-svc-text{order:2}
.svx .svx-svc-text{display:grid;gap:18px;align-content:start}
.svx .svx-h2{font-size:clamp(36px,4.4vw,72px)}
.svx .svx-svc .svx-h2{overflow-wrap:anywhere}
.svx .svx-sub{margin-top:8px;color:var(--svx-ink)}
.svx .svx-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;border-top:1px solid var(--svx-rule)}
.svx .svx-list li{font-size:15px;line-height:1.4;padding:12px 0 12px 22px;border-bottom:1px solid var(--svx-rule);position:relative}
.svx .svx-list li::before{content:"";position:absolute;left:0;top:18px;width:8px;height:8px;background:var(--svx-ox)}
.svx .svx-good{margin:0;font-size:15px;line-height:1.55;display:grid;gap:4px;max-width:52ch}
.svx .svx-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:8px}
.svx .svx-btn{display:inline-flex;align-items:center;gap:10px;background:var(--svx-ink);color:var(--svx-bone);font-family:var(--svx-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;padding:16px 24px;text-decoration:none;white-space:nowrap;transition:background .25s}
.svx .svx-btn:hover{background:var(--svx-ox)}
.svx .svx-link{font-family:var(--svx-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px}
.svx .svx-link:hover{color:var(--svx-ox)}

/* Portfolio photos */
.svx .svx-media{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);grid-template-rows:1fr 1fr;gap:12px;aspect-ratio:6/5;min-height:0}
.svx .svx-media:empty{background:var(--svx-bone);border:1px solid var(--svx-rule)}
.svx .svx-shot{position:relative;display:block;overflow:hidden;background:#dcdcd7;min-height:0}
.svx .svx-shot:first-child{grid-row:1/3}
.svx .svx-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.19,1,.22,1)}
.svx .svx-shot:hover img{transform:scale(1.04)}
.svx .svx-cap{position:absolute;left:10px;bottom:10px;max-width:calc(100% - 20px);background:var(--svx-bone);color:var(--svx-ink);font-family:var(--svx-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:6px 8px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* How it works */
.svx .svx-steps{background:var(--svx-ink);color:var(--svx-bone);padding-top:clamp(56px,8vw,112px);padding-bottom:clamp(56px,8vw,112px)}
.svx .svx-steps .svx-label{color:rgba(236,236,232,.7)}
.svx .svx-steps .svx-h2{margin-top:14px}
.svx .svx-steps-list{list-style:none;margin:clamp(32px,4vw,56px) 0 clamp(32px,4vw,48px);padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.svx .svx-steps-list li{display:grid;gap:12px;align-content:start;padding:24px 28px 0 0;border-top:1px solid rgba(236,236,232,.35)}
.svx .svx-steps-list li+li{padding-left:28px;border-left:1px solid rgba(236,236,232,.15)}
.svx .svx-num{font-family:var(--svx-display);font-weight:900;font-stretch:125%;font-size:clamp(44px,5vw,72px);line-height:.9;color:transparent;-webkit-text-stroke:1px rgba(236,236,232,.6)}
.svx .svx-step-t{font-family:var(--svx-display);font-weight:900;font-stretch:125%;text-transform:uppercase;font-size:clamp(22px,2vw,30px);line-height:1}
.svx .svx-step-d{font-size:16px;line-height:1.55;color:rgba(236,236,232,.78);max-width:34ch}
.svx .svx-btn-light{background:var(--svx-bone);color:var(--svx-ink)}
.svx .svx-btn-light:hover{background:var(--svx-paper)}

/* Ways to work */
.svx .svx-ways{padding-top:clamp(56px,8vw,112px);padding-bottom:clamp(56px,8vw,112px);display:grid;gap:18px;scroll-margin-top:90px}
.svx .svx-ways-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:clamp(20px,3vw,36px)}
.svx .svx-way{display:grid;gap:12px;align-content:start;background:var(--svx-paper);border:1px solid var(--svx-rule);padding:24px 24px 28px}
.svx .svx-way-t{font-size:clamp(22px,2vw,30px)}
.svx .svx-note{margin:8px 0 0;font-size:16px;line-height:1.55;max-width:60ch}
.svx .svx-note a{text-decoration:underline;text-underline-offset:3px}

/* Tablet and phone */
@media (max-width:900px){
  .svx .svx-index{grid-template-columns:1fr}
  .svx .svx-index-item,.svx .svx-index-item+.svx-index-item{padding:18px 48px 20px 0;border-left:0}
  .svx .svx-svc{grid-template-columns:1fr}
  .svx .svx-flip .svx-svc-text{order:0}
  .svx .svx-steps-list,.svx .svx-ways-grid{grid-template-columns:1fr}
  .svx .svx-steps-list li,.svx .svx-steps-list li+li{padding:20px 0 24px;border-left:0}
}
@media (max-width:520px){
  .svx .svx-list{grid-template-columns:1fr}
  .svx .svx-media{aspect-ratio:1/1;gap:8px}
}
@media (prefers-reduced-motion:reduce){.svx *{transition:none!important}}