/* jdlo v3: the multi-page layer. Loaded after tokens.css (kit) and product.css (v2 home).
   Same ink, paper, grey and one grotesk. No radius, no shadow, no gradient, no chips.
   Section breaks are hairlines. Sizes are rem on the 1440 frame (375 under 1024px). */

:root { --hair: #e4e4e4; --line: rgba(10, 10, 10, .14); }

/* ---------- Header: four plain links, current page underlined ---------- */
.head__nav .link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left center; }

/* ---------- Shared text pieces ---------- */
.big {                       /* one plain sentence set large */
  font-size: 4.25rem; font-weight: 550; letter-spacing: -.045em; line-height: 1.04;
}
.mid { font-size: 2.5rem; font-weight: 550; letter-spacing: -.04em; line-height: 1.08; }
.read { font-size: 1.375rem; line-height: 1.38; letter-spacing: -.016em; max-width: 36rem; }
.read + .read { margin-top: 1.1em; }
.quiet { color: var(--grey); }
.more { display: inline-block; font-weight: 500; }   /* text link with an arrow; kit .link adds the wipe */
.more::before { content: none; }
.wrap { padding-inline: var(--pad); }
.sect { padding-block: 9rem; }
.sect--tight { padding-block: 6rem; }
.mist { background: var(--mist); }
.ink { background: var(--ink); color: #fff; }
.ink .quiet { color: var(--on-dark-60); }
.rule-top { border-top: 1px solid var(--line); }

/* ---------- Frames hold either an image or the client's own entrance clip ---------- */
.frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
.frame__link { position: absolute; inset: 0; z-index: 2; }
.only-m { display: none !important; }

/* ---------- Case opener: name huge, then the redesign's first screen opens to full-bleed ---------- */
.opener { --p: 0; --q: 0; }
.opener .stage { --t0: 26rem; --l0: 22vw; --r0: 22vw; --b0: 2rem; --s0: .56; background: var(--paper); }
.hk-motion .opener { height: 240vh; height: 240svh; }
.opener__head {
  position: relative; z-index: 1;
  padding: calc(var(--header-h) + 1.75rem) var(--pad) 0;
  transform: translateY(calc(var(--p) * -4rem));
  opacity: calc(1 - var(--p) * 2.4);
}
.opener__name {
  font-size: var(--fs, 12rem); font-weight: 600; letter-spacing: var(--tight);
  line-height: .86; margin-left: -.045em; white-space: nowrap;
}
.opener__row { display: grid; grid-template-columns: 1fr 22rem; gap: 3rem; margin-top: 1.75rem; align-items: end; }
.opener__line { max-width: 40rem; font-size: 1.375rem; line-height: 1.32; letter-spacing: -.018em; font-weight: 450; }
.opener__meta { font-size: .9375rem; line-height: 1.4; color: var(--grey); }
.opener__meta span { display: block; }
.opener__meta span:first-child { color: var(--ink); }
.opener .frame { background: #111; }
.opener .frame img, .opener .frame video {
  object-position: 50% 0%;
  transform-origin: 0 0;
  transform:
    translate(calc(var(--l0) * (1 - var(--p))), calc(var(--t0) * (1 - var(--p))))
    scale(calc(var(--s0) + (1 - var(--s0)) * var(--p)));
}
.opener[data-tone="light"] .stage, .opener[data-tone="light"] .frame { background: var(--mist); }   /* light client screens read as a window, not a flat page (S5) */

/* One line under the opener: what the window shows (and Replay, where it plays the client's entrance) */
.replay-row { display: flex; justify-content: space-between; gap: 2rem; padding: 1.25rem var(--pad) 0; font-size: .9375rem; color: var(--grey); }
.replay { background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink); font-weight: 500; }

/* ---------- Case body ---------- */
.case-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; padding: 9rem var(--pad) 7rem; }
.case-intro .big { max-width: 38rem; }

/* Before and after: two real screens, honest labels */
.ba { padding: 9rem var(--pad) 8rem; }
.ba__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 4rem; margin-bottom: 4rem; }
.ba__head .read { max-width: 30rem; }
.ba__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.shot { margin: 0; }
.shot img { display: block; width: 100%; height: auto; background: #ddd; outline: 1px solid rgba(10, 10, 10, .08); outline-offset: -1px; }
.shot figcaption { margin-top: .875rem; font-size: .9375rem; line-height: 1.4; color: var(--grey); max-width: 34rem; }
.shot figcaption b { color: var(--ink); font-weight: 550; }
.ba__phones { display: none; }

/* What the research changed: three lines, competitor first, then the decision */
.research { padding: 9rem var(--pad); }
.research__head { margin-bottom: 3.5rem; max-width: 50rem; }
.research ol { border-top: 1px solid var(--ink); }
.research li { display: grid; grid-template-columns: 22rem 1fr; gap: 4rem; padding: 1.75rem 0 1.9rem; border-bottom: 1px solid var(--hair); }
.research li b { font-size: 1.375rem; font-weight: 550; letter-spacing: -.025em; line-height: 1.2; }
.research li p { font-size: 1.375rem; line-height: 1.4; letter-spacing: -.016em; max-width: 46rem; }

/* Key screens: one wide, then one beside the phone */
.screens { padding: 9rem var(--pad) 8rem; }
.screens__head { margin-bottom: 3.5rem; }
.screens__wide { margin-bottom: 5rem; }
.screens__pair { display: grid; grid-template-columns: 1fr 19rem; gap: 3rem; align-items: start; }
.screens__pair .big { font-size: 2.5rem; letter-spacing: -.04em; line-height: 1.12; max-width: 40rem; }
.screens__also { margin-top: 5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); max-width: 52rem; color: var(--grey); }
.phone img { width: 100%; height: auto; outline: 1px solid rgba(10, 10, 10, .1); outline-offset: -1px; }

/* Cubic Ship: the three jobs, set as type */
.tasks { padding: 8rem var(--pad) 9rem; }
.tasks li { display: grid; grid-template-columns: 1fr 26rem; gap: 3rem; align-items: end; padding: 1.25rem 0 1.75rem; border-bottom: 1px solid var(--line); }
.tasks li:first-child { border-top: 1px solid var(--ink); }
.tasks h3 { font-size: 10rem; font-weight: 600; letter-spacing: var(--tight); line-height: .86; margin-left: -.04em; }
.tasks p { font-size: 1.25rem; line-height: 1.4; padding-bottom: .75rem; }

/* Pearls: three R8 frames with the same film edge as the home strip, not pinned */
.mini-strip { padding: 0 var(--pad) 9rem; }
.mini-strip .mid { margin-bottom: 1rem; }
.mini-strip > .read { margin-bottom: 3rem; }
.film--static { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; width: auto; padding: 0; transform: none; height: auto; }
.film--static .cell { height: auto; }
.film--static .cell__film { height: auto; }
.film--static .cell__film img { width: 100%; height: auto; aspect-ratio: 3 / 2; }

/* Other work for Mo (Cubic page) */
.aside { padding: 0 var(--pad) 9rem; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; }
.aside__links { display: flex; flex-direction: column; gap: .75rem; font-size: 1.1875rem; align-items: flex-start; padding-top: .4rem; }


/* Next project: one huge link */
.next { display: block; padding: 6rem var(--pad) 7rem; background: var(--ink); color: #fff; }
.next__name { font-size: var(--fs, 12rem); font-weight: 600; letter-spacing: var(--tight); line-height: .88; margin-left: -.04em; transition: opacity var(--dur) var(--ease); }
.next__cap { margin-top: 1.5rem; font-size: 1rem; color: var(--on-dark-60); }
@media (hover: hover) { .next:hover .next__name { opacity: .72; } }

/* ---------- Page titles (Work, About, Services, Contact) ---------- */
.ptitle { padding: calc(var(--header-h) + 5rem) var(--pad) 0; }
.ptitle__name { font-size: 14rem; font-weight: 600; letter-spacing: var(--tight); line-height: .84; margin-left: -.045em; }
.ptitle__line { margin-top: 2.25rem; }

/* ---------- Work page ---------- */
.all--page { padding-top: 6rem; }
.lead-cases { padding: 9rem var(--pad) 4rem; }
.lead-cases > .big { margin-bottom: 6rem; max-width: 52rem; }
.pair { display: grid; grid-template-columns: 1fr 26rem; gap: 4rem; align-items: center; padding-bottom: 10rem; }
.pair__shots { position: relative; display: block; margin-right: 6rem; }
.pair__desk { display: block; width: 100%; height: auto; outline: 1px solid rgba(10, 10, 10, .08); outline-offset: -1px; }
.pair__phone { position: absolute; right: -6rem; bottom: -4rem; width: 24%; outline: .5rem solid var(--paper); }
.pair__phone img { display: block; width: 100%; height: auto; }
.pair__name { font-size: 5rem; font-weight: 600; letter-spacing: -.05em; line-height: .9; margin-bottom: 1.25rem; }
.pair__text .read { font-size: 1.1875rem; }
.pair__text .quiet { margin-top: 1rem; font-size: .9375rem; }
.pair__text .more { margin-top: 1.5rem; font-size: 1.1875rem; }
.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; padding: 0 var(--pad) 9rem; }
.two-up__item img { width: 100%; height: auto; outline: 1px solid rgba(10, 10, 10, .08); outline-offset: -1px; }
.two-up__item h3 { margin-top: 1.5rem; font-size: 3rem; font-weight: 600; letter-spacing: -.05em; line-height: .95; }
.two-up__item p { margin-top: .75rem; font-size: 1.0625rem; line-height: 1.42; color: var(--grey); max-width: 30rem; }
.two-up__item .more { margin-top: 1rem; }
.photo-row { display: grid; grid-template-columns: 1fr 26rem; gap: 4rem; align-items: end; padding: 0 var(--pad) 9rem; }
.photo-row__img { aspect-ratio: 3 / 2; }
.closer { padding: 8rem var(--pad) 9rem; border-top: 1px solid var(--line); }
.closer .big { max-width: 60rem; }
.closer .more { margin-top: 2rem; font-size: 1.375rem; }

/* ---------- About ---------- */
.about-top { display: grid; grid-template-columns: 1fr 34rem; gap: 4rem; align-items: start; padding: calc(var(--header-h) + 5rem) var(--pad) 8rem; }
.about-top__name { font-size: 9rem; font-weight: 600; letter-spacing: var(--tight); line-height: .88; margin-left: -.04em; }
.about-top .read { margin-top: 2.5rem; }
.portrait-open { --open: 1; position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  clip-path: inset(calc((1 - var(--open)) * 9%) calc((1 - var(--open)) * 14%)); }
.portrait-open img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%;
  transform: scale(calc(1.12 - .12 * var(--open))); }
.hk-motion .portrait-open { --open: 0; }
.story { padding: 0 var(--pad) 9rem; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; }
.principles { padding: 9rem var(--pad); }
.principles > .big { margin-bottom: 4rem; }
.principles dl { border-top: 1px solid var(--ink); margin: 0; }
.principles .p { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; padding: 1.5rem 0 1.75rem; border-bottom: 1px solid var(--hair); }
.principles dt { font-size: 1.75rem; font-weight: 550; letter-spacing: -.035em; line-height: 1.1; }
.principles dd { margin: 0; font-size: 1.1875rem; line-height: 1.42; color: var(--grey); max-width: 34rem; }
.about-photos { padding: 9rem var(--pad); }
.about-photos__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 2rem; }
.about-photos__grid img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.working { padding: 0 var(--pad) 9rem; }
.working ul { border-top: 1px solid var(--ink); margin-top: 3rem; }
.working li a { display: grid; grid-template-columns: 22rem 1fr; gap: 4rem; padding: 1.5rem 0 1.6rem; border-bottom: 1px solid var(--hair); }
.working li b { font-size: 1.75rem; font-weight: 550; letter-spacing: -.035em; line-height: 1.1; }
.working li span { font-size: 1.1875rem; line-height: 1.42; color: var(--grey); }

/* ---------- Services ---------- */
.svc { padding: 6rem var(--pad) 4rem; }
.svc__row { display: grid; grid-template-columns: 1fr 34rem; gap: 4rem; padding: 2.5rem 0 3.5rem; border-top: 1px solid var(--ink); }
.svc__row + .svc__row { border-top-color: var(--line); }
.svc__name { font-size: 6.5rem; font-weight: 600; letter-spacing: -.055em; line-height: .9; margin-left: -.035em; }
.svc__text .read { font-size: 1.375rem; }
.svc__inc { margin-top: 1.25rem; font-size: 1.0625rem; line-height: 1.45; color: var(--grey); }
.svc__text .more { margin-top: 1.5rem; }
.svc__photo { grid-column: 1 / -1; margin-top: 1rem; aspect-ratio: 21 / 9; }
.svc-start { padding: 7rem var(--pad) 9rem; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; border-top: 1px solid var(--line); }

/* ---------- Contact ---------- */
.ct { display: grid; grid-template-columns: 1fr 24rem; gap: 4rem; padding: calc(var(--header-h) + 5rem) var(--pad) 9rem; align-items: start; }
.ct__name { font-size: 10rem; font-weight: 600; letter-spacing: var(--tight); line-height: .86; margin-left: -.045em; }
.ct .read { margin-top: 2.5rem; }
.ct__mail { display: inline-block; margin-top: 5rem; font-size: 6.25rem; font-weight: 600; letter-spacing: -.05em; line-height: 1.02; }
.ct__mail .roll > span { padding-bottom: .08em; }
.ct__inc { margin-top: 5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; border-top: 1px solid var(--line); padding-top: 2rem; }
.ct__inc p { font-size: 1.1875rem; line-height: 1.45; }
.ct__call { margin-top: 4rem; }
.ct__call .more { font-size: 1.5rem; }
.ct__call p { margin-top: .5rem; color: var(--grey); font-size: 1rem; }
.ct__note { margin-top: 3rem; font-size: .9375rem; color: var(--grey); max-width: 36rem; }
.ct__photo { aspect-ratio: 4 / 5; margin-top: 1rem; }
.ct__photo img { object-position: 50% 80%; }

/* ---------- Footer (every page) ---------- */
.site-foot { padding: 7rem var(--pad) 2.5rem; border-top: 1px solid var(--line); }
.site-foot__mail { display: inline-block; font-size: 7.5rem; font-weight: 600; letter-spacing: -.055em; line-height: 1; margin-left: -.04em; }
.site-foot__mail .roll > span { padding-bottom: .1em; }
.site-foot__row { display: flex; flex-wrap: wrap; gap: .75rem 2.5rem; margin-top: 6rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: .9375rem; color: var(--grey); }
.site-foot__row > :first-child { color: var(--ink); font-weight: 600; margin-right: auto; }
.site-foot--bare { padding-top: 0; border-top: 0; }
.site-foot--bare .site-foot__row { margin-top: 0; }
.ink + .site-foot { border-top: 0; }

/* Home: the contact section ends the page, so its footer row sits inside it */
.contact .site-foot { padding: 0; border: 0; margin-top: 9rem; }
.contact .site-foot__row { margin-top: 0; }

/* ---------- Mobile (375 frame) ---------- */
@media (max-width: 1023px) {
  .only-d { display: none !important; }
  .only-m { display: block !important; }
  .head__nav { gap: .875rem; }
  .head { font-size: .8125rem; }

  .big { font-size: 2.25rem; line-height: 1.08; letter-spacing: -.04em; }
  .mid { font-size: 1.75rem; }
  .read { font-size: 1.125rem; }
  .sect { padding-block: 5.5rem; }

  .opener__head { padding-top: calc(var(--header-h) + .75rem); }
  .opener__name { font-size: var(--fsm, 4.5rem); white-space: normal; line-height: .9; }
  .opener__row { grid-template-columns: 1fr; gap: .75rem; margin-top: 1rem; }
  .opener__line { font-size: 1.0625rem; }
  .opener__meta { font-size: .8125rem; }
  .opener .frame img { object-position: var(--opos-m, 50% 0%); }
  .replay-row { flex-direction: column; gap: .5rem; font-size: .875rem; }

  .case-intro { grid-template-columns: 1fr; gap: 1.75rem; padding: 5.5rem var(--pad) 4.5rem; }

  .ba { padding: 5.5rem var(--pad) 5rem; }
  .ba__head { flex-direction: column; align-items: flex-start; gap: 1rem; margin-bottom: 2.25rem; }
  .ba__grid { display: none; }
  .ba__phones { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
  .shot figcaption { font-size: .8125rem; margin-top: .6rem; }

  .research { padding: 5.5rem var(--pad); }
  .research__head { margin-bottom: 2rem; }
  .research li { grid-template-columns: 1fr; gap: .5rem; padding: 1.25rem 0 1.4rem; }
  .research li b { font-size: 1.0625rem; }
  .research li p { font-size: 1.125rem; }

  .screens { padding: 5.5rem var(--pad) 5rem; }
  .screens__head { margin-bottom: 2rem; }
  .screens__wide { margin-bottom: 2.5rem; }
  .screens__pair { grid-template-columns: 1fr; gap: 2.5rem; }
  .screens__pair .phone { width: 72%; margin-inline: auto; }
  .screens__pair .big { font-size: 1.625rem; }
  .screens__also { margin-top: 3rem; }

  .tasks { padding: 5rem var(--pad) 5.5rem; }
  .tasks li { grid-template-columns: 1fr; gap: .5rem; padding: 1rem 0 1.25rem; }
  .tasks h3 { font-size: 4.25rem; }
  .tasks p { font-size: 1.0625rem; padding: 0; }

  .mini-strip { padding-bottom: 5.5rem; }
  .mini-strip > .read { margin-bottom: 2rem; }
  .film--static { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--pad)); padding-inline: var(--pad); scrollbar-width: none; }
  .film--static::-webkit-scrollbar { display: none; }
  .film--static .cell { flex: 0 0 82%; scroll-snap-align: start; }

  .aside { grid-template-columns: 1fr; gap: 1.75rem; padding-bottom: 5.5rem; }
  .aside__links { font-size: 1.0625rem; }
  .next { padding: 4rem var(--pad) 4.5rem; }
  .next__name { font-size: var(--fsm, 4rem); }

  .ptitle { padding-top: calc(var(--header-h) + 2.5rem); }
  .ptitle__name { font-size: 6rem; }
  .ptitle__line { margin-top: 1.25rem; }

  .all--page { padding-top: 3.5rem; }
  .lead-cases { padding: 5.5rem var(--pad) 2rem; }
  .lead-cases > .big { margin-bottom: 3rem; }
  .pair { grid-template-columns: 1fr; gap: 2.75rem; padding-bottom: 6rem; }
  .pair__shots { margin-right: 0; }
  .pair__phone { right: .5rem; bottom: -2rem; width: 30%; outline-width: .3rem; }
  .pair__name { font-size: 3rem; margin-bottom: .75rem; }
  .pair__text .read { font-size: 1.0625rem; }
  .two-up { grid-template-columns: 1fr; gap: 3.5rem; padding-bottom: 5.5rem; }
  .two-up__item h3 { font-size: 2.5rem; margin-top: 1rem; }
  .photo-row { grid-template-columns: 1fr; gap: 1.5rem; padding-bottom: 5.5rem; }
  .closer { padding: 5rem var(--pad) 5.5rem; }
  .closer .more { font-size: 1.1875rem; margin-top: 1.5rem; }

  .about-top { grid-template-columns: 1fr; gap: 2.5rem; padding: calc(var(--header-h) + 2.5rem) var(--pad) 5rem; }
  .about-top__name { font-size: 3.75rem; }
  .about-top .read { margin-top: 1.5rem; }
  .story { grid-template-columns: 1fr; gap: 0; padding-bottom: 5.5rem; }
  .story .read:first-of-type { margin-top: 1.5rem; }
  .principles { padding: 5.5rem var(--pad); }
  .principles > .big { margin-bottom: 2rem; }
  .principles .p { grid-template-columns: 1fr; gap: .4rem; padding: 1.1rem 0 1.25rem; }
  .principles dt { font-size: 1.375rem; }
  .principles dd { font-size: 1.0625rem; }
  .about-photos { padding: 5.5rem var(--pad); }
  .about-photos__grid { grid-template-columns: 1fr; gap: .75rem; }
  .working { padding-bottom: 5.5rem; }
  .working ul { margin-top: 2rem; }
  .working li a { grid-template-columns: 1fr; gap: .35rem; padding: 1.1rem 0 1.25rem; }
  .working li b { font-size: 1.375rem; }
  .working li span { font-size: 1rem; }

  .svc { padding: 3.5rem var(--pad) 2rem; }
  .svc__row { grid-template-columns: 1fr; gap: 1.25rem; padding: 1.5rem 0 2.75rem; }
  .svc__name { font-size: 3.25rem; }
  .svc__text .read { font-size: 1.125rem; }
  .svc__inc { font-size: 1rem; }
  .svc-start { grid-template-columns: 1fr; gap: 1.5rem; padding: 4.5rem var(--pad) 5.5rem; }

  .ct { grid-template-columns: 1fr; gap: 3rem; padding: calc(var(--header-h) + 2.5rem) var(--pad) 5.5rem; }
  .ct__name { font-size: 4.25rem; }
  .ct .read { margin-top: 1.5rem; }
  .ct__mail { margin-top: 3rem; font-size: 2.35rem; letter-spacing: -.04em; }
  .ct__inc { grid-template-columns: 1fr; gap: 1.25rem; margin-top: 3rem; }
  .ct__inc p { font-size: 1.0625rem; }
  .ct__call { margin-top: 2.5rem; }
  .ct__call .more { font-size: 1.1875rem; }
  .ct__photo { width: 14rem; margin-top: 0; }

  .site-foot { padding: 4.5rem var(--pad) 2rem; }
  .site-foot__mail { font-size: 2.6rem; letter-spacing: -.045em; }
  .site-foot__row { gap: .6rem 1.25rem; margin-top: 3.5rem; font-size: .875rem; }
  .site-foot__row > :first-child { width: 100%; }
  .contact .site-foot { margin-top: 5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .opener { --p: 0; --q: 0; }
  .portrait-open { --open: 1; }
}

/* ---------- Home additions ---------- */
.intro__more { margin-top: 3rem; font-size: 1.375rem; }
.all__more { margin-top: 3.5rem; font-size: 1.375rem; }
.next__name, .next__cap { display: block; }
@media (max-width: 1023px) {
  .intro__more, .all__more { margin-top: 2rem; font-size: 1.125rem; }
}
@media (max-width: 1023px) { .svc__photo { aspect-ratio: 4 / 3; margin-top: 0; } }

/* ---------- Home: one launch stage for the four current projects (S2, M3) ----------
   Static (no JS, reduced motion): a plain stack, each screen with its caption under it.
   Motion: one sticky stage. Travelyt opens from a framed window to full-bleed, each next
   project wipes up over it (clip-path, house-mask, scrubbed), and its caption line swaps
   in the band under the frame. No box sits over a client's screen. */
.launches { --p: 1; --cap: 0px; }
.launches .stage { height: auto; overflow: visible; }
.launches__name { display: none; }
.launch { position: relative; padding: 0 var(--pad) 6rem; }
.launch__frame { position: relative; inset: auto; clip-path: none; aspect-ratio: 16 / 10; background: #1b1b1b; }
.launch__frame img { transform: none; object-position: 50% 0%; }
.launch__cap { margin-top: 1.25rem; font-size: 1.0625rem; line-height: 1.4; }
.launch__cap a { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1.5rem; padding-block: .5rem; }
.launch__capname { font-size: 1.75rem; font-weight: 600; letter-spacing: -.04em; line-height: 1.1; }
.launch__capline { flex: 1 1 18rem; color: var(--on-dark-60); }
.launch__capmore { font-weight: 500; }
@media (hover: hover) { .launch__cap a:hover .launch__capmore { text-decoration: underline; text-underline-offset: .25em; } }

.hk-motion .launches { height: 480vh; height: 480svh; --p: 0; --cap: 6rem; }
.hk-motion .launches .stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; --t0: 36svh; --l0: 22vw; --r0: 22vw; --b0: 8svh; --s0: .56; }
.hk-motion .launches__name {
  display: block; position: absolute; z-index: 1; left: 0; right: 0; top: 9svh;
  text-align: center; font-size: var(--fs, 12rem); font-weight: 600; letter-spacing: var(--tight); line-height: .86; white-space: nowrap;
  transform: translateY(calc(var(--p) * -3rem)); opacity: calc(1 - var(--p) * 1.6);
}
.hk-motion .launch { position: absolute; inset: 0; padding: 0; pointer-events: none; --w: 0; }
.hk-motion .launch__frame { position: absolute; left: 0; right: 0; top: 0; bottom: var(--cap); aspect-ratio: auto; pointer-events: auto; z-index: 2; }
.hk-motion .launch[data-i="0"] .launch__frame {
  clip-path: inset(calc(var(--t0) * (1 - var(--p))) calc(var(--r0) * (1 - var(--p))) calc(var(--b0) * (1 - var(--p))) calc(var(--l0) * (1 - var(--p))));
}
.hk-motion .launch[data-i="0"] .launch__frame img {
  transform-origin: 0 0;
  transform: translate(calc(var(--l0) * (1 - var(--p))), calc(var(--t0) * (1 - var(--p)))) scale(calc(var(--s0) + (1 - var(--s0)) * var(--p)));
}
.hk-motion .launch:not([data-i="0"]) .launch__frame { clip-path: inset(calc((1 - var(--w)) * 100%) 0 0 0); }
.hk-motion .launch:not([data-i="0"]) .launch__frame img { transform-origin: 50% 100%; transform: scale(calc(1.06 - .06 * var(--w))); }
.hk-motion .launch__cap {
  position: absolute; left: var(--pad); right: var(--pad); bottom: 0; height: var(--cap); margin: 0;
  display: flex; align-items: center; overflow: hidden; pointer-events: none;
}
.launch__mask { display: block; }
.hk-motion .launch__mask { overflow: hidden; width: 100%; }
.hk-motion .launch__cap a { pointer-events: auto; flex-wrap: nowrap; }
.hk-motion .launch__capline { flex: 1 1 auto; }

/* ---------- Phone tap targets: at least 44px (S11) ---------- */
@media (max-width: 1023px) {
  .more, .replay, .site-foot__row a, .row-panel-in a, .opener__meta a { display: inline-block; padding-block: .7rem; }
  .launch { padding-bottom: 4rem; }
  .launch__frame { aspect-ratio: 390 / 844; }
  .launch__capname { font-size: 1.5rem; }
  .launch__cap a { gap: .2rem 1rem; }
  .launch__capline { flex-basis: 100%; }
  .hk-motion .launches { --cap: 8.5rem; }
  .hk-motion .launches .stage { --t0: 30svh; --l0: 25vw; --r0: 25vw; --b0: 6svh; --s0: .5; }
  .hk-motion .launches__name { font-size: var(--fsm, 4.75rem); top: 13svh; white-space: normal; padding-inline: var(--pad); line-height: .9; }
  .launch__cap a { justify-content: space-between; }
  .launch__capline { order: 3; font-size: .9375rem; line-height: 1.4; }
  .launch__capmore { padding-block: .7rem; margin-block: -.7rem; }
  .hk-motion .launch__cap a { flex-wrap: wrap; }
  .hk-motion .launch__capline { flex-basis: 100%; }
}

/* Replay: shown by site.js only while the entrance video is on screen (never with no JS, never on phones). */
.replay[hidden] { display: none !important; }