/* services.css: the Services page's own placing and sizing, with the tokens of system.css only. */

/* the one deep-ocean grade of the page's footage and photos: navy from the words' side, a teal-indigo tint */
.svc-hero__phone, .svc-found__shade, .svc-ads__shade, .svc-close__shade { --tint: linear-gradient(0deg, rgb(10 34 84 / 0.22), rgb(10 34 84 / 0.22)); }

/* ---------- #hero: the general shot, a phone at the left lighting up with new clients, the words on the right ---------- */
/* --h is the band's height on a computer; the photo is sized by it, so the phone always fits under the menu */
.svc-hero { --h: max(700px, min(100svh, 980px)); box-sizing: border-box; display: grid; align-items: center; min-height: var(--h); padding: calc(var(--header-h) + clamp(2rem, 5vh, 4rem)) 0 clamp(4.5rem, 10vh, 7rem); background: var(--c-ink); }
.svc-hero__phone { position: absolute; inset: 0; margin: 0; isolation: isolate; }
/* the photo (3:2) at 1.066 times the band's height from its left edge; past its right end the ink, faded into */
.svc-hero__phone > img { position: absolute; z-index: 0; inset: auto; left: 0; top: calc(var(--h) * -0.033); width: auto; height: calc(var(--h) * 1.066); max-width: none; object-fit: cover; -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent 100%); mask-image: linear-gradient(90deg, #000 80%, transparent 100%); }
/* the grade sits between the photo and its screen, so the screen stays lit: navy toward the words, the menu's top
   and the band's foot, a faint cyan spill of the screen's light on the wood */
.svc-hero__phone::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background:
  radial-gradient(calc(var(--h) * 0.34) calc(var(--h) * 0.5) at calc(var(--h) * 0.47) 52%, rgb(5 187 252 / 0.1), transparent 70%),
  linear-gradient(90deg, rgb(2 11 25 / 0.3) 0, rgb(2 11 25 / 0.22) calc(var(--h) * 0.72), rgb(2 11 25 / 0.82) calc(var(--h) * 0.98), rgb(2 11 25 / 0.92) 100%),
  linear-gradient(180deg, rgb(2 11 25 / 0.75) 0%, rgb(2 11 25 / 0) 16%, rgb(2 11 25 / 0) 82%, var(--c-ink) 100%),
  var(--tint); }
.svc-hero__phone .screen { z-index: 2; border-radius: 22px; }
.svc-hero__in { position: relative; z-index: 2; display: grid; justify-items: end; }
.svc-hero__words { display: grid; justify-items: start; width: min(620px, 100% - var(--h) * 0.74 + var(--gutter)); }
.svc-hero__title { font-size: var(--fs-display); font-weight: 650; letter-spacing: -0.03em; line-height: 1.04; }
.svc-hero__title .quiet { display: block; color: var(--c-brand-on-ink); text-shadow: 0 0 34px rgb(5 187 252 / 0.45); }
.svc-hero__line { max-width: 34em; margin-top: clamp(1.1rem, 2.4vh, 1.5rem); color: var(--c-on-ink-soft); font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.25rem); line-height: 1.55; }
.svc-hero__cta { margin-top: clamp(1.6rem, 3.5vh, 2.25rem); }
/* the stop icon just right of the phone's lower corner (the phone ends at 0.66 and 0.92 of --h) */
.svc-hero__stop { position: absolute; z-index: 3; left: calc(var(--h) * 0.68); top: calc(var(--h) * 0.84); }

/* the lock screen, drawn at the phone's own size: its black edge, the display, the time, the new clients, the notch */
.svc-lock { position: absolute; inset: 0; background: #000; }
.svc-lock__display { position: absolute; inset: 9px; overflow: hidden; border-radius: 15px; background:
  radial-gradient(120% 60% at 20% 108%, rgb(91 41 248 / 0.55), transparent 62%),
  radial-gradient(110% 55% at 95% 96%, rgb(5 187 252 / 0.4), transparent 60%),
  linear-gradient(180deg, #06142c 0%, #0a1f45 58%, #0c2a5c 100%); }
.svc-lock__time { margin: 0; padding-top: 52px; text-align: center; font: 600 58px/1 var(--font-display); letter-spacing: -0.02em; color: rgb(234 243 255 / 0.95); }
.svc-lock__day { margin: 6px 0 0; text-align: center; font: 500 15px/1.2 var(--font-ui); color: rgb(234 243 255 / 0.78); }
.svc-lock__stack { position: absolute; left: 5px; right: 5px; top: 168px; height: 360px; }
/* on the phone's narrow screen the longest source ("Local Services ad") still leaves "New client" whole, every word
   13 px or more as shown */
.svc-lock__stack[data-scene="newclients"] .nc-card { padding: 4px 10px 0; }
.svc-lock__stack[data-scene="newclients"] .nc-row { gap: 8px; }
.svc-lock__stack[data-scene="newclients"] .nc-src { padding: 5px 7px; font-size: 13px; }
.svc-lock__bar { position: absolute; left: 50%; bottom: 8px; width: 104px; height: 4px; margin-left: -52px; border-radius: 2px; background: rgb(234 243 255 / 0.8); }
.svc-lock__notch { position: absolute; left: 25%; right: 25%; top: 0; height: 25px; border-radius: 0 0 13px 13px; background: #000; }

/* ---------- the glass panel that holds a group's scene and its services ---------- */
.svc-panel { padding: 18px 18px 20px; display: grid; gap: 16px; }
.svc-panel__scene { position: relative; display: grid; }
.svc-panel__scene .scene { width: 100%; }
.svc-panel__stop { position: absolute; top: 12px; right: 12px; }
.svc-list { margin: 0; padding: 0 4px; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; text-align: left; }
.svc-list li { display: grid; align-content: start; gap: 4px; padding-top: 12px; border-top: 1px solid rgb(5 187 252 / 0.16); }
.svc-list b { font: 600 1rem/1.3 var(--font-display); letter-spacing: -0.01em; color: var(--c-on-ink); }
.svc-list span { color: var(--c-on-ink-soft); font-size: var(--fs-small); line-height: 1.45; }

/* ---------- #found: the map over a street of homes, the four services in the same panel ---------- */
.svc-found { padding-block: var(--section-y); }
.svc-found .band__media video { object-position: 50% 55%; }
.svc-found__shade { background:
  linear-gradient(90deg, rgb(2 11 25 / 0.92) 0%, rgb(2 11 25 / 0.8) 32%, rgb(2 11 25 / 0.46) 58%, rgb(2 11 25 / 0.42) 100%),
  linear-gradient(180deg, var(--c-ink) 0%, rgb(2 11 25 / 0) 16%, rgb(2 11 25 / 0) 84%, var(--c-ink) 100%),
  var(--tint); }
.svc-found__in { display: grid; gap: clamp(2rem, 4vw, 3rem); }
/* its width less its own side padding, so it never spills past the column (up to about 1164 px wide) */
.svc-found__panel { justify-self: end; width: min(1020px, 100% - 20px - clamp(1.25rem, 3vw, 2.75rem)); grid-template-columns: minmax(0, 470px) minmax(0, 1fr); align-items: center; column-gap: clamp(1.5rem, 3vw, 3rem); padding: 20px clamp(1.25rem, 3vw, 2.75rem) 20px 20px; }
.svc-found__scene .scene { height: 540px; }
.svc-found__panel .svc-list { grid-template-columns: 1fr; gap: 20px; }
.svc-found__panel .svc-list b { font-size: 1.125rem; }
.svc-found__panel .svc-list span { font-size: 1rem; }

/* ---------- #break: the sentence as the picture, on the designed ground ---------- */
.svc-break { background: radial-gradient(56% 46% at 54% 72%, rgb(11 114 250 / 0.14), transparent 70%), radial-gradient(40% 36% at 88% 64%, rgb(91 41 248 / 0.12), transparent 70%), var(--c-ink); }
.svc-break__in { position: relative; }
.svc-break__scene { width: 100%; height: 420px; }
.svc-break__stop { position: absolute; right: 0; top: 0; }

/* ---------- #ads: the attorney on a new caller's line, the ads' panel on the far side ---------- */
.svc-ads { padding-block: var(--section-y); }
/* the photo at its own shape across the band's top (never drawn larger than its file), the ink below it */
.svc-ads .band__media { inset: 0 0 auto; height: min(100%, 56.25vw); }
.svc-ads .band__media img { object-position: 72% 40%; }
.svc-ads__phone { display: none; }
.svc-ads__shade { inset: 0 0 auto; height: min(100%, 56.25vw); background:
  linear-gradient(90deg, rgb(2 11 25 / 0.95) 0%, rgb(2 11 25 / 0.86) 30%, rgb(3 14 32 / 0.55) 46%, rgb(4 18 40 / 0.14) 62%, rgb(4 18 40 / 0) 74%),
  linear-gradient(180deg, var(--c-ink) 0%, rgb(2 11 25 / 0) 16%, rgb(2 11 25 / 0) 76%, var(--c-ink) 100%),
  var(--tint); }
.svc-ads__col { width: min(560px, 100%); display: grid; gap: clamp(1.75rem, 3vw, 2.5rem); }
.svc-ads__scene .scene { height: 460px; }
.svc-ads__panel .svc-list { grid-template-columns: 1fr; gap: 10px; }
.svc-ads__panel .svc-list li { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); column-gap: 16px; }

/* ---------- #trust: the client comparing firms at her kitchen table, the island over the blurred kitchen ---------- */
.svc-trust__head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.svc-trust__frame { position: relative; display: grid; align-items: center; min-height: 640px; border-radius: var(--radius-l); overflow: hidden; background: var(--c-deep); box-shadow: inset 0 0 0 1px rgb(5 187 252 / 0.12); }
.svc-trust__media { position: absolute; inset: 0; overflow: hidden; }
.svc-trust__media img { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; object-position: 60% 50%; }
.svc-trust__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(2 11 25 / 0.55) 0%, rgb(2 11 25 / 0.25) 40%, rgb(2 11 25 / 0) 60%), linear-gradient(0deg, rgb(10 34 84 / 0.16), rgb(10 34 84 / 0.16)); }
.svc-trust__panel { position: relative; z-index: 1; width: min(470px, calc(100% - 48px)); margin: 24px; }
.svc-trust__scene .scene { height: 300px; }
.svc-trust__stop { position: absolute; z-index: 2; top: 16px; right: 16px; }

/* ---------- #leads: the same call, two framed photos, the same three beats on each ---------- */
.svc-leads .wrap { position: relative; }
.svc-leads__pair { margin-top: clamp(2.5rem, 5vw, 3.5rem); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.5vw, 2rem); }
.svc-side { position: relative; margin: 0; aspect-ratio: 4 / 3.3; border-radius: var(--radius-l); overflow: hidden; background: var(--c-deep); }
.svc-side__media { position: absolute; inset: 0; overflow: hidden; }
.svc-side__media img { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; }
.svc-side--before .svc-side__media img { object-position: 36% 30%; }
.svc-side--after .svc-side__media img { object-position: 74% 34%; }
.svc-side__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(2 11 25 / 0.82) 0%, rgb(2 11 25 / 0.35) 38%, rgb(2 11 25 / 0) 56%), linear-gradient(0deg, rgb(10 34 84 / 0.18), rgb(10 34 84 / 0.18)); }
.svc-side--before .svc-side__media::after { background: linear-gradient(0deg, rgb(2 11 25 / 0.82) 0%, rgb(2 11 25 / 0.35) 38%, rgb(2 11 25 / 0) 56%), linear-gradient(0deg, rgb(10 30 70 / 0.34), rgb(10 30 70 / 0.34)); }
.svc-side__card { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 16px; padding: 14px 16px 16px; display: grid; gap: 10px; }
.svc-side__label { color: var(--c-on-ink-soft); }
.svc-side--after .svc-side__label { color: var(--c-accent-on-ink); }
.svc-side__rows { display: grid; gap: 8px; }
.svc-row { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; color: var(--c-on-ink); font: 500 1rem/1.4 var(--font-ui); opacity: var(--kit-in, 1); transform: translateY(calc((1 - var(--kit-in, 1)) * 12px)); }
.svc-row b { font-weight: 600; font-variant-numeric: tabular-nums; }
.svc-row__icon { width: 20px; height: 20px; margin-top: 1px; fill: none; stroke: var(--c-brand-on-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.svc-side--before .svc-row__icon { stroke: var(--c-on-ink-soft); }
.svc-row__tag { display: inline-block; margin-left: 0.5rem; padding: 0.1rem 0.5rem; border-radius: 999px; background: rgb(5 187 252 / 0.12); box-shadow: inset 0 0 0 1px rgb(5 187 252 / 0.3); color: var(--c-brand-on-ink); font: 500 0.8125rem/1.5 var(--font-ui); white-space: nowrap; vertical-align: 1px; }
.svc-row--lost { color: var(--c-on-ink-soft); }
.svc-row--won { color: var(--c-accent-on-ink); }
.svc-row--won .svc-row__icon { stroke: var(--c-accent-on-ink); }
.svc-leads__stop { position: absolute; right: 0; bottom: -56px; }

/* ---------- #mix: the signature, in a frame on the designed ground ---------- */
.svc-mix { background: radial-gradient(50% 40% at 62% 62%, rgb(11 114 250 / 0.12), transparent 70%), var(--c-ink); }
.svc-mix__stage { position: relative; margin-top: clamp(2.5rem, 5vw, 3.5rem); padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: var(--radius-l); background: rgb(7 24 51 / 0.5); box-shadow: inset 0 0 0 1px rgb(5 187 252 / 0.14); }
.svc-mix__scene { width: 100%; height: 560px; }
.svc-mix__stop { position: absolute; top: 16px; right: 16px; }

/* ---------- #uspo (F4.1): uSPO, the premium service; a laptop at the right, its screen this site's own search page ---------- */
/* the photo drawn whole at the band's height (h.screen lays the scene on its screen from the photo's own box), the
   screen's right edge at 92% of the band; the words and the panel at the left, over the shaded wall */
.svc-uspo { --h: clamp(760px, 62vw, 900px); box-sizing: border-box; display: grid; align-items: center; min-height: var(--h); padding-block: var(--section-y); background: var(--c-ink); }
.svc-uspo__in { display: grid; gap: clamp(1.75rem, 3vw, 2.5rem); justify-items: start; }
.svc-uspo__head, .svc-uspo__panel { position: relative; z-index: 2; box-sizing: border-box; width: min(560px, 46%); }
.svc-uspo__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.svc-uspo__photo { --tint: linear-gradient(0deg, rgb(10 34 84 / 0.22), rgb(10 34 84 / 0.22)); position: absolute; inset: 0; margin: 0; isolation: isolate; }
.svc-uspo__photo > img { position: absolute; z-index: 0; top: calc(50% - var(--h) / 2); left: calc(92% - var(--h) * 1.239); width: auto; height: var(--h); max-width: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26%); mask-image: linear-gradient(90deg, transparent 0, #000 26%); }
.svc-uspo__photo::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background:
  linear-gradient(90deg, var(--c-ink) 0%, rgb(2 11 25 / 0.88) 26%, rgb(2 11 25 / 0.4) 48%, rgb(2 11 25 / 0) 64%),
  linear-gradient(180deg, var(--c-ink) 0%, rgb(2 11 25 / 0) 14%, rgb(2 11 25 / 0) 86%, var(--c-ink) 100%),
  var(--tint); }
.svc-uspo__photo .screen { z-index: 2; }
/* the stop on the wall at the screen's right, beside its top */
.svc-uspo__stop { position: absolute; z-index: 3; left: calc(92% + 18px); top: calc(50% - var(--h) * 0.2); }
.svc-uspo__panel { padding: 20px 20px 16px; }
.svc-uspo__ask { justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--c-brand-on-ink); font: 600 1rem/1.3 var(--font-ui); text-decoration: none; }
.svc-uspo__ask svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-fast) var(--ease-out); }
.svc-uspo__ask:hover { text-decoration: underline; text-underline-offset: 4px; }
.svc-uspo__ask:hover svg, .svc-uspo__ask:focus-visible svg { transform: translateX(3px); }

/* ---------- #faq ---------- */
.faq__in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.faq__head { position: sticky; top: calc(var(--header-h) + 2rem); }

/* ---------- #close: the café owner opening up; the words on the far side ---------- */
.svc-close { display: grid; align-items: center; min-height: clamp(580px, 72vh, 780px); padding-block: var(--section-y); }
.svc-close .band__media video { object-position: 64% 32%; }
.svc-close__shade { background:
  linear-gradient(90deg, rgb(2 11 25 / 0.95) 0%, rgb(2 11 25 / 0.86) 30%, rgb(3 14 32 / 0.5) 48%, rgb(4 18 40 / 0.1) 64%, rgb(4 18 40 / 0) 76%),
  linear-gradient(180deg, var(--c-ink) 0%, rgb(2 11 25 / 0) 20%, rgb(2 11 25 / 0) 78%, var(--c-ink) 100%),
  var(--tint); }
/* the rise under the words, its arrow ending below the buttons: the words (about 306 px) sit in the middle, so the free foot is about half the rest */
.svc-close__rise { position: absolute; z-index: 0; left: 0; bottom: 0; width: min(620px, 46%); height: calc(59% - 220px); pointer-events: none; opacity: 0.8; filter: drop-shadow(0 0 8px rgb(5 187 252 / 0.6)); }
.svc-close__in { position: relative; z-index: 1; }
.svc-close__words { width: min(560px, 100%); }
.svc-close__title { font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4.25rem); letter-spacing: -0.03em; }
.svc-close__line { max-width: 28rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.svc-close__stop { position: absolute; z-index: 2; right: max(var(--gutter), calc((100% - var(--max-w)) / 2)); bottom: calc(var(--section-y) - 3rem); }

/* ---------- the narrower screens ---------- */
/* the header: the words first, then the phone under them, large, cropped from the same photo */
@media (max-width: 999.98px) {
  .svc-hero { display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding: calc(var(--header-h) + 2rem) 0 0; }
  .svc-hero__in { order: 1; justify-items: start; }
  .svc-hero__words { width: min(640px, 100%); }
  /* the photo at 850 px high: the phone's glass 300 px wide, its lock screen at its own size (every word 12 px or more) */
  .svc-hero__media { order: 2; position: relative; inset: auto; z-index: 0; height: 740px; margin-top: 1.25rem; }
  .svc-hero__phone { width: min(100%, 744px); margin-inline: auto; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); }
  .svc-hero__phone > img { top: -72px; left: calc(50% - 372px); height: 850px; -webkit-mask-image: none; mask-image: none; }
  .svc-hero__phone::after { background: radial-gradient(46% 50% at 50% 50%, rgb(5 187 252 / 0.1), transparent 70%), linear-gradient(180deg, var(--c-ink) 0%, rgb(2 11 25 / 0.2) 12%, rgb(2 11 25 / 0.2) 84%, var(--c-ink) 100%), var(--tint); }
  .svc-hero__stop { left: auto; right: var(--gutter); top: auto; bottom: 18px; }
  /* uSPO: the words first, the laptop large under them (its screen the width less 16 px at most, 760 px high at most:
     every word on it 13 px or more down to 330 px wide), the panel pulled up over the keyboard and the stool */
  .svc-uspo { --m: min(760px, calc((100vw - 16px) * 1.88)); display: block; min-height: 0; }
  .svc-uspo__in { gap: 0; }
  .svc-uspo__head, .svc-uspo__panel { width: min(640px, 100%); }
  .svc-uspo__media { position: relative; inset: auto; width: 100vw; height: calc(var(--m) * 0.9); margin: 1rem calc(50% - 50vw) 0; }
  .svc-uspo__photo { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); }
  .svc-uspo__photo > img { top: calc(var(--m) * -0.1); left: calc(50% - var(--m) * 0.9732); height: var(--m); -webkit-mask-image: none; mask-image: none; }
  .svc-uspo__photo::after { background: linear-gradient(180deg, var(--c-ink) 0%, rgb(2 11 25 / 0) 12%, rgb(2 11 25 / 0) 62%, rgb(2 11 25 / 0.7) 82%, var(--c-ink) 100%), var(--tint); }
  .svc-uspo__stop { left: auto; right: var(--gutter); top: calc(var(--m) * 0.06); }
  .svc-uspo__panel { margin-top: calc(var(--m) * -0.34); }
}
@media (max-width: 1023px) {
  /* the attorney in the column, under the words: her face clear above the panel, which stands on her desk */
  .svc-ads .band__media, .svc-ads__shade { display: none; }
  .svc-ads__phone { display: block; position: relative; height: 540px; margin: 0 calc(-1 * var(--gutter)) -310px; overflow: hidden; }
  .svc-ads__phone img { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; object-position: 80% 18%; }
  .svc-ads__phone::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--c-ink) 0%, rgb(2 11 25 / 0) 14%, rgb(2 11 25 / 0) 46%, rgb(2 11 25 / 0.6) 72%, var(--c-ink) 100%), linear-gradient(0deg, rgb(10 34 84 / 0.22), rgb(10 34 84 / 0.22)); }
  .svc-ads__col { width: 100%; gap: 1.75rem; }
  /* the width with the padding inside it: the panel ends at the column's edge, never past the screen's */
  .svc-ads__panel { position: relative; z-index: 1; box-sizing: border-box; width: min(560px, 100%); }
  .svc-found__panel { justify-self: start; box-sizing: border-box; width: min(560px, 100%); grid-template-columns: 1fr; padding: 18px 18px 20px; }
  .svc-found__panel .svc-list { gap: 14px; }
  .svc-found__panel .svc-list b { font-size: 1rem; }
  .svc-found__panel .svc-list span { font-size: var(--fs-small); }
  .svc-break__scene { height: 460px; }
  .svc-mix__scene { height: 540px; }
}
@media (max-width: 860px) {
  .svc-leads__pair { grid-template-columns: 1fr; }
  /* each card stays on its photo, over the lower part, the faces clear above it */
  .svc-side { aspect-ratio: 4 / 3; }
  .svc-side--after .svc-side__media img { object-position: 80% 30%; }
}
@media (max-width: 560px) {
  .svc-side { aspect-ratio: 4 / 5; }
  .svc-side--before .svc-side__media img { object-position: 30% 20%; }
  .svc-side--after .svc-side__media img { object-position: 78% 28%; }
  .svc-side__card { left: 10px; right: 10px; bottom: 10px; padding: 12px 12px 14px; }
}
@media (max-width: 760px) {
  .svc-found__shade { background: linear-gradient(180deg, var(--c-ink) 0%, rgb(2 11 25 / 0.78) 14%, rgb(2 11 25 / 0.62) 50%, rgb(2 11 25 / 0.82) 86%, var(--c-ink) 100%), var(--tint); }
  .svc-found__scene .scene { height: 520px; }
  .svc-panel { padding: 14px 12px 16px; }
  /* the map a little wider than the words under it: its rows' lines fit down to 360 px */
  .svc-found__panel .svc-found__scene { margin-inline: -4px; }
  .svc-panel__stop { top: -52px; right: 0; }
  .svc-list { grid-template-columns: 1fr; }
  .svc-ads__panel .svc-list li { grid-template-columns: 1fr; }
  .svc-break__scene { height: 520px; }
  /* the client's phone shows above the panel, which stands on the photo's lower part */
  .svc-trust__frame { display: block; min-height: 0; padding-top: 72vw; }
  .svc-trust__media { inset: 0 0 auto; height: calc(72vw + 260px); }
  .svc-trust__media img { object-position: 54% 30%; }
  .svc-trust__media::after { background: linear-gradient(0deg, rgb(2 11 25 / 0.7) 0%, rgb(2 11 25 / 0.3) 60%, rgb(2 11 25 / 0) 80%), linear-gradient(0deg, rgb(10 34 84 / 0.16), rgb(10 34 84 / 0.16)); }
  .svc-trust__panel { width: auto; margin: 0 12px 12px; }
  /* room above the frame for the stop, clear of the line's last words */
  .svc-mix__stage { margin-top: 4.5rem; padding: 1rem 0.75rem 1.25rem; }
  .svc-mix__scene { height: 600px; }
  .svc-mix__stop { top: -56px; right: 0; }
  .faq__in { grid-template-columns: 1fr; }
  .faq__head { position: static; }
  .svc-close { align-items: end; min-height: 760px; }
  .svc-close .band__media video { object-position: 66% 30%; }
  .svc-close__shade { background: linear-gradient(0deg, rgb(2 11 25 / 0.97) 0%, rgb(2 11 25 / 0.9) 48%, rgb(2 11 25 / 0.35) 66%, rgb(2 11 25 / 0) 80%), linear-gradient(180deg, var(--c-ink) 0%, rgb(2 11 25 / 0) 18%), var(--tint); }
  /* the words fill the foot here: no room for the rise */
  .svc-close__rise { display: none; }
  .svc-close__stop { right: var(--gutter); bottom: auto; top: calc(var(--section-y) + 0.5rem); }
}