/* Keep this query identical to PHONE_SERVICES_QUERY in services-intro.js.
   No sticky runway on phones, including coarse-pointer landscape phones. */
@media (max-width: 767px), (pointer: coarse) and (max-width: 1023px) and (max-height: 767px) {
  .particle-interlude[data-services-ending][data-services-capable],
  .particle-interlude[data-services-ending] { height: 100svh !important; }
  .particle-interlude[data-services-ending] .particle-stage { position: relative; }
  .particle-interlude[data-services-ending] .services-ui,
  .particle-interlude[data-services-ending] .services-utilities { display: none; }
}
/* The existing home ends in the same sticky scene; source content stays accessible. */
.particle-interlude[data-services-ending] { height: 100svh; }
.particle-interlude[data-services-capable="true"] { height: calc(100svh + 240svh + 380svh); }
.services-intro { --services-intro-top: clamp(104px, 12svh, 132px); position: absolute; z-index: 4; inset: var(--services-intro-top) 6vw auto; display: flex; align-items: baseline; justify-content: space-between; gap: 24px; pointer-events: none; }
.services-intro h2 { margin: 0; color: #fff; font-size: clamp(44px, 5vw, 72px); font-weight: 450; line-height: 1.04; letter-spacing: -.055em; }
.services-intro > span { position: absolute; right: 0; top: calc(100svh - var(--services-intro-top) - 7svh - 30px); font-size: 30px; font-weight: 300; line-height: 1; }
.services-entry-marker { position: absolute; bottom: 0; left: 0; width: 1px; height: 1px; pointer-events: none; }
.services-ui { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.services-static-link { position: absolute; bottom: 2svh; left: 6vw; z-index: 4; color: #fff; }
.services-static-link a { width: fit-content; font-size: 15px; text-underline-offset: 5px; }
[data-services-capable="true"] .services-static-link { display: none; }
html:has(body.services-in-view) { scroll-padding-top: 0; }
html.home-modal-locked { overflow: hidden; overscroll-behavior: none; }
.services-in-view .site-header { opacity: 0; visibility: hidden; pointer-events: none; }
.services-in-view .particle-canvas { cursor: default; }
.services-utilities { position: absolute; z-index: 6; right: 4vw; top: 88px; display: flex; gap: 18px; color: #dddeda; font-size: 11px; }
.services-utilities[hidden] { display: none; }
.services-utilities a { padding: 8px 0; text-decoration: none; pointer-events: auto; }
.services-utilities a:hover { color: #fff; text-decoration: underline; text-underline-offset: 5px; }
.services-utilities a:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.home-info-dialog { position: fixed; inset: 0; width: min(1280px, calc(100% - 40px)); max-width: none; height: min(900px, calc(100svh - 40px)); max-height: none; margin: auto; padding: 72px 0 0; border: 1px solid #393b3b; border-radius: 3px; background: #101111; color: #f5f5f1; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.home-info-dialog::backdrop { background: rgb(0 0 0 / .78); backdrop-filter: blur(8px); }
.home-info-dialog:not([open]) { display: none; }
.home-info-dialog .section { padding-top: 70px; padding-bottom: 70px; }
.home-info-dialog .frame { width: auto; margin: 0 6%; }
.home-info-dialog .footer { padding-top: 56px; }
.home-info-dialog .footer-wordmark { font-size: clamp(36px, 8vw, 112px); }
.home-info-dialog .motion-entry { opacity: 1 !important; transform: none !important; }
.home-info-dialog .motion-word-ink { opacity: 1 !important; transform: none !important; }
.home-info-close { position: sticky; top: -56px; float: right; z-index: 3; margin: -48px 28px 0 0; padding: 11px 16px; border: 1px solid #575a58; border-radius: 100px; background: #101111; color: #f5f5f1; font: inherit; font-size: 13px; cursor: pointer; }
.home-info-close:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
@media(max-width:760px) {
  .services-utilities { right: 22px; top: 72px; gap: 16px; }
  .particle-interlude[data-services-capable="true"] { height: calc(100svh + 240svh + 340svh); }
  .services-intro { inset-inline: 22px; }
  .services-intro > span { top: calc(100svh - var(--services-intro-top) - 9svh - 30px); }
  .services-intro h2 { font-size: clamp(38px, 11vw, 58px); }
  .home-info-dialog { width: calc(100% - 16px); height: calc(100svh - 16px); padding-top: 64px; }
  .home-info-dialog .section { padding-block: 42px; }
  .home-info-dialog .frame { margin-inline: 22px; }
  .home-info-close { margin-right: 16px; top: -48px; }
}
/* The idea and its explanation frame the surface, never sit on top of it. */
.services-intro { inset: 0; display: block; }
.services-intro h2 { position: absolute; left: 6vw; top: clamp(96px, 12svh, 132px); max-width: 320px; font-size: clamp(34px, 3vw, 44px); }
.sphere-editorial { position: absolute; left: 6vw; bottom: 7svh; width: min(480px, 78vw); }
.sphere-editorial p { margin: 0; font-size: 16px; line-height: 1.45; color: #d9dcd8; }
.sphere-editorial .sphere-offers { margin-top: 14px; font-size: 11px; letter-spacing: .015em; color: #b7bcb6; }
.sphere-editorial .sphere-hint { margin-top: 12px; font-size: 10px; color: #8b938a; }
.services-intro > span { right: 6vw; top: auto; bottom: 7svh; }
.particle-interlude .particle-canvas { cursor: default; }
@media(max-width:760px) {
  .services-intro h2 { left: 22px; top: 86px; max-width: 300px; font-size: 34px; }
  .sphere-editorial { left: 22px; bottom: 7svh; width: calc(100% - 60px); }
  .sphere-editorial p { font-size: 14px; }
  .sphere-editorial .sphere-offers { font-size: 10px; margin-top: 10px; max-width: 290px; }
  .sphere-editorial .sphere-hint { font-size: 10px; margin-top: 10px; }
  .services-intro > span { right: 22px; bottom: 7svh; top: auto; font-size: 22px; }
}
@media(max-height:650px) and (min-width:761px) {
  .services-intro h2 { top: 84px; font-size: 34px; }
  .sphere-editorial { width: 290px; bottom: 28px; }
  .sphere-editorial p { font-size: 13px; }
}
@media(prefers-reduced-motion:reduce) {
  .particle-interlude[data-services-ending], .particle-interlude[data-services-capable="true"] { height: 100svh; }
}