/* Case studies in the v5 draft. Generated by tools/build_cases_v5.py: the first part is the live case stylesheet
   (projects/case.css) scoped under .cs and re-toned to v5; the second part is the v5 frame. Edit the frame there. */
.cs { --light: var(--bg); --dark: var(--ink); --red: #D92D20; --fh: var(--sans); --gap: 24px; --pad: var(--pad-v5, 48px); --ease: cubic-bezier(.22, 1, .36, 1); --hd: 66px;
  --u: min(calc(100vw / 90), 18px); --rule: var(--line); --hair: var(--line); color: var(--ink); font-family: var(--sans); line-height: 1.32; }
@media (max-width: 1023px) { .cs { --u: calc(100vw / 52); } }
@media (max-width: 760px) { .cs { --u: calc(100vw / 26); } }
@media (max-width: 760px) { .cs { --pad: 16px; --gap: 12px; } }
.cs ul, .cs ol { list-style: none; }
.cs em { font-style: normal; }
.cs button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.cs :root[data-theme="dark"] { --light: #0f0f0f; --dark: #f0f0f0; }
.cs ul, .cs ol { list-style: none; }
.cs em { font-style: normal; color: inherit; }
.cs .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cs .h1 { font-size: calc(14.625 * var(--u)); font-weight: 400; letter-spacing: -0.08em; line-height: 0.87; }
.cs .h2 { font-size: calc(6.125 * var(--u)); font-weight: 400; letter-spacing: -0.05em; line-height: 0.92; }
.cs .h3 { font-size: calc(3.125 * var(--u)); font-weight: 400; letter-spacing: -0.03em; line-height: 1; }
.cs .h4 { font-size: calc(2.0625 * var(--u)); font-weight: 400; letter-spacing: -0.03em; line-height: 1.12; }
.cs .p1 { font-size: calc(1 * var(--u)); font-weight: 400; letter-spacing: -0.02em; line-height: 1.32; }
.cs .c1 { font-size: calc(0.75 * var(--u)); font-weight: 500; letter-spacing: -0.02em; line-height: 1.25; }
.cs .c2 { font-size: calc(0.625 * var(--u)); font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; }
@media (max-width: 1023px) {
.cs .h2 { font-size: calc(3.4 * var(--u)); }
.cs .h3 { font-size: calc(2.2 * var(--u)); }
.cs .h4 { font-size: calc(1.6 * var(--u)); }
.cs .p1 { font-size: calc(1.0625 * var(--u)); }
.cs .c1 { font-size: calc(0.875 * var(--u)); }
.cs .c2 { font-size: calc(0.75 * var(--u)); }
}
.cs .grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--gap); padding: 0 var(--pad); }
@media (max-width: 1023px) {
.cs .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.cs .roll { display: inline-grid; overflow: hidden; vertical-align: top; }
.cs .roll > span { grid-area: 1 / 1; transition: transform 0.5s var(--ease); }
.cs .roll > span + span { transform: translateY(105%); }
.cs a:hover > .roll > span, .cs button:hover > .roll > span { transform: translateY(-105%); }
.cs a:hover > .roll > span + span, .cs button:hover > .roll > span + span { transform: none; }
.cs .link { border-bottom: 1px solid currentColor; padding-bottom: calc(0.1 * var(--u)); }
.cs .cs-hero { padding-top: calc(var(--hd) + calc(7 * var(--u))); }
.cs .cs-kicker { grid-column: 1 / -1; display: flex; gap: calc(2 * var(--u)); opacity: 0.55; margin-bottom: calc(1.5 * var(--u)); }
.cs .cs-title { grid-column: 1 / -1; font-size: min(calc(14.625 * var(--u)), calc(100vw / (var(--chars, 10) * 0.56))); }
.cs .cs-title .ln { display: block; overflow: hidden; padding-bottom: 0.06em; }
.cs .cs-title .ln > span { display: inline-block; }
.cs .cs-hook { grid-column: 1 / 6; margin-top: calc(4 * var(--u)); max-width: calc(46 * var(--u)); }
.cs .cs-facts { grid-column: 6 / -1; margin-top: calc(4 * var(--u)); margin-left: calc(var(--gap) / -2); display: grid; grid-template-columns: 1fr 1fr; gap: calc(1.5 * var(--u)) var(--gap); align-content: start; }
.cs .cs-facts div { display: flex; flex-direction: column; gap: calc(0.3 * var(--u)); }
.cs .cs-facts dt { opacity: 0.5; }
.cs .cs-facts a { text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 0.2em; }
.cs .cs-cover { margin-top: calc(6 * var(--u)); padding: 0 var(--pad); }
.cs .cs-cover img { width: 100%; transform-origin: 50% 0; }
.cs .ch { position: relative; padding: calc(10 * var(--u)) 0; }
.cs .ch.is-dark { background: var(--light); color: var(--dark); --rule: color-mix(in srgb, currentColor 16%, transparent); }
.cs .ch-head { row-gap: calc(1.5 * var(--u)); margin-bottom: calc(4.5 * var(--u)); }
.cs .ch-label { grid-column: 1 / 3; opacity: 0.55; padding-top: calc(0.6 * var(--u)); }
.cs .ch-title { grid-column: 3 / 7; }
.cs .ch-text { grid-column: 3 / 7; display: flex; flex-direction: column; gap: calc(1 * var(--u)); max-width: calc(34 * var(--u)); }
.cs .ch-text .h4 { max-width: calc(40 * var(--u)); }
.cs .ch-note { grid-column: 3 / 7; opacity: 0.55; }
.cs .story .ch-title { grid-column: 3 / -1; max-width: calc(62 * var(--u)); }
.cs .story .ch-text { grid-column: 5 / 8; margin-top: calc(2 * var(--u)); }
.cs .id-row { gap: var(--gap); row-gap: var(--gap); }
.cs .id-tile { background: #f3f3f1; color: #0f0f0f; display: flex; align-items: center; justify-content: center; padding: calc(3 * var(--u)); min-height: calc(22 * var(--u)); position: relative; }
.cs .id-tile img { max-height: calc(18 * var(--u)); width: auto; }
.cs .id-tile figcaption { position: absolute; left: calc(1 * var(--u)); bottom: calc(0.9 * var(--u)); opacity: 0.55; }
.cs .id-logo { grid-column: span 4; }
.cs .id-spec { grid-column: span 4; }
.cs .swatches { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: var(--gap); margin-top: var(--gap); }
.cs .swatch { aspect-ratio: 1.6; padding: calc(1 * var(--u)); display: flex; flex-direction: column; justify-content: flex-end; gap: calc(0.2 * var(--u)); background: var(--sw); color: var(--ink, #fff); }
.cs .tagline { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: end; gap: calc(2 * var(--u)); margin-top: calc(5 * var(--u)); padding-top: calc(1.25 * var(--u)); border-top: 1px solid var(--rule); }
.cs .tagline .h3 { max-width: calc(50 * var(--u)); }
.cs .tagline .c2 { opacity: 0.55; }
.cs .g { display: grid; gap: calc(2.5 * var(--u)) var(--gap); padding: 0 var(--pad); }
.cs .g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs .g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs .g-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cs .g figure { display: flex; flex-direction: column; gap: calc(0.6 * var(--u)); }
.cs .g figcaption { opacity: 0.55; }
.cs .g figcaption b { font-weight: 500; opacity: 1; margin-right: calc(0.5 * var(--u)); }
.cs .one { padding: 0 var(--pad); }
.cs .one img { width: 100%; }
.cs .mock-group { padding: 0 var(--pad); margin-bottom: calc(5 * var(--u)); }
.cs .mock-group > p { display: flex; justify-content: space-between; padding: calc(0.75 * var(--u)) 0; border-top: 1px solid var(--rule); margin-bottom: calc(1.25 * var(--u)); }
.cs .mock-group > p span { opacity: 0.55; }
.cs .masonry { columns: 3; column-gap: var(--gap); }
.cs .masonry figure { break-inside: avoid; margin-bottom: calc(2 * var(--u)); display: flex; flex-direction: column; gap: calc(0.5 * var(--u)); }
.cs .masonry figcaption { opacity: 0.55; }
.cs .deck { padding: 0 var(--pad); }
.cs .deck-pin { height: 100vh; display: flex; flex-direction: column; justify-content: center; gap: calc(1.25 * var(--u)); }
.cs .deck-stage { position: relative; width: min(100%, calc((100vh - calc(9 * var(--u))) * var(--ar, 1.78))); margin: 0 auto; aspect-ratio: var(--ar, 1.78); }
.cs .deck-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; will-change: transform; }
.cs .deck-bar { width: min(100%, calc((100vh - calc(9 * var(--u))) * var(--ar, 1.78))); margin: 0 auto; display: flex; justify-content: space-between; gap: calc(2 * var(--u)); }
.cs .deck-cap { opacity: 0.7; }
.cs .deck-count { font-variant-numeric: tabular-nums; }
.cs .deck-count i { display: inline-block; width: 1px; height: 0.7em; margin: 0 calc(0.4 * var(--u)); background: currentColor; opacity: 0.4; }
.cs .web { padding: 0 var(--pad); }
.cs .web-bar { display: flex; justify-content: space-between; align-items: center; gap: calc(1 * var(--u)); padding: calc(0.75 * var(--u)) 0; border-top: 1px solid var(--rule); margin-bottom: calc(1.25 * var(--u)); }
.cs .web-tabs, .cs .web-devices { display: flex; gap: calc(1.25 * var(--u)); }
.cs .web-tabs button, .cs .web-devices button { opacity: 0.45; transition: opacity 0.3s var(--ease); }
.cs .web-tabs button[aria-selected="true"], .cs .web-devices button[aria-pressed="true"] { opacity: 1; text-decoration: underline; text-underline-offset: 0.3em; }
.cs .web-frame { position: relative; margin: 0 auto; }
.cs .web-frame[data-device="mobile"] { width: min(calc(24 * var(--u)), 100%); }
.cs .web-chrome { display: flex; justify-content: space-between; align-items: center; padding: calc(0.6 * var(--u)) calc(0.9 * var(--u)); background: #1b1b1b; color: #f0f0f0; border-bottom: 1px solid rgba(242, 240, 240, 0.08); }
.cs .web-chrome span { opacity: 0.6; }
.cs .web-viewport { position: relative; overflow: hidden; background: #fff; height: calc(var(--vh-px) * var(--s)); }
.cs .web-viewport iframe { position: absolute; left: 0; top: 0; width: var(--vw-px); height: var(--vh-px); border: 0; transform: scale(var(--s)); transform-origin: 0 0; }
.cs .web-status { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: calc(2 * var(--u)); color: #0f0f0f; background: #f6f6f6; }
.cs .web-status.is-done { display: none; }
.cs .web-status a { text-decoration: underline; }
.cs .web-shots { display: grid; gap: calc(2.5 * var(--u)) var(--gap); }
.cs .web-shots .g { padding: 0; }
.cs .web-note { margin-top: calc(1.25 * var(--u)); opacity: 0.55; }
.cs .phones { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(calc(13 * var(--u)), 1fr); gap: var(--gap); padding: 0 var(--pad); overflow-x: auto; scrollbar-width: none; }
.cs .phones::-webkit-scrollbar { display: none; }
.cs .phones figure { display: flex; flex-direction: column; gap: calc(0.75 * var(--u)); }
.cs .phones img { width: 100%; border: 1px solid var(--rule); }
.cs .phones figcaption { display: flex; flex-direction: column; gap: calc(0.3 * var(--u)); }
.cs .phones figcaption b { font-weight: 500; }
.cs .phones figcaption span { opacity: 0.6; }
.cs .phones.is-wide { grid-auto-columns: minmax(calc(16 * var(--u)), 1fr); }
.cs .social figcaption { display: flex; justify-content: space-between; gap: calc(0.5 * var(--u)); }
.cs .strip { display: flex; gap: var(--gap); padding: 0 var(--pad); overflow-x: auto; scrollbar-width: none; }
.cs .strip::-webkit-scrollbar { display: none; }
.cs .strip img { flex: none; width: calc(18 * var(--u)); }
.cs .points { row-gap: calc(3.5 * var(--u)); }
.cs .point { grid-column: span 2; display: flex; flex-direction: column; gap: calc(0.9 * var(--u)); padding-top: calc(1 * var(--u)); border-top: 1px solid var(--rule); }
.cs .point .h4 { max-width: calc(18 * var(--u)); }
.cs .point p.p1 { opacity: 0.75; }
.cs .point ul { display: flex; flex-wrap: wrap; gap: calc(0.35 * var(--u)) calc(0.9 * var(--u)); opacity: 0.55; }
.cs .points.is-3 .point { grid-column: span 2; }
.cs .points.is-3 .point:first-child { grid-column: 3 / span 2; }
.cs .facts { grid-column: 3 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(1.5 * var(--u)) var(--gap); margin-top: calc(3 * var(--u)); }
.cs .facts div { display: flex; flex-direction: column; gap: calc(0.3 * var(--u)); padding-top: calc(0.75 * var(--u)); border-top: 1px solid var(--rule); }
.cs .facts dt { opacity: 0.5; }
.cs .chips { grid-column: 3 / -1; display: flex; flex-wrap: wrap; gap: calc(0.5 * var(--u)); margin-top: calc(2.5 * var(--u)); }
.cs .chips li { padding: calc(0.45 * var(--u)) calc(0.75 * var(--u)); border: 1px solid var(--rule); border-radius: calc(2 * var(--u)); }
.cs .compare { grid-column: 3 / -1; margin-top: calc(3 * var(--u)); }
.cs .compare div { display: grid; grid-template-columns: 1fr 2fr 2fr; gap: var(--gap); padding: calc(0.9 * var(--u)) 0; border-top: 1px solid var(--rule); }
.cs .compare div:first-child { opacity: 0.55; }
.cs .cards { padding: 0 var(--pad); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.cs .card { display: flex; flex-direction: column; gap: calc(0.75 * var(--u)); }
.cs .card img { transition: opacity 0.4s var(--ease); }
.cs .card:hover img { opacity: 0.85; }
.cs .card .h4 { display: flex; justify-content: space-between; }
.cs .soon { margin: 0 var(--pad); padding: calc(7 * var(--u)) calc(2 * var(--u)); border: 1px solid var(--rule); text-align: center; display: flex; flex-direction: column; align-items: center; gap: calc(1 * var(--u)); }
.cs .soon .c2 { opacity: 0.55; }
.cs .callout { grid-column: 3 / -1; margin-top: calc(3 * var(--u)); display: flex; justify-content: space-between; align-items: center; gap: calc(2 * var(--u)); padding: calc(1.5 * var(--u)) 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); transition: opacity 0.3s var(--ease); }
.cs .callout:hover { opacity: 0.6; }
.cs .did { row-gap: calc(3 * var(--u)); }
.cs .did-item { grid-column: span 2; display: flex; flex-direction: column; gap: calc(0.75 * var(--u)); padding-top: calc(1 * var(--u)); border-top: 1px solid var(--rule); }
.cs .did-item p { opacity: 0.75; }
.cs .next { display: block; padding: calc(8 * var(--u)) 0 0; }
.cs .next-row { align-items: end; row-gap: calc(1.5 * var(--u)); }
.cs .next-label { grid-column: 1 / 3; opacity: 0.55; }
.cs .next-name { grid-column: 3 / -1; transition: opacity 0.3s var(--ease); }
.cs .next:hover .next-name { opacity: 0.6; }
.cs .next-cover { margin-top: calc(3 * var(--u)); padding: 0 var(--pad); }
.cs .next-cover img { width: 100%; }
.cs .hire { background: var(--light); color: var(--dark); border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent); padding: calc(9 * var(--u)) 0 0; margin-top: calc(8 * var(--u)); }
.cs .hire-title { grid-column: 1 / 7; }
.cs .hire-acts { grid-column: 7 / -1; display: flex; flex-direction: column; gap: calc(1 * var(--u)); align-self: end; margin-left: calc(var(--gap) / -2); }
.cs .hire-acts p { opacity: 0.6; }
.cs .hire-foot { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: calc(2 * var(--u)); margin-top: calc(8 * var(--u)); padding-top: calc(1 * var(--u)); border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent); opacity: 0.6; }
@media (max-width: 1023px) {
.cs .cs-hero { padding-top: calc(var(--hd) + calc(3.5 * var(--u))); }
.cs .cs-title { font-size: min(calc(7 * var(--u)), calc(100vw / (var(--chars, 10) * 0.56))); }
.cs .cs-hook, .cs .cs-facts { grid-column: 1 / -1; margin-left: 0; margin-top: calc(2.5 * var(--u)); }
.cs .cs-cover { margin-top: calc(3 * var(--u)); }
.cs .ch { padding: calc(5.5 * var(--u)) 0; }
.cs .ch-label, .cs .ch-title, .cs .ch-text, .cs .ch-note, .cs .story .ch-title, .cs .story .ch-text, .cs .facts, .cs .chips, .cs .compare, .cs .callout { grid-column: 1 / -1; margin-left: 0; }
.cs .ch-head { margin-bottom: calc(2.5 * var(--u)); }
.cs .id-logo, .cs .id-spec { grid-column: 1 / -1; }
.cs .id-tile { min-height: calc(14 * var(--u)); padding: calc(2 * var(--u)); }
.cs .id-tile img { max-height: calc(11 * var(--u)); }
.cs .swatches { grid-template-columns: 1fr 1fr; }
.cs .tagline { flex-direction: column; align-items: flex-start; }
.cs .g-2, .cs .g-3 { grid-template-columns: minmax(0, 1fr); }
.cs .g-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs .masonry { columns: 1; }
.cs .deck-pin { height: auto; }
.cs .deck-stage { width: 100%; aspect-ratio: auto; display: flex; flex-direction: column; gap: calc(1 * var(--u)); }
.cs .deck-stage img { position: static; height: auto; }
.cs .deck-bar { display: none; }
.cs .phones { grid-auto-columns: 62%; scroll-snap-type: x mandatory; }
.cs .phones figure { scroll-snap-align: start; }
.cs .facts { grid-template-columns: 1fr 1fr; }
.cs .compare div { grid-template-columns: 1fr 1fr 1fr; }
.cs .cards { grid-template-columns: minmax(0, 1fr); }
.cs .points .point, .cs .points.is-3 .point, .cs .points.is-3 .point:first-child, .cs .did-item { grid-column: 1 / -1; }
.cs .next-label, .cs .next-name { grid-column: 1 / -1; }
.cs .hire-title, .cs .hire-acts { grid-column: 1 / -1; margin-left: 0; }
.cs .hire-acts { margin-top: calc(2.5 * var(--u)); }
.cs .hire-foot { flex-direction: column; margin-top: calc(4 * var(--u)); gap: calc(0.5 * var(--u)); }
}
html:not(.motion) .cs .deck-pin { height: auto; }
html:not(.motion) .cs .deck-stage { width: 100%; aspect-ratio: auto; display: flex; flex-direction: column; gap: calc(1 * var(--u)); }
html:not(.motion) .cs .deck-stage img { position: static; height: auto; }
html:not(.motion) .cs .deck-bar { display: none; }
@media (max-width: 1023px) {
.cs .c2 { font-size: calc(0.875 * var(--u)); line-height: 1.3; }
.cs .ch-label, .cs .next-label { opacity: 0.65; }
.cs .web-tabs, .cs .web-devices { gap: calc(0.25 * var(--u)) calc(1 * var(--u)); flex-wrap: wrap; }
.cs .web-tabs button, .cs .web-devices button { padding: calc(0.8 * var(--u)) 0; }
.cs .hire-acts a { display: inline-block; padding-block: calc(0.5 * var(--u)); }
}
.cs .book { --bw: min(100%, calc((100vh - calc(11 * var(--u))) * var(--ar, 1.78))); padding: 0 var(--pad); }
.cs .book-track { display: flex; gap: var(--gap); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; outline: none; }
.cs .book-track::-webkit-scrollbar { display: none; }
.cs .book-track:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.cs .book-page { flex: 0 0 100%; margin: 0; display: flex; justify-content: center; scroll-snap-align: center; scroll-snap-stop: always; }
.cs .book-page img { display: block; width: var(--bw); height: auto; aspect-ratio: var(--ar); background: color-mix(in srgb, currentColor 6%, transparent); }
.cs .book-bar { width: var(--bw); margin: calc(1 * var(--u)) auto 0; display: flex; align-items: center; justify-content: space-between; gap: calc(1 * var(--u)); }
.cs .book-count { font-variant-numeric: tabular-nums; }
.cs .book-count i { display: inline-block; width: 1px; height: 0.7em; margin: 0 calc(0.4 * var(--u)); background: currentColor; opacity: 0.4; }
.cs .book-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid color-mix(in srgb, currentColor 25%, transparent); background: none; color: inherit; cursor: pointer; transition: background-color 0.3s var(--ease), color 0.3s var(--ease), opacity 0.3s var(--ease); }
.cs .book-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.cs .book-btn:hover:not(:disabled) { background: color-mix(in srgb, currentColor 10%, transparent); border-color: currentColor; }
.cs .book-btn:disabled { opacity: 0.25; cursor: default; }
.cs .book-progress { width: var(--bw); height: 1px; margin: calc(0.9 * var(--u)) auto 0; background: color-mix(in srgb, currentColor 15%, transparent); }
.cs .book-progress i { display: block; height: 100%; background: currentColor; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); transition: transform 0.4s var(--ease); }
@media (max-width: 1023px) {
.cs .book { --bw: 100%; padding: 0; }
.cs .book-track { gap: calc(0.5 * var(--u)); scroll-padding: 0 var(--pad); }
.cs .book-page { flex-basis: calc(100% - 2 * var(--pad)); }
.cs .book-track::before, .cs .book-track::after { content: ""; flex: 0 0 calc(var(--pad) - calc(0.5 * var(--u))); }
.cs .book-bar, .cs .book-progress { width: auto; margin-left: var(--pad); margin-right: var(--pad); }
}
.cs .ch { padding: calc(6.5 * var(--u)) 0; border-top: 1px solid var(--rule); }
.cs .ch-head { margin-bottom: calc(3 * var(--u)); }
.cs .ov { padding: calc(7 * var(--u)) 0 calc(6.5 * var(--u)); }
.cs .ov-grid { row-gap: calc(3 * var(--u)); align-items: start; }
.cs .ov-brief { grid-column: 1 / 6; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gap); row-gap: calc(1.5 * var(--u)); }
.cs .ov-brief .ch-label { grid-column: 1 / 3; }
.cs .ov-lead { grid-column: 3 / -1; max-width: calc(40 * var(--u)); }
.cs .ov-text { grid-column: 3 / -1; display: flex; flex-direction: column; gap: calc(1 * var(--u)); max-width: calc(34 * var(--u)); opacity: 0.8; }
.cs .ov-did { grid-column: 6 / -1; margin-left: calc(var(--gap) / -2); }
.cs .ov-did .ch-label { grid-column: auto; padding-top: calc(0.6 * var(--u)); margin-bottom: calc(1.25 * var(--u)); }
.cs .ov-list { counter-reset: did; }
.cs .ov-list li { counter-increment: did; display: grid; grid-template-columns: calc(2 * var(--u)) minmax(0, 1fr); column-gap: calc(0.5 * var(--u)); row-gap: calc(0.35 * var(--u)); padding: calc(1 * var(--u)) 0 calc(1.1 * var(--u)); border-top: 1px solid var(--rule); }
.cs .ov-list li:last-child { border-bottom: 1px solid var(--rule); }
.cs .ov-list li::before { content: counter(did, decimal-leading-zero); grid-row: 1 / 3; font-size: calc(0.75 * var(--u)); font-weight: 500; opacity: 0.45; font-variant-numeric: tabular-nums; padding-top: calc(0.05 * var(--u)); }
.cs .ov-list h3 { font-weight: 500; }
.cs .ov-list p { opacity: 0.7; font-size: calc(0.875 * var(--u)); }
.cs .toc { position: sticky; top: var(--hd); z-index: 50; background: var(--light); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.cs .toc-in { display: flex; gap: calc(0.25 * var(--u)) calc(1.75 * var(--u)); overflow-x: auto; scrollbar-width: none; padding: 0 var(--pad); }
.cs .toc-in::-webkit-scrollbar { display: none; }
.cs .toc a { position: relative; flex: none; display: flex; align-items: center; min-height: calc(2.75 * var(--u)); opacity: 0.45; transition: opacity 0.3s var(--ease); }
.cs .toc a:hover { opacity: 0.8; }
.cs .toc a.is-on { opacity: 1; }
.cs .toc a.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: currentColor; }
.cs [id] { scroll-margin-top: calc(var(--hd) + calc(3.5 * var(--u))); }
.cs .mosaic .mock-group:has(figure:not(.is-more)) { display: block; }
.cs .mosaic:not(.is-all) .mock-group:not(:has(figure:not(.is-more))) { display: none; }
.cs .mosaic:not(.is-all) figure.is-more { display: none; }
.cs .mosaic .mock-group { margin-bottom: calc(2.5 * var(--u)); }
.cs .masonry figure { margin-bottom: calc(1.25 * var(--u)); }
.cs .more-row { padding: 0 var(--pad); display: flex; justify-content: center; }
.cs .more-btn { display: inline-flex; align-items: center; gap: calc(0.6 * var(--u)); min-height: 44px; padding: 0 calc(1.4 * var(--u)); border: 1px solid color-mix(in srgb, currentColor 30%, transparent); border-radius: 999px; transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease); }
.cs .more-btn:hover { border-color: currentColor; background: color-mix(in srgb, currentColor 8%, transparent); }
.cs .more-btn span { font-size: 1.1em; line-height: 1; transition: transform 0.4s var(--ease); }
.cs .more-btn[aria-expanded="true"] span { transform: rotate(45deg); }
.cs .book-mid { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: calc(1.25 * var(--u)); text-align: center; }
.cs .book-cap { display: none; opacity: 0.7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs .book[data-caps] .book-cap { display: block; }
.cs .book[data-caps] .book-mid { justify-content: space-between; text-align: start; }
.cs .did-ch { display: none; }
@media (max-width: 1023px) {
.cs .ch { padding: calc(4.5 * var(--u)) 0; }
.cs .ch-head { margin-bottom: calc(2 * var(--u)); }
.cs .ov { padding: calc(4 * var(--u)) 0 calc(4 * var(--u)); }
.cs .ov-brief, .cs .ov-did { grid-column: 1 / -1; margin-left: 0; }
.cs .ov-brief { grid-template-columns: minmax(0, 1fr); }
.cs .ov-brief > * { grid-column: 1 / -1 !important; }
.cs .ov-list p { font-size: calc(0.95 * var(--u)); }
.cs .toc-in { gap: 0 calc(1.25 * var(--u)); }
.cs .masonry { columns: 2; column-gap: calc(0.5 * var(--u)); }
.cs .masonry figure { margin-bottom: calc(0.75 * var(--u)); gap: calc(0.35 * var(--u)); }
.cs .book[data-caps] .book-mid { flex-direction: column; align-items: center; gap: calc(0.25 * var(--u)); text-align: center; }
.cs .book-cap { max-width: 100%; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}
.cs .r-employee { --role: currentColor; }
.cs .r-manager { --role: #6B55C4; }
.cs .r-hr { --role: #23824A; }
.cs .r-accounts { --role: #B25F0C; }
.cs .r-system { --role: color-mix(in srgb, currentColor 45%, transparent); }
html[data-theme="dark"] .cs .r-manager { --role: #A592F0; }
html[data-theme="dark"] .cs .r-hr { --role: #5BCB86; }
html[data-theme="dark"] .cs .r-accounts { --role: #E9A04E; }
.cs .role { display: inline-flex; align-items: center; gap: calc(0.4 * var(--u)); font-weight: 500; }
.cs .role::before { content: ""; width: calc(0.5 * var(--u)); height: calc(0.5 * var(--u)); border-radius: 50%; background: var(--role); flex: none; }
.cs .legend { grid-column: 3 / -1; display: flex; flex-wrap: wrap; gap: calc(0.5 * var(--u)) calc(1.5 * var(--u)); margin-top: calc(1.5 * var(--u)); }
.cs .ia { display: grid; grid-template-columns: minmax(0, 1fr) calc(5.5 * var(--u)) minmax(0, 1fr); gap: 0 var(--gap); padding: 0 var(--pad); align-items: start; }
.cs .ia-side { border-top: 1px solid currentColor; }
.cs .ia-side > header { display: flex; justify-content: space-between; align-items: baseline; padding: calc(0.9 * var(--u)) 0 calc(1.4 * var(--u)); }
.cs .ia-side > header .h4 { font-weight: 500; }
.cs .ia-side li { display: grid; grid-template-columns: calc(11 * var(--u)) minmax(0, 1fr); gap: 0 var(--gap); padding: calc(0.8 * var(--u)) 0 calc(0.9 * var(--u)); border-top: 1px solid var(--rule); }
.cs .ia-side li b { font-weight: 500; font-size: calc(1.05 * var(--u)); letter-spacing: -0.02em; }
.cs .ia-side li span { opacity: 0.65; font-size: calc(0.875 * var(--u)); line-height: 1.35; }
.cs .ia-side li em { grid-column: 2; font-style: normal; margin-top: calc(0.35 * var(--u)); }
.cs .ia-switch { position: sticky; top: calc(var(--hd) + calc(5 * var(--u))); display: flex; flex-direction: column; align-items: center; gap: calc(0.6 * var(--u)); padding-top: calc(4.5 * var(--u)); text-align: center; opacity: 0.8; }
.cs .ia-switch i { position: relative; width: calc(3.25 * var(--u)); height: calc(1.75 * var(--u)); border-radius: calc(1 * var(--u)); background: #3FAE65; }
.cs .ia-switch i::after { content: ""; position: absolute; top: calc(0.25 * var(--u)); right: calc(0.25 * var(--u)); width: calc(1.25 * var(--u)); height: calc(1.25 * var(--u)); border-radius: 50%; background: #fff; }
.cs .flows { display: flex; flex-direction: column; gap: calc(4.5 * var(--u)); }
.cs .flow-hd { row-gap: calc(0.6 * var(--u)); margin-bottom: calc(1.75 * var(--u)); }
.cs .flow-hd .flow-n { grid-column: 1 / 3; opacity: 0.5; padding-top: calc(0.55 * var(--u)); font-variant-numeric: tabular-nums; }
.cs .flow-hd .h4 { grid-column: 3 / 7; }
.cs .flow-hd .p1 { grid-column: 3 / 7; opacity: 0.7; max-width: calc(40 * var(--u)); }
.cs .flow-steps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--gap); padding: 0 var(--pad); counter-reset: step; }
.cs .flow-steps > li { counter-increment: step; position: relative; display: flex; flex-direction: column; gap: calc(0.55 * var(--u)); padding: calc(1 * var(--u)) calc(1 * var(--u)) calc(1.15 * var(--u)); border: 1px solid var(--rule); border-top: 3px solid var(--role); background: color-mix(in srgb, currentColor 3%, transparent); }
.cs .flow-steps > li::after { content: ""; position: absolute; top: calc(1.55 * var(--u)); right: calc(var(--gap) * -1); width: var(--gap); height: 1px; background: currentColor; opacity: 0.45; }
.cs .flow-steps > li::before { content: ""; position: absolute; top: calc(calc(1.55 * var(--u)) - calc(0.2 * var(--u))); right: calc(var(--gap) * -1 - 1px); width: calc(0.4 * var(--u)); height: calc(0.4 * var(--u)); border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); opacity: 0.45; z-index: 1; }
.cs .flow-steps > li:last-child::after, .cs .flow-steps > li:last-child::before { display: none; }
.cs .flow-steps .role { font-size: calc(0.75 * var(--u)); }
.cs .flow-steps .role b { font-weight: 500; opacity: 0.5; font-variant-numeric: tabular-nums; margin-right: calc(0.15 * var(--u)); }
.cs .flow-steps h4 { font-size: calc(1.05 * var(--u)); font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; }
.cs .flow-steps p { font-size: calc(0.8125 * var(--u)); line-height: 1.38; opacity: 0.72; }
.cs .flow-steps ul { margin-top: auto; display: flex; flex-direction: column; gap: calc(0.35 * var(--u)); padding-top: calc(0.6 * var(--u)); border-top: 1px dashed var(--rule); }
.cs .flow-steps ul li { font-size: calc(0.75 * var(--u)); line-height: 1.3; padding-left: calc(0.9 * var(--u)); position: relative; }
.cs .flow-steps ul li::before { content: ""; position: absolute; left: 0; top: calc(0.45 * var(--u)); width: calc(0.45 * var(--u)); height: 1px; background: currentColor; opacity: 0.6; }
@media (max-width: 1023px) {
.cs .legend { grid-column: 1 / -1; }
.cs .ia { grid-template-columns: minmax(0, 1fr); row-gap: calc(2.5 * var(--u)); }
.cs .ia-switch { position: static; flex-direction: row; padding-top: 0; justify-content: flex-start; }
.cs .ia-side li { grid-template-columns: minmax(0, 1fr); row-gap: calc(0.2 * var(--u)); }
.cs .ia-side li em { grid-column: 1; }
.cs .flow-hd .flow-n, .cs .flow-hd .h4, .cs .flow-hd .p1 { grid-column: 1 / -1; }
.cs .flow-steps { grid-auto-flow: row; grid-auto-columns: auto; gap: calc(1.25 * var(--u)); }
.cs .flow-steps > li::after { top: auto; right: auto; left: calc(1.5 * var(--u)); bottom: calc(-1.25 * var(--u)); width: 1px; height: calc(1.25 * var(--u)); }
.cs .flow-steps > li::before { top: auto; right: auto; left: calc(calc(1.5 * var(--u)) - calc(0.2 * var(--u))); bottom: calc(calc(-1.25 * var(--u)) - 1px); transform: rotate(135deg); }
.cs .flows { gap: calc(3.5 * var(--u)); }
}
.cs .proto { padding: 0 var(--pad); display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.cs .proto-side { grid-column: 1 / 3; display: flex; flex-direction: column; gap: calc(1.25 * var(--u)); position: sticky; top: calc(var(--hd) + calc(4.5 * var(--u))); }
.cs .proto-tabs { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.cs .proto-tabs button { display: flex; flex-direction: column; align-items: flex-start; gap: calc(0.25 * var(--u)); padding: calc(0.85 * var(--u)) 0 calc(0.95 * var(--u)) calc(1 * var(--u)); border: 0; border-bottom: 1px solid var(--rule); background: none; color: inherit; text-align: left; position: relative; opacity: 0.55; transition: opacity 0.3s var(--ease); }
.cs .proto-tabs button::before { content: ""; position: absolute; left: 0; top: calc(1.05 * var(--u)); width: calc(0.45 * var(--u)); height: calc(0.45 * var(--u)); border-radius: 50%; background: var(--brand); transform: scale(0); transition: transform 0.3s var(--ease); }
.cs .proto-tabs button:hover { opacity: 0.85; }
.cs .proto-tabs button[aria-selected="true"] { opacity: 1; }
.cs .proto-tabs button[aria-selected="true"]::before { transform: none; }
.cs .proto-tabs b { font-weight: 500; font-size: calc(1.05 * var(--u)); letter-spacing: -0.02em; }
.cs .proto-tabs span { font-size: calc(0.75 * var(--u)); opacity: 0.7; line-height: 1.3; }
.cs .proto-acts { display: flex; flex-wrap: wrap; gap: calc(0.6 * var(--u)); }
.cs .proto-btn { display: inline-flex; align-items: center; gap: calc(0.45 * var(--u)); min-height: 44px; padding: 0 calc(1.1 * var(--u)); border: 1px solid color-mix(in srgb, currentColor 30%, transparent); border-radius: 999px; background: none; color: inherit; font-size: calc(0.8125 * var(--u)); font-weight: 500; text-decoration: none; transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease); }
.cs .proto-btn:hover { border-color: currentColor; background: color-mix(in srgb, currentColor 6%, transparent); }
.cs .proto-note { font-size: calc(0.75 * var(--u)); line-height: 1.4; opacity: 0.6; max-width: calc(18 * var(--u)); }
.cs .proto-stage { grid-column: 3 / -1; display: flex; justify-content: center; align-items: flex-start; min-height: calc(30 * var(--u)); }
.cs .proto-device { position: relative; background: #121614; }
.cs .proto-stage.is-phone .proto-device { max-width: 100%; padding: calc(0.42 * var(--u)); border-radius: calc(1.75 * var(--u)); background: #050606;
  box-shadow: 0 0 0 1px #2a2c2e, 0 0 0 3.5px #8d9093, 0 0 0 4.5px #5f6265, 0 0 0 5px #3d4042,
              0 2px 4px rgba(0,0,0,.18), 0 44px 70px -30px rgba(10,20,14,.5), 0 20px 34px -20px rgba(10,20,14,.32); }
.cs .proto-stage.is-phone .proto-device::before, .cs .proto-stage.is-phone .proto-device::after { content: ""; position: absolute; right: -7.5px; width: 2.5px; border-radius: 0 1.5px 1.5px 0;
  background: linear-gradient(90deg, #6d7073, #a9acaf 60%, #7a7d80); }
.cs .proto-stage.is-phone .proto-device::before { top: 17%; height: 11%; }
.cs .proto-stage.is-phone .proto-device::after { top: 31%; height: 6%; }
.cs .proto-status, .cs .proto-gesture { display: none; }
.cs .proto-stage.is-phone .proto-status { display: flex; position: absolute; z-index: 3; top: 0; left: 0; right: 0; height: calc(36px * var(--s, 1)); align-items: center; justify-content: space-between;
  padding: calc(4px * var(--s, 1)) calc(30px * var(--s, 1)) 0; background: var(--bar, #fafbfa); color: #0f1412; font: 600 calc(13px * var(--s, 1)) / 1 system-ui, -apple-system, "Roboto", sans-serif; letter-spacing: 0.01em; }
.cs .proto-status .pc-cam { position: absolute; left: 50%; top: calc(19px * var(--s, 1)); width: calc(11px * var(--s, 1)); height: calc(11px * var(--s, 1)); transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle at 38% 38%, #33465a 0 16%, #050606 32%); }
.cs .proto-status span { display: flex; align-items: center; gap: calc(5px * var(--s, 1)); }
.cs .proto-status svg { height: calc(11px * var(--s, 1)); width: auto; fill: currentColor; }
.cs .proto-stage.is-phone .proto-gesture { display: flex; position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: calc(22px * var(--s, 1)); align-items: center; justify-content: center; background: var(--bar, #fafbfa); }
.cs .proto-gesture i { width: calc(100px * var(--s, 1)); height: calc(4px * var(--s, 1)); border-radius: 99px; background: #0f1412; opacity: 0.8; }
.cs .proto-stage.is-desktop .proto-device { max-width: 100%; padding: calc(1.15 * var(--u)) calc(0.75 * var(--u)) calc(1.05 * var(--u)); border-radius: calc(1.1 * var(--u)) calc(1.1 * var(--u)) calc(0.35 * var(--u)) calc(0.35 * var(--u)); background: #0a0a0b;
  box-shadow: 0 0 0 1px #2c2d2f, 0 0 0 2.5px #6e7176, 0 0 0 3px #46494d, 0 30px 60px -34px rgba(10,20,14,.45); margin-bottom: calc(var(--mb-base, calc(1.4 * var(--u))) + 14px); }
.cs .proto-stage.is-desktop .proto-device::before { content: ""; position: absolute; top: calc(0.42 * var(--u)); left: 50%; width: calc(0.36 * var(--u)); height: calc(0.36 * var(--u)); transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle at 38% 38%, #3a4a5c 0 18%, #111214 36%); box-shadow: 0 0 0 1px #1b1c1e; }
.cs .proto-stage.is-desktop .proto-device::after { content: ""; position: absolute; left: -8.5%; right: -8.5%; top: calc(100% + 3px); height: var(--mb-base, calc(1.4 * var(--u)));
  border-radius: calc(0.15 * var(--u)) calc(0.15 * var(--u)) calc(1.4 * var(--u)) calc(1.4 * var(--u)) / calc(0.15 * var(--u)) calc(0.15 * var(--u)) 100% 100%;
  background: linear-gradient(180deg, #4a4d51, #5d6065) top center / 12% 30% no-repeat,
              linear-gradient(180deg, #a3a6ab 0%, #7d8085 30%, #63666b 70%, #45484c 100%);
  box-shadow: inset 0 1px 0 #b8bbc0, 0 18px 26px -14px rgba(10,20,14,.5); }
.cs .proto-screen { position: relative; overflow: hidden; background: #f3f3f2; }
.cs .proto-stage.is-phone .proto-screen { border-radius: calc(1.35 * var(--u)); }
.cs .proto-stage.is-desktop .proto-screen { border-radius: calc(0.35 * var(--u)); }
.cs .proto-screen iframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; background: #fff; }
.cs .proto-start { position: absolute; inset: 0; z-index: 2; border: 0; padding: 0; background: #e9ece9; cursor: pointer; display: block; }
.cs .proto-start img { width: 100%; height: 100%; object-fit: contain; object-position: top center; display: block; opacity: 0.5; transition: opacity 0.3s var(--ease); }
.cs .proto-start span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: calc(0.45 * var(--u)); min-height: 40px; padding: 0 calc(1.05 * var(--u)); border-radius: 999px; background: #121614; color: #fff; font-size: calc(0.8125 * var(--u)); font-weight: 500; letter-spacing: -0.005em; white-space: nowrap; box-shadow: 0 6px 18px -8px rgba(0,0,0,.45); }
.cs .proto-start span::before { content: ""; width: 0; height: 0; border-left: calc(0.45 * var(--u)) solid #fff; border-top: calc(0.28 * var(--u)) solid transparent; border-bottom: calc(0.28 * var(--u)) solid transparent; }
.cs .proto-start:hover img { opacity: 0.65; }
.cs .proto.is-live .proto-start { display: none; }
@media (max-width: 1023px) {
.cs .proto { grid-template-columns: minmax(0, 1fr); row-gap: calc(1.5 * var(--u)); }
.cs .proto-side, .cs .proto-stage { grid-column: 1 / -1; position: static; }
.cs .proto-tabs { flex-direction: row; overflow-x: auto; scrollbar-width: none; border-top: 0; gap: calc(0.5 * var(--u)); }
.cs .proto-tabs button { flex: none; border: 1px solid var(--rule); border-radius: 999px; padding: calc(0.55 * var(--u)) calc(0.9 * var(--u)); flex-direction: row; }
.cs .proto-tabs button::before, .cs .proto-tabs span { display: none; }
.cs .proto-tabs b { font-size: calc(0.875 * var(--u)); }
.cs .proto-stage { min-height: 0; }
}
.cs .proto-stage.is-stage .proto-device { max-width: 100%; padding: 0; border-radius: 0; background: transparent; box-shadow: none; }
.cs .proto-stage.is-stage .proto-screen { border-radius: 0; background: transparent; }
.cs .proto-stage.is-stage .proto-screen iframe { background: transparent; }
.cs .proto-screen.own-bars .proto-status, .cs .proto-screen.own-bars .proto-gesture { display: none !important; }
.cs .proto-controls { display: flex; flex-direction: column; gap: calc(1 * var(--u)); }
.cs .proto-controls[hidden] { display: none; }
.cs .pc-group > p { font-size: calc(0.6875 * var(--u)); font-weight: 500; letter-spacing: 0.02em; opacity: 0.6; margin-bottom: calc(0.4 * var(--u)); }
.cs .pc-group > div { display: flex; flex-wrap: wrap; gap: calc(0.35 * var(--u)); }
.cs .pc-opt { display: inline-flex; flex-direction: column; align-items: flex-start; gap: calc(0.1 * var(--u)); padding: calc(0.45 * var(--u)) calc(0.75 * var(--u)); border-radius: calc(0.6 * var(--u)); border: 1px solid var(--rule); background: none; color: inherit; font: inherit; font-size: calc(0.8125 * var(--u)); text-align: left; cursor: pointer; transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease); }
.cs .pc-opt span, .cs .pc-flow span { font-size: calc(0.6875 * var(--u)); opacity: 0.6; }
.cs .pc-opt b, .cs .pc-flow b { font-weight: 500; }
.cs .pc-opt:hover { border-color: currentColor; }
.cs .pc-opt.on { background: var(--dark); color: var(--light); border-color: var(--dark); }
.cs .pc-group.is-flows > div { flex-direction: column; flex-wrap: nowrap; gap: 0; border-top: 1px solid var(--rule); max-height: calc(15 * var(--u)); overflow: auto; }
.cs .pc-flow { display: flex; flex-direction: column; align-items: flex-start; gap: calc(0.1 * var(--u)); width: 100%; padding: calc(0.5 * var(--u)) 0; border: 0; border-bottom: 1px solid var(--rule); background: none; color: inherit; font: inherit; font-size: calc(0.8125 * var(--u)); text-align: left; cursor: pointer; }
.cs .pc-flow:hover b { text-decoration: underline; text-underline-offset: 0.2em; }
@media (max-width: 1023px) {
.cs .proto-controls { order: 3; }
}
.cs .proto-side > .proto-tabs { order: 0; }
.cs .proto-side > .proto-acts { order: 1; }
.cs .proto-side > .proto-controls { order: 2; }
.cs .proto-side > .proto-note { order: 3; }
.cs .pc-group.is-flows > div { max-height: calc(11 * var(--u)); }
.cs .proto.is-stage-proto .proto-tabs { flex-direction: row; gap: calc(0.25 * var(--u)); padding: calc(0.25 * var(--u)); border: 1px solid var(--rule); border-radius: 999px; }
.cs .proto.is-stage-proto .proto-tabs button { flex: 1; align-items: center; justify-content: center; padding: calc(0.7 * var(--u)) calc(0.5 * var(--u)); border: 0; border-radius: 999px; opacity: 1; transition: background-color 0.3s var(--ease), color 0.3s var(--ease); }
.cs .proto.is-stage-proto .proto-tabs button::before, .cs .proto.is-stage-proto .proto-tabs span { display: none; }
.cs .proto.is-stage-proto .proto-tabs b { font-size: calc(0.9375 * var(--u)); }
.cs .proto.is-stage-proto .proto-tabs button:hover { background: color-mix(in srgb, currentColor 6%, transparent); }
.cs .proto.is-stage-proto .proto-tabs button[aria-selected="true"] { background: var(--dark); color: var(--light); }
.cs .pc-group[data-k="platform"] > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(0.35 * var(--u)); }
.cs .pc-group[data-k="device"] > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(0.35 * var(--u)); }
.cs .pc-group[data-k="viewas"] > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(0.35 * var(--u)); }
.cs .pc-group .pc-opt { width: 100%; min-height: calc(2.6 * var(--u)); justify-content: center; padding: calc(0.5 * var(--u)) calc(0.7 * var(--u)); border-radius: calc(0.7 * var(--u)); }
.cs .proto-stage.is-stage { min-height: 0; }
.cs .proto-start { display: none !important; }
.cs .proto-side > .proto-flows { order: 2; }
@media (max-width: 1023px) {
.cs .proto.is-stage-proto { display: flex; flex-direction: column; align-items: stretch; gap: calc(1.25 * var(--u)); }
.cs .proto.is-stage-proto .proto-tabs b { font-size: calc(0.875 * var(--u)); white-space: nowrap; }
.cs .proto.is-stage-proto .pc-group[data-k="device"] { order: -1; }
.cs .proto.is-stage-proto .proto-stage { justify-content: center; }
.cs .proto.is-stage-proto .proto-side { display: contents; }
.cs .proto.is-stage-proto .proto-tabs { order: 1; }
.cs .proto.is-stage-proto .proto-acts { order: 2; }
.cs .proto.is-stage-proto .proto-controls { order: 3; }
.cs .proto.is-stage-proto .proto-stage { order: 4; }
.cs .proto.is-stage-proto .proto-flows { order: 5; }
.cs .proto.is-stage-proto .proto-note { order: 6; }
.cs .proto.is-stage-proto .pc-group.is-flows > div { max-height: none; }
}
@media (max-width: 1023px) {
.cs .proto.is-stage-proto { gap: calc(0.75 * var(--u)); }
.cs .proto.is-stage-proto .proto-controls { display: contents; }
.cs .proto.is-stage-proto .proto-tabs { order: 1; }
.cs .proto.is-stage-proto .pc-group[data-k="platform"] { order: 2; }
.cs .proto.is-stage-proto .pc-group[data-k="device"] { order: 3; }
.cs .proto.is-stage-proto .proto-stage { order: 4; margin-top: calc(0.25 * var(--u)); }
.cs .proto.is-stage-proto .pc-group[data-k="viewas"] { order: 5; }
.cs .proto.is-stage-proto .pc-group.is-flows { order: 6; }
.cs .proto.is-stage-proto .proto-acts { order: 7; }
.cs .proto.is-stage-proto .proto-note { order: 8; }
.cs .proto.is-stage-proto .pc-group > p { margin-bottom: calc(0.3 * var(--u)); }
.cs .proto.is-stage-proto .pc-group[data-k="platform"] .pc-opt, .cs .proto.is-stage-proto .pc-group[data-k="device"] .pc-opt { min-height: calc(2.4 * var(--u)); padding: calc(0.35 * var(--u)) calc(0.55 * var(--u)); font-size: calc(0.8125 * var(--u)); line-height: 1.15; }
.cs .proto.is-stage-proto .pc-group[data-k="platform"] .pc-opt span { display: none; }
.cs .proto.is-stage-proto .proto-tabs button { padding: calc(0.55 * var(--u)) calc(0.5 * var(--u)); }
}
.cs .proto-topbar { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: calc(0.6 * var(--u)) calc(1.25 * var(--u)); margin-bottom: calc(0.75 * var(--u)); width: 100%; }
.cs .proto-topbar[hidden] { display: none; }
.cs .proto-stage.is-stage { flex-direction: column; align-items: center; }
.cs .proto-topbar .pc-group > p { text-align: left; }
.cs .proto-topbar .pc-group > div { display: inline-grid !important; grid-auto-flow: column; grid-auto-columns: auto; grid-template-columns: none !important; gap: calc(0.25 * var(--u)); padding: calc(0.25 * var(--u)); border: 1px solid var(--rule); border-radius: 999px; }
.cs .proto-topbar .pc-opt { min-height: 0; width: auto; padding: calc(0.45 * var(--u)) calc(0.9 * var(--u)); border: 0; border-radius: 999px; font-size: calc(0.8125 * var(--u)); line-height: 1.1; white-space: nowrap; flex-direction: row; }
.cs .proto-topbar .pc-opt span { display: none; }
.cs .proto-topbar .pc-opt:hover { background: color-mix(in srgb, currentColor 6%, transparent); }
.cs .proto-topbar .pc-opt.on { background: var(--dark); color: var(--light); }
@media (max-width: 1023px) {
.cs .proto-topbar { justify-content: stretch; gap: calc(0.5 * var(--u)); }
.cs .proto-topbar .pc-group { width: 100%; }
.cs .proto-topbar .pc-group > div { display: grid !important; grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; }
.cs .proto-topbar .pc-opt { justify-content: center; padding: calc(0.45 * var(--u)) calc(0.4 * var(--u)); font-size: calc(0.75 * var(--u)); }
}
.cs .pc-group.is-flows > div { gap: calc(0.35 * var(--u)); border-top: 0; padding-right: calc(0.25 * var(--u)); }
.cs .pc-flow { padding: calc(0.55 * var(--u)) calc(0.75 * var(--u)); border: 1px solid var(--rule); border-radius: calc(0.7 * var(--u)); transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease); }
.cs .pc-flow:hover { border-color: currentColor; }
.cs .pc-flow:hover b { text-decoration: none; }
.cs .pc-flow:active, .cs .pc-flow.on { background: var(--dark); color: var(--light); border-color: var(--dark); }
.cs .pc-group.is-flows > div { max-height: min(calc(24 * var(--u)), calc(100vh - calc(26 * var(--u)))); }

/* full view: click an image to see it whole */
.cs .g figure img, .cs .masonry img, .cs .one img, .cs .id-tile img, .cx-cover img { cursor: zoom-in; }
.lbx { position: fixed; inset: 0; z-index: 9000; display: none; align-items: center; justify-content: center; background: rgba(14, 12, 12, .985); color: #f4f2ee; }
.lbx.is-open { display: flex; animation: lbx-in .22s ease both; }
@keyframes lbx-in { from { opacity: 0; } }
.lbx-fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: calc(100vw - 160px); max-height: calc(100svh - 120px); }
.lbx-img { display: block; max-width: 100%; max-height: calc(100svh - 160px); width: auto; height: auto; object-fit: contain; border-radius: 3px; cursor: zoom-out; user-select: none; }
.lbx-cap { font: 400 13px/1.4 var(--sans); opacity: .7; text-align: center; }
.lbx-btn { position: absolute; width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgba(255,255,255,.1); color: inherit; display: grid; place-items: center; cursor: pointer; transition: background .2s; }
.lbx-btn:hover { background: rgba(255,255,255,.22); }
.lbx-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lbx-x { top: 22px; right: 22px; } .lbx-prev { left: 22px; top: 50%; translate: 0 -50%; } .lbx-next { right: 22px; top: 50%; translate: 0 -50%; }
.lbx-n { position: absolute; top: 34px; left: 28px; font: 500 12px/1 var(--mono, monospace); letter-spacing: .12em; opacity: .6; }
.lbx.is-single .lbx-prev, .lbx.is-single .lbx-next, .lbx.is-single .lbx-n { display: none; }
@media (max-width: 700px) { .lbx-fig { max-width: calc(100vw - 24px); } .lbx-prev, .lbx-next { top: auto; bottom: 22px; translate: none; } .lbx-img { max-height: calc(100svh - 190px); } }
/* a cover drawn on its own brand colour: the band runs full width so no page colour shows beside it */
.cx-cover.is-filled { background: var(--cbg); border-radius: 3px; }
.cx-cover.is-filled img { border-radius: 0; background: transparent; }
/* one-column grids fill the row */
.cs .g-1 { grid-template-columns: minmax(0, 1fr); }
.cs .g-1 img { width: 100%; height: auto; }
.cs .g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cs .g-4 img { width: 100%; height: auto; }
@media (max-width: 900px) { .cs .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ---------- v5 frame ---------- */
.cx-page main.cs > section.cx-hero, .cx-page main.cs > section.cx-ov, .cx-page main.cs > .cx-next, .cx-page main.cs > .ab-hire { padding-left: var(--pad); padding-right: var(--pad); }
.cs .h1, .cs .h2, .cs .h3, .cs .h4 { font-weight: 400; color: var(--grey); }
.cs .h3 { font-size: clamp(34px, 3.4vw, 56px); letter-spacing: -.045em; line-height: 1; }
.cs .h4 { font-size: clamp(22px, 2vw, 32px); letter-spacing: -.03em; }
.cs .p1 { font-size: 16px; line-height: 1.4; color: var(--grey); }
.cs .c1 { font-size: 13px; font-weight: 400; }
.cs .c2 { font-size: 12px; font-weight: 400; color: var(--mid); }

/* hero: back link, a (label), the name huge, the kind of work in script, then the hook beside the facts, then the cover whole */
.cx-hero { padding-top: 140px; display: flex; flex-direction: column; }
.cx-hero .lbl { margin-top: 40px; font-size: 14px; line-height: 20px; letter-spacing: -.05em; color: var(--grey); }
.cx-hero .lbl::before { content: "+ "; }
.cx-title { margin-top: clamp(18px, 2vw, 36px); font-size: clamp(72px, 13vw, 240px); line-height: .84; font-weight: 400; letter-spacing: -.07em; color: var(--grey); }
.cx-title .ln { display: block; overflow: hidden; padding: .16em .04em .22em 0; margin: -.16em 0 -.16em; }
.cx-title .ln:first-child { margin-top: -.08em; }   /* room for cap tops and descenders (y, g, p) inside the rise-in mask */
.cx-title .ln > span { display: inline-block; }
.cx-script { margin-top: 22px; font-size: clamp(18px, 1.6vw, 26px); line-height: 1.3; letter-spacing: -.03em; color: var(--mid); max-width: 900px; }   /* the script (Ballet) stays for numerals and one or two words only */
.cx-intro { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; margin-top: 56px; padding-top: 14px; border-top: 1px solid var(--line); }
.cx-hook { max-width: 720px; }
.cx-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 24px; align-content: start; }
.cx-facts dt { font-size: 13px; letter-spacing: -.02em; color: var(--mid); }
.cx-facts dd { margin-top: 4px; font-size: 16px; line-height: 1.35; letter-spacing: -.02em; color: var(--grey); }
.cx-facts a { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: .2em; }
.cx-cover { margin-top: 64px; }
.cx-cover img { width: auto; max-width: min(100%, 1400px); height: auto; max-height: 64vh; margin: 0 auto; border-radius: 3px; background: var(--card); transform-origin: 50% 0; }   /* whole, centred, capped so it fits the screen */   /* whole, never cropped; capped so it fits the screen */

/* overview: the brief as a big line with the story beside it, then my part as numbered rows */
.cx-ov { padding-top: 140px; display: flex; flex-direction: column; }
.cx-brief { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; padding: 36px 0 120px; }
.cx-lead { font-size: clamp(34px, 3.6vw, 60px); line-height: 1; letter-spacing: -.045em; font-weight: 400; color: var(--grey); }
.cx-text { display: flex; flex-direction: column; gap: 14px; font-size: 17px; line-height: 1.45; letter-spacing: -.02em; color: var(--grey); max-width: 560px; }
.cx-did { list-style: none; counter-reset: none; }
.cx-did li { display: grid; grid-template-columns: 80px minmax(0, 1fr) minmax(0, 1.1fr); gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.cx-did-n { font-family: var(--script); font-size: 34px; line-height: 1; color: var(--mid); }
.cx-did h3 { font-size: clamp(22px, 2vw, 32px); font-weight: 400; letter-spacing: -.035em; line-height: 1.05; color: var(--grey); }
.cx-did p { font-size: 15px; line-height: 1.45; color: var(--mid); max-width: 520px; }

/* chapter bar */
.cs .toc { margin-top: 120px; top: 0; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-color: var(--line); z-index: 60; }
.cs .toc-in { padding: 0; margin: 0 calc(var(--pad) + 140px) 0 calc(var(--pad) + 110px); gap: 4px 26px; }
.cs .toc a { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; min-height: 66px; color: var(--grey); }
@media (max-width: 760px) { .cs .toc-in { margin: 0; padding: 0 var(--pad); } .cs .toc { top: 66px; } .cs .toc a { min-height: 44px; } }
.cs [id] { scroll-margin-top: 90px; }

/* chapters: a hairline, a big script numeral, the label as a (caption), the heading in the grotesque */
.cs .ch { padding: 120px 0; border-top: 0; }
.cs .ch + .ch { border-top: 1px solid var(--line); }
.cs .ch-head { position: relative; margin-bottom: 56px; column-gap: var(--gap); }
.cs .ch-num { grid-column: 1 / 3; grid-row: 2 / span 3; align-self: start; font-family: var(--script); font-size: clamp(64px, 7vw, 120px); line-height: .9; color: var(--grey); }
.cs .ch-label { grid-column: 1 / -1; grid-row: 1; padding: 0 0 8px; margin-bottom: 26px; border-bottom: 1px solid var(--line); opacity: 1; font-size: 16px; line-height: 24px; letter-spacing: -.025em; color: var(--grey); }
.cs .ch-title, .cs .ch-text, .cs .ch-note { grid-column: 3 / 8; }
.cs .ch-head > :not(.ch-label):not(.ch-num) { grid-column-start: 3; }
.cs .ch-title em { color: var(--mid); }
.cs .ch figure img, .cs .g img, .cs .one img, .cs .masonry img { border-radius: 3px; }
.cs figcaption { color: var(--mid); }
.cs .swatch, .cs .swatch b, .cs .swatch span { color: var(--ink, #fff); }   /* each swatch sets its own readable text colour */
.cs .swatch { box-shadow: inset 0 0 0 1px var(--line); }   /* so a pale swatch still shows its edge */
.cs .more-btn, .cs .book-btn { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }

/* next case study: the same row as the home client list, then its cover whole */
.cx-next { display: flex; flex-direction: column; padding-top: 140px; color: inherit; }
.cx-next-row { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-top: 22px; }
.cx-next-name { font-size: clamp(56px, 9vw, 160px); line-height: .9; letter-spacing: -.065em; color: var(--grey); }
.cx-next-arrow { width: clamp(28px, 3vw, 48px); color: var(--grey); transition: transform .5s var(--ease); }
.cx-next-arrow svg { width: 100%; height: auto; display: block; }
.cx-next:hover .cx-next-arrow { transform: translateX(12px); }
.cx-next-cover { display: block; width: fit-content; max-width: 100%; margin: 40px auto 0; overflow: hidden; border-radius: 3px; }
.cx-next-cover img { width: auto; max-width: min(100%, 1100px); height: auto; max-height: 52vh; transition: transform 1.2s var(--ease); }
.cx-next:hover .cx-next-cover img { transform: scale(1.02); }

@media (max-width: 1023px) {
  .cs .ch { padding: 80px 0; }
  .cs .ch-num { grid-column: 1 / -1; grid-row: auto; margin-bottom: 10px; }
  .cs .ch-title, .cs .ch-text, .cs .ch-note, .cs .ch-head > :not(.ch-label):not(.ch-num) { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .cx-hero { padding-top: 100px; }
  .cx-hero .lbl { margin-top: 28px; }
  .cx-script { font-size: 17px; margin-top: 14px; }
  .cx-intro, .cx-brief { grid-template-columns: 1fr; gap: 28px; }
  .cx-brief { padding-bottom: 72px; }
  .cx-ov, .cx-next { padding-top: 90px; }
  .cx-cover { margin-top: 40px; }
  .cx-cover img, .cx-next-cover img { width: 100%; max-height: none; }
  .cx-did li { grid-template-columns: 44px minmax(0, 1fr); gap: 6px 12px; }
  .cx-did p { grid-column: 2; }
  .cx-did-n { font-size: 26px; grid-row: span 2; }
  .cs .toc { margin-top: 72px; }
}