/* Shared controls follow the supplied 1440px desktop frames. */
.subpage-root { font-size:calc(var(--frame-width,100vw) / 1440); }
.button,.about-page .button { height:48rem; padding:12rem 24rem; gap:8rem; font:400 16rem/24rem Belanosima,sans-serif; }
.button i,.about-page .button i { width:20rem; height:20rem; font-size:20rem; }
.book-call { color:var(--ink); }
.availability-pill { width:24rem; height:12rem; border-radius:24rem; background:#06954e; flex:none; }
.book-call[data-availability="full"] .availability-pill { background:#ef3c3c; }
.site-nav { position:absolute; top:0; left:0; width:100%; height:80rem; padding:16rem 16rem 16rem 40rem; display:flex; align-items:center; justify-content:space-between; gap:0; z-index:2; }
.site-nav-left,.site-nav-right { display:flex; align-items:center; gap:24rem; flex:1; min-width:0; }
.site-nav-right { justify-content:flex-end; }
.site-nav a:not(.site-wordmark) { display:inline-flex; align-items:center; min-height:48rem; font:400 16rem/24rem Belanosima,sans-serif; white-space:nowrap; }
.site-wordmark { display:block; width:47.85rem; height:48rem; flex:none; }
.site-wordmark img { display:block; width:100%; height:100%; }
.site-nav.dark { color:#1e1e1e; }
.site-nav.dark .site-wordmark img { filter:brightness(0); }
.site-nav.light { color:white; }
.site-nav a:hover { opacity:.75; }
.site-nav .book-call:hover { opacity:1; }
.hero-socials { height:48rem; }
.bio .button { width:auto; }
.thoughts-nav-wrap { position:relative; height:124rem; background:var(--yellow); }
/* Center actual glyphs instead of centering an anonymous flex text line. */
.about-capability-number span,.about-process-number span { display:grid; place-items:center; transform:none; }
.about-capability-number.product span { transform:translateY(9.63rem); }
.about-capability-number b,.about-process-number b { display:block; font:inherit; line-height:1; transform:translateY(.1em); }
@supports (text-box-trim:trim-both) {
 .about-capability-number b,.about-process-number b { text-box-trim:trim-both; text-box-edge:cap alphabetic; transform:none; }
}
.design-page { color:#1e1e1e; }
.design-page .page { overflow:clip; }
.collection-hero { position:relative; height:522.37rem; }
.collection-scallops { display:flex; position:absolute; inset:0; }
.collection-scallops span { flex:1; border-radius:0 0 56rem 56rem; background:var(--yellow); }
.collection-heading { position:absolute; top:188rem; left:100rem; width:1240rem; text-align:center; }
.collection-heading h1 { font-size:128rem; line-height:128rem; height:128rem; color:#1e1e1e; white-space:nowrap; }
.collection-heading p { width:900rem; margin:auto; font-size:24rem; line-height:29rem; text-transform:uppercase; }
.project-collection,.playground-collection { padding:64rem 100rem; display:flex; flex-direction:column; align-items:center; gap:32rem; }
.project-grid { width:1240rem; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32rem; }
.study-card { min-width:0; display:flex; flex-direction:column; gap:16rem; }
.study-cover { width:100%; height:392rem; background:white; border-radius:32rem; }
.study-copy { display:flex; flex-direction:column; align-items:center; text-align:center; }
.study-copy h2 { font-size:32rem; line-height:38rem; }
.study-copy p { font-size:16rem; line-height:22rem; }
.study-link { height:60rem; padding:16rem 0; gap:10rem; display:inline-flex; align-items:center; border:0; background:none; color:var(--ink); font:400 20rem/28rem Belanosima,sans-serif; }
.study-link i { font-size:20rem; }
.study-link:hover { text-decoration:underline; }
.playground-mosaic { width:1240rem; display:flex; flex-direction:column; gap:32rem; }
.playground-row { display:grid; gap:32rem; height:420rem; }
.playground-row.wide-left { grid-template-columns:520fr 328fr 328fr; }
.playground-row.two-wide { grid-template-columns:1fr 1fr; }
.playground-row.wide-right { grid-template-columns:328fr 328fr 520fr; }
.playground-tile { min-width:0; position:relative; display:block; border:0; padding:0; border-radius:19.6875rem; overflow:hidden; background:black; color:white; text-align:left; }
.playground-tile>img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; transition:transform 350ms; }
.playground-tile:hover>img { transform:scale(1.025); }
.playground-expand { position:absolute; top:24rem; right:24rem; width:40rem; height:40rem; display:grid; place-items:center; font-size:24rem; border-radius:8rem; background:rgb(8 12 45 / 60%); backdrop-filter:blur(8px); }
.playground-caption { position:absolute; inset:auto 0 0; padding:24rem; display:flex; align-items:center; justify-content:space-between; gap:12rem; background:linear-gradient(transparent,rgb(0 0 0 / 65%)); }
.playground-caption b { font:400 40rem/1 Chunko,sans-serif; }
.playground-caption>span { font-size:16rem; line-height:22rem; }
.case-nav-wrap { position:relative; height:140rem; }
.case-intro { display:flex; flex-direction:column; align-items:center; }
.case-breadcrumb { position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:center; gap:4rem; width:100%; min-height:56px; padding:12px 24px; background:var(--paper); font-size:clamp(14px,16rem,18px); line-height:22px; color:#808080; }
.case-breadcrumb a,.case-breadcrumb i { flex:none; }
.case-breadcrumb [aria-current] { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.case-breadcrumb [aria-current="page"] { color:#1a1a1a; font-weight:600; }
.case-title { width:1240rem; display:flex; flex-direction:column; align-items:center; gap:12rem; padding-top:24rem; }
.case-title h1 { font-size:128rem; line-height:128rem; text-align:center; }
.case-meta { display:flex; align-items:center; justify-content:center; gap:64rem; }
.case-meta>div { display:flex; flex-direction:column; align-items:center; gap:4rem; }
.case-meta span { font-size:14rem; line-height:20rem; letter-spacing:1.5rem; color:#808080; }
.case-meta strong { font:400 18rem/24rem Belanosima,sans-serif; }
.case-live { display:flex; align-items:center; gap:10rem; border:0; padding:16rem 32rem; color:var(--ink); background:none; font:400 20rem/28rem Belanosima,sans-serif; }
.case-live:hover { text-decoration:underline; }
.case-hero-cover { width:1240rem; height:512rem; background:var(--ink); border-radius:20rem; margin:64rem 0; }
.case-body { padding:0 100rem; display:flex; flex-direction:column; gap:32rem; }
.case-chapter { display:flex; flex-direction:column; gap:32rem; scroll-margin-top:80px; }
.case-section-nav { position:fixed; bottom:max(24px,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); z-index:40; box-sizing:border-box; width:min(720px,calc(100% - 48px)); height:48px; padding:4px; display:flex; align-items:stretch; border:1px solid rgb(255 255 255 / 18%); border-radius:48px; background:rgb(8 12 45 / 64%); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); box-shadow:0 4px 20px rgb(0 0 0 / 12%),inset 0 1px 0 rgb(255 255 255 / 8%); }
.case-section-nav[hidden] { display:none; }
.case-section-nav a { flex:1; display:flex; align-items:center; justify-content:center; text-align:center; padding:0 10px; border-radius:40px; color:#e5eafa; font:400 14px/20px Belanosima,sans-serif; }
.case-section-nav a:hover { color:white; }
.case-section-nav a[aria-current="location"] { background:rgb(255 255 255 / 92%); color:var(--ink); }
.case-section-nav a:focus-visible { outline:2px solid var(--yellow); outline-offset:-3px; }
.case-draft { font-size:16rem; color:#54565d; border-left:3rem solid var(--yellow); padding-left:12rem; }
.case-prose { display:flex; flex-direction:column; gap:8rem; }
.case-prose h2,.case-challenges>h2 { font-size:32rem; line-height:38rem; }
.case-prose h2:empty { display:none; }
.case-prose p { font-size:20rem; line-height:28rem; }
.case-gallery { display:grid; gap:32rem; }
.case-gallery.columns-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.case-gallery.columns-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.case-gallery img { display:block; width:100%; height:420rem; object-fit:cover; border-radius:19.6875rem; }
.case-gallery.large { grid-template-columns:1fr; }
.case-gallery.large img { height:800rem; }
.case-challenges { display:flex; flex-direction:column; gap:16rem; }
.case-challenges>div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32rem; }
.case-challenges article { min-height:512rem; padding:24rem; background:#d3d8e8; border-radius:32rem; display:flex; flex-direction:column; justify-content:space-between; gap:32rem; }
.case-challenges h3 { font-size:32rem; line-height:38rem; }
.case-challenges p { font-size:20rem; line-height:28rem; }
.case-explore { padding:128rem 100rem 128rem; display:flex; flex-direction:column; align-items:center; gap:64rem; }
.case-explore>h2 { font-size:98rem; line-height:118rem; text-align:center; color:black; }
.design-page footer,.subpage footer { height:550rem; }
.design-page .footer-top,.subpage .footer-top { height:368rem; min-height:0; padding:64rem 100rem; }
.design-page .footer-contact,.subpage .footer-contact { width:400rem; gap:32rem; }
.design-page .footer-contact p,.subpage .footer-contact p { margin-top:-24rem; }
.design-page .footer-contact .button,.subpage .footer-contact .button { margin-top:0; }
.design-page .footer-bottom,.subpage .footer-bottom { padding:0 100rem 32rem; }
@media (max-width:760px) {
 html:has(.design-page),html:has(.about-page),.subpage-root { font-size:1px; }
 .design-page .page { width:100%; }
 .button,.about-page .button { height:48rem; padding:12rem 18rem; font-size:16rem; line-height:24rem; }
 .site-nav { height:auto; top:20px; left:16px; width:calc(100% - 32px); padding:0; display:grid; grid-template-columns:1fr auto; gap:16px 12px; }
 .site-wordmark { grid-column:1; grid-row:1; width:48px; height:48px; }
 .site-nav-left { grid-column:1 / -1; grid-row:2; justify-content:center; gap:20px; }
 .site-nav-right { display:contents; }
 .site-nav-right>a { grid-row:3; }
 .site-nav-right>a:first-child { grid-column:1; justify-self:end; }
 .site-nav-right>a:nth-child(2) { grid-column:2; }
 .site-nav .book-call { grid-column:2; grid-row:1; }
 .site-nav a:not(.site-wordmark) { font-size:16px; line-height:24px; min-height:24px; }
 .site-nav .button { height:48px; padding:12px 18px; gap:10px; border-radius:12px; font:400 16px/24px Belanosima,sans-serif; }
 .site-nav .availability-pill { width:24px; height:12px; border-radius:24px; }
 .collection-hero { height:auto; min-height:460rem; padding:180rem 24rem 64rem; }
 .collection-heading { position:relative; top:auto; left:auto; width:100%; }
 .collection-heading h1 { height:auto; font-size:clamp(36rem,9vw,68rem); line-height:1.1; white-space:normal; margin-bottom:16rem; }
 .collection-heading p { width:100%; font-size:18rem; line-height:24rem; }
 .collection-scallops span { border-radius:0 0 28rem 28rem; }
 .project-collection,.playground-collection { padding:48rem 24rem; }
 .project-grid { width:100%; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24rem 16rem; }
 .study-cover { height:auto; aspect-ratio:1; border-radius:20rem; }
 .study-copy h2 { font-size:24rem; line-height:29rem; overflow-wrap:anywhere; }
 .study-copy p { font-size:14rem; line-height:20rem; }
 .study-link { font-size:16rem; height:48rem; padding:12rem 0; }
 .playground-mosaic { width:100%; gap:20rem; }
 .playground-row { height:auto; grid-template-columns:1fr 1fr !important; gap:20rem; }
 .playground-row.wide-left .playground-tile:first-child,.playground-row.wide-right .playground-tile:last-child { grid-column:1 / -1; }
 .playground-tile { height:300rem; }
 .playground-caption { padding:16rem; }
 .playground-caption b { font-size:32rem; }
 .playground-caption>span { font-size:14rem; }
 .playground-expand { top:16rem; right:16rem; }
 .thoughts-nav-wrap,.case-nav-wrap { height:170rem; }
 .case-title,.case-hero-cover { width:calc(100% - 48rem); }
 .case-title h1 { font-size:clamp(48rem,12vw,88rem); line-height:1.1; }
 .case-meta { gap:32rem; }
 .case-meta span { font-size:12rem; line-height:18rem; }
 .case-meta strong { font-size:16rem; line-height:22rem; }
 .case-live { font-size:16rem; }
 .case-hero-cover { height:280rem; margin:32rem 0; }
 .case-body { padding:0 24rem; gap:24rem; }
 .case-chapter { gap:24rem; }
 .case-section-nav { width:min(400px,calc(100% - 32px)); bottom:max(16px,env(safe-area-inset-bottom)); overflow-x:auto; overflow-y:hidden; scrollbar-width:none; gap:4px; }
 .case-section-nav::-webkit-scrollbar { display:none; }
 .case-section-nav a { flex:0 0 auto; white-space:nowrap; padding:0 16px; font-size:14px; line-height:20px; color:#a9adba; }
 .case-section-nav a[aria-current="location"] { background:white; }
 .case-gallery,.case-challenges>div { grid-template-columns:1fr !important; gap:20rem; }
 .case-gallery img,.case-gallery.large img { height:auto; aspect-ratio:1.3; }
 .case-prose h2,.case-challenges>h2 { font-size:28rem; line-height:34rem; }
 .case-prose p,.case-challenges p { font-size:18rem; line-height:26rem; }
 .case-challenges article { min-height:280rem; }
 .case-explore { padding:64rem 24rem; gap:32rem; }
 .case-explore>h2 { font-size:42rem; line-height:50rem; }
 .design-page footer,.subpage footer { height:auto; }
 .design-page .footer-top,.subpage .footer-top { height:auto; padding:40rem 24rem; display:grid; grid-template-columns:1fr 1fr; gap:32rem 20rem; }
 .design-page .footer-links,.subpage .footer-links { width:auto; }
 .design-page .footer-links a,.subpage .footer-links a { font-size:24rem; line-height:29rem; }
 .design-page .footer-socials,.subpage .footer-socials { padding-left:12rem; }
 .design-page .footer-contact,.subpage .footer-contact { grid-column:1 / -1; width:100%; }
 .design-page .footer-contact h2,.subpage .footer-contact h2 { font-size:32rem; line-height:38rem; }
 .design-page .footer-marquee,.subpage .footer-marquee { height:96rem; }
 .design-page .footer-marquee>div,.subpage .footer-marquee>div { font-size:96rem; line-height:96rem; }
 .design-page .footer-bottom,.subpage .footer-bottom { height:auto; padding:20rem 24rem 24rem; gap:16rem; font-size:13rem; }
}
@media (max-width:420px) {
 .project-grid { grid-template-columns:1fr; }
 .playground-row { grid-template-columns:1fr !important; }
 .playground-caption>span { font-size:16rem; }
}
