/* Services: its own styles (plan.md "Services"), tokens only. */

/* ---------- hero: words on the paper, the schedule at the right, the search crossing the seam ---------- */
.svh { position: relative; display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); min-height: clamp(620px, calc(100svh - 76px), 800px); background: var(--c-paper); }
.svh__words { display: grid; align-content: center; padding-block: clamp(2.5rem, 6vh, 4rem); padding-inline: max(var(--gutter), calc((100vw - var(--max-w)) / 2)) clamp(2rem, 6.5vw, 6.5rem); }
.svh__title { margin: 0; font: 400 clamp(2rem, 1.15rem + 1.85vw, 2.8rem) / 1.14 var(--font-display); letter-spacing: var(--tracking-display); }
.svh__title span { display: block; }
.svh__key { margin-top: .12em; color: var(--c-brand-text); }
.svh__title::after { content: ""; display: block; width: 56px; height: 3px; margin-top: .55em; border-radius: 2px; background: var(--c-brand); }
.svh__line { max-width: 34rem; margin: 1.1rem 0 0; font-size: calc(var(--fs-body) * 1.06); color: var(--c-ink-soft); }
.svh .cta-row { margin-top: 1.6rem; }
.svh__stage { position: relative; min-height: 100%; }
.svh__media { position: absolute; inset: 0; overflow: hidden; background: var(--c-paper-alt); }
.svh__slide video, .svh__slide img { object-position: 40% 50%; }
.svh__stage .svh__scene { position: absolute; z-index: 4; left: -96px; bottom: 3%; width: min(490px, 76%); padding-bottom: 56px; overflow: visible; }
.svh__stage .svh__scene .sd-pop { bottom: -50px; } /* under the third result, never over its words */
.stop--svh { right: 1rem; top: 1rem; }
@media (max-width: 1040px) {
  .svh { grid-template-columns: 1fr; min-height: 0; }
  .svh__words { padding: 2.25rem var(--gutter) 2rem; }
  .svh__stage { min-height: 0; padding-bottom: 1.5rem; }
  .svh__media { position: relative; inset: auto; height: 470px; }
  .svh__slide video, .svh__slide img { object-position: 66% 50%; }
  .svh__stage .svh__scene { position: relative; left: auto; bottom: auto; width: min(490px, calc(100% - 2 * var(--gutter) + 16px)); margin: -232px auto 0; }
}

/* ---------- the chapters: full-bleed footage, the scene in glass, the words on the side clear of faces ---------- */
.ch { position: relative; isolation: isolate; overflow: hidden; display: grid; align-items: center; min-height: clamp(760px, 60vw, 880px); background: var(--c-ink); color: var(--c-on-ink); }
.ch__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.ch__bg video, .ch__bg picture, .ch__bg img { position: absolute; inset: -1px; display: block; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; }
.ch__bg::after { content: ""; position: absolute; inset: 0; }
.ch__in { display: grid; gap: 1.25rem clamp(1rem, 2vw, 1.75rem); width: min(100% - 2 * var(--gutter), 1640px); margin-inline: auto; padding-block: clamp(2.5rem, 4vw, 3.5rem); }
.ch__words .head { margin-bottom: 1.25rem; }
.ch .head__title { font-size: clamp(1.6rem, 1.1rem + 1.25vw, 2.2rem); color: var(--c-on-ink); }
.ch .head__line { margin-top: .9rem; font-size: var(--fs-body); color: var(--c-on-ink); }
.ch .svc { background: color-mix(in srgb, var(--c-ink) 74%, transparent); }
.stop--ch { top: 1.25rem; right: var(--gutter); }
/* found: he looks toward the map; everything sits at the right, clear of him */
.ch--found .ch__bg img { object-position: 50% 0; }
.ch--found .ch__bg::after { background: linear-gradient(270deg, color-mix(in srgb, var(--c-ink) 92%, transparent) 0%, color-mix(in srgb, var(--c-ink) 82%, transparent) 42%, color-mix(in srgb, var(--c-ink) 30%, transparent) 56%, transparent 64%); }
.ch--found .ch__in { justify-content: end; grid-template-columns: 360px 400px; align-items: center; }
.ch--found .ch__scene { height: 560px; }
/* ads: the words at her left, the scene at her right */
.ch--ads .ch__bg video { object-position: 50% 50%; }
.ch--ads .ch__bg::after { background: linear-gradient(90deg, color-mix(in srgb, var(--c-ink) 94%, transparent) 0%, color-mix(in srgb, var(--c-ink) 84%, transparent) 24%, color-mix(in srgb, var(--c-ink) 20%, transparent) 34%, transparent 40%), linear-gradient(270deg, color-mix(in srgb, var(--c-ink) 42%, transparent) 0%, transparent 36%); }
.ch--ads .ch__in { grid-template-columns: 372px minmax(0, 1fr) 460px; align-items: center; }
.ch--ads .ch__scene { grid-column: 3; height: 520px; }
/* leads: the sides the other way; the scene over the paneling, the words low at the right over the client's back */
.ch--leads .ch__bg video { object-position: 50% 45%; }
.ch--leads .ch__bg::after { background: radial-gradient(64% 104% at 100% 100%, color-mix(in srgb, var(--c-ink) 97%, transparent) 0%, color-mix(in srgb, var(--c-ink) 92%, transparent) 62%, transparent 92%), linear-gradient(90deg, color-mix(in srgb, var(--c-ink) 40%, transparent) 0%, transparent 36%); }
.ch--leads .ch__in { grid-template-columns: 520px minmax(0, 1fr) 430px; align-items: end; }
.ch--leads .ch__scene { height: 580px; align-self: center; }
.ch--leads .ch__words { grid-column: 3; }
@media (max-width: 1359px) {
  .ch--found .ch__in { grid-template-columns: 320px 372px; }
}
/* one column: the face in the top 200 px of the picture, the scene standing on the rest of it, so at least half of it stays on its picture */
@media (max-width: 1199px) {
  .ch { display: block; min-height: 0; --ch-on: 290px; }
  .ch__bg { position: relative; inset: auto; z-index: 0; height: calc(200px + var(--ch-on)); }
  .ch__bg::after { display: none; }
  .ch__in, .ch--found .ch__in, .ch--ads .ch__in, .ch--leads .ch__in { position: relative; z-index: 1; grid-template-columns: minmax(0, 1fr); width: min(100% - 2 * var(--gutter), 640px); padding-block: 0 3rem; }
  .ch__scene, .ch--ads .ch__scene { grid-column: auto; order: 1; margin-top: calc(-1 * var(--ch-on)); width: 100%; }
  .ch--found .ch__scene { height: 540px; }
  .ch__words, .ch--leads .ch__words { grid-column: auto; order: 2; }
  .ch--leads { --ch-on: 300px; }
  .ch--leads .ch__scene { height: 560px; }
  .stop--ch { top: 1rem; right: 1rem; }
  .ch--ads .ch__bg video { object-position: 26% 50%; }
  .ch--leads .ch__bg video { object-position: 66% 40%; }
  .ch--found .ch__bg img { object-position: 12% 0; }
}
@media (max-width: 520px) {
  .ch--leads { --ch-on: 170px; }
  .ch--leads .ch__scene { height: 320px; }
}

/* ---------- ai: the words, then the clip in its frame with the panel over its right side ---------- */
.aiq__in { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(2rem, 3.4vw, 3rem); align-items: center; }
.aiq__head { margin-bottom: 0; }
.aiq__frame { position: relative; isolation: isolate; height: clamp(600px, 48vw, 660px); border-radius: var(--radius-l); overflow: hidden; background: var(--c-ink-2); box-shadow: var(--shadow-l); }
.aiq__video { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; object-position: 20% 50%; }
.aiq__shade { position: absolute; inset: 0; background: linear-gradient(270deg, color-mix(in srgb, var(--c-ink) 42%, transparent) 0%, transparent 52%); }
.aiq__scene { position: absolute; z-index: 2; top: 50%; right: 1rem; width: min(440px, 52%); transform: translateY(-50%); }
.aiq__svc { position: absolute; z-index: 2; left: 1rem; bottom: 1rem; width: min(340px, 42%); }
.stop--frame { left: 1rem; top: 1rem; }
@media (max-width: 1040px) {
  .aiq__in { grid-template-columns: 1fr; }
  .aiq__frame { height: auto; overflow: visible; background: transparent; box-shadow: none; display: grid; }
  .aiq__video { position: relative; inset: auto; display: block; width: 100%; height: 450px; border-radius: var(--radius-l); }
  .aiq__shade { display: none; }
  .aiq__scene { position: relative; top: auto; right: auto; width: min(460px, calc(100% - 1rem)); margin: -250px auto 0; transform: none; }
  .aiq__svc { position: relative; left: auto; bottom: auto; width: 100%; margin-top: .75rem; background: var(--c-ink); }
}

/* ---------- exclusive: type as the picture on the lit band ---------- */
.excl { background: radial-gradient(70% 70% at 92% 8%, var(--c-blue-glow) 0%, var(--c-blue) 46%, var(--c-ink) 100%); }
.excl__line { margin: clamp(1.5rem, 3vw, 2.5rem) 0 0; font-size: calc(var(--fs-body) * 1.12); color: var(--c-on-ink); }
.stop--excl { right: var(--gutter); top: 1.25rem; }

/* ---------- trust: the wide frame, the phone and the card over the window side ---------- */
.tr__head { max-width: 52rem; margin-inline: auto; text-align: center; }
.tr__head .head__title::after { margin-inline: auto; }
.tr__head .head__line { margin-inline: auto; }
.tr__frame { position: relative; isolation: isolate; height: clamp(600px, 52vw, 660px); border-radius: var(--radius-l); overflow: hidden; background: var(--c-ink-2); box-shadow: var(--shadow-l); }
.tr__pic { position: absolute; inset: 0; overflow: hidden; }
.tr__pic img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 30%; transform: scale(1.12); transform-origin: 0 35%; }
.tr__shade { position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--c-ink) 52%, transparent) 0%, color-mix(in srgb, var(--c-ink) 24%, transparent) 42%, transparent 58%); }
.tr__scene { position: absolute; z-index: 2; left: 1.25rem; top: 50%; width: 716px; height: 590px; transform: translateY(-50%); }
.tr__svc { position: absolute; z-index: 2; right: 1rem; bottom: 1rem; width: min(360px, 29%); }
.stop--tr { right: 1rem; top: 1rem; }
@media (max-width: 1180px) {
  .tr__frame { height: auto; overflow: visible; background: transparent; box-shadow: none; display: grid; }
  .tr__pic { position: relative; inset: auto; height: 530px; border-radius: var(--radius-l); }
  .tr__pic img { object-position: 100% 30%; transform: none; }
  .tr__shade { display: none; }
  .tr__scene { position: relative; left: auto; top: auto; transform: none; width: min(400px, calc(100% - 1.5rem)); height: 640px; margin: -330px 0 0 .75rem; }
  .tr__svc { position: relative; right: auto; bottom: auto; width: 100%; margin-top: .75rem; background: var(--c-ink); }
}
@media (max-width: 640px) {
  .tr__pic img { object-position: 78% 30%; transform: scale(1.4); transform-origin: 100% 100%; }
  .tr__scene { width: 100%; margin-inline: 0; }
  .stop--tr { right: .75rem; top: 146px; }
}

/* ---------- change: two pictures, the same three labels landing on both ---------- */
.chg__pair { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.chg__side { position: relative; isolation: isolate; height: clamp(500px, 44vw, 580px); margin: 0; border-radius: var(--radius-l); overflow: hidden; background: var(--c-ink); box-shadow: var(--shadow-m); }
.chg__photo, .chg__side picture { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.chg__side img { width: 100%; height: 100%; object-fit: cover; }
.chg__side--before img { object-position: 36% 50%; }
.chg__side--after img { object-position: 74% 18%; }
.chg__side::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(0deg, color-mix(in srgb, var(--c-ink) 74%, transparent) 0%, transparent 46%); }
.chg__rows { position: absolute; z-index: 1; left: 1rem; bottom: 1rem; display: grid; gap: .5rem; width: min(330px, calc(100% - 2rem)); }
.chg__row { display: grid; gap: .08rem; margin: 0; padding: .6rem .85rem; border-radius: var(--radius-m); color: var(--c-on-ink); background: color-mix(in srgb, var(--c-ink) 66%, transparent); border: 1px solid color-mix(in srgb, var(--c-on-ink) 18%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); opacity: var(--kit-in, 1); transform: translateY(calc((1 - var(--kit-in, 1)) * 12px)); }
.chg__row b { font: 600 .98rem/1.2 var(--font-ui); color: var(--c-on-ink-soft); }
.chg__row span { font: 700 1.08rem/1.25 var(--font-ui); }
.chg__side--after .chg__row span { color: var(--c-brand-on-ink); }
.stop--chg { left: 1rem; top: 1rem; }
@media (max-width: 860px) {
  .chg__pair { grid-template-columns: 1fr; }
  .chg__side { height: clamp(430px, 112vw, 520px); }
}

/* ---------- mix: the signature, the rule cut into shares on the lit band ---------- */
.mix { background: radial-gradient(90% 90% at 50% 0%, var(--c-blue-glow) 0%, var(--c-blue) 42%, var(--c-ink) 100%); }
.mix__head { max-width: 54rem; margin-bottom: 3.75rem; }
.mix__stage { position: relative; }
.mix__cta { margin-top: clamp(2rem, 3.4vw, 2.75rem); }
.mix__cta .cta-row__note { color: var(--c-on-ink-soft); }
.stop--mix { right: 0; top: -3.25rem; }

/* ---------- seeit: her at the left with the words low, the lanes at the right ---------- */
.see__frame { position: relative; isolation: isolate; height: clamp(640px, 54vw, 680px); border-radius: var(--radius-l); overflow: hidden; background: var(--c-ink-2); box-shadow: var(--shadow-l); }
.see__pic { position: absolute; inset: 0; overflow: hidden; }
.see__pic img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 0 0; }
.see__shade { position: absolute; inset: 0; background: linear-gradient(0deg, color-mix(in srgb, var(--c-ink) 92%, transparent) 0%, color-mix(in srgb, var(--c-ink) 72%, transparent) 34%, transparent 56%), linear-gradient(270deg, color-mix(in srgb, var(--c-ink) 44%, transparent) 0%, transparent 44%); }
.see__words { position: absolute; z-index: 2; left: 1.75rem; bottom: 1.5rem; width: min(500px, 42%); }
.see__words .head { margin-bottom: 1rem; }
.see__words .head__title { font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2.05rem); }
.see__words .head__line { margin-top: .8rem; font-size: var(--fs-body); color: var(--c-on-ink); }
.see__scene { position: absolute; z-index: 2; right: 1.25rem; top: 50%; width: 620px; height: 480px; transform: translateY(-50%); }
.stop--see { left: 1rem; top: 1rem; }
@media (max-width: 1180px) {
  .see__frame { height: auto; overflow: visible; background: transparent; box-shadow: none; display: grid; }
  .see__pic { position: relative; inset: auto; height: 450px; border-radius: var(--radius-l); }
  .see__shade { display: none; }
  .see__scene { position: relative; right: auto; top: auto; transform: none; order: 1; width: min(620px, 100%); height: 480px; margin: -250px auto 0; }
  .see__words { position: relative; left: auto; bottom: auto; order: 2; width: 100%; margin-top: 1.5rem; }
}
@media (max-width: 640px) {
  .see__pic { height: 530px; }
  .see__pic img { object-position: 32% 0; }
  .see__scene { height: 640px; margin-top: -330px; }
  .stop--see { left: auto; right: .75rem; top: 146px; }
}

/* ---------- close ---------- */
.end--office .end__video { object-position: 50% 30%; }