.work-examples-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.work-example{min-width:0;border:1px solid #afc1cb;border-radius:4px;background:#f0f3f4;color:#102b3e;overflow:hidden}
.work-example-link{display:flex;flex-direction:column;height:100%;min-width:0}
.example-media{position:relative;aspect-ratio:16/10;margin:0;overflow:hidden;background:#0a263b;flex-shrink:0}
.example-media img,.service-proof .example-media img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
.example-media.contain img,.service-proof .example-media.contain img{object-fit:contain}
.example-media figcaption,.service-proof .example-media figcaption{position:absolute;bottom:0;left:0;margin:0;padding:6px 10px;background:#061e32ed;color:#e1eaf0;font-size:10px;line-height:1.4;max-width:100%}
.example-copy{display:flex;flex:1;flex-direction:column;padding:26px;min-width:0}
.example-copy .meta,.featured-work .example-copy .meta{color:#446072;font-size:11px;line-height:1.6;margin-bottom:15px}
.example-copy h3{font:600 28px/1.15 var(--display);margin-bottom:18px}
.example-copy>p{color:#405865;font-size:14px;line-height:1.75;margin:0 0 22px}
.example-copy .example-note{font-size:11px;line-height:1.7;color:#486272;padding-top:16px;border-top:1px solid #c3d0d7}
.example-copy .text-link,.featured-work .example-copy .text-link{align-self:flex-start;margin-top:auto;color:#183c52;font-size:13px}
.work-example:hover{border-color:#607e90;box-shadow:0 6px 20px #061e321a}
.work-example:hover h3{text-decoration:underline;text-underline-offset:4px}
.work-example:focus-within{outline:3px solid #70b7ba;outline-offset:4px}
.work-example-link:focus-visible{outline-offset:-4px}
.cinematic .work-example .work-example-link:focus-visible{outline:3px solid #386b80;outline-offset:-4px}
.studio-portfolio .work-examples-grid{margin-top:36px;padding-bottom:50px;border-bottom:1px solid #426072}
.cinematic .service-proof .section-head h2{margin:0}
.cinematic .service-proof .section-head .text-link{color:var(--accent-ink)}
.blueprint-examples{padding-top:60px;margin-top:60px;border-top:1px solid #426072}
.blueprint-examples .section-head h3{font:600 34px/1.2 var(--display)}
.blueprint-deliverables{list-style:none;padding:0;margin:24px 0;display:grid;gap:18px}
.blueprint-deliverables li{display:flex;gap:14px;align-items:flex-start;color:#d3e1e8;font-size:14px;line-height:1.7}
.blueprint-deliverables svg{width:22px;height:22px;margin-top:2px;color:#b3d0de}

/* Unframed diagrams inside the Systems service tiles, with no invented client data. */
.service-visual{display:none}
.cinematic[data-practice=systems] .service-row{overflow:hidden;gap:0;padding:0 0 28px}
.cinematic[data-practice=systems] .service-row>:not(.service-visual){margin-inline:28px}
.cinematic[data-practice=systems] .service-visual{display:flex;align-items:center;justify-content:center;flex:none;height:148px;width:100%;margin:0 0 24px;padding:22px 20px;background:#dee9ef;color:#24475c;border-bottom:1px solid #b3c7d1}
.cinematic[data-practice=systems] .service-row:nth-child(2n) .service-visual{background:#14394e;color:#d9e8ef;border-color:#416377}
.cinematic[data-practice=systems] .service-row:nth-child(3) .service-visual{background:#dfe9e6;color:#315b50}
.diagram-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:16px}
.diagram-steps>span{display:flex;position:relative;flex-direction:column;align-items:center;text-align:center;gap:16px;min-width:0}
.diagram-steps svg{width:30px;height:30px;stroke-width:1.25}
.cinematic .service-visual svg{color:inherit}
.diagram-steps small{font:500 10px/1.4 Inter,Arial,sans-serif}
.diagram-route .diagram-steps>span+span:before{content:'';position:absolute;left:-24px;top:15px;width:30px;border-top:1px solid currentColor;opacity:.45}
.diagram-register .diagram-steps{grid-template-columns:1fr;gap:9px;max-width:235px}
.diagram-register .diagram-steps>span{flex-direction:row;text-align:left;gap:14px;padding-bottom:8px;border-bottom:1px solid #678591}
.diagram-register .diagram-steps svg{height:19px;width:19px}
.diagram-register .diagram-steps small{font-size:11px}
.cinematic[data-practice=systems] .service-row .number{margin-bottom:16px}
.cinematic[data-practice=systems] .service-row h3{font-size:27px}

/* One supporting instrument detail. Scroll treatment is desktop-only and optional by motion preference. */
body.cinematic[data-practice=systems] main>.band:has(.journey){--ink:#eef5f8;--muted:#d0dfe7;--line:#5a7686;background-color:#061e32;background-image:linear-gradient(90deg,#061e32f5,#061e32e8 52%,#061e32b8),url('assets/systems-hero.webp');background-size:cover;background-position:center,right center;color:var(--ink)}
body.cinematic[data-practice=systems] main>.band:has(.journey) :is(.eyebrow,.number){color:#b9d5e2}
body.cinematic[data-practice=systems] .journey article{border-color:#628194}
body.cinematic[data-practice=systems] main>.band:has(.journey) h2{max-width:740px}
@media(min-width:1100px) and (hover:hover) and (prefers-reduced-motion:no-preference){body.cinematic[data-practice=systems] main>.band:has(.journey){background-attachment:fixed}}
@media(max-width:1100px){.example-copy{padding:23px}.example-copy h3{font-size:26px}}
@media(max-width:899px){.work-examples-grid{gap:16px}.example-copy{padding:20px}.example-copy h3{font-size:25px}.example-copy>p{font-size:13px}.example-media{aspect-ratio:4/3}}
@media(max-width:700px){.work-examples-grid{grid-template-columns:1fr;gap:28px}.example-media{aspect-ratio:16/10}.example-copy{padding:26px}.example-copy h3{font-size:29px}.example-copy>p{font-size:14px}.blueprint-examples{margin-top:40px;padding-top:40px}.blueprint-examples .section-head h3{font-size:30px}}
@media(max-width:650px){.diagram-route .diagram-steps>span+span:before{width:24px;left:-20px}}
@media(prefers-reduced-motion:reduce){body.cinematic[data-practice=systems] main>.band:has(.journey){background-attachment:scroll}}