.work-page { padding-block:30px 70px; }
.page-work .work-intro { display:flex; align-items:center; justify-content:space-between; gap:30px; padding-block:44px 38px; }
.page-work .work-intro h1 { font-family:var(--sans); font-size:48px; font-weight:500; letter-spacing:-2px; line-height:1.1; margin:0; }
.work-intro>p { font-size:14px; color:var(--muted); line-height:1.6; max-width:360px; }
.work-group + .work-group { margin-top:58px; }
.work-group-heading { border-top:1px solid var(--rule); padding-block:22px; }
.work-group-heading h2 { font:500 20px var(--sans); letter-spacing:-.4px; }
.work-feature-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
.work-feature { min-width:0; }
.work-feature-link { display:flex; flex-direction:column; height:100%; border-bottom:1px solid var(--rule); }
.work-feature-image { position:relative; overflow:hidden; aspect-ratio:1.6; background:#222c32; }
.work-feature-image>a { display:block; height:100%; }
.work-feature-image img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.work-feature-link:hover .work-feature-image img { transform:scale(1.035); }
.work-feature-copy { display:flex; flex-direction:column; flex:1; padding:23px 0 24px; }
.work-feature h2 { font:500 clamp(21px,2vw,27px)/1.22 var(--sans); letter-spacing:-.7px; max-width:350px; }
.work-feature p { font-size:13px; line-height:1.75; color:var(--muted); margin:14px 0 23px; }
.work-patent { align-self:flex-start; font-size:11px; color:#596644; text-decoration:underline; text-underline-offset:3px; margin:-8px 0 20px; }
.work-feature-action { display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:12px; font-weight:500; margin-top:auto; color:inherit; }
.work-feature-action svg,.work-entry-heading svg { width:19px; height:19px; flex-shrink:0; transition:transform .2s; }
.work-feature-link:hover .work-feature-action svg,.work-entry-button:hover .work-entry-heading svg { transform:translateX(4px); }
.work-entry-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:48px; }
.work-entry { border-bottom:1px solid var(--rule); min-width:0; }
.work-entry-button { display:flex; width:100%; height:100%; gap:23px; padding:22px 0; align-items:center; text-align:left; background:none; }
.work-entry-button>img { width:120px; height:94px; flex-shrink:0; object-fit:cover; background:#e5e5db; }
.work-entry-copy { display:block; flex:1; min-width:0; }
.work-entry-heading { display:flex; justify-content:space-between; gap:16px; align-items:center; }
.work-entry-heading h3 { font:500 19px/1.3 var(--sans); letter-spacing:-.4px; }
.work-entry-heading svg { width:16px; height:16px; color:var(--muted); }
.work-entry-description { display:block; font-size:12px; line-height:1.65; color:var(--muted); margin-top:9px; }
.work-feature a:focus-visible,.work-entry-button:focus-visible { outline:2px solid #737957; outline-offset:6px; }
.page-work .technical-footer { display:flex; justify-content:space-between; padding-block:20px 28px; color:var(--muted); border-top:1px solid var(--rule); font-size:10px; }
.page-work .technical-footer>div { display:flex; gap:22px; }
.page-work .technical-footer a { text-decoration:underline; text-underline-offset:4px; }
@media(max-width:1000px) {
  .work-feature-grid { gap:20px; }
  .work-entry-grid { column-gap:28px; }
  .work-entry-button { gap:16px; }
  .work-entry-button>img { width:88px; height:80px; }
  .work-entry-heading h3 { font-size:17px; }
}
@media(max-width:760px) {
  .page-work .work-intro { align-items:flex-start; flex-direction:column; gap:15px; padding-block:32px; }
  .page-work .work-intro h1 { font-size:40px; }
  .work-feature-grid { grid-template-columns:1fr; gap:26px; }
  .work-feature-link { display:grid; grid-template-columns:1fr 1fr; gap:24px; padding-bottom:26px; }
  .work-feature-image { aspect-ratio:1.3; height:100%; }
  .work-feature-copy { padding:0; }
  .work-feature h2 { font-size:23px; }
  .work-entry-grid { grid-template-columns:1fr; }
  .work-entry-button>img { width:110px; height:88px; }
  .work-entry-heading h3 { font-size:20px; }
  .work-group + .work-group { margin-top:42px; }
}
@media(max-width:480px) {
  .work-feature-link { display:flex; gap:0; padding-bottom:0; }
  .work-feature-image { height:auto; aspect-ratio:1.6; }
  .work-feature-copy { padding:22px 0; }
  .work-feature h2 { font-size:25px; }
  .work-entry-button { gap:15px; }
  .work-entry-button>img { width:80px; height:82px; }
  .work-entry-heading h3 { font-size:17px; }
  .work-entry-description { font-size:12px; }
  .work-page { padding-bottom:44px; }
}
@media(prefers-reduced-motion:reduce) {
  .work-feature-image img,.work-feature-action svg,.work-entry-heading svg { transition:none; }
}

/* The cards use the same scenes and motions as the dedicated project pages. */
.page-work .work-live-preview .af1-demo,.page-work .work-live-preview .bc-demo { position:absolute; inset:0; display:block; width:100%; height:100%; border:0; }
.page-work .work-live-preview :is(.af1-body,.bc-workspace) { display:block; width:100%; height:100%; }
.page-work .work-live-preview :is(.af1-viewport,.bc-viewport) { width:100%; height:100%; min-height:0; max-height:none; }
.page-work .work-live-preview .af1-demo>:not(.af1-body,.af1-transport),
.page-work .work-live-preview .bc-demo>:not(.bc-workspace,.bc-controls),
.page-work .work-live-preview :is(.bc-inspector,.af1-stage-badge,.af1-view-buttons,.af1-labels,.af1-viewport-bottom,.bc-viewbar,.bc-floor-label,.bc-canvas-hint,.bc-station-label) { display:none; }
.page-work .work-live-preview :is(.af1-transport,.bc-controls) { position:absolute; right:9px; bottom:9px; z-index:3; display:flex; padding:0; margin:0; border:0; background:none; }
.page-work .work-live-preview .af1-transport>:not(#af1-play),
.page-work .work-live-preview .bc-controls>:not(#bc-play) { display:none; }
.page-work .work-live-preview :is(#af1-play,#bc-play) { min-width:58px; height:28px; padding:6px 9px; gap:6px; font:10px var(--sans); color:#25362d; background:#f5f6eee8; border:1px solid #ffffff66; border-radius:3px; }
.page-work .work-live-preview canvas { touch-action:pan-y!important; }
.page-work .work-live-preview :is(.af1-loading,.bc-loading) { padding:15px; font-size:10px; text-align:center; }