:root{font-family:Arial,Helvetica,sans-serif;color:#20282f;background:#fff;font-synthesis:none;--blue:#617fa2;--muted:#69747e}
*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}button{font:inherit}a:focus-visible,button:focus-visible,video:focus-visible{outline:3px solid #a3c2e7;outline-offset:5px}.skip-link{position:absolute;top:-60px;left:16px;padding:12px;background:#fff;z-index:3}.skip-link:focus{top:12px}.site-header{border-bottom:1px solid #f0f2f4}.header-inner{max-width:1180px;margin:auto;min-height:88px;display:flex;align-items:center;justify-content:space-between;padding:0 32px}.wordmark{font-size:25px;font-weight:700;letter-spacing:-1px}.wordmark>span:first-child{font-weight:400;margin-left:5px}.brand-dot{color:var(--blue)}nav{display:flex;gap:34px;font-size:15px}nav a{padding:10px 0}nav a[aria-current]{border-bottom:1px solid var(--blue);color:#456489}nav a:hover{color:var(--blue)}.hero{background:var(--blue);color:#fff;text-align:center;padding:48px 24px 50px}.eyebrow{font-size:11px;font-weight:600;letter-spacing:2.1px;margin:0 0 18px}.hero h1{font-size:clamp(34px,4.5vw,60px);line-height:1.12;letter-spacing:-1.7px;font-weight:600;margin:0 0 20px}.hero>p:last-child{font-size:16px;line-height:1.65;margin:0;color:#f0f4f9}.portfolio{max-width:1180px;margin:auto;padding:54px 32px 78px;scroll-margin-top:24px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:32px}h2{font-size:30px;letter-spacing:-.8px;font-weight:600;margin:0 0 10px}.section-heading p{font-size:15px;line-height:1.6;color:var(--muted);margin:0}.project-count{font-size:12px;color:var(--muted);white-space:nowrap}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:36px 30px}.thumbnail{position:relative;display:block;width:100%;padding:0;aspect-ratio:16/10;background:#f0f3f6;border:1px solid #e6eaee;border-radius:5px;overflow:hidden;cursor:pointer}.thumbnail img{display:block;width:100%;height:100%;object-fit:contain;transition:transform .3s ease}.thumbnail:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,#18283922);pointer-events:none}.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;padding-left:3px;width:54px;height:54px;border-radius:50%;background:#fffefbF2;color:#47688e;box-shadow:0 3px 22px #15263826;z-index:1;font-size:17px;transition:background .2s,transform .2s}.watch{position:absolute;bottom:15px;right:15px;z-index:1;padding:9px 12px;border-radius:3px;background:#ffffffed;color:#34485e;font-size:11px;letter-spacing:.2px}.thumbnail:hover img{transform:scale(1.025)}.thumbnail:hover .play,.thumbnail:focus-visible .play{background:var(--blue);color:#fff;transform:translate(-50%,-50%) scale(1.08)}.project-heading{display:flex;justify-content:space-between;align-items:center;padding:18px 0 0}.project-heading h3{font-size:21px;font-weight:500;letter-spacing:-.35px;margin:0}.project-heading>span{font-size:11px;color:#8e99a3}footer{max-width:1116px;margin:0 auto;padding:30px 0 38px;border-top:1px solid #e5e9ee;display:flex;align-items:center;justify-content:space-between;gap:20px}footer .wordmark{font-size:20px}footer p,footer>a:last-child{font-size:12px;color:var(--muted)}dialog{width:min(1100px,calc(100% - 40px));max-height:92dvh;overflow:auto;border:0;border-radius:8px;padding:0;background:#fff;color:#20282f;box-shadow:0 24px 100px #0005}dialog::backdrop{background:#101b2cce;backdrop-filter:blur(5px)}.player-heading{display:flex;justify-content:space-between;align-items:center;padding:22px 26px;gap:20px}.player-heading .eyebrow{font-size:10px;color:var(--blue);margin-bottom:8px}.player-heading h2{font-size:25px;margin:0}.close{background:#f1f4f7;border:0;border-radius:50%;min-width:42px;height:42px;cursor:pointer;color:#35485f}.close:hover{background:#e0e7ef}video{display:block;width:100%;max-height:72dvh;background:#080b10}#video-error{padding:4px 26px 20px;color:#853f35;font-size:14px}#video-link{text-decoration:underline}body:has(dialog[open]){overflow:hidden}
@media(min-width:1500px){.header-inner,.portfolio{max-width:1280px}footer{max-width:1216px}}
@media(max-width:640px){.header-inner{min-height:74px;padding:0 22px}.wordmark{font-size:21px}nav{gap:17px;font-size:12px}.hero{padding:38px 22px 40px}.hero h1{letter-spacing:-1px}.hero>p:last-child{font-size:14px}.portfolio{padding:36px 22px 48px}.section-heading{margin-bottom:24px}h2{font-size:25px}.section-heading p{font-size:13px}.project-count{display:none}.grid{grid-template-columns:1fr;gap:28px}.project-heading h3{font-size:20px}footer{margin:0 22px;padding:25px 0;flex-wrap:wrap}footer p{order:3;width:100%;margin:0}dialog{width:calc(100% - 24px)}.player-heading{padding:18px}.player-heading h2{font-size:21px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

.tools-portfolio{border-top:1px solid #e5e9ee}.project-heading h3{overflow-wrap:anywhere}@media(max-width:640px){.header-inner{flex-wrap:wrap;padding-top:16px;padding-bottom:12px;gap:10px}nav{gap:15px;flex-wrap:wrap}}

/* Keep the page flush with its containing window at every breakpoint. */
html,body{width:100%;min-width:0;max-width:100%;overflow-x:hidden}.site-header,.hero,main,footer{width:100%}.header-inner,.portfolio{width:100%;min-width:0}.grid{width:100%;min-width:0}.thumbnail img,video{max-width:100%}
@media(max-width:640px){.header-inner,.portfolio{padding-left:20px;padding-right:20px}footer{margin-left:0;margin-right:0;padding-left:20px;padding-right:20px}}
