#image-focus{box-sizing:border-box;width:min(1100px,calc(100vw - 32px));max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);padding:0;border:1px solid #8aa0a8;border-radius:3px;background:#f6f8f7;color:#123341;overflow:auto}
#image-focus::backdrop{background:rgba(8,24,32,.78)}
#image-focus .focus-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;border-bottom:1px solid #c7d3d5;font-size:14px}
#focus-close{padding:10px 16px;min-height:44px;font:inherit;font-weight:600;border:1px solid #8aa0a8;background:#fff;color:#123341;cursor:pointer}
#image-focus .focus-image-space{padding:12px;display:flex;justify-content:center;background:#dde5e3;overflow:hidden}
#focus-image{display:block;object-fit:contain;max-width:100%;max-height:min(58dvh,650px);width:auto;height:auto}
#image-focus .focus-information{padding:16px 20px 22px}
#image-focus h2{margin:0 0 8px;font-size:24px;line-height:1.25}
#image-focus p{margin:0 0 10px;line-height:1.5;font-size:15px}
#image-focus .focus-network{font-size:13px}
#focus-capability{display:inline-block;min-height:44px;align-content:center;font-size:15px;font-weight:600}
body.focus-window-open{overflow:hidden}

/* Scoped to the existing Gates hero; photographs remain flat and uncropped. */
.gates-page .solution-hero>.solution-hero-grid{width:min(1360px,calc(100% - 48px));display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.35fr);gap:32px;align-items:center}
.vertical-hero-visual{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:16px;align-items:center;min-width:0}
.vertical-hero-visual .solution-hero-photo{margin:0;width:100%;height:480px;min-width:0}
.vertical-hero-visual .solution-hero-photo img{object-fit:contain;width:100%;height:100%}
.vertical-film{--frame-height:140px;min-width:0;max-width:100%;color:#fff}
.vertical-film-body{padding:10px 14px;position:relative;filter:drop-shadow(3px 7px 7px rgba(0,0,0,.25))}
.film-contour{position:absolute;inset:0;background:#142b36;clip-path:polygon(2% 0,98% 0,99% 18%,100% 36%,99% 54%,97% 76%,98% 100%,2% 100%,1% 76%,3% 54%,4% 36%,3% 18%);pointer-events:none}
.film-perforations{position:absolute;top:12px;bottom:12px;width:5px;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}
.film-perforations i{display:block;width:5px;height:7px;flex:none;border-radius:1px;background:#b9c8c9}
.film-edge-left{left:5px}.film-edge-right{right:5px}
.film-perforations i:nth-child(n+5):nth-child(-n+14){transform:translateX(3px)}
.film-perforations i:nth-child(n+15):nth-child(-n+22){transform:translateX(-1px)}
.vertical-viewport{height:calc(var(--frame-height)*3);overflow:hidden;position:relative;touch-action:pan-y}
.vertical-track{position:relative;will-change:transform}
.vertical-frame{height:var(--frame-height);width:100%;display:flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:0;background:transparent;cursor:pointer;box-sizing:border-box}
.vertical-frame img{display:block;width:78%;height:74%;object-fit:contain;transform-origin:center;will-change:transform;pointer-events:none}
.vertical-frame:focus-visible{outline:2px solid #acd9f4;outline-offset:-3px}
.film-focus-position{position:absolute;top:var(--frame-height);height:var(--frame-height);left:0;right:0;pointer-events:none;background:transparent}
.vertical-controls{display:flex;gap:5px;margin-top:10px;flex-wrap:wrap}
.vertical-controls button{min-height:44px;min-width:44px;padding:8px 10px;background:rgba(255,255,255,.035);border:1px solid #6e8993;border-radius:3px;color:#e3eceb;font:inherit;font-size:13px;cursor:pointer}
.vertical-controls button:hover{background:rgba(255,255,255,.1)}
.vertical-controls button:focus-visible{outline:2px solid #acd9f4;outline-offset:3px}
.film-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#image-focus .focus-information{overflow-wrap:anywhere}
@media(max-width:1100px){.gates-page .solution-hero>.solution-hero-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px}.vertical-hero-visual{grid-template-columns:minmax(0,1fr) 178px;gap:10px}.vertical-film{--frame-height:128px}.vertical-hero-visual .solution-hero-photo{height:400px}}
@media(max-width:950px){.gates-page .solution-hero>.solution-hero-grid{grid-template-columns:1fr}.vertical-hero-visual{grid-template-columns:minmax(0,1fr) 210px;max-width:800px}.vertical-film{--frame-height:132px}.vertical-hero-visual .solution-hero-photo{height:420px}}
@media(max-width:600px){.gates-page .solution-hero>.solution-hero-grid{width:calc(100% - 36px);gap:24px}.vertical-hero-visual{grid-template-columns:minmax(0,1fr) 132px;gap:8px;align-items:start}.vertical-film{--frame-height:104px}.vertical-film-body{padding:8px 12px}.film-perforations{top:10px;bottom:10px;width:4px}.film-perforations i{width:4px;height:6px}.film-edge-left{left:4px}.film-edge-right{right:4px}.film-perforations i:nth-child(n+5):nth-child(-n+14){transform:translateX(2px)}.vertical-hero-visual .solution-hero-photo{height:328px}.vertical-hero-visual .solution-hero-photo figcaption{font-size:11px;padding:8px}.vertical-controls{display:grid;grid-template-columns:1fr 1fr;gap:4px}.vertical-controls #film-play{grid-column:1/-1}.vertical-controls button{padding:7px 3px;font-size:12px}#image-focus{width:calc(100vw - 20px);max-width:calc(100vw - 20px);max-height:calc(100dvh - 20px)}#image-focus .focus-information{padding:14px 16px}#image-focus h2{font-size:21px}#focus-image{max-height:48dvh}}
@media(max-width:350px){.vertical-hero-visual{grid-template-columns:minmax(0,1fr) 122px}.vertical-film-body{padding-inline:10px}}
@media(prefers-reduced-motion:reduce){.vertical-track,.vertical-frame img{will-change:auto}}

/* Review 004: deliberate straight photographic film on a spacious local light ground. */
.static-film{background:#eeeae1;color:#172124;padding:24px 26px 18px;box-sizing:border-box}
.vertical-hero-visual{grid-template-columns:minmax(0,1fr) 250px}
.static-film .vertical-film-body{padding:12px 18px;background:#17191b;filter:none;box-shadow:7px 9px 11px rgba(0,0,0,.28)}
.static-film .film-contour,.static-film .film-perforations,.static-film .film-focus-position{display:none}
.static-film .vertical-film-body::before,.static-film .vertical-film-body::after{content:"";position:absolute;top:10px;bottom:10px;width:8px;background:repeating-linear-gradient(to bottom,#eeeae1 0 10px,transparent 10px 20px);pointer-events:none}
.static-film .vertical-film-body::before{left:5px}.static-film .vertical-film-body::after{right:5px}
.static-film .vertical-viewport{height:auto;overflow:visible}
.static-film .vertical-track{transform:none;will-change:auto}
.static-film .vertical-frame{height:132px;padding:4px 7px;border-bottom:8px solid #17191b;background:#08090a}
.static-film .vertical-frame:nth-child(2){height:176px;padding-inline:0;box-shadow:0 3px 4px rgba(0,0,0,.4)}
.static-film .vertical-frame:nth-child(3){border-bottom:0}
.static-film .vertical-frame:nth-child(n+4){display:none}
.static-film .vertical-frame img{width:100%;height:100%;transform:none;filter:none;will-change:auto;object-fit:contain}
.static-film .vertical-controls{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:18px}
.static-film #film-play{display:none}
.static-film .vertical-controls button{color:#24373e;background:transparent;border-color:#8b9595;min-height:44px}
.static-film .vertical-controls button:hover{background:#fff8}
.static-film .vertical-controls button:focus-visible{outline-color:#146c94}
@media(max-width:1100px){.vertical-hero-visual{grid-template-columns:minmax(0,1fr) 210px}.static-film{padding:22px 22px 16px}.static-film .vertical-frame{height:112px}.static-film .vertical-frame:nth-child(2){height:152px}}
@media(max-width:950px){.vertical-hero-visual{grid-template-columns:minmax(0,1fr) 250px}.static-film{padding:24px 26px 18px}.static-film .vertical-frame{height:132px}.static-film .vertical-frame:nth-child(2){height:176px}}
@media(max-width:600px){.vertical-hero-visual{grid-template-columns:minmax(0,1fr) 140px}.static-film{padding:18px 13px 14px}.static-film .vertical-film-body{padding:9px 13px;box-shadow:4px 6px 7px rgba(0,0,0,.26)}.static-film .vertical-film-body::before,.static-film .vertical-film-body::after{width:5px;top:8px;bottom:8px;background:repeating-linear-gradient(to bottom,#eeeae1 0 7px,transparent 7px 14px)}.static-film .vertical-film-body::before{left:4px}.static-film .vertical-film-body::after{right:4px}.static-film .vertical-frame{height:82px;padding:3px 5px;border-bottom-width:6px}.static-film .vertical-frame:nth-child(2){height:110px;padding-inline:0}.static-film .vertical-controls{gap:4px;margin-top:14px}.static-film .vertical-controls button{font-size:12px;padding:6px 2px}}
@media(max-width:350px){.vertical-hero-visual{grid-template-columns:minmax(0,1fr) 132px}.static-film{padding-inline:11px}}

/* Review 005: one fixed curve model, moving material marks and upright photographs. */
.vertical-hero-visual{grid-template-columns:minmax(0,1fr) 244px}
.moving-film{--film-step:160px;--film-width:198px;--film-inset:16px;--film-curve:11px;color:#e3eceb;position:relative}
.moving-film .vertical-film-body{height:calc(var(--film-step)*2.6);padding:0;background:#eeeae1;overflow:hidden;filter:none;box-shadow:none;position:relative;touch-action:pan-y}
.moving-film .film-contour,.moving-film .film-perforations,.moving-film .film-focus-position{display:none}
.moving-film-art{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.moving-film .vertical-viewport{height:100%;overflow:hidden;touch-action:pan-y}
.moving-film .vertical-track{position:absolute;inset:0;transform:none!important;will-change:auto}
.moving-film .vertical-frame{position:absolute;left:0;top:0;display:flex;height:calc(var(--film-step)*.74);padding:0;border:0;background:#08090a;will-change:transform;transform-origin:center;box-shadow:0 2px 3px rgba(0,0,0,.2)}
.moving-film .vertical-frame img{width:100%;height:100%;object-fit:contain;transform:none!important;filter:none!important;will-change:auto}
.moving-film .vertical-controls{display:flex;flex-wrap:wrap;gap:4px;margin-top:10px;background:transparent}
.moving-film #film-play{display:block}
.moving-film .vertical-controls button{min-height:44px;min-width:44px;color:#e3eceb;background:transparent;border:1px solid #6e8993;padding:7px 9px;font-size:13px}
.moving-film .vertical-controls button:focus-visible{outline:2px solid #acd9f4;outline-offset:2px}
@media(max-width:1100px){.vertical-hero-visual{grid-template-columns:minmax(0,1fr) 210px}.moving-film{--film-step:145px;--film-width:172px;--film-curve:9px}}
@media(max-width:950px){.vertical-hero-visual{grid-template-columns:minmax(0,1fr) 244px}.moving-film{--film-step:160px;--film-width:198px;--film-curve:11px}}
@media(max-width:600px){.vertical-hero-visual{grid-template-columns:minmax(0,1fr) 140px}.moving-film{--film-step:110px;--film-width:112px;--film-inset:13px;--film-curve:5px}.moving-film .vertical-controls{display:grid;grid-template-columns:1fr 1fr;gap:4px}.moving-film #film-play{grid-column:1/-1}.moving-film .vertical-controls button{font-size:12px;padding:6px 3px}}
@media(prefers-reduced-motion:reduce){.moving-film .vertical-frame{will-change:auto}}

/* Review 006: a single projected textured surface; DOM photographs are fallback only. */
.vertical-hero-visual{grid-template-columns:minmax(0,1fr) 244px}
.surface-film{--surface-step:160px;--surface-width:176px;--surface-curve:11px;color:#e3eceb;position:relative}
.surface-film .vertical-film-body{height:calc(var(--surface-step)*2.75);padding:0;background:#eeeae1;overflow:hidden;filter:none;box-shadow:none;position:relative;touch-action:pan-y}
.film-surface{display:block;width:100%;height:100%;touch-action:pan-y;cursor:pointer}
.surface-film .moving-film-art,.surface-film .film-contour,.surface-film .film-perforations,.surface-film .film-focus-position{display:none}
.surface-film.surface-ready .vertical-viewport{display:none}
.surface-keyboard{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.surface-film.keyboard-visible .surface-keyboard{position:relative;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal;display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:8px}
.surface-keyboard button{min-height:44px;font:inherit;font-size:12px;color:#e3eceb;background:#183b48;border:1px solid #8da7ae;padding:6px}
.surface-film .vertical-controls{display:flex;flex-wrap:wrap;gap:4px;margin-top:10px;background:transparent}
.surface-film #film-play{display:block}
.surface-film .vertical-controls button{min-height:44px;min-width:44px;color:#e3eceb;background:transparent;border:1px solid #6e8993;padding:7px 9px;font-size:13px}
.surface-film button:focus-visible{outline:2px solid #acd9f4;outline-offset:2px}
.surface-film:not(.surface-ready) .film-surface{display:none}
.surface-film:not(.surface-ready) .vertical-viewport{height:100%;overflow:auto;background:#17191b}
.surface-film:not(.surface-ready) .vertical-track{position:static;transform:none!important}
.surface-film:not(.surface-ready) .vertical-frame{position:static;display:flex;height:130px;width:100%;background:#17191b;border-block:4px solid #17191b}
.surface-film:not(.surface-ready) .vertical-frame:nth-child(n+5){display:none}
.surface-film:not(.surface-ready) .vertical-frame img{width:100%;height:100%;object-fit:contain;transform:none!important;filter:none!important}
.surface-film:not(.surface-ready) .surface-keyboard{display:none}
@media(max-width:1100px){.vertical-hero-visual{grid-template-columns:minmax(0,1fr) 210px}.surface-film{--surface-step:145px;--surface-width:152px;--surface-curve:9px}}
@media(max-width:950px){.vertical-hero-visual{grid-template-columns:minmax(0,1fr) 244px}.surface-film{--surface-step:160px;--surface-width:176px;--surface-curve:11px}}
@media(max-width:600px){.vertical-hero-visual{grid-template-columns:minmax(0,1fr) 140px}.surface-film{--surface-step:110px;--surface-width:100px;--surface-curve:5px}.surface-film .vertical-controls{display:grid;grid-template-columns:1fr 1fr}.surface-film #film-play{grid-column:1/-1}.surface-film .vertical-controls button{font-size:12px;padding:6px 3px}}


.surface-film.surface-ready .surface-keyboard{position:relative;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin-top:8px}.surface-film .surface-keyboard button{padding:4px 2px;font-size:11px;min-width:44px;min-height:44px}@media(max-width:600px){.surface-film.surface-ready .surface-keyboard{grid-template-columns:1fr 1fr}}


/* Transparent viewing window; only the geometry-derived canvas silhouette is light. */
.surface-film .vertical-film-body{background:transparent}

/* Compact control row; labelled originals appear only for keyboard/focus interaction. */
.surface-film{display:flex;flex-direction:column}
.surface-film .vertical-film-body{order:0;flex:none}
.surface-film .vertical-controls{order:1;display:flex;gap:4px;align-items:center;margin-top:8px}
.surface-film .vertical-controls #film-play{display:block;min-width:56px}
.surface-film .vertical-controls #film-previous,.surface-film .vertical-controls #film-next{display:none}
.surface-film.manual-navigation .vertical-controls #film-previous,.surface-film.manual-navigation .vertical-controls #film-next{display:block}
.surface-film.surface-ready .surface-keyboard{order:2;display:none;margin-top:8px}
.surface-film.surface-ready.keyboard-visible .surface-keyboard,.surface-film.surface-ready .surface-keyboard:focus-within{position:relative;width:auto;height:auto;clip-path:none;overflow:visible;white-space:normal;display:grid;grid-template-columns:1fr;gap:4px}
.surface-film .surface-keyboard button{min-height:44px;font-size:12px;padding:6px;text-align:left}
@media(max-width:600px){.surface-film .vertical-controls{display:flex;flex-wrap:wrap}.surface-film .vertical-controls #film-play{grid-column:auto}.surface-film.manual-navigation .vertical-controls #film-play{flex-basis:100%}.surface-film .vertical-controls #film-previous,.surface-film .vertical-controls #film-next{flex:1}}
@media(min-width:601px){.surface-film:not(.manual-navigation) .vertical-controls{position:absolute;right:-24px;top:calc(var(--surface-step)*2.75 - 44px);margin-top:0}}