/* site\assets\css\pages\services.css: the Services page, as plan.md writes it. Only system.css's tokens. Parts:
   hero (split: the words on navy, a tall framed clip bleeding off the right edge, the inbox in glass over its left
   side), change (two framed photos, the same three cards landing in turn), found (a chapter on footage), ads (a framed
   photo with the funnel over its edge), trust (a chapter on a photo), leads (a wide framed photo with the call in glass
   over its free side), mix (the designed ground), faq, close. */

/* The glass rows: a group's services inside its picture, each its name and what it changes for the owner, a gold
   node beside it (the motif). */
.svc-rows { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.svc-rows li { position: relative; padding: 14px 16px 15px 42px; border-radius: var(--radius-m); }
.svc-rows li::before { content: ""; position: absolute; left: 17px; top: 19px; width: 12px; height: 12px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--c-gold); background: var(--c-ink); }
.svc-rows b { display: block; font: 700 1rem/1.3 var(--font-ui); }
.svc-rows span { display: block; margin-top: 4px; font-size: var(--fs-small); line-height: 1.45; }
.svc-rows--glass li { background: var(--c-glass); border: 1px solid var(--c-glass-line); color: var(--c-paper); box-shadow: 0 24px 50px -26px color-mix(in srgb, var(--c-black) 70%, transparent); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
.svc-rows--glass span { color: color-mix(in srgb, var(--c-paper) 80%, transparent); }
.svc-rows--light li { background: var(--c-paper); border: 1px solid var(--c-line); box-shadow: var(--shadow-s); color: var(--c-ink); }
.svc-rows--light li::before { background: var(--c-gold); }
.svc-rows--light span { color: var(--c-ink-soft); }

/* hero */
.svc-hero { overflow: hidden; padding-block: clamp(48px, 6vw, 96px) clamp(64px, 7vw, 112px); }
.svc-hero__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.svc-hero__title { font-size: var(--fs-h1); color: var(--c-paper); }
.svc-hero__line { max-width: 30em; margin: 22px 0 32px; font-size: 1.1875rem; line-height: 1.55; color: color-mix(in srgb, var(--c-paper) 86%, transparent); }
.svc-hero__cta { display: flex; flex-direction: column; align-items: flex-start; }
.svc-hero__cta .cta-note { justify-content: flex-start; }
.svc-hero__pic { position: relative; height: clamp(580px, 46vw, 660px); margin-right: calc(-1 * (var(--gutter) + max(0px, (100vw - var(--max-w) - 2 * var(--gutter)) / 2))); }
.svc-hero__frame { position: absolute; inset: 0 0 0 26%; overflow: hidden; border-radius: var(--radius-l) 0 0 var(--radius-l); background: var(--c-navy-2); box-shadow: var(--shadow-l); }
.svc-hero__frame img.kit-first { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.svc-hero__frame video, .svc-hero__frame img.kit-first { object-position: 60% 50%; }
/* the kit's header that changes its picture (kit.md), as it gives it: two clips of the same world, an owner's hands on
   a lit phone in the evening, each starting from its beginning, so no loop seam shows */
[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__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--c-ink) 50%, transparent), transparent 42%); }
.svc-hero__panel { position: absolute; z-index: 2; left: 0; top: 50%; width: min(400px, 52%); height: min(600px, 92%); transform: translateY(-50%); }
.svc-hero__scene { display: block; width: 100%; height: 100%; }
.svc-hero__stop { position: absolute; z-index: 4; top: 16px; right: var(--gutter); }

/* change: the before and after of one Tuesday, the same three cards on both sides */
.svc-change__pair { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.svc-change__side { position: relative; margin: 0; aspect-ratio: 5 / 4; overflow: hidden; isolation: isolate; border-radius: var(--radius-l); background: var(--c-navy-2); box-shadow: var(--shadow-l); }
.svc-change__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.svc-change__side--before .svc-change__photo { object-position: 72% 40%; }
.svc-change__side--after .svc-change__photo { object-position: 40% 30%; }
.svc-change__side::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.svc-change__side--before::after { background: linear-gradient(90deg, color-mix(in srgb, var(--c-ink) 58%, transparent) 0%, color-mix(in srgb, var(--c-ink) 14%, transparent) 52%, transparent 70%); }
.svc-change__side--after::after { background: linear-gradient(270deg, color-mix(in srgb, var(--c-ink) 50%, transparent) 0%, color-mix(in srgb, var(--c-ink) 10%, transparent) 52%, transparent 70%); }
.svc-change__tag { position: absolute; z-index: 2; top: 16px; display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border-radius: 999px; }
.svc-change__side--before .svc-change__tag { left: 16px; background: color-mix(in srgb, var(--c-charcoal) 86%, transparent); color: var(--c-paper); }
.svc-change__side--after .svc-change__tag { right: 16px; background: var(--c-gold); color: var(--c-ink); }
.svc-change__cards { position: absolute; z-index: 2; bottom: 16px; display: grid; gap: 10px; width: min(300px, calc(100% - 32px)); }
.svc-change__side--before .svc-change__cards { left: 16px; }
.svc-change__side--after .svc-change__cards { right: 16px; }
.svc-change__card { position: relative; display: grid; gap: 3px; padding: 12px 16px 13px; border-radius: var(--radius-m); color: var(--c-paper); box-shadow: 0 22px 44px -22px color-mix(in srgb, var(--c-black) 75%, transparent); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); opacity: var(--kit-in, 1); transform: translateY(calc((1 - var(--kit-in, 1)) * 12px)); }
.svc-change__side--before .svc-change__card { background: color-mix(in srgb, var(--c-charcoal) 80%, transparent); border: 1px solid color-mix(in srgb, var(--c-paper) 14%, transparent); }
.svc-change__side--after .svc-change__card { padding-left: 50px; background: var(--c-glass-strong); border: 1px solid var(--c-glass-line); }
.svc-change__label { font-family: var(--font-display); font-stretch: var(--stretch-tag); font-weight: 700; font-size: var(--fs-tag); letter-spacing: .08em; line-height: 1.1; text-transform: uppercase; color: color-mix(in srgb, var(--c-paper) 70%, transparent); }
.svc-change__card b { font: 700 1.0625rem/1.25 var(--font-ui); }
.svc-change__tick { position: absolute; left: 15px; top: 50%; display: grid; place-items: center; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%; background: var(--c-teal); }
.svc-change__tick svg { width: 14px; height: 14px; fill: none; stroke: var(--c-ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.svc-change__stop { position: absolute; z-index: 4; top: 12px; left: 50%; transform: translateX(-50%); }
.svc-change__stop:hover { transform: translateX(-50%) scale(1.06); }

/* a chapter on footage or a photo: the words at one side, the picture at the other */
.svc-ch { overflow: hidden; }
.svc-ch__in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.svc-ch__in--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.svc-ch__in--flip .svc-ch__copy { order: 2; }
.svc-ch__copy h2 { color: var(--c-paper); }
.svc-ch__copy p { max-width: 44ch; margin: 20px 0 0; font-size: 1.1875rem; line-height: 1.55; color: color-mix(in srgb, var(--c-paper) 86%, transparent); }

/* found: a street of homes at dusk, its lamps lit, washed navy from the words' side; the map and the four rows over it */
.svc-found .band__media::after { background: linear-gradient(90deg, color-mix(in srgb, var(--c-ink) 88%, transparent) 0%, color-mix(in srgb, var(--c-ink) 64%, transparent) 32%, color-mix(in srgb, var(--c-ink) 22%, transparent) 60%, color-mix(in srgb, var(--c-ink) 38%, transparent) 100%); }
.svc-found__map { height: clamp(430px, 37vw, 500px); }
.svc-found__scene { display: block; width: 100%; height: 100%; }

/* ads: the words and rows at the left, the photo at the right with the funnel over its left edge */
.svc-ads__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 72px); align-items: center; }
.svc-ads__copy p { max-width: 44ch; margin: 20px 0 0; font-size: 1.1875rem; line-height: 1.55; color: var(--c-ink-soft); }
.svc-ads__copy .svc-rows { grid-template-columns: 1fr; margin-top: 28px; }
.svc-ads__pic { position: relative; height: clamp(520px, 44vw, 600px); }
.svc-ads__frame { position: absolute; inset: 0 0 0 30%; overflow: hidden; border-radius: var(--radius-l); background: var(--c-sand); box-shadow: var(--shadow-l); }
.svc-ads__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 74% 40%; }
.svc-ads__panel { position: absolute; z-index: 2; left: 0; top: 50%; width: min(440px, 68%); height: 470px; transform: translateY(-50%); }
.svc-ads__scene { display: block; width: 100%; height: 100%; }
.svc-ads__stop { position: absolute; z-index: 4; top: 14px; right: 14px; }

/* trust: the couple and the tech after the job, their faces in the top third; the words, rows and phone below them */
.svc-trust { display: flex; align-items: flex-end; min-height: clamp(900px, 72vw, 1040px); }
.svc-trust .svc-ch__in { width: 100%; align-items: end; }
.svc-trust__media img { object-position: 50% 0%; }
.svc-trust .band__media::after { background: linear-gradient(180deg, color-mix(in srgb, var(--c-ink) 14%, transparent) 0%, transparent 20%, color-mix(in srgb, var(--c-ink) 40%, transparent) 40%, color-mix(in srgb, var(--c-ink) 84%, transparent) 64%, color-mix(in srgb, var(--c-ink) 94%, transparent) 100%); }
/* the scene reaches into the gap, so its words keep 13 px or more (its design is 760 x 600) */
.svc-trust__pic { position: relative; height: 580px; margin-right: calc(-1 * clamp(28px, 4vw, 64px)); }
.svc-trust__scene { display: block; width: 100%; height: 100%; }
.svc-trust__stop { position: absolute; z-index: 4; top: -56px; right: 0; }

/* leads: a wide framed photo, the call in glass over its free side (the window), the rows under it */
.svc-leads__pic { position: relative; aspect-ratio: 1240 / 620; overflow: hidden; border-radius: var(--radius-l); background: var(--c-sand); box-shadow: var(--shadow-l); }
.svc-leads__photo { position: absolute; top: 0; left: -6%; width: 106%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 40%; }
.svc-leads__pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(270deg, color-mix(in srgb, var(--c-ink) 42%, transparent) 0%, color-mix(in srgb, var(--c-ink) 18%, transparent) 46%, transparent 62%); pointer-events: none; }
.svc-leads__panel { position: absolute; z-index: 2; top: 4%; bottom: 4%; right: 2.5%; width: min(600px, 48%); }
.svc-leads__scene { display: block; width: 100%; height: 100%; }
.svc-leads__stop { position: absolute; z-index: 4; top: 14px; left: 14px; }
.svc-rows--three { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--space-4); }

/* mix: the designed ground (navy, a faint field of round nodes, the gold's light behind the door) */
.svc-mix { overflow: hidden; }
.svc-mix__ground { position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(46% 56% at 80% 56%, color-mix(in srgb, var(--c-gold) 12%, transparent), transparent 72%),
  radial-gradient(38% 50% at 14% 40%, color-mix(in srgb, var(--c-azure) 8%, transparent), transparent 70%),
  radial-gradient(circle, transparent 0 2.2px, color-mix(in srgb, var(--c-navy-3) 100%, transparent) 2.6px 3.6px, transparent 4px) 0 0 / 38px 38px,
  var(--c-ink);
  -webkit-mask-image: linear-gradient(180deg, transparent, var(--c-ink) 12%, var(--c-ink) 88%, transparent); mask-image: linear-gradient(180deg, transparent, var(--c-ink) 12%, var(--c-ink) 88%, transparent); }
.svc-mix .section-head { margin-bottom: var(--space-6); }
.svc-mix__stage { position: relative; container-type: inline-size; }
.svc-mix__stop { position: absolute; z-index: 4; top: -54px; right: 0; }
.svc-mix__scene { display: block; width: 100%; height: auto; aspect-ratio: 1120 / 540; }
@container (width < 880px) { .svc-mix__scene { aspect-ratio: auto; height: 870px; } }

/* close: the home page's closing band, with the main button and its note */
.close { display: flex; align-items: flex-end; min-height: min(90svh, 880px); }
.close__media::after { background: linear-gradient(180deg, color-mix(in srgb, var(--c-ink) 34%, transparent) 0%, color-mix(in srgb, var(--c-ink) 20%, transparent) 30%, color-mix(in srgb, var(--c-ink) 76%, transparent) 60%, color-mix(in srgb, var(--c-ink) 96%, transparent) 100%); }
.close__wrap { width: 100%; text-align: center; }
.close h2 { font-size: var(--fs-h1); color: var(--c-paper); }
.close__line { max-width: 560px; margin: 16px auto 28px; font-size: 1.1875rem; line-height: 1.5; color: color-mix(in srgb, var(--c-paper) 90%, transparent); }
.close__cta { display: flex; flex-direction: column; align-items: center; }

/* trust under 1280 px: the words, then the photo, then the scene standing on the photo's lower half (its faces stay
   in the photo's top third), so the card keeps to its photo at every width */
@media (max-width: 1279px) {
  .svc-trust { flex-direction: column; align-items: stretch; min-height: 0; }
  .svc-trust .svc-ch__in { display: contents; }
  .svc-trust .svc-ch__copy { order: 1; padding-inline: var(--gutter); }
  .svc-trust .band__media { order: 2; position: relative; inset: auto; z-index: 0; height: 620px; margin-top: var(--space-5); }
  .svc-trust .band__media::after { background: linear-gradient(180deg, transparent 50%, color-mix(in srgb, var(--c-ink) 66%, transparent) 82%, var(--c-ink) 100%); }
  .svc-trust__pic { order: 3; z-index: 1; width: min(800px, calc(100% - 2 * var(--gutter))); height: 600px; margin: -330px auto 0; }
  .svc-trust__stop { right: auto; left: 0; }
}

@media (max-width: 1100px) {
  .svc-rows--three { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .svc-hero__in, .svc-ch__in, .svc-ads__in { grid-template-columns: minmax(0, 1fr); }
  .svc-hero__pic { height: auto; margin-right: 0; }
  .svc-hero__frame { position: relative; inset: auto; aspect-ratio: 4 / 5; border-radius: var(--radius-l); }
  .svc-hero__panel { position: relative; left: auto; top: auto; width: min(420px, 100%); height: 640px; margin: -180px auto 0; transform: none; }
  .svc-hero__stop { right: 12px; top: 12px; }
  /* on the phone the cards stand under each photo, overlapping its foot, so no card covers a face */
  .svc-change__pair { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .svc-change__side { aspect-ratio: auto; overflow: visible; isolation: auto; border-radius: 0; background: none; box-shadow: none; }
  .svc-change__side::after { display: none; }
  .svc-change__photo { position: relative; inset: auto; display: block; height: auto; aspect-ratio: 4 / 3; border-radius: var(--radius-l); box-shadow: var(--shadow-l); }
  .svc-change__side--before .svc-change__cards, .svc-change__side--after .svc-change__cards { position: relative; left: auto; right: auto; bottom: auto; width: auto; margin: -34px 12px 0; }
  .svc-change__stop { top: 12px; left: auto; right: 12px; transform: none; }
  .svc-change__stop:hover { transform: scale(1.06); }
  .svc-found__map { height: 560px; }
  .svc-found .band__media::after { background: linear-gradient(180deg, color-mix(in srgb, var(--c-ink) 88%, transparent) 0%, color-mix(in srgb, var(--c-ink) 72%, transparent) 26%, color-mix(in srgb, var(--c-ink) 40%, transparent) 56%, color-mix(in srgb, var(--c-ink) 78%, transparent) 100%); }
  .svc-rows { grid-template-columns: minmax(0, 1fr); }
  .svc-ads__pic { height: auto; }
  .svc-ads__frame { position: relative; inset: auto; aspect-ratio: 4 / 3; }
  .svc-ads__panel { position: relative; left: auto; top: auto; width: 100%; max-width: 460px; height: 470px; margin: -60px auto 0; transform: none; }
  /* leads: a tall crop of the kitchen, her face and phone in its top third, the call standing on its lower half */
  .svc-leads__pic { aspect-ratio: auto; overflow: visible; background: none; box-shadow: none; }
  .svc-leads__photo { position: relative; left: 0; width: 100%; height: 640px; border-radius: var(--radius-l); object-position: 41% 0%; box-shadow: var(--shadow-l); }
  .svc-leads__pic::after { display: none; }
  .svc-leads__panel { position: relative; inset: auto; width: 100%; max-width: 460px; height: 660px; margin: -360px auto 0; }
  .svc-leads__stop { top: auto; left: auto; right: 12px; bottom: 672px; }
}

@media (max-width: 671px) {
  .svc-trust__media img { object-position: 86% 0%; }
  .svc-trust__pic { height: 640px; }
}