.portfolio-page{background:var(--flex-paper);color:var(--flex-ink)}
.portfolio-intro{text-align:center;padding:58px 0 36px}
.portfolio-intro p.eyebrow{margin:0 auto 24px}
.portfolio-intro h1{font-size:clamp(70px,8.5vw,125px);line-height:.98;margin:0 0 36px}
.portfolio-intro h1 em{color:var(--flex-link)}
.portfolio-filters{display:flex;justify-content:center;gap:9px;flex-wrap:wrap}
.portfolio-filters button{border:0;border-radius:30px;background:transparent;padding:11px 23px;font-size:14px;line-height:1.2;color:#294452}
.portfolio-filters button:hover{background:var(--flex-light)}
.portfolio-filters .is-selected{background:var(--flex-ink);color:var(--flex-paper)}
.portfolio-sample-note{font-size:12px;line-height:1.5;color:#586c77;margin:22px auto 0}
.portfolio-page .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.portfolio-gallery{columns:3;column-gap:30px;padding:12px 0 112px}
.portfolio-tile{position:relative;display:block;border:0;padding:0;break-inside:avoid;overflow:hidden;border-radius:15px;background:#edf5f7;margin:0 0 30px;cursor:zoom-in;text-decoration:none}
.portfolio-tile[hidden]{display:none!important}
.portfolio-tile>img{display:block;width:100%;height:auto;object-fit:contain;transition:filter .2s}
.tile-expand{position:absolute;bottom:15px;right:15px;display:grid;place-items:center;width:37px;height:37px;border-radius:50%;background:var(--flex-paper);color:var(--flex-navy);font-size:24px;opacity:0;transition:opacity .2s}
.portfolio-tile:hover .tile-expand,.portfolio-tile:focus-visible .tile-expand{opacity:1}
.portfolio-tile:hover>img{filter:brightness(.97)}
.portfolio-video{cursor:pointer}
.tile-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;border-radius:50%;width:62px;height:62px;background:rgb(var(--flex-paper-rgb) / 0.9373);color:var(--flex-navy);padding-left:4px;font-size:20px;box-shadow:0 3px 23px rgb(var(--flex-navy-rgb) / 0.1255)}
.portfolio-websites{position:relative;background:var(--flex-light);padding:58px 0 78px}
.portfolio-wave{position:absolute;left:0;top:-49px;width:100%;height:50px;color:var(--flex-light)}
.portfolio-websites h2{text-align:center;font-size:clamp(48px,6vw,82px);margin:0 0 45px}
.portfolio-websites h2 em{color:var(--flex-link)}
.website-previews{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
.website-preview{margin:0;border-radius:22px;background:transparent}
.website-preview>img{aspect-ratio:1200/850}
.portfolio-contact{display:flex;align-items:center;justify-content:space-between;gap:35px;padding:80px 0 90px}
.portfolio-contact h2{font-size:clamp(49px,6vw,80px)}
.portfolio-contact h2 em{color:var(--flex-link)}
.portfolio-contact .button{background:var(--flex-leaf);border-color:var(--flex-leaf);color:var(--flex-ink);white-space:nowrap}
.portfolio-lightbox{padding:0;margin:auto;width:min(1400px,96vw);max-width:96vw;height:94dvh;max-height:94dvh;border:0;border-radius:20px;background:#101619;color:var(--flex-paper);overflow:hidden}
.portfolio-lightbox[open]{display:grid;grid-template-rows:58px minmax(0,1fr) 60px}
.portfolio-lightbox::backdrop{background:#05090de8}
.lightbox-toolbar{display:flex;align-items:center;justify-content:space-between;padding:0 22px;gap:20px}
.lightbox-count{font-size:13px;color:#d8e6ed}
.lightbox-close{display:flex;align-items:center;gap:14px;background:transparent;color:var(--flex-paper);border:0;font-size:13px;padding:6px}
.lightbox-close span{font-size:30px;line-height:1}
.lightbox-scroll{overflow:auto;overscroll-behavior:contain;padding:15px 25px;min-height:0}
.lightbox-media{display:flex;justify-content:center;align-items:center;min-height:100%}
.lightbox-media img{display:block;width:auto;max-width:100%;height:auto;max-height:calc(94dvh - 150px);object-fit:contain;border-radius:4px}
.lightbox-media.is-tall{align-items:flex-start}
.lightbox-media.is-tall img{width:min(680px,100%);max-height:none}
.lightbox-media video{display:block;width:auto;height:auto;max-width:100%;max-height:calc(94dvh - 150px);object-fit:contain;border-radius:4px}
.lightbox-navigation{display:flex;justify-content:center;align-items:center;gap:20px}
.lightbox-navigation button{display:grid;place-items:center;width:44px;height:40px;background:rgb(var(--flex-paper-rgb) / 0.0471);border:0;border-radius:22px;color:var(--flex-paper);font-size:24px}
.lightbox-navigation button:hover{background:var(--flex-sky);color:var(--flex-ink)}
html.portfolio-modal-open{overflow:hidden}
@media(max-width:1050px){.portfolio-gallery{columns:2;column-gap:25px}.portfolio-tile{margin-bottom:25px}.website-previews{gap:22px}}
@media(max-width:760px){.portfolio-intro{padding:32px 0 28px}.portfolio-intro h1{font-size:74px;margin-bottom:27px}.portfolio-sample-note{font-size:11px;max-width:28ch}.portfolio-gallery{columns:1;padding-bottom:85px}.portfolio-tile{border-radius:14px;margin-bottom:25px}.tile-expand{opacity:1;width:32px;height:32px;font-size:20px}.portfolio-websites{padding:36px 0 48px}.portfolio-websites h2{font-size:51px;margin-bottom:30px}.website-previews{grid-template-columns:1fr;gap:25px}.website-preview{margin:0}.portfolio-contact{padding:55px 0 65px;flex-direction:column;text-align:center;gap:27px}.portfolio-contact h2{font-size:56px}.portfolio-lightbox{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0}.portfolio-lightbox[open]{grid-template-rows:58px minmax(0,1fr) 65px}.lightbox-scroll{padding:10px}.lightbox-media img,.lightbox-media video{max-height:calc(100dvh - 145px)}.lightbox-media.is-tall img{max-height:none}.lightbox-toolbar{padding:0 15px}}
@media(prefers-reduced-motion:reduce){.portfolio-page *{scroll-behavior:auto!important}.portfolio-tile>img,.tile-expand{transition:none}}

/* Carry the website showcase blue beneath the black footer wave. */
.portfolio-page .portfolio-websites{padding-bottom:128px}
.portfolio-page .portfolio-websites+section.site-closing.page-cta{margin-top:0}
@media(max-width:760px){.portfolio-page .portfolio-websites{padding-bottom:98px}}