:root { --nav-top: 24px; --nav-side: 44px; }
/* The white strip follows the compact CD control and its expanding panel. */
.project-study .study-nav::before,
.about-page .study-nav::before {
  height: calc(var(--header-solid-height, 60px) + 28px);
  background: linear-gradient(to bottom, #fff 0, #fff var(--header-solid-height, 60px), #ffffff00 100%);
}
.language-pending body { visibility: hidden; }
.nav-archive { top: var(--nav-top); }
.language-switch { position: fixed; z-index: 10; top: var(--nav-top); right: var(--nav-side); height: var(--line-height); display: flex; align-items: center; gap: 6px; font: inherit; color: var(--soft); }
.language-switch button { display: grid; place-items: center; height: var(--line-height); padding: 0 4px; border: 0; background: transparent; color: var(--soft); font: inherit; cursor: pointer; }
.language-switch button:last-child { padding-right: 0; }
.language-switch button:is(:hover, [aria-pressed="true"]) { color: var(--ink); }
.language-switch button:focus-visible { outline: 1px solid #b4b4b4; outline-offset: 3px; }
.site-services { position: fixed; z-index: 10; top: var(--nav-top); left: var(--nav-side); margin: 0; font: inherit; line-height: 1.4; pointer-events: none; }
.services-trigger { position: relative; display: grid; align-items: center; justify-items: start; width: max-content; height: var(--line-height); margin: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; line-height: 1.4; letter-spacing: .015em; cursor: pointer; pointer-events: auto; }
.services-mark, .services-name { grid-area: 1 / 1; }
.services-mark { transition: opacity 200ms ease; }
.services-name { position: absolute; left: 0; width: max-content; white-space: nowrap; opacity: 0; clip-path: inset(0 100% 0 0); transition: opacity 250ms ease, clip-path 500ms var(--ease); }
.site-services.is-open .services-mark { opacity: 0; }
.site-services.is-open .services-name { position: relative; opacity: 1; clip-path: inset(0); }
.services-trigger:focus-visible { outline: 1px solid #b4b4b4; outline-offset: 4px; }
.services-panel { display: grid; margin-top: calc((1.4em - var(--line-height)) / 2); grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 500ms var(--ease), opacity 250ms ease; }
.services-clip { min-height: 0; overflow: hidden; }
.services-list { margin: 0; width: max-content; max-width: calc(100vw - 56px); }
.services-list span { display: block; transform: translateY(-6px); clip-path: inset(0 100% 0 0); transition: transform 500ms var(--ease), clip-path 500ms var(--ease); }
.services-list span:nth-child(1) { transition-delay: 35ms; }
.services-list span:nth-child(2) { transition-delay: 70ms; }
.site-services.is-open { pointer-events: auto; }
.site-services.is-open .services-panel { grid-template-rows: 1fr; opacity: 1; }
.site-services.is-open .services-list span { transform: none; clip-path: inset(0); }
@media(max-width:600px) {
  :root { --nav-top: 16px; --nav-side: 28px; }
  .index-stage { inset: 132px 0; }
  .index { max-height: calc(100dvh - 264px); }
  .creative-statement-page .info-stage { inset: 136px 0 72px; }
  .project-study .case-heading { padding-top: 152px; }
  .about-page .info-scroll { padding-top: 152px; }
}
@media(max-width:360px) {
  /* Keep the expanded first line clear of the centred 00 on small phones. */
  .services-name, .services-list { font-size: 11px; }
}