.portfolio-hero{position:relative;overflow:hidden;background:#164681;padding:100px 0 110px}
.portfolio-hero:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(165deg,transparent 0 114px,rgba(5,25,69,.13) 115px 176px,transparent 177px 270px);pointer-events:none}
.portfolio-hero>.site-shell{position:relative}
.portfolio-hero h1{max-width:1000px;margin:30px 0;font-family:'Barlow Condensed',Impact,sans-serif;font-size:clamp(80px,11vw,155px);font-weight:800;line-height:.82;letter-spacing:-.025em}
.portfolio-hero h1 em{color:#a9d4ff;font-style:normal}
.portfolio-hero p:last-child{max-width:670px;margin:0;color:#e5effe;font-size:19px;line-height:1.6}
.portfolio-feature{background:#d9eaf9;color:#09264d;padding:94px 0 100px}
.portfolio-feature__grid{display:grid;grid-template-columns:minmax(260px,.75fr) minmax(0,1.25fr);gap:clamp(32px,6vw,90px);align-items:center}
.portfolio-feature__copy h1,.portfolio-playlists h2,.portfolio-end h2{font-family:'Barlow Condensed',Impact,sans-serif;font-size:clamp(55px,6vw,95px);font-weight:800;line-height:.9;letter-spacing:-.025em;margin:22px 0 27px}
.portfolio-playlists h2 em,.portfolio-end h2 em{font-style:normal;color:#3180cf}
.portfolio-feature__copy>p:not(.eyebrow){max-width:390px;font-size:17px;line-height:1.65;margin:0 0 34px}
.ghd-portfolio .button{display:inline-block;padding:15px 23px;border-radius:3px;font-family:'Barlow Condensed',Impact,sans-serif;font-size:18px;font-weight:700;letter-spacing:.06em;line-height:1.1;transition:background .2s,color .2s}
.ghd-portfolio .button--dark{background:#0b2b59;color:#fff}.ghd-portfolio .button--dark:hover{background:#245fa2}
.ghd-portfolio .button--light{background:#fff;color:#0b2b59}.ghd-portfolio .button--light:hover{background:#c4e1ff}
.portfolio-video__frame{aspect-ratio:16/9;overflow:hidden;background:#0b1f40;box-shadow:0 24px 55px rgba(5,25,69,.16)}
.portfolio-video__frame iframe{display:block;width:100%;height:100%;border:0}
.portfolio-video__poster{position:relative;display:block;width:100%;height:100%;padding:0;border:0;background:#0b1f40;cursor:pointer}
.portfolio-video__poster img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.82);transition:transform .3s,filter .3s}
.portfolio-video__poster:hover img,.portfolio-video__poster:focus-visible img{transform:scale(1.045);filter:saturate(1.1)}
.portfolio-video__poster:focus-visible{outline:3px solid #b6dcff;outline-offset:3px}
.portfolio-video__play{position:absolute;top:50%;left:50%;width:64px;height:46px;transform:translate(-50%,-50%);border-radius:12px;background:#cf2343;box-shadow:0 8px 30px rgba(0,0,0,.3)}
.portfolio-video__play:after{content:"";position:absolute;top:50%;left:52%;transform:translate(-50%,-50%);border-top:11px solid transparent;border-bottom:11px solid transparent;border-left:18px solid #fff}
.portfolio-video__meta{padding-top:17px}
.portfolio-video__meta span{display:block;color:#4a8bd0;font-size:11px;font-weight:800;letter-spacing:.16em}
.portfolio-video__meta h3{font-family:'Barlow Condensed',Impact,sans-serif;font-size:clamp(22px,2.1vw,30px);font-weight:700;line-height:1.12;letter-spacing:.01em;margin:8px 0 0}
.portfolio-video--featured .portfolio-video__meta h3{font-size:clamp(25px,2.5vw,35px)}
.portfolio-gallery{background:#0b2b59;color:#fff;padding:95px 0 100px}
.portfolio-gallery__intro{display:flex;justify-content:space-between;align-items:end;gap:35px;margin-bottom:35px}
.portfolio-gallery__intro h2{margin:0;text-align:right}
.portfolio-gallery__intro h2 em{color:#acd8ff}
.portfolio-gallery__count{margin:22px 0 0;color:#a9c8ec;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px;font-weight:700;letter-spacing:.1em}
.portfolio-filters{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 34px;padding-bottom:19px;border-bottom:1px solid rgba(202,225,252,.24)}
.portfolio-filters button{padding:9px 13px;border:1px solid rgba(206,228,255,.38);border-radius:3px;background:transparent;color:#bed4ed;font-family:'Barlow Condensed',Impact,sans-serif;font-size:15px;font-weight:700;letter-spacing:.07em;cursor:pointer}
.portfolio-filters button[aria-pressed="true"],.portfolio-filters button:hover{border-color:#d8ebff;background:#d8ebff;color:#0b2b59}
.portfolio-video-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:42px 20px}
.portfolio-video[hidden]{display:none!important}
.portfolio-gallery .portfolio-video__meta span{color:#9acbf6}
.portfolio-playlists{background:#e1effb;color:#0b2b59;padding:95px 0 100px}
.portfolio-playlists__grid{display:grid;grid-template-columns:minmax(240px,.8fr) minmax(0,1.2fr);gap:8%}
.portfolio-playlists h2{margin:24px 0}.portfolio-playlists>div>div:first-child>p:last-child{max-width:300px;font-size:16px;line-height:1.6}
.portfolio-playlists__links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;border-top:1px solid #9abbdc}
.portfolio-playlists__links a{padding:15px 12px;border-bottom:1px solid #9abbdc;color:#1e5798;font-family:'Barlow Condensed',Impact,sans-serif;font-size:18px;font-weight:700;line-height:1.2;transition:background .2s}
.portfolio-playlists__links a:hover{background:#c7e0f7}
.portfolio-end{background:#1b5ca2;padding:80px 0 95px;text-align:center}
.portfolio-end h2{margin:20px 0 30px}.portfolio-end h2 em{color:#b1d9ff}
@media(max-width:1000px){.portfolio-video-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){.portfolio-feature__grid,.portfolio-playlists__grid{grid-template-columns:1fr}.portfolio-feature__copy>p:not(.eyebrow){max-width:650px}.portfolio-gallery__intro{display:block}.portfolio-gallery__intro h2{text-align:left;margin-top:18px}.portfolio-playlists__grid{gap:30px}}
@media(max-width:580px){.portfolio-feature,.portfolio-gallery,.portfolio-playlists{padding:70px 0}.portfolio-feature__copy h1,.portfolio-playlists h2,.portfolio-end h2{font-size:clamp(54px,12vw,75px)}.portfolio-video-grid{grid-template-columns:1fr;gap:42px}.portfolio-filters{gap:7px}.portfolio-filters button{font-size:13px;padding:8px 10px}.portfolio-playlists__links{grid-template-columns:1fr}.portfolio-end{padding:65px 0 75px}}

/* Keep the gallery close to the featured film and let format and style work together. */
.portfolio-feature{padding:76px 0 83px}
.portfolio-feature .eyebrow{color:#32679f}
.portfolio-gallery{padding:69px 0 100px}
.portfolio-filter-row{display:grid;grid-template-columns:88px minmax(0,1fr);align-items:start;gap:22px;padding:14px 0;border-top:1px solid rgba(202,225,252,.24)}
.portfolio-filter-row + .portfolio-filter-row{border-bottom:1px solid rgba(202,225,252,.24);margin-bottom:35px}
.portfolio-filter-label{padding-top:10px;color:#9acbf6;font:700 10px/1.3 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.14em}
.portfolio-filter-row .portfolio-filters{margin:0;padding:0;border:0}
.portfolio-video__tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.portfolio-video__tags span{font-size:10px;line-height:1.2}
.portfolio-video__tags span+span{display:inline-block;padding:4px 7px;border:1px solid #86add5;border-radius:2px;color:#2867a7}
.portfolio-gallery .portfolio-video__tags span+span{border-color:#679acb;color:#b6dcff}
.portfolio-empty{margin:0 0 35px;padding:28px;border:1px solid rgba(202,225,252,.24);color:#bed4ed;font-size:15px}
.portfolio-empty[hidden]{display:none}
@media(max-width:820px){.portfolio-filter-row{grid-template-columns:1fr;gap:9px}.portfolio-filter-label{padding-top:0}}
@media(max-width:580px){.portfolio-feature,.portfolio-gallery{padding:62px 0 72px}.portfolio-filter-row + .portfolio-filter-row{margin-bottom:28px}.portfolio-filter-row .portfolio-filters{gap:7px}}