/* Service pages (build_pages.py, 12 Nov 2026). Loads after home.css and only adds what the sub-pages need. */
.sub .top{border-bottom:1px solid #0000000f}
.sub .top-links a.on{opacity:1;text-decoration:underline;text-underline-offset:5px}

/* hero: crumb, a hand-set three-line h1, the plain line ChatGPT can quote */
.sv-hero{padding:clamp(120px,13vw,180px) var(--gutter) clamp(36px,4vw,60px)}
.sv-crumb{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:clamp(22px,2.4vw,34px)}
.sv-crumb a{border-bottom:1px solid var(--line)}
.sv-h1{font-size:clamp(26px,8.2vw,112px);line-height:.98}
.sv-h1 span{display:block;white-space:nowrap}
.sv-lede{font-size:clamp(18px,1.6vw,23px);line-height:1.5;max-width:46ch;margin-top:clamp(22px,2.4vw,36px)}
.sv-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:clamp(26px,2.8vw,40px)}

/* the picture under the hero */
.sv-media{padding:0 var(--gutter) clamp(64px,7vw,110px)}
.sv-media .web-frame{margin-top:0}
.sv-photo{width:100%;max-height:78svh;object-fit:cover;border-radius:4px}
.sv-film{border-radius:4px;overflow:hidden;background:#0c0e0a}
.sv-film video{width:100%;aspect-ratio:16/9;object-fit:cover}
.sv-ui{width:100%}

/* what you get */
.sv-blocks{padding:0 var(--gutter) clamp(64px,7vw,110px)}
.sv-block{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(12px,5vw,90px);padding:clamp(28px,3.2vw,46px) 0;border-top:1px solid var(--line)}
.sv-block:last-child{border-bottom:1px solid var(--line)}
.sv-block h2{font-size:clamp(26px,2.9vw,42px);letter-spacing:-.04em;line-height:1.08;text-wrap:balance}
.sv-block p{font-size:clamp(17px,1.35vw,19px);line-height:1.6;color:var(--muted);max-width:54ch}
.sv-block p a{color:var(--ink);border-bottom:1px solid currentColor;white-space:nowrap}

/* proof: sites, ads, clips, logos */
.sv-show{padding:clamp(72px,8vw,120px) var(--gutter)}
.sv-show h2{margin-bottom:clamp(30px,3.4vw,52px)}
.sv-sites{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,22px)}
.sv-site{display:block;text-align:left;border-radius:4px;overflow:hidden;background:#26292a;transition:transform .3s}
.sv-site:hover{transform:translateY(-4px)}
.sv-site img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.sv-cap{display:block;padding:12px 14px;font-size:14px;font-weight:500;color:var(--paper)}
.sv-ads{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.2vw,18px)}
.sv-ads .ad{width:auto;margin:0}
.sv-clips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px}
.sv-stat{font-size:15px;color:#ffffffc9;margin-bottom:32px}
.sv-stat em{display:block;font-family:var(--serif);font-size:clamp(48px,5vw,80px);line-height:1;color:#fff;margin-bottom:6px}
.sv-logos{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:26px 34px;align-items:center}
.sv-logos img{width:100%;height:clamp(24px,2.4vw,34px);object-fit:contain;filter:brightness(0) invert(1);opacity:.92}
.sv-note{margin-top:40px;font-size:15px;line-height:1.6;color:#b4b8b1;max-width:80ch}

/* questions */
.sv-faqs{padding:clamp(72px,8vw,120px) var(--gutter)}
.sv-faqs h2{margin-bottom:clamp(26px,3vw,44px)}
.sv-faq{border-top:1px solid var(--line);padding:20px 0}
.sv-faq:last-child{border-bottom:1px solid var(--line)}
.sv-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;font-size:clamp(18px,1.6vw,22px);font-weight:500;letter-spacing:-.02em;line-height:1.3}
.sv-faq summary::-webkit-details-marker{display:none}
.sv-faq summary::after{content:'+';flex:none;font-size:24px;line-height:1;color:var(--muted)}
.sv-faq[open] summary::after{content:'–'}
.sv-faq p{margin-top:12px;font-size:17px;line-height:1.6;color:var(--muted);max-width:68ch}

/* the other pages */
.sv-more{padding:clamp(64px,7vw,100px) var(--gutter)}
.sv-more h2{margin-bottom:28px}
.sv-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.sv-card{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;min-height:130px;padding:20px;border:1px solid var(--line);border-radius:4px;background:#ffffff66;font-size:clamp(18px,1.5vw,22px);font-weight:500;letter-spacing:-.02em;line-height:1.2;transition:transform .25s,background .25s}
.sv-card:hover{transform:translateY(-3px);background:#fff}
.sv-card i{font-style:normal;font-size:14px}

@media(max-width:900px){
  .sv-block{grid-template-columns:1fr}
  .sv-sites,.sv-ads,.sv-clips,.sv-cards{grid-template-columns:1fr 1fr}
  .sv-logos{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:650px){
  .sv-hero{padding-top:104px}
  .sv-actions .btn{width:100%}
  .sv-ui>img{width:100%!important;margin-left:0!important;aspect-ratio:auto}
  .sv-sites{grid-template-columns:1fr}
  .sv-logos{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 24px}
  .sv-card{min-height:96px;padding:16px}
}