/* RJG Mediaworks: shared template for the seven service pages (Builder S). Prefix: sv-
   Page order: hero (.phero.sv-hero) > jump bar (.sv-jump) > What you get (.wcard, kit) > Try it (.sv-stage around a
   per-service demo) > What's included (.sv-inc) > How it works (.steps, kit) > Work (.clients, kit) > FAQ (.acc, kit)
   > Pairs well with (.sv-pair) > cta partial (kit).
   Everything here is added on top of site.css; the kit is not edited. */

/* ============================== hero ============================== */
.sv-hero .phero__h1 { font-size: clamp(40px, 5.6vw, 90px); line-height: .98; }
.sv-hero .phero__lead { max-width: 52ch; }
.sv-hero .label a { color: inherit; border-bottom: 1px solid var(--line-2); padding-bottom: 2px; transition: color .3s, border-color .3s; }
.sv-hero .label a:hover { color: #fff; border-color: var(--lime); }
.sv-hero .label span { opacity: .55; }
.sv-hero .phero__art { max-width: 540px; aspect-ratio: 400 / 340; }
.phero__tags { margin-top: clamp(28px, 3.4vw, 40px); }
.phero__tags .tags { margin-top: 0; }

/* ============================== in-page jump bar ============================== */
.sv-jump { position: sticky; top: var(--hdr-h); z-index: 60; background: rgba(5, 5, 5, .84); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid var(--line); }
.sv-jump__in { display: flex; align-items: center; gap: 4px; height: 54px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -ms-overflow-style: none; }
.sv-jump__in::-webkit-scrollbar { display: none; }
.sv-jump__t { flex: none; margin-right: 14px; padding-right: 18px; border-right: 1px solid var(--line); line-height: 54px; }
.sv-jump a { position: relative; flex: none; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 999px; font: 400 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); transition: color .3s, background .3s; }
.sv-jump a::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, .2); transition: background .3s, box-shadow .3s; }
.sv-jump a:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.sv-jump a.is-on { color: #fff; background: rgba(255, 255, 255, .07); }
.sv-jump a.is-on::before { background: var(--lime); box-shadow: 0 0 8px var(--lime); }
@media (max-width: 640px) { .sv-jump__t { display: none; } .sv-jump__in { height: 50px; } }

/* ============================== sections ============================== */
.sv-sec { padding-block: clamp(80px, 10.5vw, 160px); border-top: 1px solid var(--line); scroll-margin-top: 56px; }
.sv-hero + .sv-jump + .sv-sec { border-top: 0; }
.sv-head { margin-bottom: clamp(40px, 5.2vw, 72px); }
.sv-head .h2 { font-size: clamp(34px, 4.4vw, 68px); }
.sv-head .lead { margin-top: 22px; }
.sv-head--row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(20px, 4vw, 64px); align-items: end; }
.sv-head--row .lead { margin-top: 0; justify-self: end; }
@media (max-width: 899px) { .sv-head--row { grid-template-columns: 1fr; } .sv-head--row .lead { margin-top: 20px; justify-self: start; } }

/* what you get: three kit .wcard cards */
.sv-out__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sv-out .wcard { min-height: clamp(260px, 24vw, 330px); }
.sv-out .wcard__ic { margin-bottom: 0; }
.sv-out .wcard h3 { margin-top: clamp(40px, 5vw, 76px); font-size: clamp(26px, 2.4vw, 36px); }
.sv-out .wcard p { font-size: 16.5px; max-width: 36ch; }
@media (max-width: 960px) { .sv-out__grid { grid-template-columns: 1fr; } .sv-out .wcard { min-height: 0; } .sv-out .wcard h3 { margin-top: 36px; } }

/* ============================== demo stage (the framed card every demo sits in) ============================== */
.sv-demo { overflow: hidden; }
.sv-demo::before { content: ""; position: absolute; left: 50%; top: 0; width: min(1400px, 140%); height: 560px; transform: translateX(-50%); pointer-events: none; background: radial-gradient(50% 60% at 50% 0%, rgba(255, 255, 255, .055), transparent 70%); }
.sv-stage { position: relative; border: 1px solid var(--line-2); border-radius: 24px; background: #090909; overflow: hidden; box-shadow: 0 60px 140px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .08); }
.sv-stage__bar { display: flex; align-items: center; gap: 7px; min-height: 46px; padding: 0 18px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .015); }
.sv-stage__bar .tdot { flex: none; }
.sv-stage__url { margin: 0 auto 0 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 11px/1 var(--mono); letter-spacing: .04em; color: var(--muted); }
.sv-stage__body { padding: clamp(18px, 2.4vw, 32px); }
.sv-stage .tag { flex: none; }
.sv-hint { margin-top: 16px; font: 400 11px/1.5 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.sv-hint b { color: #fff; font-weight: 400; }
@media (max-width: 640px) { .sv-stage { border-radius: 18px; } .sv-stage__url { display: none; } .sv-stage__bar .tag { margin-left: auto; } }

/* ============================== what's included ============================== */
.sv-inc__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.sv-inc__intro { position: sticky; top: calc(var(--hdr-h) + 96px); }
.sv-inc__intro .lead { margin-top: 22px; }
.sv-inc__intro .btn { margin-top: 32px; }
.sv-inc__list { border-top: 1px solid var(--line); counter-reset: inc; }
.sv-inc__row { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px 16px; padding: clamp(22px, 2.6vw, 34px) 0; border-bottom: 1px solid var(--line); }
.sv-inc__row::before { content: ""; position: absolute; left: -14px; top: 50%; width: 3px; height: 0; border-radius: 2px; background: var(--lime); box-shadow: 0 0 12px var(--lime); transform: translateY(-50%); transition: height .5s var(--ease); }
.sv-inc__row:hover::before { height: 36%; }
.sv-inc__n { padding-top: .5em; font: 400 12px/1 var(--mono); letter-spacing: .06em; color: var(--muted); transition: color .4s; }
.sv-inc__row:hover .sv-inc__n { color: var(--lime); }
.sv-inc__row h3 { font: 500 clamp(22px, 2.2vw, 30px)/1.12 var(--sans); letter-spacing: -.04em; transition: transform .5s var(--ease); }
.sv-inc__row:hover h3 { transform: translateX(6px); }
.sv-inc__row p { margin-top: 10px; max-width: 58ch; color: rgba(245, 245, 244, .68); }
.sv-inc__row .tags { margin-top: 14px; }
.sv-inc__row .tags li { padding: 6px 10px; font-size: 10.5px; }
@media (max-width: 1023px) { .sv-inc__grid { grid-template-columns: 1fr; } .sv-inc__intro { position: static; } .sv-inc__row::before { display: none; } }
@media (max-width: 560px) { .sv-inc__row { grid-template-columns: 30px minmax(0, 1fr); } }

/* ============================== how it works (kit .steps) ============================== */
.sv-how .steps { margin-top: clamp(24px, 3vw, 48px); }
.sv-how .step h3 { font-size: clamp(28px, 2.8vw, 40px); }
.sv-how .step p { max-width: 32ch; font-size: 16.5px; }

/* ============================== work (kit .clients rows) ============================== */
.sv-work .clients { margin-top: 0; }
.sv-work__more { display: flex; justify-content: flex-end; margin-top: 28px; }
.sv-work .sv-head--row .lead { max-width: 40ch; }

/* ============================== FAQ ============================== */
.sv-faq__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.sv-faq__intro { position: sticky; top: calc(var(--hdr-h) + 96px); }
.sv-faq__intro .lead { margin-top: 22px; }
.sv-faq .acc__btn { font-size: clamp(18px, 1.8vw, 24px); }
@media (max-width: 1023px) { .sv-faq__grid { grid-template-columns: 1fr; } .sv-faq__intro { position: static; } }

/* ============================== pairs well with ============================== */
.sv-pairs__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sv-pairs__grid[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sv-pair { min-height: 260px; padding: clamp(24px, 2.6vw, 36px); }
.sv-pair__top { display: flex; align-items: center; justify-content: space-between; }
.sv-pair__ic { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--line-2); border-radius: 14px; color: rgba(245, 245, 244, .8); transition: color .3s, border-color .3s, background .3s; }
.sv-pair__ic .ic { width: 26px; height: 26px; }
.sv-pair:hover .sv-pair__ic { color: #fff; border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .04); }
.sv-pair__go { display: inline-flex; align-items: center; gap: 8px; font: 400 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); transition: color .3s, gap .4s var(--ease); }
.sv-pair__go .ic { width: 15px; height: 15px; }
.sv-pair:hover .sv-pair__go { color: var(--lime); gap: 12px; }
.sv-pair h3 { margin-top: clamp(36px, 4vw, 56px); }
.sv-pair p { max-width: 36ch; }
@media (max-width: 960px) { .sv-pairs__grid, .sv-pairs__grid[data-n="2"] { grid-template-columns: 1fr; } .sv-pair { min-height: 0; } .sv-pair h3 { margin-top: 32px; } }

/* ============================== motion-off and small screens ============================== */
html[data-motion="off"] .sv-inc__row::before, html[data-motion="off"] .sv-inc__row h3 { transition: none; }
@media (max-width: 640px) {
  .sv-sec { padding-block: clamp(64px, 16vw, 88px); }
  .sv-head { margin-bottom: 32px; }
  .sv-work__more { justify-content: flex-start; }
}