/* COET, built the MetaLab way: the floating bar that folds into a glass pill, the full-screen light menu,
   and a one-screen home where a liquid C waits on black and every project takes the whole stage.
   Positions and timings were measured from metalab.com frame by frame; the content, type and art are COET's. */

:root { --ml-ease: cubic-bezier(.16, 1, .3, 1); --ml-in: cubic-bezier(.7, 0, .84, 0); --ml-ui: "Zalando Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; }

/* the old bar and hero aren't used any more */
.nav, .hero { display: none !important; }

/* ── the bar ── */
.mnav { position: fixed; inset: 0 0 auto; z-index: 80; display: flex; justify-content: center; padding: calc(12px + env(safe-area-inset-top, 0px)) 12px 0; pointer-events: none; }
.mnav__bar { pointer-events: auto; position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; width: 100%; max-width: 100%; height: 54px; padding: 0 12px; border-radius: 999px;
  transition: max-width .8s var(--ml-ease), background-color .5s ease, padding .8s var(--ml-ease), box-shadow .5s ease, backdrop-filter .5s ease; }
.mnav.is-compact .mnav__bar { max-width: 645px; padding: 0 16px; background: rgb(150 150 150 / .38); backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4); box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), 0 10px 30px rgb(0 0 0 / .25); }
.mnav__menu { justify-self: start; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 14px; border-radius: 999px; background: rgb(255 255 255 / .14); color: #fff; font: 400 12px/1 var(--ml-ui); letter-spacing: .01em; transition: background-color .3s, color .3s, box-shadow .3s; position: relative; }
.mnav__menu::after { content: ""; position: absolute; inset: -8px -4px; }
.mnav__menu:hover { background: rgb(255 255 255 / .24); }
.mnav.is-compact .mnav__menu { background: transparent; }
.mnav__logo { display: inline-flex; align-items: center; min-height: 44px; color: #fff; }
.mnav__logo svg { height: 15px; width: auto; }
.mnav__end { justify-self: end; display: flex; align-items: center; gap: 8px; }
.mnav__clock { font: 400 12px/1 var(--ml-ui); color: #fff; margin-right: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mnav__icon { position: relative; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgb(255 255 255 / .14); color: #fff; transition: background-color .3s, color .3s; }
.mnav__icon::after { content: ""; position: absolute; inset: -10px; }
.mnav__icon:hover { background: rgb(255 255 255 / .28); }
.mnav__icon svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.mnav__icon .i-spk { fill: currentColor; stroke: none; }
.mnav__icon[aria-pressed="false"] .i-on, .mnav__icon[aria-pressed="true"] .i-off { display: none; }

/* The bar when the menu is open, and the full-screen menu itself, both live in assets/menu.css now: the menu is a
   canvas ring with the page flying into the middle of it, not a light panel, so the bar stays light-on-dark. */

/* ── home: one screen ── */
.ws { position: relative; height: 100svh; min-height: 560px; overflow: hidden; isolation: isolate; background: #000; }

/* default: the liquid C and the catchphrase */
/* exits are fast and enters wait for them, so two things are never on stage together (cancel, don't overlap) */
.ws-home { position: absolute; inset: 0; transition: opacity .35s ease .08s; }
.ws-home:not(.is-on) { opacity: 0; pointer-events: none; transition: opacity .12s ease-out; }
.ws-c { position: absolute; left: 50%; top: 50%; height: 128vh; aspect-ratio: 763 / 937; transform: translate(-46%, -52%) perspective(1600px) rotateY(var(--cy, 0deg)) rotateX(var(--cx, 0deg)); transition: transform 1.4s var(--ml-ease); will-change: transform; }
.ws-c img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: screen; filter: url(#liquid) brightness(.5); animation: cFloat 12s ease-in-out infinite; }
/* a dark vignette, so type always reads on the C (MetaLab's object is dark with highlights) */
.ws-home::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 60% at 50% 45%, transparent 30%, rgb(0 0 0 / .55) 100%), linear-gradient(180deg, rgb(0 0 0 / .35), transparent 25%, transparent 70%, rgb(0 0 0 / .4)); }
.ws-catch, .ws-intro { z-index: 1; }
.ws-c::before { content: ""; position: absolute; inset: 18% 10%; background: radial-gradient(closest-side, rgb(255 255 255 / .14), transparent); filter: blur(40px); z-index: -1; animation: cGlow 7s ease-in-out infinite alternate; }
@keyframes cFloat { 0%, 100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-2.2%) rotate(1.2deg); } }
@keyframes cGlow { from { opacity: .6; transform: scale(.94); } to { opacity: 1; transform: scale(1.05); } }

.ws-catch { position: absolute; left: 0; right: 0; top: 60%; display: grid; font: 400 clamp(52px, 6.15vw, 96px)/.98 var(--serif); letter-spacing: -.02em; color: #fff; pointer-events: none; text-shadow: 0 2px 24px rgb(0 0 0 / .75), 0 0 3px rgb(0 0 0 / .5); }
.ws-catch span { display: block; white-space: nowrap; }
.ws-catch__a { margin-left: 33.5%; }
.ws-catch__b { margin-left: 41%; }
.ws-intro { position: absolute; left: 59.5%; top: 25%; max-width: 250px; font: 400 13px/1.42 var(--ml-ui); color: #fff; text-shadow: 0 1px 14px rgb(0 0 0 / .95), 0 0 6px rgb(0 0 0 / .9), 0 0 2px rgb(0 0 0 / .8); }

/* the title drops in from above; the old one sinks and fades */
.ws-home .ws-catch span { transition: transform .75s var(--ml-ease), opacity .6s var(--ml-ease); }
.ws-home:not(.is-on) .ws-catch span { transform: translateY(30px); opacity: 0; transition-duration: .12s; transition-timing-function: ease-out; }
.ws-home.is-entering .ws-catch span { transform: translateY(-70px); opacity: 0; transition: none; }

/* project layers */
.ws-layers { position: absolute; inset: 0; }
.ws-layer { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .12s ease-out, visibility 0s .12s; background: radial-gradient(120% 100% at 60% 30%, color-mix(in srgb, var(--tone, #111) 55%, #1a1a1a), #000 80%); }
.ws-layer.is-on { opacity: 1; visibility: visible; transition: opacity .35s ease .08s; }
.ws-bg { position: absolute; inset: -4%; width: 108%; height: 108%; object-fit: cover; object-position: top; opacity: .3; filter: blur(5px) saturate(.85) brightness(.75); transform: scale(1.04); transition: transform 2.4s var(--ml-ease); }
.ws-layer.is-on .ws-bg { transform: none; }
.ws-bg--plain { display: block; background: radial-gradient(90% 70% at 70% 40%, color-mix(in srgb, var(--tone) 40%, #222), transparent); opacity: .7; }
.ws-shot { position: absolute; overflow: hidden; border-radius: 2px; box-shadow: 0 50px 100px -40px rgb(0 0 0 / .8); opacity: 0; transform: scale(1.03); transition: opacity .5s ease, transform 1.1s var(--ml-ease); }
.ws-layer.is-on .ws-shot { opacity: 1; transform: none; }
.ws-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.ws-shot--diagram { background: #050505; padding: 16px; display: grid; place-items: center; }
.ws-shot--type { display: grid; place-items: center; background: radial-gradient(80% 80% at 50% 40%, color-mix(in srgb, var(--tone) 70%, #2a2a2a), #050505); }
.ws-shot--type span { font: 400 clamp(28px, 3.2vw, 48px)/1.05 var(--serif); color: #fff; text-align: center; max-width: 12ch; }
.ws-del, .ws-line { position: absolute; font: 400 13px/1.42 var(--ml-ui); color: #fff; max-width: 240px; opacity: 0; transition: opacity .5s ease .1s; }
.ws-layer.is-on .ws-del, .ws-layer.is-on .ws-line { opacity: 1; }
.ws-title { position: absolute; }
.ws-name { display: block; font: 400 clamp(56px, 6.15vw, 96px)/1 var(--serif); letter-spacing: -.02em; color: #fff; white-space: nowrap; transform: translateY(-70px); opacity: 0; transition: transform 0s .12s, opacity .1s ease-out; }
.ws-layer.is-on .ws-name { transform: none; opacity: 1; transition: transform .75s var(--ml-ease) .08s, opacity .5s var(--ml-ease) .08s; }

/* arrangement A (like Uber): image top-right, title centred low, line bottom-right */
.ws-layer--a .ws-shot { left: 52%; top: 13%; width: 40%; aspect-ratio: 16 / 10; }
.ws-layer--a .ws-del { left: 29%; top: 20%; }
.ws-layer--a .ws-title { left: 0; right: 0; top: 70%; text-align: center; }
.ws-layer--a .ws-line { right: 2.5%; bottom: 6%; text-align: right; }
/* arrangement B (like Suno): title left, image bottom-right, line up top */
.ws-layer--b .ws-shot { left: 52%; top: 42%; width: 46%; aspect-ratio: 16 / 10; }
.ws-layer--b .ws-del { left: 41%; top: 72%; max-width: 150px; }
.ws-layer--b .ws-title { left: 19.5%; top: 48%; max-width: 30%; }
.ws-layer--b .ws-name, .ws-layer--c .ws-name { white-space: normal; }
.ws-layer--c .ws-title { max-width: 58%; }
.ws-layer--b .ws-line { left: 42%; top: 18%; }
/* arrangement C: image low and centred, title high on the left */
.ws-layer--c .ws-shot { left: 30%; top: 40%; width: 44%; aspect-ratio: 16 / 10; }
.ws-layer--c .ws-del { left: 30%; top: 33%; }
.ws-layer--c .ws-title { left: 19.5%; top: 16%; }
.ws-layer--c .ws-line { right: 2.5%; top: 25%; text-align: right; }

/* pills */
/* MetaLab's own button, to its stylesheet's numbers: 3.2rem tall, 1.6rem of padding either side, 1.6rem type on
   a 5rem radius, over rgba(185,185,185,.2) and a 1.4rem blur. Stacked 4px apart, which is tighter than the old
   6px even though every pill is taller — the column reads as one block of choices rather than a loose list. */
.ws-pills { position: absolute; left: 24px; top: 28%; display: grid; gap: 4px; justify-items: start; z-index: 2; }
.ws-pill { position: relative; display: inline-flex; align-items: center; height: 32px; padding: 0 16px; border-radius: 50px; background: rgb(185 185 185 / .2); border: .1rem solid rgb(0 0 0 / 0); color: #fff; font: 400 16px/2 var(--ml-ui); letter-spacing: -.01em; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: border-color .25s, background-color .25s, color .25s; }
.ws-pill::after { content: ""; position: absolute; inset: -2px; }
.ws-pill:hover, .ws-pill.is-on { border-color: rgb(255 255 255 / .85); background: rgb(255 255 255 / .06); }

/* sub pages sit under the floating bar */
.is-sub .cs-hero { padding-top: calc(66px + clamp(48px, 8vw, 128px)); }
.pg-sub { margin-top: 24px; font-size: clamp(16px, 1.3vw, 19px); }
.pg-hero + .specs, .pg-hero + section { border-top: 0; }

/* ── phones ── */
@media (max-width: 900px) {
  .mnav__clock { display: none; }
  .mnav.is-compact .mnav__bar { max-width: calc(100% - 0px); }
  .ws-c { height: 92vh; transform: translate(-50%, -62%); }
  .ws-catch { top: auto; bottom: 300px; font-size: clamp(28px, 8.4vw, 64px); }
  .ws-catch__a { margin-left: 24px; } .ws-catch__b { margin-left: 14%; }
  .ws-intro { left: 24px; right: 24px; top: auto; bottom: 196px; max-width: none; }
  .ws-pills { top: auto; bottom: 24px; left: 16px; right: 16px; display: flex; flex-wrap: wrap; gap: 4px; }
  .ws-layer .ws-shot { left: 6%; right: 6%; width: auto; top: 14%; }
  .ws-layer .ws-title { left: 0; right: 0; top: 46%; text-align: center; max-width: none; }
  .ws-name { font-size: clamp(40px, 11vw, 64px); white-space: normal; }
  .ws-layer .ws-del { left: 6%; top: 9%; }
  .ws-layer .ws-line { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ws-c img, .menu__media img, .ws-c::before { animation: none; filter: none; }
  .ws-c { transition: none; }
}

/* MetaLab's cursor on the work screen: a thin ring trailing the pointer, opening up over a project */
.ws.has-cursor, .ws.has-cursor a, .ws.has-cursor button { cursor: none; }
.ws-cursor { position: absolute; left: 0; top: 0; z-index: 5; width: 0; height: 0; pointer-events: none; opacity: 0; transition: opacity .25s; }
.ws.has-cursor .ws-cursor { opacity: 1; }
.ws-cursor::before { content: ""; position: absolute; left: -17px; top: -17px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgb(255 255 255 / .9); transition: transform .45s var(--ml-ease), border-color .3s; }
.ws-cursor::after { content: ""; position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; border-radius: 50%; background: #fff; transition: opacity .2s; }
.ws-cursor.is-big::before { transform: scale(1.7); border-color: rgb(255 255 255 / .55); }
.ws-cursor.is-big::after { opacity: 0; }

/* keyboard focus on the work stage: a clear ring, since the custom cursor replaces the pointer there */
.ws-pill:focus-visible, .m-pill:focus-visible, .mnav__menu:focus-visible, .mnav__icon:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ── the lead form: quiet, underline-only, MetaLab's contact style ── */
.lead { width: min(100%, 720px); display: grid; gap: 28px; margin-top: 8px; }
.lead__intro { color: var(--ink-2); font-size: 16px; }
.lead__row { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.lead__field { display: grid; gap: 6px; }
.lead__field span { font: 400 12px/1 var(--ml-ui); color: var(--muted); }
.lead__field em { font-style: normal; color: #5e605c; }
.lead__field input, .lead__field textarea { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--hair-2); border-radius: 0; padding: 8px 0 10px; color: var(--ink); font: 400 18px/1.4 var(--display); outline: none; resize: none; transition: border-color .25s; }
.lead__field textarea { min-height: 44px; field-sizing: content; max-height: 240px; }
.lead__field input:focus, .lead__field textarea:focus { border-bottom-color: var(--ink); }
.lead__field input:focus-visible, .lead__field textarea:focus-visible { outline: none; box-shadow: 0 1px 0 0 var(--ink); }
.lead__field [aria-invalid="true"] { border-bottom-color: #e5806f; }
.lead__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.lead__foot { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.lead__status { font-size: 14px; color: var(--ink-2); min-height: 1.4em; }
.lead__status.is-ok { color: #9fd3a8; }
.lead__status.is-err { color: #f0a597; }
.lead__status a { text-decoration: underline; text-underline-offset: 3px; }
.lead.is-sending button { opacity: .6; pointer-events: none; }
@media (max-width: 760px) { .lead__row { grid-template-columns: 1fr; } }

/* `hidden` has to beat the grid display above it. An attribute selector cannot out-specify .lead.lead--sched,
   which lives in schedule.css and loads later, so this is scoped and !important rather than a blanket
   [hidden] rule — .stage__panel[hidden] (site.css § the stage) stays laid out on purpose. */
.lead[hidden], .lead__done[hidden] { display: none !important; }

/* The confirmation that replaces the form. Same width the form held, so the section does not jump when it
   swaps, and it reads top to bottom: what happened, where the copy went, what we do about the time. */
.lead__done { width: min(100%, 720px); display: grid; gap: 20px; margin-top: 8px; animation: lead-done .5s var(--ease, cubic-bezier(.16, 1, .3, 1)) both; }
.lead__done-k { display: flex; }
.lead__done-title { font: 400 clamp(32px, 4vw, 52px)/1.08 var(--display); letter-spacing: -.025em; color: #fff; text-wrap: balance; }
.lead__done-title:focus-visible { outline: none; }
.lead__done-line, .lead__done-when { font-size: clamp(16px, 1.3vw, 18px); line-height: 1.55; color: var(--ink-2); max-width: 54ch; text-wrap: pretty; }
.lead__done-when { padding-top: 20px; border-top: 1px solid var(--hair); }
.lead__done-em { color: var(--ink); }
.lead__done-when [data-done-time] { color: var(--ink); }
.lead__done-ref { color: var(--muted); font-size: 12px; }
.lead__done-ref span { color: var(--ink-2); }
@keyframes lead-done { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lead__done { animation: none; } }


/* ---- Apple-style type for Services and Pricing (2026-11-12): SF on Apple devices, Inter elsewhere ---- */
:root { --apple: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif; --apple-grey: #86868b; }
.services, .pricing { font-family: var(--apple); }
.services .head__title, .ap-title { font: 600 clamp(40px, 5vw, 80px)/1.05 var(--apple); letter-spacing: -.015em; text-transform: none; }
.services .head__title sup { font: 600 .28em/1 var(--apple); letter-spacing: 0; color: var(--apple-grey); top: .35em; }
.services .head__sub, .ap-sub { font: 400 clamp(19px, 1.6vw, 24px)/1.38 var(--apple); letter-spacing: .004em; color: var(--apple-grey); max-width: 34ch; }
.ap-eyebrow { font: 600 clamp(17px, 1.4vw, 21px)/1.2 var(--apple); color: var(--signal); }
.svc__idx { font: 600 15px/1 var(--apple); letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
.svc__name { font: 600 clamp(32px, 3.4vw, 56px)/1.07 var(--apple); letter-spacing: -.012em; text-transform: none; }
.svc__lede { font: 400 clamp(17px, 1.3vw, 21px)/1.42 var(--apple); letter-spacing: .004em; color: var(--apple-grey); max-width: 36ch; }
.svc__tab[aria-selected="true"] .svc__lede { color: #d2d2d7; }
.services .tags { gap: 6px 14px; }
.services .tag { padding: 0; background: none; border-radius: 0; font: 500 14px/1.4 var(--apple); letter-spacing: -.01em; text-transform: none; color: #f5f5f7; }
.services .tag + .tag::before { content: "·"; margin-right: 14px; color: var(--apple-grey); }
.services .stage__label, .services .stage__hint { font-family: var(--apple); font-weight: 500; font-size: 12px; letter-spacing: 0; text-transform: none; }

.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto 1fr auto; gap: 0 20px; }
.plan { grid-row: span 3; display: grid; grid-template-rows: subgrid; row-gap: 0; padding: 36px 36px 32px; border: 1px solid rgb(255 255 255 / .1); border-radius: 22px; background: linear-gradient(180deg, #111113, #0a0a0b); transition: border-color .3s var(--ease); }
.plan:hover { border-color: rgb(255 255 255 / .2); }
.plan--feat { border-color: color-mix(in srgb, var(--signal) 45%, transparent); background: linear-gradient(180deg, #17140e, #0a0a0b); }
.plan--feat:hover { border-color: color-mix(in srgb, var(--signal) 70%, transparent); }
.plan__top { display: flex; justify-content: space-between; align-items: center; min-height: 26px; }
.plan__k { font: 500 13px/1 var(--apple); color: var(--apple-grey); font-variant-numeric: tabular-nums; }
.plan__badge { padding: 6px 10px; border-radius: 999px; background: color-mix(in srgb, var(--signal) 16%, transparent); color: var(--signal); font: 600 12px/1 var(--apple); }
.plan__name { margin-top: 28px; font: 600 clamp(22px, 1.8vw, 28px)/1.15 var(--apple); letter-spacing: -.01em; color: #f5f5f7; }
.plan__price { margin-top: 0; padding-bottom: 28px; border-bottom: 1px solid rgb(255 255 255 / .1); }
.plan__amt { font: 600 clamp(34px, 3vw, 46px)/1.05 var(--apple); letter-spacing: -.025em; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.plan__cap { margin-top: 8px; font: 400 14px/1.4 var(--apple); color: var(--apple-grey); }
.plan__body { padding-top: 24px; font: 400 16px/1.5 var(--apple); letter-spacing: -.01em; color: #a1a1a6; }
.plan__btn { justify-self: start; margin-top: 32px; display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px; border-radius: 999px; background: #f5f5f7; color: #1d1d1f; font: 500 15px/1 var(--apple); transition: background-color .25s var(--ease); }
.plan__btn:hover { background: #fff; }
.plan:not(.plan--feat) .plan__btn { background: rgb(255 255 255 / .08); color: #f5f5f7; }
.plan:not(.plan--feat) .plan__btn:hover { background: rgb(255 255 255 / .14); }
.plan-cta { margin-top: 36px; text-align: center; }
.ap-link { font: 400 clamp(17px, 1.4vw, 21px)/1.2 var(--apple); color: #2997ff; }
.ap-link:hover { text-decoration: underline; }
@media (max-width: 900px) { .plan-grid { grid-template-columns: 1fr; grid-template-rows: none; gap: 16px; } .plan { grid-row: auto; grid-template-rows: none; } }

/* ---- team bios (2026-11-12) ---- */
.person__open { display: block; width: 100%; text-align: left; color: inherit; cursor: pointer; }
.person__open:focus-visible { outline: 2px solid var(--signal); outline-offset: 6px; border-radius: 6px; }
.person--bio:hover img, .person__open:focus-visible img { filter: grayscale(0) brightness(1); }
.person__more { display: inline-flex; gap: .4em; margin-top: 8px; font: 500 13px/1 var(--apple); color: var(--signal); }
.person__more span { display: inline-block; transition: transform .35s var(--ease); }
.person__open:hover .person__more span { transform: rotate(90deg); }
html.bio-open { overflow: hidden; }
.bio { width: min(1080px, calc(100% - 32px)); max-height: min(86vh, 820px); padding: 0; border: 1px solid rgb(255 255 255 / .12); border-radius: 28px; background: #0c0c0d; color: #f5f5f7; overflow: auto; overscroll-behavior: contain; }
.bio::backdrop { background: rgb(0 0 0 / .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.bio[open] { animation: bio-in .45s var(--ease); }
@keyframes bio-in { from { opacity: 0; transform: translateY(16px) scale(.985); } }
.bio__close { position: sticky; top: 16px; z-index: 2; float: right; margin: 16px 16px -60px 0; width: 44px; height: 44px; border-radius: 50%; background: rgb(40 40 42 / .85); backdrop-filter: blur(8px); color: #f5f5f7; font: 300 26px/1 var(--apple); display: grid; place-items: center; }
.bio__close:hover { background: rgb(70 70 74 / .9); }
.bio__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.bio__pic { position: sticky; top: 0; align-self: start; padding: 28px; }
.bio__pic img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 18px; background: #e5e5e5; }
.bio__text { padding: 56px 72px 56px 20px; font-family: var(--apple); }
.bio__role { font: 600 15px/1.2 var(--apple); color: var(--signal); }
.bio__name { margin-top: 10px; font: 600 clamp(34px, 3.4vw, 52px)/1.06 var(--apple); letter-spacing: -.015em; }
.bio__body { margin-top: 28px; display: grid; gap: 16px; max-width: 60ch; }
.bio__body p { font: 400 17px/1.55 var(--apple); letter-spacing: -.012em; color: #a1a1a6; }
.bio__body p:first-child { font-size: 19px; color: #f5f5f7; }
@media (max-width: 760px) {
  .bio { border-radius: 22px; }
  .bio__in { grid-template-columns: 1fr; }
  .bio__pic { position: relative; padding: 16px 16px 0; }
  .bio__pic img { aspect-ratio: 1; object-position: 50% 20%; }
  .bio__text { padding: 24px 22px 32px; }
}
@media (prefers-reduced-motion: reduce) { .bio[open] { animation: none; } }

/* ==== Flat Apple typography, site-wide (2026-11-12): one family, sentence case, semibold display ==== */
:root { --display: var(--apple); --mono: var(--apple); --serif: var(--apple); --ml-ui: var(--apple); --ml-ease: var(--ease); --fast: .2s; --slow: .5s; }
body { font-family: var(--apple); letter-spacing: -.011em; }
.display, .mono, .chip, .tag, .flag, .btn, .link, .svc__name, .quote__name, .dg-s { text-transform: none; }
.mono { font: 500 13px/1.45 var(--apple); letter-spacing: -.005em; }
.chip, .tag, .flag, .btn, .link { font-weight: 500; font-size: 13px; letter-spacing: -.005em; }
.display { font-weight: 600; letter-spacing: -.03em; line-height: 1.02; }
.head__title { font-weight: 600; letter-spacing: -.025em; line-height: 1.05; }
.head__title sup { font: 600 .26em/1 var(--apple); letter-spacing: 0; color: var(--apple-grey); top: .4em; }
.head__sub { color: var(--apple-grey); }
.specs__n { font-weight: 600; letter-spacing: -.045em; }
.statement__text { font-weight: 600; letter-spacing: -.025em; line-height: 1.08; }
.quote__text { font-weight: 600; letter-spacing: -.02em; }
.quote__name, .person__name, .card__title { font-weight: 600; letter-spacing: -.01em; }
.menu__links a { font-weight: 600; letter-spacing: -.02em; }
.ws-catch, .ws-name, .cs-title, .cs-next__name, .cs-help__title, .cs-num { font-weight: 600; letter-spacing: -.04em; line-height: 1.02; }
.ws-shot--type span, .cs-plate--type span, .cs-live__url, .wi-name { font-weight: 600; letter-spacing: -.025em; line-height: 1.08; }
.cs-title { font-size: clamp(48px, 8.4vw, 136px); }
.cs-next__name { font-size: clamp(48px, 8vw, 128px); }
.cs-help__title { font-size: clamp(48px, 6.6vw, 104px); }

/* ==== Motion system: one curve, two speeds, transform + opacity only ==== */
.ws-pill, .m-pill, .chip, .btn, .plan__btn, .bio__close, .svc__tab .svc__name, .person__open img { transition-timing-function: var(--ease); }
.ws-pill:active, .m-pill:active, .chip:active, .btn:active, .plan__btn:active, .bio__close:active { transform: scale(.97); transition: transform var(--fast) var(--ease); }
.person__open:active img { transform: scale(.985); }
.person img { transition: filter var(--slow) var(--ease), transform var(--fast) var(--ease); }
[data-rise] { transition-duration: .7s; }

/* ==== Project click: the stage image grows into the case-study hero (cross-document View Transitions) ==== */
@view-transition { navigation: auto; }
.cs-hero .cs-plate { view-transition-name: vt-hero; }
.cs-hero .cs-title { view-transition-name: vt-title; }
html.vt-leaving .cs-hero .cs-plate, html.vt-leaving .cs-hero .cs-title { view-transition-name: none; }
.cs-hero [data-rise] { opacity: 1; transform: none; transition: none; }           /* the hero arrives by morph, not by rise */
.ws-instant, .ws-instant * { transition: none !important; }
::view-transition-group(vt-hero), ::view-transition-group(vt-title) { animation-duration: .65s; animation-timing-function: cubic-bezier(.2, .7, .1, 1); }
::view-transition-group(vt-hero) { overflow: clip; border-radius: 6px; }
::view-transition-old(vt-hero), ::view-transition-new(vt-hero) { width: 100%; height: 100%; object-fit: cover; object-position: top; }
::view-transition-old(vt-title), ::view-transition-new(vt-title) { width: auto; height: 100%; }
::view-transition-old(root) { animation: vt-out .22s ease-out both; }
::view-transition-new(root) { animation: vt-in .45s cubic-bezier(.2, .7, .1, 1) .08s both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .ws-pill:active, .m-pill:active, .chip:active, .btn:active, .plan__btn:active, .bio__close:active, .person__open:active img { transform: none; }
}

/* ==== Scroll motion lives in assets/motion.js (Lenis smooth scroll + GSAP ScrollTrigger). These are its base styles. ==== */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis.lenis-stopped { overflow: clip; }
html.has-gsap [data-rise] { transition: none; }
html.has-gsap .cs-hero [data-rise], html.has-gsap dialog [data-rise] { opacity: 1; transform: none; }
html.has-gsap main > section, html.has-gsap main > .ws { position: relative; background: var(--black); transform-origin: 50% 0; will-change: transform; }
html.has-gsap main > .client { background: var(--paper, #f4f4f1); }

/* services light up in COET amber, as on coetsystems.com: the original drawings read --draw (0 → 1) */
@property --draw { syntax: "<number>"; inherits: true; initial-value: 0; }
.stage__panel { --draw: 0; transition: --draw .5s var(--ease); }
.stage__panel:not([hidden]):not(.is-out) { --draw: 1; transition-delay: .3s; }

/* ==== The orb (2026-11-12): replaces the C. An "AI brain" network sphere drawn in assets/orb.js ==== */
.ws-orb { position: absolute; inset: 0; pointer-events: none; }   /* the network fills the whole stage */
.ws-orb canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.orb__glow { filter: blur(10px); mix-blend-mode: screen; opacity: .9; }
.ws-orb::before { content: ""; position: absolute; inset: 10% 14%; border-radius: 50%; background: radial-gradient(closest-side, rgb(245 158 11 / .07), transparent); filter: blur(40px); }

/* ==== Phones: MetaLab's mobile home (2026-11-12). Headline top left; the pills scroll in their own faded column;
        the pill crossing the line just above the middle turns white and its project fills the stage. ==== */
@media (max-width: 900px) {
  .ws-catch { top: 104px; bottom: auto; left: 16px; right: 16px; justify-items: start; font-size: clamp(30px, 8.2vw, 56px); line-height: 1.02; transition: opacity .35s var(--ease); }
  .ws-catch__a, .ws-catch__b { margin-left: 0; }
  .ws-intro { display: none; }
  .ws-pills { inset: 0; top: 0; bottom: 0; left: 0; right: 0; display: flex; flex-direction: column; align-items: flex-start; flex-wrap: nowrap; gap: 4px;
    padding: 50svh 16px 46svh; overflow-y: auto; overscroll-behavior-y: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(rgb(0 0 0 / 0) 10%, #000 20%, #000 80%, rgb(0 0 0 / 0) 90%); mask-image: linear-gradient(rgb(0 0 0 / 0) 10%, #000 20%, #000 80%, rgb(0 0 0 / 0) 90%); }
  .ws-pills::-webkit-scrollbar { display: none; }
  .ws-pills li { flex: none; }
  .ws-pill { height: 34px; padding: 0 18px; font-size: 16px; line-height: 2; background: rgb(185 185 185 / .2); transition: background-color .3s var(--ease), color .3s var(--ease), opacity .3s var(--ease); }
  .ws.has-pick .ws-pill { opacity: .55; }
  /* On a phone the pill IS the whole answer: the one on the line fills in solid — white ground, black label, full
     opacity, the same state a mouse gets on hover — and nothing happens behind it. The project backgrounds are a
     desktop affordance (a stage you point at); on a phone they fought the headline and the pill you were reading,
     so there is no picture here at all, just the list and the pill you are on. */
  .ws.has-pick .ws-pill.is-on { opacity: 1; background: #fff; color: #000; border-color: #fff; }
  .ws-layers { display: none; }
}