.opto-page{--o-lime:#91e500;--o-black-12:#18191a;--o-black-11:#2f3031;--o-black-10:#515457;--o-black-9:#70757b;--o-black-6:#ced3d9;--o-black-1:#fafbfc;--o-black-0:#fff;--o-panel:#f4f5f7;--o-panel-inner:#fafbfc;--o-flow-rail-width:148px;--o-flow-rail-clearance:calc(24px + var(--o-flow-rail-width) + 16px);--step-pill-bg:var(--o-black-11);background:var(--o-panel);min-height:100svh;color:var(--o-black-12);font-family:var(--font-sans), ui-sans-serif, system-ui, sans-serif;letter-spacing:-.011em;overflow-x:clip}.opto-page ::selection{background:color-mix(in srgb, var(--o-lime) 35%, white);color:var(--o-black-12)}.opto-container{width:min(100% - 64px,1280px);margin-inline:auto}@media (min-width:1280px){.opto-container{width:min(100% - 48px,1280px)}}.opto-page .opto-flow-section{width:100%;padding-top:0;position:relative}.opto-page .opto-flow-rail-slot{display:none}.opto-page .opto-flow-rail{width:var(--o-flow-rail-width);flex-direction:column;display:flex;position:sticky;top:96px}.opto-page .opto-flow-label{font-family:var(--font-dm-mono), ui-monospace, monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--o-black-9);margin:0 0 8px;padding:0;font-size:11px;font-weight:500;display:block}.opto-page .opto-flow-nav{flex-direction:column;gap:6px;display:flex}.opto-page .opto-flow-nav-item{font-family:var(--font-sans), ui-sans-serif, system-ui, sans-serif;color:var(--o-black-9);opacity:.6;cursor:pointer;text-align:left;white-space:nowrap;background:0 0;border:none;padding:0;font-size:12px;line-height:1.45;transition:color .16s cubic-bezier(.2,0,0,1),opacity .16s cubic-bezier(.2,0,0,1)}.opto-page .opto-flow-nav-item:hover{opacity:1}.opto-page .opto-flow-nav-item[data-active="1"]{color:var(--o-black-12);opacity:1;font-weight:700}.opto-page .opto-flow-pages{flex-direction:column;gap:0;width:100%;min-width:0;padding-bottom:0;display:flex}.opto-page .opto-flow-page{scroll-margin-top:96px}.opto-page #designs,.opto-page #impact{padding-top:clamp(40px,5vw,72px)}.opto-page .opto-full-bleed{border-radius:0;width:100vw;max-width:100vw;margin-left:-50vw;margin-right:-50vw;position:relative;left:50%;right:50%}.opto-page .opto-panel-inner{width:min(100% - 64px,1280px);margin-inline:auto;padding-inline:0}@media (min-width:1280px){.opto-page .opto-panel-inner{width:min(100% - 48px,1280px)}}.opto-page .opto-quote-rail{align-items:stretch;gap:24px;display:flex}.opto-page .opto-quote-rail:before{content:"";background:var(--o-lime);border-radius:1px;flex-shrink:0;width:2px}.opto-page .opto-section-banner{-webkit-font-smoothing:antialiased;isolation:isolate;background-color:#2f3031;transform:translateZ(0)}.opto-page .opto-section-banner-title{color:#fff}.opto-page .opto-section-banner-meta{color:#ced3d9}@media (min-width:1280px){.opto-page .opto-flow-rail-slot{width:var(--o-flow-rail-width);z-index:40;pointer-events:none;display:block;position:absolute;top:48px;bottom:0;left:24px}.opto-page .opto-flow-rail{pointer-events:auto}}@media (max-width:1279px){.opto-page .opto-flow-rail-slot{display:none}}.opto-page .opto-product-grid{background-color:#fff;background-image:url(/case-studies/opto/grid-tile.png);background-repeat:repeat;background-size:960px 798px;border-radius:0;width:100vw;max-width:100vw;margin-left:-50vw;margin-right:-50vw;padding:60px 32px 120px;position:relative;left:50%;right:50%;overflow:visible}@media (min-width:1280px){.opto-page .opto-product-grid{padding:60px max(24px,50vw - 592px) 120px}}.opto-page .opto-product-grid .opto-ui-frame,.opto-page .opto-product-grid img{background-color:#0000}.opto-page .opto-product-ui{aspect-ratio:auto;object-fit:contain;object-position:center;filter:drop-shadow(0 16px 32px #18191a1f)drop-shadow(0 4px 12px #18191a14);width:100%;height:auto;display:block}.opto-page .opto-ui-frame{background:0 0;border:0;margin-inline:auto;padding:0;display:block;position:relative;overflow:visible}.opto-page .opto-ui-frame-inner{width:100%;display:block;position:relative;container:opto-ui/inline-size}.opto-page .opto-ui-label{z-index:2;font-family:var(--font-dm-mono), ui-monospace, monospace;letter-spacing:.08em;text-transform:uppercase;color:#9ca3a8;white-space:nowrap;pointer-events:none;margin:0;font-size:max(10px,.971463cqw);font-weight:500;line-height:1;position:absolute}.opto-page .opto-ui-label-top-left{writing-mode:vertical-rl;top:8px;left:-20px;transform:rotate(180deg)}.opto-page .opto-ui-label-bottom-right{bottom:-18px;right:-4px}.opto-page .opto-product-grid-multi{flex-wrap:nowrap;justify-content:center;align-items:center;gap:32px;width:100%;display:flex}.opto-page .opto-product-grid-multi .opto-ui-frame{flex:none;max-width:none;margin-inline:0}.opto-page .opto-design-cases{gap:40px}.opto-page .opto-design-case{flex-direction:column;min-height:0;display:flex}.opto-page .opto-design-case .opto-product-grid{flex-direction:column;flex:auto;justify-content:center;margin-top:0;display:flex}@media (max-width:767px){.opto-page .opto-product-grid{padding:40px 16px 64px}}.opto-page .opto-track-list{--opto-track-dot:8px;--opto-track-gap:12px;padding-left:calc(var(--opto-track-dot) + var(--opto-track-gap));border-left:none;position:relative}.opto-page .opto-track-list:before{content:"";left:calc(var(--opto-track-dot) / 2);pointer-events:none;border-left:1px dashed #9ca3a8;width:0;position:absolute;top:.55em;bottom:.55em;transform:translate(-50%)}.opto-page .opto-track-list>li>.opto-track-dot{left:calc(-1 * (var(--opto-track-dot) + var(--opto-track-gap)));z-index:1;width:var(--opto-track-dot);height:var(--opto-track-dot);box-sizing:border-box;background:#292a2b;border:1px solid #9ca3a8;border-radius:9999px;position:absolute;top:.45em}