.portfolio{padding:112px 0 120px;font-family:var(--font-body);scroll-margin-top:48px}
.portfolio .portfolio-head{display:grid;grid-template-columns:1.3fr 1fr;align-items:end;gap:100px;margin-bottom:88px}
.portfolio .section-kicker{font-size:var(--type-label);letter-spacing:var(--type-label-ls);text-transform:uppercase;font-weight:var(--type-label-weight);color:#62626b;margin:0 0 24px}
.portfolio h2{font-family:var(--font-heading);font-size:var(--type-h2);font-weight:var(--type-h2-weight);line-height:var(--type-h2-lh);letter-spacing:var(--type-h2-ls);margin:0}
.portfolio .portfolio-summary{max-width:365px;justify-self:end}
.portfolio .portfolio-intro{font-size:var(--type-body);line-height:var(--type-body-lh);color:#62626b;margin:0 0 24px}
.portfolio .all{font-size:16px;line-height:1.5;color:#09090b;text-decoration:none;display:inline-flex;align-items:center;gap:28px;padding:8px 0;border-bottom:1px solid #aaaab1}
.portfolio .all span{font-size:20px}
.portfolio .stage{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:120px;width:100%;height:auto}
.portfolio .work{position:relative;margin:0;min-width:0}
.portfolio .p1{grid-column:1 / span 8;grid-row:1}
.portfolio .p2{grid-column:9 / span 4;grid-row:1;align-self:start;margin-top:0}
.portfolio .p3{grid-column:1 / span 6;grid-row:2}
.portfolio .p4{grid-column:9 / span 4;grid-row:2;align-self:start;margin-top:-80px}
.portfolio .p5{grid-column:1 / span 4;grid-row:3;align-self:start}
.portfolio .p6{grid-column:7 / span 6;grid-row:3;margin-top:-88px}
.portfolio .project-link{color:inherit;text-decoration:none;display:block;border-radius:16px}
.portfolio .project-card{display:block;color:inherit;text-decoration:none;border-radius:16px;position:relative}
.portfolio .media-link{display:block;width:100%;height:100%;color:inherit;text-decoration:none;border-radius:16px}
.portfolio .media{position:relative;aspect-ratio:4 / 3;width:100%;overflow:hidden;border-radius:16px;background:#f0f0f2;isolation:isolate}
.portfolio .project-image{display:block;width:100%;height:100%;object-fit:cover}
.portfolio .p1 .media{background:transparent;padding:0;display:block;aspect-ratio:16 / 9}
.portfolio .p1 .project-image{height:100%;object-fit:cover;border-radius:0;box-shadow:none}
.portfolio .project-logo{position:absolute;left:32px;top:32px;width:150px;height:auto;filter:drop-shadow(0 1px 4px #0008)}
.portfolio .p2 .media{aspect-ratio:16 / 9}
.portfolio .p2 .project-image{object-fit:contain;background:#fff}
.portfolio .p3 .media{aspect-ratio:4 / 3;background:transparent;padding:0}
.portfolio .site-preview{height:100%;overflow:hidden;border-radius:0;box-shadow:none;background:transparent}
/* Display the top 960 px of the supplied 1902×1080 screenshot.
   The existing 4:3 viewport clips cookie/chat controls below that point. */
.portfolio .p3 .project-image{height:112.5%;min-height:0;object-fit:cover;object-position:center top}
.portfolio .p4 .media{aspect-ratio:4 / 3}
.portfolio .p4 .project-image{object-fit:cover;object-position:72% 50%}
.portfolio .p5 .media,.portfolio .p6 .media{aspect-ratio:10 / 7}
.portfolio .p5 .project-image,.portfolio .p6 .project-image{object-fit:contain}
.portfolio .caption{display:flex;justify-content:space-between;gap:20px;margin-top:24px}
.portfolio .caption-copy{flex:1;min-width:0}
.portfolio .cat{font-size:var(--type-body);line-height:var(--type-body-lh);letter-spacing:0;text-transform:none;color:#62626b;margin:0 0 8px}
.portfolio .title{font-family:var(--font-heading);font-size:var(--type-h3);line-height:var(--type-h3-lh);font-weight:var(--type-h3-weight);letter-spacing:var(--type-h3-ls);margin:0 0 8px}
.portfolio .title-link{color:inherit;text-decoration:none;transition:color 160ms ease}
.portfolio .title-link:hover,.portfolio .work:hover .title-link{color:#ff6400}
.portfolio .project-description{font-size:var(--type-body);line-height:var(--type-body-lh);color:#62626b;margin:0;max-width:440px}
.portfolio .project-ext-action{margin-top:12px}
.portfolio .project-ext-link{display:inline-flex;align-items:center;gap:6px;font-size:var(--type-small);font-weight:500;color:#ff6400;text-decoration:none;transition:color 150ms ease}
.portfolio .project-ext-link:not(.f3-link):hover{color:#d14d00;text-decoration:underline}
.portfolio .arr{font-size:24px;line-height:1.2;margin-top:26px;flex:none;transition:color 160ms ease}
.portfolio .arr-link{color:inherit;text-decoration:none;display:inline-flex;align-self:flex-start}
.portfolio .arr-link:hover .arr,.portfolio .work:hover .arr{color:#ff6400}
.portfolio .project-action{position:absolute;bottom:24px;right:24px;display:flex;gap:20px;align-items:center;background:#09090b;color:#fff;border-radius:8px;padding:14px 18px;font-size:16px;opacity:0;transform:translateY(8px);transition:opacity 420ms ease,transform 420ms cubic-bezier(.22,1,.36,1)}
.portfolio .work:hover .project-action,.portfolio .media-link:focus-visible .project-action,.portfolio .project-link:hover .project-action,.portfolio .project-link:focus-visible .project-action{opacity:1;transform:translateY(0)}
.portfolio a:focus-visible{outline:3px solid #c44700;outline-offset:6px}
.portfolio .all:hover{border-color:#09090b}
@media(max-width:900px){
 .portfolio{padding:72px 0 64px}
 .portfolio .portfolio-head{grid-template-columns:1fr;gap:24px;margin-bottom:48px}
 .portfolio .portfolio-summary{max-width:440px;justify-self:start}
 .portfolio .stage{display:flex;flex-direction:column;gap:64px}
 .portfolio .work{width:100%;margin:0;position:static;transform:none}
 .portfolio .media{height:auto!important}
 .portfolio .project-logo{width:125px;left:24px;top:24px}
 .portfolio .p1 .media{padding:0}
 .portfolio .p3 .media{padding:0}
 .portfolio .caption{margin-top:20px}
}
@media(hover:none){.portfolio .project-action{display:none}}
@media(prefers-reduced-motion:reduce){.portfolio .project-action{transition:none;transform:none}}

#branding,
#film {
  scroll-margin-top: 100px;
}