/* Services page (Milestone 4). Tokens and shell come from tokens.css / shell.css; the closing CTA, eyebrow and
   helpers come from work.css, which this page loads too. Nothing here is loaded by other pages. */
.sv-hero{background:var(--ink);color:var(--warm);padding-block:var(--s7) var(--s6)}
.sv-hero h1{font-size:var(--t-h1);line-height:1.04}
.sv-lead{font-size:var(--t-lead);color:var(--grey);max-width:52ch;margin-top:var(--s5);line-height:1.5}
.sv-intro{background:var(--ink);color:var(--warm);padding-block:var(--s6) var(--s8);border-bottom:1px solid var(--hairline)}
.sv-intro h2{font-size:var(--t-h2);line-height:1.08}
.sv-intro-text{margin-top:var(--s4);color:var(--grey);font-size:var(--t-lead);max-width:44ch;line-height:1.5}
.sv-intro-grid{display:grid;gap:var(--s6);grid-template-columns:1fr}
.sv-jump{list-style:none;margin:0;padding:0;border-top:1px solid var(--hairline)}
.sv-jump a{display:grid;grid-template-columns:40px 1fr auto;align-items:center;column-gap:var(--s3);min-height:56px;padding:var(--s2) 0;color:var(--warm);text-decoration:none;border-bottom:1px solid var(--hairline)}
.sv-jump-n{color:var(--lime)}
.sv-jump-t{font-family:var(--font-display);font-weight:800;font-stretch:125%;font-size:clamp(17px,calc(17px + 3 * (100vw - 390px) / 1050),20px);line-height:1.2}
.sv-jump .arrow{opacity:.5;transform:rotate(90deg)}
.sv-jump a:hover,.sv-jump a:focus-visible{background:var(--lime);color:var(--ink)}
.sv-jump a:hover .sv-jump-n,.sv-jump a:focus-visible .sv-jump-n{color:var(--ink)}
.sv-jump a:hover .arrow,.sv-jump a:focus-visible .arrow{opacity:1}
.sv-jump a:focus-visible{outline-offset:-3px}

/* the five services share one layout and one band height logic, so none reads as secondary */
.sv{padding-block:var(--s8);scroll-margin-top:var(--s4)}
.sv--dark{background:var(--ink);color:var(--warm)}
.sv--light{background:var(--warm);color:var(--ink)}
.sv--light :focus-visible{outline-color:var(--ink)}
.sv-grid{display:grid;gap:var(--s7);grid-template-columns:1fr}
.sv-eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);margin-bottom:var(--s4)}
.sv--dark .sv-eyebrow{color:var(--grey)}
.sv--light .sv-eyebrow{color:var(--graphite)}
.sv-eyebrow .tick{outline:1px solid var(--ink)}
.sv--dark .sv-eyebrow .tick{outline:0}
.sv h2{font-size:var(--t-h2);line-height:1.08;overflow-wrap:anywhere}
.sv-focus{margin-top:var(--s4);font-size:var(--t-lead);line-height:1.5;max-width:46ch}
.sv--dark .sv-focus{color:var(--grey)}
.sv--light .sv-focus{color:var(--graphite)}
.sv-h{margin:var(--s6) 0 var(--s3)}
.sv--dark .sv-h{color:var(--grey)}
.sv--light .sv-h{color:var(--graphite)}
.sv-media .sv-h{margin-top:0}
.sv-list{list-style:none;margin:0;padding:0;display:grid;gap:0;max-width:46ch}
.sv-list li{padding:var(--s3) 0 var(--s3) var(--s5);position:relative;border-bottom:1px solid var(--hairline)}
.sv--light .sv-list li{border-bottom-color:rgba(10,10,11,.25)}
.sv-list li::before{content:"";position:absolute;left:0;top:calc(var(--s3) + .5em);width:8px;height:8px;background:var(--lime);outline:1px solid var(--ink)}
.sv--dark .sv-list li::before{outline:0}
.sv-cta{margin-top:var(--s6)}
.sv-cta .btn{width:100%}
.sv-tiles{list-style:none;margin:0;padding:0;display:grid;gap:var(--s5);grid-template-columns:1fr}
.sv-tile{display:block;color:inherit;text-decoration:none}
.sv-tile-img{display:block;aspect-ratio:16/9;background:var(--graphite);overflow:hidden}
.sv-tile-img img{width:100%;height:100%;object-fit:cover;display:block}
.sv-tile-meta{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s1) var(--s3);padding:var(--s3) 0 var(--s2);border-bottom:3px solid transparent}
.sv-tile-t{font-family:var(--font-display);font-weight:800;font-stretch:125%;font-size:clamp(17px,calc(17px + 3 * (100vw - 390px) / 1050),20px);line-height:1.2;overflow-wrap:anywhere}
.sv-tile-a{white-space:nowrap}
.sv--dark .sv-tile-a{color:var(--grey)}
.sv--light .sv-tile-a{color:var(--graphite)}
.sv-tile:hover .sv-tile-meta,.sv-tile:focus-visible .sv-tile-meta{border-bottom-color:var(--lime)}
.sv-panel{aspect-ratio:16/9;background:#151517;border-top:3px solid var(--lime);display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;overflow:hidden;color:var(--warm)}
.sv--light .sv-panel{background:var(--ink)}
.sv-panel-w{display:flex;align-items:center;padding:0 var(--s4);min-width:0;font-family:var(--font-display);font-weight:800;font-stretch:125%;font-size:clamp(17px,5.4vw,40px);line-height:1;letter-spacing:-.01em;overflow:hidden;border:0 solid var(--hairline)}
.sv-panel-w--1,.sv-panel-w--2{border-bottom-width:1px}
.sv-panel-w--1,.sv-panel-w--3{border-right-width:1px}
.sv-panel-w--1{color:var(--lime)}
.sv-panel-w--4{color:transparent;-webkit-text-stroke:1.2px var(--grey)}
.sv-nocase{margin-top:var(--s3);font-size:var(--t-small)}
.sv--dark .sv-nocase{color:var(--grey)}
.sv--light .sv-nocase{color:var(--graphite)}

/* process */
.sv-process{background:var(--ink);color:var(--warm);padding-block:var(--s9)}
.sv-process h2{font-size:var(--t-h2);line-height:1.08;max-width:22ch}
.sv-steps{list-style:none;margin:var(--s7) 0 0;padding:0;display:grid;gap:0;grid-template-columns:1fr;border-top:1px solid var(--hairline)}
.sv-step{padding:var(--s5) 0;border-bottom:1px solid var(--hairline);display:grid;gap:var(--s2)}
.sv-step-n{color:var(--lime)}
.sv-step h3{font-size:clamp(20px,calc(20px + 6 * (100vw - 390px) / 1050),26px);line-height:1.1}
.sv-step p{margin:0;color:var(--grey);max-width:34ch}
.sv-process-note{margin-top:var(--s6);color:var(--grey);font-size:var(--t-small)}

@media (min-width:700px){
  .sv-hero{padding-block:var(--s8) var(--s7)}
  .sv-intro-grid{grid-template-columns:1fr 1fr;gap:var(--s7);align-items:end}
  .sv-tiles--two{grid-template-columns:1fr 1fr}
  .sv-tiles--two .sv-tile-img{aspect-ratio:4/3}
  .sv-cta .btn{width:auto}
  .sv-steps{grid-template-columns:1fr 1fr;column-gap:var(--s6)}
  .sv-panel-w{font-size:clamp(20px,4vw,40px)}
}
@media (min-width:1100px){
  .sv{padding-block:var(--s9)}
  .sv-grid{grid-template-columns:5fr 6fr;gap:var(--s8);align-items:start}
  .sv-steps{grid-template-columns:repeat(4,1fr);border-top:0;gap:var(--s5)}
  .sv-step{border-bottom:0;border-top:3px solid var(--lime);padding-top:var(--s4)}
  .sv-tile-meta{flex-direction:column;align-items:flex-start}
  .sv-panel-w{font-size:clamp(22px,2.6vw,44px)}
}
@media (prefers-reduced-motion:no-preference){
  .sv-tile-img img{transition:transform var(--m-slow) var(--ease)}
  .sv-tile:hover .sv-tile-img img,.sv-tile:focus-visible .sv-tile-img img{transform:scale(1.03)}
}
html[data-motion="paused"] .sv-tile-img img{transition:none;transform:none!important}