/* site\assets\css\pages\services.css: the Services page's own layout (plan.md, Services). Places and sizes its parts
   and scenes with the tokens of design\system.css; the components come from design\components.css. */

/* ---------- the footage, graded as the home page grades it ---------- */
.svc-hero__slide video, .svc-hero__slide .kit-first, .svc-stage__video, .svc-stage__photo, .svc-frame__img, .svc-close__video { filter: saturate(0.88) contrast(1.04); }

/* ---------- hero: the general shot (a schedule filling up) in the kit's rotate, the words low on the left ---------- */
.svc-hero { position: relative; display: grid; align-items: end; min-height: clamp(620px, calc(100svh - 72px), 860px); overflow: hidden; isolation: isolate; background: var(--c-ink); color: var(--c-on-ink); }
[data-kit-scene="rotate"] [data-kit-slide] { position: absolute; inset: 0; margin: 0; visibility: hidden; overflow: hidden; }
[data-kit-scene="rotate"] [data-kit-slide][data-kit-on] { visibility: visible; z-index: 2; opacity: var(--kit-move, 1); transform: translateX(var(--kit-glide, calc((1 - var(--kit-move, 1)) * 4%))); }
[data-kit-scene="rotate"]:not(:has([data-kit-slide][data-prev])) [data-kit-slide][data-kit-on] { transform: none; opacity: 1; }
[data-kit-scene="rotate"] [data-kit-slide][data-prev] { visibility: visible; z-index: 1; }
[data-kit-scene="rotate"] [data-kit-slide] video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
[data-kit-scene="rotate"]:not(:has([data-kit-slide][data-kit-on])) [data-kit-slide]:not([data-kit-slide] ~ [data-kit-slide]) { visibility: visible; }
[data-kit-scene="rotate"] [data-kit-slide] video { inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; clip-path: inset(2px); }
[data-kit-scene="rotate"] [data-kit-slide] video[data-kit-shown] { clip-path: none; }
[data-kit-scene="rotate"] [data-kit-slide][data-prev] { opacity: clamp(0, (1 - var(--kit-move, 0)) * 1000, 1); }
.svc-hero__slide video, .svc-hero__slide .kit-first { object-position: 56% 50%; }
.svc-hero__grade { position: absolute; inset: 0; z-index: 3; pointer-events: none; background:
  radial-gradient(90% 105% at 0% 100%, color-mix(in srgb, var(--c-ink) 95%, transparent) 0%, color-mix(in srgb, var(--c-ink) 88%, transparent) 50%, color-mix(in srgb, var(--c-ink) 50%, transparent) 68%, transparent 86%),
  linear-gradient(180deg, color-mix(in srgb, var(--c-ink) 34%, transparent) 0%, transparent 22%); }
.lattice--svc-hero { left: 0; bottom: 0; width: 48%; height: 72%; z-index: 3; opacity: 0.1; -webkit-mask-image: radial-gradient(100% 100% at 0% 100%, #000 0%, transparent 70%); mask-image: radial-gradient(100% 100% at 0% 100%, #000 0%, transparent 70%); }
.svc-hero__in { position: relative; z-index: 4; width: 100%; box-sizing: border-box; max-width: calc(var(--max-w) + 2 * var(--gutter)); margin: 0 auto; padding: 120px var(--gutter) clamp(48px, 6vw, 84px); }
.svc-hero__words { max-width: 600px; }
.svc-hero__title { font-size: var(--fs-h1); }
.svc-hero__line { margin-top: var(--space-4); max-width: 44ch; font-size: 1.1875rem; line-height: 1.55; color: var(--c-on-ink-soft); }
.svc-hero__cta { margin-top: var(--space-5); }
.svc-hero__island { position: absolute !important; z-index: 4; right: max(var(--gutter), calc((100vw - var(--max-w)) / 2)); bottom: clamp(36px, 5vw, 72px); width: min(430px, 36vw); height: 330px; }
.svc-hero__stop { right: 20px; top: 20px; }
@media (max-width: 1024px) { .svc-hero__island { width: min(400px, 42vw); } .svc-hero__words { max-width: 500px; } }
@media (max-width: 760px) {
  .svc-hero { min-height: 820px; }
  /* the footage fills the top 520 px (a taller crop would draw its poster past its file); the words end on the ink */
  .svc-hero .svc-hero__slide { bottom: auto; height: 520px; }
  .svc-hero__grade { background: linear-gradient(180deg, color-mix(in srgb, var(--c-ink) 30%, transparent) 0, transparent 120px, transparent 210px, color-mix(in srgb, var(--c-ink) 70%, transparent) 350px, var(--c-ink) 505px); }
  .svc-hero__island { left: var(--gutter); right: var(--gutter); top: 16px; bottom: auto; width: auto; height: 300px; }
  .svc-hero__in { padding-top: 340px; }
}

/* ---------- a stage of footage or a photo across the whole width, its scene and its services in glass ---------- */
.svc-stage { position: relative; overflow: hidden; isolation: isolate; background: var(--c-ink-2); }
.svc-stage__video, .svc-stage__photo { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; }
.svc-stage__stop { right: 20px; top: 20px; }
.svc-panel { position: absolute; z-index: 2; box-sizing: border-box; display: grid; gap: 12px; margin: 0; padding: 18px 20px; list-style: none; border-radius: var(--radius-l); background: color-mix(in srgb, var(--c-ink) 66%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); border: 1px solid color-mix(in srgb, var(--c-paper) 16%, transparent); box-shadow: var(--shadow-l); color: var(--c-on-ink); }
.svc-panel li { display: grid; gap: 3px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--c-paper) 14%, transparent); }
.svc-panel li:first-child { padding-top: 0; border-top: 0; }
.svc-panel b { font: 700 1.0625rem/1.3 var(--font-ui); }
.svc-panel span { font-size: var(--fs-small); line-height: 1.45; color: var(--c-on-ink-soft); }

/* found: footage of a homeowner searching; her face about 37% across; the services on the left, the grid on the right */
.svc-found { padding-bottom: 0; }
.svc-found__stage { min-height: clamp(600px, 50vw, 740px); }
.svc-found__stage .svc-stage__video { object-position: 40% 40%; }
.svc-found__stage::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, color-mix(in srgb, var(--c-ink) 42%, transparent) 0%, transparent 30%, transparent 56%, color-mix(in srgb, var(--c-ink) 30%, transparent) 100%); }
.svc-found__panel { left: max(var(--gutter), calc((100vw - var(--max-w)) / 2)); bottom: 36px; width: min(330px, 25vw); }
.svc-found__grid { position: absolute !important; z-index: 2; right: max(var(--gutter), calc((100vw - var(--max-w)) / 2)); top: 50%; width: min(700px, 45vw); aspect-ratio: 760 / 520; transform: translateY(-50%); }

/* ---------- the break: one sentence at display size, its words lit by the scroll, the cube its full stop ---------- */
.svc-break { overflow: hidden; padding: clamp(110px, 14vw, 200px) 0; }
.lattice--svc-break { right: 0; top: 0; width: 62%; height: 100%; opacity: 0.1; -webkit-mask-image: radial-gradient(100% 100% at 100% 0%, #000 0%, transparent 70%); mask-image: radial-gradient(100% 100% at 100% 0%, #000 0%, transparent 70%); }
.svc-break__line { max-width: 13ch; margin: 0 auto; text-align: center; font-size: clamp(2.7rem, 1.1rem + 6.2vw, 6.6rem); line-height: 0.98; }
.svc-break__word { color: var(--c-on-ink); }
.svc-break.is-armed .svc-break__word { color: color-mix(in srgb, var(--c-on-ink) var(--lit, 100%), var(--c-ink-line)); }
.svc-break__mark { display: inline-block; width: 0.46em; height: 0.46em; margin-left: 0.06em; fill: var(--c-brand); vertical-align: -0.02em; transform-origin: 50% 100%; }
.svc-break.is-armed .svc-break__mark { opacity: var(--m, 1); transform: translateY(calc((1 - var(--m, 1)) * -0.6em)) scale(calc(0.6 + 0.4 * var(--m, 1))); }

/* ---------- picked: a framed photo with its services in glass, the review ask beside it ---------- */
.svc-frame { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-l); background: var(--c-ink-2); box-shadow: var(--shadow-l); }
.svc-frame__img { width: 100%; height: 100%; object-fit: cover; }
.svc-picked__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-5); align-items: center; }
.svc-picked__photo .svc-frame__img { aspect-ratio: 4 / 3.15; object-position: 50% 20%; }
.svc-panel--grid { left: 16px; right: 16px; bottom: 16px; grid-template-columns: 1fr 1fr; gap: 14px 22px; padding: 16px 20px; }
.svc-panel--grid li, .svc-panel--grid li:first-child { padding-top: 0; border-top: 0; }
.svc-picked__scene { position: relative; }
.svc-picked__ask { width: 100%; height: 600px; }
.svc-picked__stop { right: 0; top: 0; }

/* ---------- leads: a photo of the plumber at work across the width; the words and the call on the left ---------- */
.svc-leads { padding: 0; }
.svc-leads__stage { display: flex; min-height: clamp(760px, 62vw, 900px); }
.svc-leads__stage .svc-stage__photo { object-position: 70% 35%; }
.svc-leads__stage::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, color-mix(in srgb, var(--c-ink) 90%, transparent) 0%, color-mix(in srgb, var(--c-ink) 82%, transparent) 30%, color-mix(in srgb, var(--c-ink) 48%, transparent) 46%, transparent 64%); }
.svc-leads__in { flex: 1; z-index: 2; width: 100%; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); grid-template-rows: auto 1fr; gap: var(--space-5) var(--space-6); padding-top: var(--section-y); padding-bottom: var(--space-6); }
.svc-leads__words { grid-column: 1; max-width: 560px; }
/* the call at 700 px wide or more keeps its captions' smallest words at 13 px or more */
.svc-leads__scene { position: relative; grid-column: 1; grid-row: 2; align-self: start; width: 100%; max-width: 700px; }
/* 70 px taller than the scene's design box (it centres in it): the booking chips stand just under their card before
   it gathers them, and stay inside the box */
.svc-leads__voice { width: 100%; aspect-ratio: 820 / 590; }
.svc-leads__stop { right: 8px; top: 8px; }
.svc-leads__panel { position: relative; grid-column: 2; grid-row: 2; align-self: end; justify-self: end; width: min(340px, 100%); }

/* ---------- trust: the work orders over the yard of a framed photo, its services in glass ---------- */
.svc-trust__grid { position: relative; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr); align-items: center; }
.svc-trust__photo { grid-column: 2; grid-row: 1; }
.svc-trust__photo .svc-frame__img { aspect-ratio: 16 / 10.5; object-position: 60% 30%; }
.svc-trust__scene { position: relative; z-index: 2; grid-column: 1; grid-row: 1; margin-right: -30%; }
.svc-trust__ticket { width: 100%; aspect-ratio: 820 / 540; }
.svc-trust__panel { left: auto; right: 16px; bottom: 16px; width: min(560px, 64%); grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding: 16px 18px; }
.svc-trust__panel li, .svc-trust__panel li:first-child { padding-top: 0; border-top: 0; }
.svc-trust__stop { right: 16px; top: 16px; }

/* ---------- mix: the signature, on the designed ground ---------- */
.svc-mix { overflow: hidden; }
.lattice--svc-mix { left: 0; top: 0; width: 62%; height: 80%; opacity: 0.1; -webkit-mask-image: radial-gradient(100% 90% at 0% 0%, #000 0%, transparent 70%); mask-image: radial-gradient(100% 90% at 0% 0%, #000 0%, transparent 70%); }
.svc-mix__head { margin-left: auto; margin-right: auto; text-align: center; }
.svc-mix__head .part__line { margin-left: auto; margin-right: auto; }
.svc-mix__frame { position: relative; container-type: inline-size; box-sizing: border-box; padding: clamp(14px, 2.4vw, 36px); border-radius: 22px; background: var(--c-ink-2); border: 1px solid var(--c-ink-line); box-shadow: var(--shadow-l); }
.svc-mix__scene { width: 100%; aspect-ratio: 1080 / 520; }
@container (max-width: 819px) { .svc-mix__scene { aspect-ratio: auto; height: 720px; } }
.svc-mix__stop { right: 16px; top: 16px; }

/* ---------- the FAQ ---------- */
.svc-faq__in { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-5) var(--space-6); align-items: start; }
.svc-faq__title { position: sticky; top: 110px; max-width: 12ch; }

/* ---------- close: footage of another owner, the words on the left ---------- */
.svc-close { overflow: hidden; padding: clamp(110px, 13vw, 180px) 0; }
.svc-close__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.svc-close__video { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; object-position: 70% 40%; }
.svc-close__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--c-ink) 92%, transparent) 0%, color-mix(in srgb, var(--c-ink) 84%, transparent) 32%, color-mix(in srgb, var(--c-ink) 46%, transparent) 46%, transparent 62%); }
.lattice--svc-close { left: 0; bottom: 0; width: 46%; height: 80%; z-index: 0; opacity: 0.1; -webkit-mask-image: radial-gradient(100% 100% at 0% 100%, #000 0%, transparent 70%); mask-image: radial-gradient(100% 100% at 0% 100%, #000 0%, transparent 70%); }
.svc-close__stop { right: 20px; top: 20px; }
.svc-close__cards { position: absolute; z-index: 2; left: 47%; top: 44%; width: 300px; height: 150px; }
.svc-close__card { position: absolute; left: 0; display: flex; align-items: center; gap: 13px; box-sizing: border-box; width: 300px; padding: 12px 18px 12px 12px; border-radius: 14px; background: color-mix(in srgb, var(--c-paper) 88%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); border: 1px solid color-mix(in srgb, var(--c-paper) 70%, transparent); box-shadow: var(--shadow-l); color: var(--c-ink); opacity: var(--kit-in, 1); transform: translateY(calc((1 - var(--kit-in, 1)) * 12px)); }
.svc-close__card:nth-child(1) { top: 0; }
.svc-close__card:nth-child(2) { top: 78px; left: 26px; }
.svc-close__tick { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--c-brand); }
.svc-close__tick::after { content: ""; position: absolute; left: 11px; top: 11px; width: 11px; height: 6px; border: solid var(--c-on-brand); border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg); }
.svc-close__card-words { display: grid; gap: 2px; min-width: 0; }
.svc-close__card-words b { font: 700 1rem/1.25 var(--font-ui); }
.svc-close__card-words span { font-size: var(--fs-small); line-height: 1.3; color: var(--c-ink-soft); }
.svc-close__in { position: relative; z-index: 1; }
.svc-close__title { max-width: 12ch; font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.4rem); }
.svc-close__line { margin-top: var(--space-4); max-width: 34ch; font-size: 1.25rem; color: var(--c-on-ink-soft); }
.svc-close__cta { margin-top: var(--space-5); }

/* ---------- the computer narrows ---------- */
@media (max-width: 1100px) {
  .svc-found__panel { width: min(300px, 28vw); }
  .svc-found__grid { width: min(560px, 48vw); }
  /* one column: the call keeps its 700 px, the plumber further right, the services in a row under the call */
  .svc-leads__in { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; }
  .svc-leads__stage .svc-stage__photo { object-position: 55% 35%; }
  .svc-leads__panel { grid-column: 1; grid-row: 3; justify-self: start; align-self: start; width: min(760px, 100%); grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .svc-leads__panel li, .svc-leads__panel li:first-child { padding-top: 0; border-top: 0; }
  .svc-trust__panel { width: calc(100% - 32px); }
}

/* ---------- the phone and the tablet: each picture first, its scene and its services under it ---------- */
@media (max-width: 900px) {
  .svc-stage { display: block; min-height: 0; padding-bottom: var(--space-5); background: var(--c-ink); }
  .svc-stage__video, .svc-stage__photo { position: relative; inset: auto; display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .svc-found__stage::after, .svc-leads__stage::after { display: none; }
  /* found: a taller crop of the clip (her face in its top third), the grid over its lower 62%, the services under it */
  .svc-found__stage { display: flex; flex-direction: column; }
  .svc-found__stage .svc-stage__video { width: calc(100% + 2px); max-width: none; height: clamp(520px, 75vw, 680px); aspect-ratio: auto; margin: -1px -1px 0; }
  .svc-found__grid { order: 1; position: relative !important; top: auto; right: auto; width: auto; height: auto; aspect-ratio: 760 / 520; margin: calc(clamp(520px, 75vw, 680px) * -0.615) var(--gutter) 0; transform: none; }
  .svc-found__panel { order: 2; }
  .svc-found__panel, .svc-leads__panel { position: relative; left: auto; right: auto; bottom: auto; width: auto; margin: var(--space-4) var(--gutter) 0; }
  /* leads: the words, then a tall crop of the plumber (his face in its top third) with the call over its lower two thirds */
  .svc-leads__stage { display: flex; flex-direction: column; }
  .svc-leads__in { display: contents; }
  .svc-leads__words { order: 0; box-sizing: border-box; width: 100%; max-width: none; padding: var(--section-y) var(--gutter) var(--space-5); }
  .svc-leads__stage .svc-stage__photo { order: 1; width: calc(100% + 2px); max-width: none; height: clamp(600px, 78vw, 700px); aspect-ratio: auto; margin: 0 -1px; object-position: 72% 30%; }
  .svc-leads__scene { order: 2; align-self: stretch; box-sizing: border-box; width: auto; max-width: none; margin: calc(clamp(600px, 78vw, 700px) * -0.66) var(--gutter) 0; }
  .svc-leads__panel { order: 3; grid-template-columns: 1fr; gap: 12px; }
  .svc-leads__panel li + li { padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--c-paper) 14%, transparent); }
  .svc-picked__grid { grid-template-columns: 1fr; }
  .svc-picked__ask { max-width: 520px; margin: 0 auto; }
  .svc-trust__grid { grid-template-columns: 1fr; }
  .svc-trust__photo { grid-column: 1; grid-row: 1; }
  .svc-trust__scene { grid-column: 1; grid-row: 2; margin: -48px 0 0; }
  .svc-faq__in { grid-template-columns: 1fr; }
  .svc-faq__title { position: static; max-width: none; }
}
@media (max-width: 700px) {
  .svc-panel--grid, .svc-trust__panel { position: relative; left: auto; right: auto; bottom: auto; width: auto; grid-template-columns: 1fr; gap: 12px; border-radius: 0; border: 0; box-shadow: none; background: var(--c-ink-2); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .svc-panel--grid li + li, .svc-trust__panel li + li { padding-top: 12px; border-top: 1px solid var(--c-ink-line); }
  .svc-trust__ticket { aspect-ratio: auto; height: 640px; }
  .svc-trust__scene { margin: var(--space-4) 0 0; }
  .svc-close { padding-top: 0; }
  .svc-close__media { position: relative; inset: auto; aspect-ratio: 4 / 3; overflow: visible; margin-bottom: calc(48px + var(--space-5)); }
  .svc-close__media::after { background: linear-gradient(180deg, transparent 60%, var(--c-ink) 100%); }
  .svc-close__video { inset: 0; width: 100%; height: 100%; object-position: 74% 40%; }
  /* the two cards hang from the photo's foot, the first over its shaded bottom, clear of his face and his phone */
  .svc-close__cards { left: var(--gutter); right: var(--gutter); top: calc(100% - 100px); width: auto; height: auto; display: grid; gap: 12px; }
  .svc-close__card { position: relative; width: min(300px, calc(100% - 18px)); }
  .svc-close__card:nth-child(1), .svc-close__card:nth-child(2) { top: auto; }
  .svc-close__card:nth-child(2) { left: 18px; }
  .lattice--svc-close { display: none; }
}
@media (max-width: 600px) {
  .svc-picked__ask { height: 620px; }
  .svc-found__grid { aspect-ratio: auto; height: 520px; }
  .svc-leads__voice { aspect-ratio: auto; height: 660px; }
}