/* Shared composition: page flow, one rail geometry, and fixed grid tracks. */
:root{--display-font:Arial,Helvetica,sans-serif;--content-left:260px;--content-right:48px;--header-height:150px}
header{height:var(--header-height);flex-shrink:0}
.wordmark,.section-heading h1{font-family:var(--display-font);font-weight:900;letter-spacing:-.045em}
.category-control span{text-transform:uppercase}
.category-control small{position:static;align-self:center;line-height:1}
.browsing{display:flex;flex-direction:column;min-height:100svh}
.browsing #content{flex:1;margin:8px var(--content-right) 40px var(--content-left);min-height:max(0px,calc(var(--rail-bottom) - var(--header-height) - 8px));max-width:none}
.browsing footer{position:relative;flex-shrink:0;z-index:1;width:auto;margin:0 var(--content-right) 0 var(--content-left);padding:22px 0;flex-wrap:wrap;gap:12px 24px}
.browsing .empty{min-height:0;padding:40px 0 60px}
.browsing .dial{width:var(--rail-width);height:var(--rail-height)}
.browsing .category-control{width:var(--row-width);height:var(--row-height);border-radius:999px;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:14px 8px;gap:14px;font:10px Arial,Helvetica,sans-serif;letter-spacing:.15px;text-align:center}
.browsing .category-control svg{width:32px;height:32px;flex:0 0 32px}
.browsing .category-control:hover svg{transform:none}
.browsing .category-control span{display:block;max-width:100%;white-space:nowrap;text-align:center}
.browsing .dial{border-radius:999px}
.browsing .category-control[data-category=product]{border-radius:var(--endcap-radius) var(--endcap-radius) 12px 12px}
.browsing .category-control[data-category=transportation]{flex-direction:column-reverse;border-radius:12px 12px var(--endcap-radius) var(--endcap-radius)}
.brand-group{display:flex;flex-direction:column;gap:13px}
.brand-meta{display:flex;align-items:baseline;gap:32px;white-space:nowrap}
.brand-meta>span{font:9px Arial,Helvetica,sans-serif;letter-spacing:1px}
.all-work-link{font:700 12px Arial,Helvetica,sans-serif;letter-spacing:.7px;pointer-events:auto;border-bottom:1px solid transparent}
.all-work-link[aria-current]{border-color:currentColor}
.browsing .category-control[data-category=spatial]{border-radius:18px}
.header-right{gap:28px}
.comparison-controls{position:absolute;right:42px;top:91px;display:flex;gap:12px;align-items:center;pointer-events:auto}
.shape-controls,.sidebar-shape-controls{position:static;display:flex;align-items:center;gap:3px;border:1px solid #a5a28e;border-radius:24px;padding:4px;right:auto;top:auto}
.shape-label{font:8px Arial,Helvetica,sans-serif;letter-spacing:.7px;margin:0 7px;color:var(--muted);white-space:nowrap}
.shape-controls button,.sidebar-shape-controls button{border:0;background:transparent;border-radius:18px;padding:8px 11px;font:10px Arial,Helvetica,sans-serif;letter-spacing:0;white-space:nowrap;min-height:36px}
.shape-controls button[aria-pressed=true],.sidebar-shape-controls button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.sidebar-shape-controls button:hover{background:#c9c8b4}
.sidebar-shape-controls button[aria-pressed=true]:hover{background:#414739}
body:not(.browsing) .comparison-controls{visibility:hidden}
body:not(.browsing) header{height:126px}
.section-heading{max-width:none;width:100%;align-items:center;margin-bottom:20px;padding:8px 0 0}
.section-heading h1{font-size:42px;line-height:1;letter-spacing:-.045em;margin:12px 0 0;font-weight:900}
.section-heading .index{font-size:10px;line-height:1.55}
.project-list{max-width:none;width:100%;gap:16px}
.project-card .image,.project-card:first-child .image{aspect-ratio:1;align-items:flex-end;justify-content:flex-start}
.thumbnail-mask{height:100%;width:100%;border-radius:14px}
body[data-thumbnail-shape=horizontal-pill] .project-card .image{aspect-ratio:2.0833333}
body[data-thumbnail-shape=circle] .thumbnail-mask{height:100%;width:100%;border-radius:50%}
body[data-thumbnail-shape=horizontal-pill] .thumbnail-mask{height:100%;width:100%;border-radius:999px}
body[data-thumbnail-shape=vertical-pill] .project-card .image{aspect-ratio:2/3}
body[data-thumbnail-shape=vertical-pill] .thumbnail-mask{height:100%;width:100%;border-radius:999px}
.card-caption{min-height:46px;padding:10px 0 0;gap:0;align-items:flex-start;justify-content:center}
.card-caption h2{font-size:13px;line-height:1.35;text-align:center;margin:0;flex:initial;width:100%;overflow-wrap:anywhere}
.card-caption .card-arrow{padding-top:0}
#project-drawer,.drawer-scrim{top:150px}
@media(max-width:1100px) and (min-width:801px){
 .comparison-controls{right:24px;gap:9px}.shape-controls button,.sidebar-shape-controls button{padding:8px 9px}.shape-label{display:block;margin:0 6px;font-size:7px}
 .project-list{gap:18px 15px}
}
@media(max-width:800px){
 :root{--content-left:96px;--content-right:22px;--header-height:210px}
 .comparison-controls{left:96px;right:22px;top:100px;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:8px}
 .shape-controls,.sidebar-shape-controls{position:static;padding:3px;max-width:100%;gap:3px}
 .shape-controls .shape-label{display:none}
 .sidebar-shape-controls .shape-label{display:block;font-size:7px;margin:0 5px}
 .shape-controls button,.sidebar-shape-controls button{font-size:9px;padding:7px;min-height:38px}
 .project-list{gap:17px 14px}
 .section-heading{margin-bottom:19px}
 .section-heading h1{font-size:32px;letter-spacing:-.045em;margin-top:10px}
 body[data-category=transportation] .section-heading h1{font-size:clamp(20px,7vw,32px);letter-spacing:-.045em}
 .section-heading .index{margin-top:13px;font-size:9px}
 .card-caption{min-height:44px}.card-caption h2{font-size:12px}
 #project-drawer,.drawer-scrim{top:208px}
 body:not(.browsing) header{height:110px}
 body:not(.browsing) .landing-copy{top:135px}
}
@media(max-width:600px){.project-list{gap:18px}.card-caption{min-height:43px}}
@media(max-width:359px){
 :root{--header-height:246px}.shape-controls{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:2px}.shape-controls button{padding:7px 8px}
 .sidebar-shape-controls{width:100%}.sidebar-shape-controls .shape-label{display:none}.sidebar-shape-controls button{flex:1;font-size:8px;padding:7px 5px}
 .section-heading h1{font-size:28px}#project-drawer,.drawer-scrim{top:242px}
}
@media(prefers-reduced-motion:reduce){.thumbnail-mask{transition:none!important}}
@media(max-width:800px),(max-height:599px){
 .browsing .category-control{flex-direction:column;justify-content:center;padding:6px 3px;gap:10px;font-size:7px;letter-spacing:0}
 .browsing .category-control span{width:100%;text-align:center;text-transform:none}
 .browsing .category-control svg{width:24px;height:24px;flex:0 0 24px}
 .browsing .category-control[data-category=transportation]{flex-direction:column-reverse}
 .browsing .category-control[data-category=transportation]{font-size:7px}
 .browsing footer{gap:12px;font-size:8px;letter-spacing:.35px}
}

@media(max-width:800px){.brand-meta{gap:20px}.brand-meta>span{font-size:7px}.all-work-link{font-size:11px}.brand-group{gap:12px}}