:root {
  color-scheme: light dark;
  --background: #fff;
  --text: #000;
  --secondary: #000000a3;
  --hover-text: #000000c2;
  --fill-hover: #0000000f;
  --control-bg: linear-gradient(180deg, #edededcc, #fcfcfccc);
  --control-edge: linear-gradient(180deg, #fff, #ffffff80 25%, #ffffff80 75%, #fff);
  --control-shadow: inset 0 .5px 4px #fff, 0 0 0 .6px #0000001a, .6px 0 0 #00000029, -.6px 0 0 #00000029;
  --control-drop: 0 4px 12px #00000008;
  --menu-drop: 0 8px 40px #00000014;
  --work-hover-bg: #00000008;
  --company-icon-shadow: 0 4px 8px -2px #0000001a;
  --ease: cubic-bezier(.2, 0, 0, 1);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: 16px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { text-wrap: balance; margin: 0 auto; max-width: 2160px; background: var(--background); color: var(--text); font-size: 15px; line-height: 20px; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
a, button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--secondary); outline-offset: 5px; }
.page { max-width: 588px; margin-inline: auto; padding: 60px 24px 92px; display: flex; flex-direction: column; gap: 60px; }
.avatar-frame { width: 64px; height: 64px; position: relative; margin: 0 0 16px -4px; }
.avatar { display: block; position: absolute; bottom: 0; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; box-shadow: 0 4px 16px #00000012; }
h1, h2 { font-size: 20px; font-weight: 500; line-height: 26px; letter-spacing: normal; margin: 0; }
p { margin: 0; }
.identity h1, .subtitle { font-size: 17px; line-height: 22px; }
.subtitle { color: var(--secondary); font-weight: 400; }
.intro { max-width: 460px; margin-top: 20px; padding-bottom: 16px; color: var(--text); }
.contact { margin-top: 20px; margin-left: -4px; --contact-fs: 15px; --contact-lh: 20px; }
.contact-button { position: relative; display: block; height: 44px; padding: 12px 16px; border: 0; border-radius: 22px; cursor: pointer; font-size: var(--contact-fs); line-height: var(--contact-lh); font-weight: 500; transition: transform 300ms var(--ease), color 100ms ease; }
:is(.contact-button, .experience-back, .experience-close) { background: var(--control-bg); backdrop-filter: blur(16px) saturate(200%); box-shadow: var(--control-shadow); }
:is(.contact-button, .experience-back, .experience-close)::before { content: ""; position: absolute; inset: 0; padding: .75px; border-radius: inherit; background: var(--control-edge); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none; }
:is(.contact-button, .experience-back, .experience-close)::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--control-drop); pointer-events: none; }
.contact { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; width: fit-content; position: relative; padding-right: 4px; }
.contact-call { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.contact-email { background: #242424; color: #fff; }
.contact-button:active { transform: scale(.95); }
section { display: flex; flex-direction: column; gap: 20px; }
.entries { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 24px; }
.entry { display: flex; align-items: center; gap: 16px; min-height: 44px; }
.company-icon { display: block; width: 44px; height: 44px; flex: 0 0 auto; object-fit: contain; filter: drop-shadow(0 4px 20px #0000001f); }
.company-icon[src$="ellie.png"] { filter: invert(1) drop-shadow(0 4px 20px #0000001f); }
/* Soft tile shadows sit behind the unchanged vector marks. */
.company-icon.company-tile { position: relative; filter: none; border-radius: 25%; box-shadow: var(--company-icon-shadow); }
.company-icon.supplied-logo { filter: none; border-radius: 25%; }
.company-tile > .supplied-logo { width: 100%; height: 100%; }
/* A quiet shared grey highlight moves between rows; icons and labels stay still. */
[aria-labelledby="work-heading"] .entries { position: relative; isolation: isolate; }
[aria-labelledby="work-heading"] .entries::before { content: ""; position: absolute; z-index: -1; pointer-events: none; top: -10px; left: -12px; width: calc(100% + 24px); height: calc(var(--hover-height, 44px) + 20px); border-radius: 14px; background: var(--work-hover-bg); opacity: 0; transform: translateY(var(--hover-y, 0px)); transition: transform 180ms cubic-bezier(.23, 1, .32, 1), opacity 120ms ease; }
[aria-labelledby="work-heading"] .entries[data-hover-active]::before { opacity: 1; }
[aria-labelledby="work-heading"] .entries[data-hover-snap]::before { transition: opacity 120ms ease; }
.entry > span { display: flex; flex-direction: column; min-width: 0; }
.entry-name { display: block; font-weight: 500; transition: color 200ms var(--ease); }
.entry-description { display: flex; align-items: baseline; gap: 12px; color: var(--secondary); white-space: nowrap; }
.entry > .entry-copy { flex: 1; font-size: 15px; line-height: 20px; }
.entry-heading { display: flex; align-items: baseline; white-space: nowrap; }
.entry-heading .entry-name { white-space: nowrap; }
.entry-dates { flex: 0 0 auto; margin-left: auto; padding-left: 12px; color: var(--secondary); font: inherit; white-space: nowrap; font-variant-numeric: tabular-nums; }
.entry-note { font: inherit; color: var(--secondary); white-space: pre; opacity: 0; transition: opacity 120ms ease; }
.entry:focus-visible .entry-note { opacity: 1; transition: none; }
.about { font-size: 15px; line-height: 24px; }
.about p { color: var(--secondary); font-size: 20px; font-weight: 400; line-height: 28px; }
.about-more { align-self: flex-start; }
.about-link { color: var(--text); text-decoration: underline; text-decoration-color: #00000040; text-underline-offset: 3px; }
.quiet-link { align-self: flex-start; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #0000004d; }
.clients-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px; list-style: none; margin: 0; padding: 0; }
.client-logo { display: grid; place-items: center; min-height: 56px; padding: 8px; border-radius: 8px; color: var(--secondary); transition: color 160ms ease; }
a.client-logo, span.client-logo { color: var(--text); }
span.client-logo { filter: grayscale(1); cursor: not-allowed; transition: opacity 160ms ease; }
.client-mark { display: block; width: min(112px, 100%); height: auto; max-height: 36px; }
.client-mark .fill-icon { fill: currentColor; }
.client-mark .fill-white { fill: #fff; }
footer { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; color: var(--secondary); font-size: 15px; line-height: 20px; }
.page > footer::before { content: ""; width: 96px; height: 1px; margin-bottom: 15px; background: var(--fill-hover); }
.footer-wave { position: relative; padding: 0; border: 0; background: transparent; color: color-mix(in srgb, var(--secondary) 75%, transparent); font: inherit; text-align: left; cursor: pointer; }
.footer-wave > [aria-hidden] { display: block; font: 10px/9px ui-monospace, monospace; white-space: pre; }
.footer-wave-tooltip { inset-inline-start: calc(100% + 8px); top: 50%; transform: translateY(-50%); }
@media (prefers-reduced-motion: reduce) {
  .footer-wave { cursor: default; }
}
@media (hover: hover) and (pointer: fine) {
  .contact-button:hover { transform: scale(1.04); }
  .entry:hover .entry-name { color: var(--hover-text); }
  .entry:hover .entry-note { opacity: 1; }
  .quiet-link:hover { text-decoration-color: currentColor; }
  .client-logo:hover { color: var(--text); }
  span.client-logo:hover { opacity: .45; }
}
@media (max-width: 480px) {
  .clients-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 20px; }
}
@media (max-width: 767px) {
  .page { max-width: 596px; padding: 44px 28px 68px; gap: 44px; }
  .contact { margin-top: 16px; --contact-fs: 17px; --contact-lh: 22px; }
  .contact-button { padding-block: 11px; }
  .company-icon { width: 48px; height: 48px; }
  .entry { min-height: 48px; }

}
@media (max-width: 360px) {
  .page { padding-inline: 12px; }
  .entry { gap: 12px; }
  .entry > .entry-copy, footer { font-size: 13px; }
  .about { font-size: 13px; }
  .entry-description { gap: 8px; }
}
@media (prefers-color-scheme: dark) {
  :root { --work-hover-bg: #ffffff0c; --company-icon-shadow: 0 4px 8px -2px #0006; --background: #000; --text: #fff; --secondary: #ffffffb3; --hover-text: #ffffffd6; --fill-hover: #ffffff14; --control-bg: linear-gradient(180deg, #1c1c1cb3, #2b2b2bb3); --control-edge: linear-gradient(180deg, #ffffff29, #fff0 25%, #fff0 75%, #ffffff1a); --control-shadow: inset 0 .5px 4px #ffffff1a, 0 0 0 .6px #0003, .6px 0 0 #0003, -.6px 0 0 #0003; --control-drop: 0 4px 12px #0000001f; }
  .avatar { box-shadow: 0 8px 24px #0006; }
  .company-icon[src$="ellie.png"] { filter: drop-shadow(0 4px 20px #0003); }
  .company-icon[src$="laiye.png"] { background: #fff; border-radius: 10px; }
  .quiet-link, .about-link { text-decoration-color: #ffffff5c; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .contact-button:hover, .contact-button:active { transform: none; }
}

/* Editorial case pages share the same content with the bottom sheet. */
html { scrollbar-gutter: stable; }
html.experience-open { overflow: hidden; }
.experience-open body { position: fixed; top: var(--experience-scroll-offset); inset-inline: 0; }
:root { --detail-line: #00000014; --detail-surface: #f6f6f6; }
.experience-dialog { position: fixed; inset: auto 0 0; width: calc(100% - 64px); max-width: 1440px; height: calc(100dvh - 32px); max-height: none; margin: 0 auto; padding: 0; border: 0; border-radius: 32px 32px 0 0; background: var(--background); color: var(--text); box-shadow: 0 2dvh 0 var(--background), 0 -12px 80px #0000001f; overflow-y: auto; overscroll-behavior: contain; scroll-padding-block: 72px 32px; transform: translateY(100%); transition: transform 500ms cubic-bezier(.22, .61, .36, 1); }
.experience-dialog.is-visible { transform: translateY(0); }
.experience-dialog.is-dragging { transition: none; user-select: none; }
.experience-dialog::backdrop { background: #0006; backdrop-filter: blur(4px); opacity: 0; transition: opacity 220ms ease; }
.experience-dialog.is-visible::backdrop { opacity: 1; }
.experience-toolbar { position: sticky; top: 0; z-index: 2; height: 0; pointer-events: none; }
.experience-handle { position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: flex; align-items: flex-start; justify-content: center; width: 88px; height: 44px; padding: 9px 0 0; border: 0; border-radius: 12px; background: transparent; cursor: grab; touch-action: none; user-select: none; }
.experience-handle span { width: 36px; height: 4px; border-radius: 4px; background: color-mix(in srgb, var(--text) 20%, transparent); transition: background-color 140ms ease, transform 140ms ease; }
.experience-handle { pointer-events: auto; }
.experience-dialog.is-dragging .experience-handle { cursor: grabbing; }
.experience-handle:focus-visible span, .experience-dialog.is-scroll-dismiss-armed .experience-handle span, .experience-dialog.is-dragging .experience-handle span { background: color-mix(in srgb, var(--text) 40%, transparent); transform: scaleX(1.15); }
.experience-close, .experience-back { display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; transition: transform 300ms var(--ease); }
.experience-back { position: relative; }
.experience-close {
  width: 44px;
  height: 44px;
  background: linear-gradient(var(--fill-hover), var(--fill-hover)), var(--control-bg);
}
.experience-toolbar .experience-close { position: absolute; top: 12px; right: 16px; pointer-events: auto; }
.experience-content { padding: 0; }

.experience-article { max-width: 880px; margin: auto; padding: 24px 24px 48px; }
.experience-dialog .experience-article { padding-top: 72px; }
.experience-page-nav { max-width: 656px; margin: auto; padding: 40px 24px 0; }
.experience-header, .experience-lede, .experience-information, .experience-contact, .experience-pagination { max-width: 608px; margin-inline: auto; }
.experience-header { margin-bottom: 24px; }
.experience-icon, .experience-icon .company-icon { display: block; width: 48px; height: 48px; }
.experience-icon { margin-bottom: 20px; }
.experience-header h1, .experience-contact h1 { margin: 0; font-size: 20px; line-height: 28px; letter-spacing: normal; font-weight: 500; }
.experience-subtitle { margin-top: 0; color: var(--secondary); font-size: 15px; line-height: 22px; }
.experience-lede { margin-bottom: 56px; font-size: 20px; line-height: 28px; }
.experience-lede:has(+ .experience-collaborators) { margin-bottom: 40px; }
.experience-summary { display: flex; flex-direction: column; gap: 20px; max-width: 608px; margin: 0 auto 40px; font-size: 20px; line-height: 28px; }
.experience-preview { display: flex; flex-direction: column; margin: 0; }
.experience-preview + :is(.experience-summary, .experience-lede) { margin-top: 32px; }
.experience-gallery > .experience-lede { margin-block: 12px; }
.experience-preview > .visual-trigger { display: block; overflow: hidden; border-radius: 16px; background: var(--detail-surface); }
.experience-preview img { display: block; width: 100%; height: auto; object-fit: contain; }
.experience-demo { container: experience-demo / inline-size; overflow: hidden; border-radius: 16px; background: #f1f2f5; }
.experience-demo iframe { display: block; width: 100%; height: auto; aspect-ratio: 832 / 560; border: 0; }
.experience-demo-laiye iframe { aspect-ratio: 832 / 656; }
@container experience-demo (max-width: 719px) {
  .experience-demo iframe { height: 560px; aspect-ratio: auto; }
  .experience-demo-laiye iframe { height: 656px; }
}
@container experience-demo (max-width: 357px) {
  .experience-demo iframe { aspect-ratio: 358 / 560; }
  .experience-demo iframe { height: auto; }
  .experience-demo-laiye iframe { aspect-ratio: 358 / 656; }
}
.experience-preview-pair > .visual-pair { display: flex; align-items: center; justify-content: center; gap: 32px; padding: 32px; border-radius: 16px; background: var(--detail-surface); }
.experience-preview-pair .visual-trigger { width: auto; max-width: calc(50% - 16px); border-radius: 8px; }
.experience-preview-pair img { width: auto; max-width: 100%; height: 340px; border-radius: 8px; }
.experience-article h2 { margin: 0; font-size: 15px; line-height: 22px; font-weight: 500; }
.experience-gallery { gap: 56px; margin-top: 56px; }
.experience-gallery-item { margin: 0; }
.experience-visual-caption, .experience-gallery > h2 { width: 100%; max-width: 608px; margin-inline: auto; }
.experience-visual-caption { display: flex; flex-direction: column; align-items: flex-start; gap: 0; margin-block: 0 16px; }
.experience-visual-caption h2 { font-size: 15px; line-height: 22px; font-weight: 500; }
.experience-visual-caption p { color: var(--secondary); font-size: 15px; line-height: 22px; font-weight: 400; }
.experience-gallery-visual { display: flex; justify-content: center; overflow: hidden; border-radius: 16px; background: var(--detail-surface); }
.experience-gallery-visual img { display: block; width: 100%; height: auto; }
.experience-gallery-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.experience-gallery-visual.experience-ellie-dark { background: #0d0d0d; }
.visual-trigger { width: 100%; padding: 0; border: 0; color: inherit; cursor: zoom-in; }
html.visual-open { overflow: hidden; }
.visual-lightbox { position: fixed; inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 24px; border: 0; background: transparent; overflow: visible; }
.visual-lightbox::backdrop { background: rgb(0 0 0 / 76%); backdrop-filter: blur(3px); }
.visual-lightbox__viewport { display: grid; place-items: center; width: 100%; height: 100%; }
.visual-lightbox__image { display: block; width: min(100%, calc((100dvh - 48px) * var(--visual-ratio, 1))); height: auto; aspect-ratio: var(--visual-ratio, 1); object-fit: contain; border-radius: 16px; transform-origin: top left; }
[aria-labelledby="ellie-heading"].experience-gallery { gap: 16px; }
.experience-gallery.experience-gallery-compact { gap: 16px; }
.visual-lightbox[open]::backdrop { animation: visual-backdrop-in 340ms ease-out; }
.visual-lightbox.is-closing::backdrop { animation: visual-backdrop-out 300ms ease-in forwards; }
@keyframes visual-backdrop-in { from { opacity: 0; } }
@keyframes visual-backdrop-out { to { opacity: 0; } }
.experience-gallery-portrait .experience-gallery-visual { padding: 32px; }
.experience-gallery-portrait img { width: auto; max-width: 100%; max-height: 600px; object-fit: contain; }
.experience-information { gap: 14px; margin-top: 48px; }
.experience-information dl { margin: 0; border-top: 1px solid var(--detail-line); }
.experience-information dl > div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--detail-line); font-size: 15px; line-height: 22px; }
.experience-information dt { color: var(--secondary); }
.experience-information dd { margin: 0; text-align: end; }
.experience-information a { text-decoration: none; }
.experience-contact { gap: 16px; margin-block: 48px; }
.experience-contact .contact { margin: 0; }
.experience-pagination { margin-top: 24px; }
.experience-pagination .entry { position: relative; isolation: isolate; }
.experience-pagination .entry::before { content: ""; position: absolute; z-index: -1; pointer-events: none; inset: -10px -12px; border-radius: 14px; background: var(--work-hover-bg); opacity: 0; transition: opacity 120ms ease; }
.experience-pagination .entry:focus-visible::before { opacity: 1; }
.experience-navigation-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
  :is(.experience-close, .experience-back):hover { transform: scale(1.04); }
  .experience-pagination .entry:hover::before { opacity: 1; }
}
.experience-close:active, .experience-back:active { transform: scale(.97); }
@media (max-width: 640px) {
  .experience-dialog { width: 100%; height: calc(100dvh - 16px); border-radius: 24px 24px 0 0; }
  .experience-toolbar .experience-close {
    top: calc(100dvh - 76px - env(safe-area-inset-bottom));
    right: auto;
    left: calc(50% - 22px);
  }
  .experience-article { padding: 8px 20px max(40px, env(safe-area-inset-bottom)); }
  .experience-dialog .experience-article { padding-top: 64px; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .experience-page-nav { padding: 24px 20px 0; }
  .experience-page .experience-article { padding-top: 24px; }
  .experience-header { margin-bottom: 20px; }
  .experience-icon { margin-bottom: 16px; }
  .experience-lede { margin-bottom: 48px; }
  .experience-preview-pair > .visual-pair { gap: 16px; padding: 24px; }
  .experience-preview-pair .visual-trigger { max-width: calc(50% - 8px); }
  .experience-preview-pair img { height: 240px; }
  .experience-gallery { gap: 40px; margin-top: 40px; }
  .experience-gallery-pair, .experience-gallery.experience-gallery-compact { gap: 12px; }
  .experience-gallery-portrait .experience-gallery-visual { padding: 24px; }
  .experience-information { margin-top: 36px; }
  .experience-information dl > div { grid-template-columns: 70px minmax(0, 1fr); gap: 16px; }
}
@media (prefers-color-scheme: dark) {
  :root { --detail-line: #ffffff26; --detail-surface: #1c1c1c; }
}

:root { --experience-sheet-spring: linear(0 0%, 0.02139 2%, 0.07561 4%, 0.15033 6%, 0.2362 8%, 0.32632 10%, 0.41575 12%, 0.50109 14%, 0.58016 16%, 0.65172 18%, 0.71521 20%, 0.77056 22%, 0.81805 24%, 0.8582 26%, 0.89166 28%, 0.91914 30%, 0.9414 32%, 0.95913 34%, 0.97304 36%, 0.98373 38%, 0.99178 40%, 0.99767 42%, 1.00183 44%, 1.00464 46%, 1.00639 48%, 1.00734 50%, 1.0077 52%, 1.00764 54%, 1.00729 56%, 1.00676 58%, 1.00612 60%, 1.00542 62%, 1.00473 64%, 1.00406 66%, 1.00343 68%, 1.00286 70%, 1.00235 72%, 1.0019 74%, 1.00152 76%, 1.00119 78%, 1.00091 80%, 1.00069 82%, 1.0005 84%, 1.00036 86%, 1.00024 88%, 1.00015 90%, 1.00008 92%, 1.00003 94%, 0.99999 96%, 0.99997 98%, 1 100%); }
@supports (transition-timing-function: linear(0, 1)) {
  .experience-dialog { transition-timing-function: var(--experience-sheet-spring); }
}
#experience-title:focus { outline: none; }
@media (prefers-reduced-motion: reduce) {
  .experience-dialog, .experience-dialog.is-visible { transform: none; transition: none; }
  .experience-dialog::backdrop, .experience-handle span { transition: none; }
}

/* Compact portraits with generous touch height. */
.experience-collaborators { --collaborator-size: 24px; max-width: 608px; gap: 12px; margin: 0 auto 56px; }
.experience-collaborators .collaborators-heading { margin: 0; color: var(--secondary); font-size: 15px; line-height: 22px; font-weight: 400; }
.collaborators-list { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; isolation: isolate; }
.collaborator-item { position: relative; width: var(--collaborator-size); height: var(--collaborator-size); flex: none; transition: transform 220ms cubic-bezier(.2, .8, .2, 1); }
.collaborator-link { position: relative; display: block; width: var(--collaborator-size); height: var(--collaborator-size); padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.collaborator-portrait { display: block; width: var(--collaborator-size); height: var(--collaborator-size); border-radius: 50%; object-fit: cover; transition: transform 220ms cubic-bezier(.2, .8, .2, 1), opacity 160ms ease, box-shadow 220ms ease; }
.collaborator-tooltip { display: none; --tooltip-offset: calc(-50% + var(--tooltip-shift, 0px)); position: absolute; z-index: 5; bottom: calc(var(--collaborator-size) + 16px); left: 50%; width: max-content; max-width: min(240px, calc(100vw - 32px)); padding: 6px 10px; border-radius: 8px; background: var(--background); color: var(--text); box-shadow: 0 0 0 1px #0000000f, 0 2px 6px #0000000d, 0 4px 42px #0000000f; font-size: 12px; line-height: 16px; white-space: nowrap; pointer-events: none; visibility: hidden; opacity: 0; transform: translateX(var(--tooltip-offset)) scale(.98); transform-origin: center bottom; transition: opacity 50ms ease-out, transform 50ms ease-out, visibility 50ms, display 50ms allow-discrete; }
.collaborator-item:has(.collaborator-link:focus-visible) { z-index: 3; }
.collaborators-list:has(.collaborator-link:focus-visible) .collaborator-portrait { opacity: .7; }
.collaborator-link:focus-visible .collaborator-portrait { opacity: 1 !important; transform: scale(1.2); box-shadow: 0 3px 10px #00000018; }
.collaborators-list:has(.collaborator-link:focus-visible) .collaborator-item, .collaborators-list:has(.collaborator-link:focus-visible) .collaborator-portrait, .collaborators-list:has(.collaborator-link:focus-visible) .collaborator-tooltip { transition: none; }
.collaborator-item:not([data-tooltip-dismissed]):has(.collaborator-link:focus-visible) .collaborator-tooltip { display: block; visibility: visible; opacity: 1; transform: translateX(var(--tooltip-offset)) scale(1); }
@media (hover: hover) and (pointer: fine) {
  .collaborators-list:has(.collaborator-link:hover) .collaborator-portrait { opacity: .7; }
  .collaborator-item:has(.collaborator-link:hover) { z-index: 3; }
  .collaborator-link:hover .collaborator-portrait { opacity: 1 !important; transform: scale(1.2); box-shadow: 0 3px 10px #00000018; }
  .collaborator-item:has(+ .collaborator-item .collaborator-link:hover) { transform: translateX(-1px); }
  .collaborator-item:has(.collaborator-link:hover) + .collaborator-item { transform: translateX(1px); }
  .collaborator-item:has(+ .collaborator-item + .collaborator-item .collaborator-link:hover) { transform: translateX(-.1px); }
  .collaborator-item:has(.collaborator-link:hover) + .collaborator-item + .collaborator-item { transform: translateX(.1px); }
  .collaborator-item:not([data-tooltip-dismissed]):has(.collaborator-link:hover) .collaborator-tooltip { display: block; visibility: visible; opacity: 1; transform: translateX(var(--tooltip-offset)) scale(1); }
}
@supports (transition-timing-function: linear(0, 1)) {
  .collaborator-item, .collaborator-portrait { transition-timing-function: linear(0, .12 10%, .38 20%, .68 30%, .9 40%, 1.02 55%, 1.03 65%, 1.015 80%, 1); }
}
@media (max-width: 640px) {
  .experience-summary, .experience-lede:has(+ .experience-collaborators) { margin-bottom: 32px; }
  .experience-collaborators { --collaborator-size: 28px; margin-bottom: 48px; }
}
@media (pointer: coarse) {
  .experience-collaborators { gap: 4px; }
  .collaborators-list { gap: 0; margin-inline: calc((var(--collaborator-size) - 44px) / 2); }
  .collaborator-item { display: grid; place-items: center; width: 44px; height: 44px; }
  .collaborator-link::after { content: ""; position: absolute; inset: calc((var(--collaborator-size) - 44px) / 2); border-radius: 50%; }
  .collaborator-tooltip { bottom: calc(var(--collaborator-size) / 2 + 38px); }
}
@media (max-width: 640px) and (pointer: coarse) {
  .collaborators-list { margin-inline: -4px; }
  .collaborator-item { width: 36px; }
  .collaborator-link::after { inset: -8px -4px; }
}
@media (prefers-color-scheme: dark) {
  .collaborator-tooltip { box-shadow: 0 0 0 1px #ffffff26, 0 4px 24px #0006; }
}
@media (prefers-reduced-motion: reduce) {
  .collaborator-item, .collaborator-portrait { transform: none !important; transition: none !important; }
  .collaborator-tooltip { transition: none; }
}

@starting-style {
  .collaborator-item:has(.collaborator-link:focus-visible) .collaborator-tooltip { opacity: 0; transform: translateX(var(--tooltip-offset)) scale(.98); }
  @media (hover: hover) and (pointer: fine) {
    .collaborator-item:has(.collaborator-link:hover) .collaborator-tooltip { opacity: 0; transform: translateX(var(--tooltip-offset)) scale(.98); }
  }
}

.avatar-link { display: block; border-radius: 50%; }
.avatar-link .avatar { pointer-events: none; }
:is(.avatar-tooltip, .client-funding-tooltip, .footer-wave-tooltip) {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  height: 23px;
  padding: 0 9px;
  border-radius: 17px;
  background: color-mix(in srgb, var(--detail-surface) 30%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 .7px color-mix(in srgb, var(--text) 6%, transparent);
  color: var(--text);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
}
.avatar-tooltip { top: var(--avatar-tip-y, calc(50% - 11.5px)); left: var(--avatar-tip-x, calc(100% + 12px)); }
:is(.avatar-link:focus-visible, .client-funding:focus-within, .footer-wave:focus-visible) > :is(.avatar-tooltip, .client-funding-tooltip, .footer-wave-tooltip) { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .avatar-link::before { content: ""; position: absolute; inset: -12px; border-radius: 50%; }
  :is(.avatar-link, .client-funding, .footer-wave):hover > :is(.avatar-tooltip, .client-funding-tooltip, .footer-wave-tooltip) { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .avatar-link .avatar {
    transform: translate(var(--avatar-x, 0px), var(--avatar-y, 0px));
    transition: transform 420ms cubic-bezier(.24, 1.08, .42, 1);
  }
  .avatar-link:hover .avatar { transition: transform 160ms ease-out; }
  :is(.avatar-tooltip, .client-funding-tooltip, .footer-wave-tooltip) {
    clip-path: inset(0 82% 0 0 round 17px);
    filter: blur(7px);
    transition: opacity 210ms var(--ease), clip-path 230ms var(--ease), filter 230ms ease-in-out;
  }
  :is(.avatar-link:focus-visible, .client-funding:focus-within, .footer-wave:focus-visible) > :is(.avatar-tooltip, .client-funding-tooltip, .footer-wave-tooltip) { clip-path: inset(0 round 17px); filter: none; }
  @media (hover: hover) and (pointer: fine) {
    :is(.avatar-link, .client-funding, .footer-wave):hover > :is(.avatar-tooltip, .client-funding-tooltip, .footer-wave-tooltip) { clip-path: inset(0 round 17px); filter: none; }
  }
}

.about-page { gap: 32px; }
.about-page .contact-button { font-weight: 400; }
.about-page .about p { color: var(--text); }
.about-outcomes {
  --outcome-rule: color-mix(in srgb, var(--text) 5%, transparent);
  --outcome-icon-size: 20px;
  --outcome-gap: 10px;
  gap: 0;
  margin-block: 28px;
  font-size: 15px;
  line-height: 20px;
}
.about-outcomes h2 {
  padding-bottom: 8px;
  font: inherit;
  font-weight: 600;
}
.about-outcomes ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--outcome-rule); }
.about-outcomes li {
  position: relative;
  display: grid;
  grid-template-columns: var(--outcome-icon-size) minmax(0, 1fr);
  align-items: start;
  gap: var(--outcome-gap);
  padding-block: .735rem;
}
.about-outcomes li + li::before {
  content: "";
  position: absolute;
  inset: 0 0 auto calc(var(--outcome-icon-size) + var(--outcome-gap));
  border-top: 1px solid var(--outcome-rule);
}
.about-outcome-check {
  display: grid;
  place-items: center;
  width: var(--outcome-icon-size);
  height: var(--outcome-icon-size);
  border-radius: 6px;
  background: color-mix(in srgb, var(--text) 10%, var(--background));
  color: var(--secondary);
}
.about-outcome-done { color: var(--secondary); }
.about-outcome-check.is-pending { background: var(--fill-hover); }
.about-outcome-check:not(.is-pending)::after {
  content: "";
  width: 8px;
  height: 4px;
  border: solid currentColor;
  border-width: 0 0 1.5px 1.5px;
  transform: translateY(-.5px) rotate(-45deg);
}
@supports (mask-image: url("")) {
  .about-outcome-done {
    position: relative;
    justify-self: start;
    text-decoration: none;
  }
  .about-outcome-done::after {
    content: "";
    position: absolute;
    inset: calc(50% - 4px) -2px auto;
    height: 8px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 8' preserveAspectRatio='none'%3E%3Cpath d='M1 5.8C23 4.1 42 3 67 3.9S111 5 139 3.7C155 3 167 2.7 179 2' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    pointer-events: none;
  }
  @media (prefers-reduced-motion: no-preference) {
    .about-outcomes[data-ink="waiting"] .about-outcome-done::after { clip-path: inset(0 100% 0 0); }
    .about-outcomes[data-ink="drawn"] .about-outcome-done::after {
      animation: about-draw-strike 300ms var(--ease) both;
    }
    .about-outcomes[data-ink="drawn"] li:nth-child(2) .about-outcome-done::after { animation-delay: 90ms; }
    .about-outcomes[data-ink="drawn"] li:nth-child(3) .about-outcome-done::after { animation-delay: 180ms; }
    .about-outcomes[data-ink="drawn"] li:nth-child(4) .about-outcome-done::after { animation-delay: 270ms; }
    @keyframes about-draw-strike {
      from { clip-path: inset(0 100% 0 0); }
      to { clip-path: inset(0); }
    }
  }
}
.about-orbit-section { gap: 8px; }
.about-orbit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.about-orbit :is(img, video) { display: block; width: 100%; height: auto; border-radius: 12px; }
.about-orbit.is-orbiting {
  position: relative;
  display: block;
  align-self: center;
  width: min(100vw, 1720px);
  --orbit-height: clamp(180px, 32vw, 380px);
  --orbit-bottom-room: 72px;
  height: calc(var(--orbit-height) + var(--orbit-bottom-room));
  overflow: clip;
  touch-action: pan-y;
  cursor: grab;
}
.about-orbit.is-orbiting::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 101;
  pointer-events: none;
  backdrop-filter: blur(10px);
  mask-image: linear-gradient(90deg, #000, transparent 13% 87%, #000),
    linear-gradient(180deg, #0008, transparent 18%, transparent 92%, #0005);
}
.about-orbit.is-orbiting:active { cursor: grabbing; }
.about-orbit.is-orbiting .orbit-card {
  position: absolute;
  inset: 50% auto auto 50%;
  width: clamp(var(--orbit-min, 78px), var(--orbit-width, 17%), var(--orbit-max, 228px));
  opacity: var(--orbit-opacity, 1);
  filter: var(--orbit-filter, none);
  pointer-events: none;
  user-select: none;
  transform: translate(-50%, -50%) translate(var(--orbit-x), var(--orbit-y)) scale(var(--orbit-scale));
}
.about-orbit.is-orbiting .orbit-card :is(img, video) { width: auto; max-width: 100%; max-height: clamp(120px, 22vw, 245px); margin-inline: auto; clip-path: inset(1px round 11px); }
.about-orbit-toggle { align-self: center; border: 0; background: transparent; color: var(--secondary); font-size: 13px; cursor: pointer; }

.about-orbit .orbit-card:nth-child(3n + 1) { --orbit-min: 96px; --orbit-width: 20%; --orbit-max: 272px; }
.about-orbit .orbit-card:nth-child(3n + 2) { --orbit-min: 72px; --orbit-width: 13%; --orbit-max: 180px; }
.about-orbit .orbit-card:nth-child(3n) { --orbit-min: 81px; --orbit-width: 16.5%; --orbit-max: 220px; }
.about-orbit-controls:not([hidden]) { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; color: var(--secondary); font-size: 13px; }
.about-orbit-controls label { display: flex; align-items: center; gap: 5px; }
.about-orbit-controls input { width: 68px; accent-color: var(--secondary); }

.about-page { position: relative; padding-top: 0; }
.about-page > .experience-back { position: absolute; top: 24px; left: 24px; z-index: 101; }
.about-orbit.is-orbiting .orbit-card { inset-block-start: calc(var(--orbit-height) * .34); }
.about-orbit:not(.is-orbiting) { margin-top: 76px; }
.orbit-accessible:not(:focus-within) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}



.client-funding { position: relative; }
.client-funding-tooltip { bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%); }
.client-funding[data-pointer] .client-funding-tooltip {
  bottom: auto;
  top: var(--funding-y);
  left: var(--funding-x);
  transform: none;
}
.funding-count { display: inline-block; min-width: 4.5ch; text-align: end; font-variant-numeric: tabular-nums; }
#funding-lettria .funding-count { min-width: 0; }

.funding-label { margin-inline-start: .25em; }
.funding-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

@media (max-width: 640px) {
  .about-orbit.is-orbiting { --orbit-height: clamp(238px, 46vw, 300px); --orbit-bottom-room: 36px; }
  .about-orbit.is-orbiting::after { display: none; }
}

.about-orbit.is-orbiting .orbit-landscape { width: clamp(125px, 24%, 330px); }