/* Project imagery adds context between capabilities and the delivery story. */
.selected-projects { background:#f3f7f7; }
.selected-projects .eyebrow { color:#087b92; }
.work-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:28px; margin-bottom:34px; }
.work-heading h2 { font-size:clamp(42px,5vw,68px); max-width:20ch; }
.work-heading>.line-link { flex-shrink:0; }
.context-project { display:grid; grid-template-columns:1.35fr 1fr; background:#e4eeee; border-radius:12px; overflow:hidden; }
.work-image { display:block; overflow:hidden; background:#dce8e8; }
.work-image img { display:block; width:100%; height:300px; object-fit:cover; transition:transform .65s cubic-bezier(.2,.65,.3,1); }
.workspace-image img { height:100%; min-height:410px; }
.context-copy { padding:clamp(26px,3.5vw,48px); display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:20px; }
.context-copy h3,.home-project h3 { font-size:clamp(32px,3.3vw,46px); line-height:1.02; }
.context-copy>p:not(.eyebrow),.home-project-copy>p:not(.eyebrow) { color:#526267; line-height:1.6; max-width:56ch; }
.image-note { font:10px/1.4 var(--mono,monospace); color:#526267; }
.home-project-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:28px; align-items:start; }
.home-project { overflow:hidden; border-radius:12px; background:#eaf0f0; }
.home-project-copy { padding:30px; display:grid; gap:18px; }
.home-project-copy>.line-link { justify-self:start; }
.workflow-detail { border-top:1px solid #bcced0; margin-top:2px; }
.workflow-detail summary { display:flex; justify-content:space-between; gap:14px; padding:16px 0 0; font-size:14px; font-weight:600; cursor:pointer; list-style:none; }
.workflow-detail summary::-webkit-details-marker { display:none; }
.workflow-detail[open] summary>span { transform:rotate(45deg); }
.workflow-detail .project-map { margin:20px 0 0; padding:18px; }
.workflow-detail .project-route { grid-template-columns:1fr; gap:16px; }
.workflow-detail .project-route::before { display:none; }
.workflow-detail .project-route li { min-width:0; }
.workflow-detail .exception-route { flex-wrap:wrap; }
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
  html:not(.is-paused) .work-image:hover img,html:not(.is-paused) .work-image:focus-visible img { transform:scale(1.055); }
}
html.is-paused .work-image img { transition:none; transform:none; }
@media(prefers-reduced-motion:reduce) { .work-image img { transition:none; transform:none; } }
@media(max-width:760px) {
  .work-heading { display:block; margin-bottom:24px; }
  .work-heading>.line-link { display:inline-block; margin-top:20px; }
  .context-project,.home-project-grid { grid-template-columns:1fr; }
  .work-image img,.workspace-image img { min-height:0; height:auto; aspect-ratio:4/3; }
  .workspace-image img { aspect-ratio:16/10; }
  .context-copy,.home-project-copy { padding:24px; }
  .context-copy h3,.home-project h3 { font-size:36px; }
  .home-project-grid { gap:24px; margin-top:24px; }
}
.stage-diagram { min-width:0; }
.stage-diagram>summary { display:none; }
.tyre-image { background:#dcecf1; }
.tyre-image img { object-fit:contain; object-position:center; }
@media(max-width:760px) {
  .gateway.section { padding:28px 0; }
  .gateway .intro { margin-top:14px; }
  .gateway-panels { gap:14px; margin-top:20px; }
  .gateway article { padding:20px; gap:10px; }
  .gateway article span { margin:0; }
  .gateway article p { margin:0; }
  .gateway article h3 { font-size:32px; }
  .gateway article a { padding:0; }
  .selected-projects.section { padding:30px 0; }
  .context-copy,.home-project-copy { padding:20px; gap:14px; }
  .context-copy>p,.home-project-copy>p { margin:0; }
  .context-copy h3,.home-project h3 { font-size:32px; }
  .home-project-grid { gap:20px; margin-top:20px; }
  .work-image img { aspect-ratio:16/10; }
  .tyre-image img { aspect-ratio:16/9; }
  .workflow-sticky { padding:32px 0; }
  .story-list { gap:16px; }
  .story-scene { gap:10px; padding-bottom:18px; }
  .stage-diagram { grid-row:2; }
  .stage-diagram>summary { display:flex; justify-content:space-between; padding:12px 0; font-size:13px; color:#a4dfe6; cursor:pointer; list-style:none; }
  .stage-diagram>summary::-webkit-details-marker { display:none; }
  .stage-diagram[open]>summary span { transform:rotate(45deg); }
  .stage-diagram .scene-visual { margin-top:8px; }
}