/* services.css: the Services page's parts placed and sized ("chapters on footage"), with the tokens of system.css and
   the components of components.css. */

/* ---------- hero: a navy panel with the words; an owner at ease on a call in her garden, every channel into one inbox ---------- */
.svc-hero { container-type: inline-size; position: relative; display: grid; grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); min-height: clamp(600px, calc(100svh - var(--header-h)), 800px); background: var(--c-ink); color: var(--c-on-ink); }
.svc-hero__panel { display: flex; align-items: center; padding: 56px clamp(28px, 4cqw, 64px) 64px max(var(--gutter), calc((100cqw - var(--max-w)) / 2)); }
.svc-hero__copy { display: grid; gap: 22px; max-width: 520px; }
.svc-hero__title { font-size: clamp(2.25rem, 1.2rem + 2.7vw, 3.5rem); color: var(--c-on-ink); }
.svc-hero__lead { max-width: 44ch; font-size: var(--fs-lead); line-height: 1.55; color: var(--c-on-ink-soft); }
.svc-hero .cta-row { margin-top: 6px; }
.svc-hero .cta-note { color: var(--c-on-ink-soft); }
.svc-hero__media { position: relative; overflow: hidden; background: var(--c-ink); }
.svc-hero__clip { position: absolute; inset: 0; overflow: hidden; }
/* she sits in the clip's right half (her phone at 62-69%, her face at 68-79%): this crop keeps the table and the garden
   on the left for the inbox, clear of her hand, her phone and her face from 1280 px up */
.svc-hero__clip video, .svc-hero__clip img { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; object-position: 64% 30%; }
.svc-hero__media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, color-mix(in srgb, var(--c-ink) 50%, transparent) 0%, color-mix(in srgb, var(--c-ink) 0%, transparent) 46%); }
.svc-hero__scene { position: absolute; z-index: 2; left: 16px; top: 40px; width: min(340px, calc(100% - 32px)); height: min(560px, calc(100% - 80px)); }
.svc-hero__stop { position: absolute; z-index: 3; top: 20px; right: max(var(--gutter), calc((100cqw - var(--max-w)) / 2)); }
/* under 1280 px the split is too narrow for the inbox beside her: the words on top, then her whole, then the inbox,
   rising over the clip's foot only (the table), clear of both her hands */
@media (max-width: 1279px) {
  .svc-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .svc-hero__panel { padding: 40px var(--gutter) 44px; }
  .svc-hero__media { display: grid; overflow: visible; }
  .svc-hero__clip { position: relative; inset: auto; height: clamp(460px, 56vw, 560px); }
  .svc-hero__clip video, .svc-hero__clip img { object-position: 84% 0%; }
  .svc-hero__media::after { background: linear-gradient(0deg, color-mix(in srgb, var(--c-ink) 40%, transparent) 0%, transparent 40%); }
  .svc-hero__scene { position: relative; left: auto; top: auto; height: 470px; width: min(400px, calc(100% - 32px)); margin: -40px auto 28px; }
  .svc-hero__stop { top: 14px; right: 14px; }
}

/* ---------- the services card: each service's name and one line, inside its group's picture ---------- */
.svc-list { box-sizing: border-box; display: grid; margin: 0; padding: 8px 20px; border-radius: var(--radius-l); background: var(--c-paper); color: var(--c-ink); box-shadow: var(--shadow-l); list-style: none; }
.svc-list li { display: grid; grid-template-columns: 9px minmax(0, 1fr); align-content: start; column-gap: 14px; padding: 13px 0; border-top: 1px solid var(--c-line); }
.svc-list li:first-child { border-top: 0; }
.svc-list li::before { content: ""; grid-row: 1; align-self: center; width: 8px; height: 8px; background: var(--c-accent); transform: rotate(45deg); }
.svc-list b { grid-column: 2; font: 700 15px/1.3 var(--font-ui); }
.svc-list span { grid-column: 2; font: 400 14px/1.45 var(--font-ui); color: var(--c-ink-soft); }
.svc-list--two { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.svc-list--two li:nth-child(2) { border-top: 0; }
@media (max-width: 560px) { .svc-list--two { grid-template-columns: minmax(0, 1fr); } .svc-list--two li:nth-child(2) { border-top: 1px solid var(--c-line); } }

/* ---------- chapters on footage (found, picked) ---------- */
.chap { position: relative; isolation: isolate; overflow: hidden; background: var(--c-ink); color: var(--c-on-ink); }
.chap__media { position: absolute; inset: 0; z-index: -2; }
.chap__media video, .chap__media img { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; object-position: var(--pos, 50% 50%); }
.chap__shade { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.chap__in { box-sizing: border-box; display: grid; align-items: center; gap: 40px clamp(32px, 5vw, 80px); min-height: clamp(660px, 56vw, 820px); padding-block: clamp(56px, 7vw, 96px); }
.chap .section-head { margin-bottom: 0; }
.chap .section-title { color: var(--c-on-ink); }
.chap .section-line { color: var(--c-on-ink-soft); }
.chap__copy { display: grid; gap: 26px; }
.chap__stop { position: absolute; top: 20px; right: max(var(--gutter), calc((100% - var(--max-w)) / 2)); }
/* found: the words at the top left, her phone below them in the clear; the map and the services on the right, her face between */
.chap--found { --pos: 52% 40%; }
.chap--found .chap__in { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); align-items: start; padding-top: clamp(56px, 5vw, 72px); }
.chap--found .chap__pic { justify-self: end; display: grid; gap: 18px; width: min(100%, 600px); }
.chap--found .chap__scene { height: 400px; }
.chap--found .chap__shade { background: linear-gradient(180deg, color-mix(in srgb, var(--c-ink) 88%, transparent) 0%, color-mix(in srgb, var(--c-ink) 86%, transparent) 39%, color-mix(in srgb, var(--c-ink) 26%, transparent) 48%, color-mix(in srgb, var(--c-ink) 20%, transparent) 100%); -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 40%, rgba(0, 0, 0, 0.3) 56%, rgba(0, 0, 0, 0.2) 100%); mask-image: linear-gradient(90deg, #000 0%, #000 40%, rgba(0, 0, 0, 0.3) 56%, rgba(0, 0, 0, 0.2) 100%); }
/* the map's 4 to 10 take the warm of "below the top 3", so the legend's two swatches name every marker; the whole search fits its pill */
.chap--found .chap__scene { --gg-mid: var(--gg-not); --gg-mid-ink: var(--gg-not-ink); }
.chap--found .chap__scene .gg-search { gap: 9px; padding: 0 14px 0 16px; font-size: 15px; }
.chap--found .chap__scene .gg-q { line-height: 1.4; }
/* picked: the two faces at the upper left stay clear; the words and the services low on the left, the review on the right */
.chap--picked { --pos: 34% 45%; }
.chap--picked .chap__in { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); column-gap: 40px; align-items: end; }
.chap--picked .chap__copy { grid-row: 1; gap: 22px; }
.chap--picked .chap__pic { grid-row: 1; align-self: center; justify-self: end; width: min(100%, 720px); }
/* review-ask's words are 13 px and up only from a 700 x 560 box: the column gives it 720 x 600 */
.chap--picked .chap__scene { height: 600px; }
.chap--picked .chap__shade { background: linear-gradient(0deg, color-mix(in srgb, var(--c-ink) 90%, transparent) 0%, color-mix(in srgb, var(--c-ink) 86%, transparent) 60%, color-mix(in srgb, var(--c-ink) 40%, transparent) 78%, color-mix(in srgb, var(--c-ink) 0%, transparent) 90%); -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 40%, transparent 56%); mask-image: linear-gradient(90deg, #000 0%, #000 40%, transparent 56%); }
@media (max-width: 899px) {
  .chap { display: grid; }
  .chap__media { position: relative; inset: auto; z-index: 0; aspect-ratio: 16 / 10; }
  .chap__shade { display: none; }
  .chap__in { grid-template-columns: minmax(0, 1fr) !important; min-height: 0; padding-block: 32px 52px; }
  .chap--found .chap__pic { justify-self: stretch; width: 100%; }
  .chap--found .chap__scene { height: 520px; }
  /* found: under the footage the map stands on the designed ground, the navy lattice fading at its edges */
  .chap--found { background-image: radial-gradient(120% 90% at 50% 60%, transparent 40%, var(--c-ink) 100%), repeating-linear-gradient(45deg, color-mix(in srgb, var(--c-on-ink) 7%, transparent) 0 1px, transparent 1px 34px), repeating-linear-gradient(-45deg, color-mix(in srgb, var(--c-on-ink) 7%, transparent) 0 1px, transparent 1px 34px); }
  /* picked: the review rises over the footage's lower part, under the two faces; the words after it */
  .chap--picked .chap__copy, .chap--picked .chap__pic { grid-row: auto; }
  .chap--picked .chap__pic { order: -1; position: relative; z-index: 1; justify-self: stretch; width: 100%; margin-top: -320px; }
  .chap--picked .chap__scene { height: 600px; }
  .chap__stop { top: 12px; right: 12px; }
}
@media (max-width: 560px) { .chap--picked .chap__media { aspect-ratio: 4 / 5; } .chap--picked .chap__pic { margin-top: -370px; } }

/* ---------- ads: one framed shot of the lead at the door, the ads at work over its lower left, the services over its lower right ---------- */
.ads .section-head { max-width: 680px; }
.ads__stage { position: relative; height: 720px; }
.ads__media { position: absolute; inset: 0; overflow: hidden; border-radius: var(--radius-l); background: var(--c-ink); box-shadow: var(--shadow-l); }
.ads__media video, .ads__media img { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; object-position: var(--pos, 50% 30%); }
/* the panel's own shadow shows whole: the stage leaves it room and does not clip it
   (two classes: the funnel's own style sets position and overflow on its host, and comes later) */
.ads__stage .ads__scene { --fn-grid: transparent; position: absolute; z-index: 2; left: 24px; bottom: 24px; width: 464px; height: 454px; overflow: visible; }
.ads__list { position: absolute; z-index: 2; right: 24px; bottom: 24px; width: min(340px, calc(100% - 48px)); }
.ads__stop { position: absolute; z-index: 3; top: 14px; right: 14px; }
/* on the phone: a tall frame showing her at the door, the ads at work under her face, the services card below the frame */
@media (max-width: 899px) {
  .ads__stage { height: auto; padding-top: 800px; }
  .ads__media { --pos: 88% 30%; inset: 0 0 auto; height: 800px; }
  .ads__stage .ads__scene { left: 12px; right: 12px; top: 334px; bottom: auto; width: auto; }
  .ads__list { position: relative; right: auto; bottom: auto; width: auto; margin-top: 16px; }
}

/* ---------- a chapter in a frame (answered) ---------- */
.chap-frame__in { display: grid; align-items: stretch; gap: 40px clamp(32px, 5vw, 72px); }
.chap-frame__pic { position: relative; min-height: 460px; }
.chap-frame__media { position: absolute; inset: 0; overflow: hidden; border-radius: var(--radius-l); background: var(--c-ink); box-shadow: var(--shadow-l); }
.chap-frame__media video, .chap-frame__media img { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; object-position: var(--pos, 50% 50%); }
.chap-frame__stop { position: absolute; z-index: 3; top: 14px; right: 14px; }
.chap-frame__side { display: grid; align-content: center; gap: 28px; }
.chap-frame__side .section-head { margin-bottom: 0; }
/* answered: the words and the services card on the left, the card reaching over the frame's edge; the call over the frame */
.chap-frame--answered { --pos: 50% 40%; }
.chap-frame--answered .chap-frame__in { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); }
.chap-frame--answered .chap-frame__list { position: relative; z-index: 2; margin-right: calc(-1 * clamp(32px, 5vw, 72px) - 24px); }
.chap-frame--answered .chap-frame__pic { min-height: 520px; }
.chap-frame__voice { position: absolute; z-index: 1; inset: 18px; }
/* the call's captions, pill, chips and card on solid white over the footage (the site has no glass) */
.chap-frame--answered .chap-frame__voice[data-look~="glass"] :is(.vc-line, .vc-pill, .vc-chip, .vc-card) { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--c-paper); border-color: var(--c-line); box-shadow: var(--shadow-m); }
@media (max-width: 899px) {
  .chap-frame__in { grid-template-columns: minmax(0, 1fr) !important; }
  .chap-frame--answered .chap-frame__list { margin-right: 0; }
  .chap-frame--answered .chap-frame__pic { min-height: 0; height: 700px; }
  .chap-frame__voice { inset: 12px; }
}

/* ---------- mix: the signature, on the designed ground ---------- */
.mix-band { padding-block: var(--section-y); }
.mix-band__stage { position: relative; max-width: 1040px; margin-inline: auto; }
.mix-band__stop { position: absolute; z-index: 3; top: -8px; right: -8px; }
.mix-band__cta { justify-content: center; margin-top: clamp(28px, 4vw, 44px); }
@media (max-width: 640px) { .mix-band__stop { top: -14px; right: 0; } }

/* ---------- faq ---------- */
.faq-band__in { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); align-items: start; gap: 32px clamp(32px, 5vw, 72px); }
.faq-band__in .section-head { position: sticky; top: calc(var(--header-h) + 32px); margin-bottom: 0; }
@media (max-width: 860px) { .faq-band__in { grid-template-columns: minmax(0, 1fr); } .faq-band__in .section-head { position: static; } }

/* ---------- close: a van loaded for a full day; the man at work at the right, the words on the shade at the left ---------- */
.end-band--svc { --pos: 50% 45%; }