/* Open feature rhythm shared by Spaces, Creative and Management. */
.portfolio-sections{padding-block:65px 55px;background:#000}
.portfolio-section-heading{max-width:640px;margin-bottom:14px}
.portfolio-section-heading h2,.portfolio-workflow>h2{font-size:clamp(29px,3vw,42px);line-height:1.15}
.portfolio-section{padding-block:64px;background:#000;border:0}
.portfolio-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(38px,7vw,110px);align-items:center;max-width:1120px;margin-inline:auto}
.portfolio-row>*{min-width:0}
.portfolio-section:nth-of-type(even) .portfolio-copy{grid-column:2;grid-row:1}
.portfolio-section:nth-of-type(even) .portfolio-visual{grid-column:1;grid-row:1}
.portfolio-copy{max-width:450px}
.portfolio-copy h3{font-size:clamp(29px,3vw,42px);line-height:1.13;text-wrap:balance;overflow-wrap:anywhere;hyphens:auto}
.portfolio-copy p{max-width:43ch;line-height:1.65}
.portfolio-copy .portfolio-summary{font-size:17px;color:#e7e7e7;margin-top:22px}
.portfolio-copy .portfolio-detail{font-size:14px;color:var(--muted);margin-top:16px}
.portfolio-action{display:inline-flex;align-items:center;justify-content:center;min-height:46px;margin-top:26px;padding:10px 19px;border:1px solid #565656;border-radius:99px;font-size:13px;line-height:1.4;transition:background-color 150ms ease,color 150ms ease,border-color 150ms ease}
.portfolio-action:focus-visible{background:#fff;color:#000;border-color:#fff}@media(hover:hover) and (pointer:fine){.portfolio-action:hover{background:#fff;color:#000;border-color:#fff}}
.portfolio-visual{width:100%;background:#000;border:0;box-shadow:none}
.portfolio-image{position:relative;width:100%;margin:0;overflow:hidden;border:0;border-radius:14px}
.portfolio-image>img{width:100%;height:330px;object-fit:cover}
.portfolio-image>figcaption{position:absolute;inset:auto 0 0;padding:44px 20px 18px;background:linear-gradient(transparent,#000d);color:#ddd;font-size:11px}
.portfolio-image-link{display:block;border-radius:14px}
@media(hover:hover) and (pointer:fine){.portfolio-image-link:hover img{filter:brightness(1.13)}}
.portfolio-image-link:focus-visible,.portfolio-site-preview:focus-visible,.portfolio-plan-preview:focus-visible{outline:2px solid #fff;outline-offset:8px}
.portfolio-example{display:block;font-size:11px;color:#999;letter-spacing:.04em;margin-bottom:25px}
.portfolio-identity{max-width:420px;width:100%;margin-inline:auto}
.portfolio-font-switch{border:0;padding:0;margin:0;display:flex;gap:20px;flex-wrap:wrap;font-size:13px}
.portfolio-font-switch legend{font-size:11px;color:#999;margin-bottom:9px;padding:0}
.portfolio-font-switch label{display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer}
.portfolio-font-switch input{accent-color:#fff;width:17px;height:17px;margin:0;cursor:pointer}
.portfolio-font-switch input:focus-visible{outline:2px solid #fff;outline-offset:4px}
.portfolio-type-sample{font-size:clamp(95px,12vw,170px);font-weight:400;line-height:1.1;letter-spacing:-.06em;margin:12px 0 5px}
.portfolio-identity:has(#portfolio-type-italic:checked) .portfolio-type-sample{font-style:italic}
.portfolio-type-name{font-size:24px;color:#f0f2f3;letter-spacing:-.02em}
.portfolio-type-description{font-size:12px;color:#aaa;margin-top:10px}
.portfolio-brand-details{margin-top:25px;border:0}
.portfolio-brand-details summary,.portfolio-imagery summary{list-style:none;cursor:pointer}
.portfolio-brand-details summary::-webkit-details-marker,.portfolio-imagery summary::-webkit-details-marker{display:none}
.portfolio-brand-details summary::marker,.portfolio-imagery summary::marker{content:''}
.portfolio-brand-details summary{padding-block:12px;min-height:44px;font-size:12px;text-decoration:underline;text-underline-offset:5px}
.portfolio-brand-details summary:focus-visible,.portfolio-imagery summary:focus-visible{outline:2px solid #fff;outline-offset:6px}
.portfolio-brand-facts{padding-block:14px 0}
.portfolio-brand-facts img{width:100px;height:63px;object-fit:contain;margin-bottom:16px}
.portfolio-brand-facts p{font-size:13px;line-height:1.6;max-width:40ch}
.portfolio-colors{display:flex;gap:8px;margin-block:22px 14px}
.portfolio-colors i{display:block;width:48px;height:48px;border-radius:50%;background:#fff}
.portfolio-colors i:first-child{background:#000;outline:1px solid #444;outline-offset:-1px}
.portfolio-colors i:last-child{background:#909090}
.portfolio-site-preview{display:block;width:100%;border:0;background:#000}
.portfolio-site-top{display:flex;justify-content:space-between;gap:20px;align-items:center;padding-block:0 17px;font-size:10px;letter-spacing:.06em}
.portfolio-site-top>span:last-child{color:#999;letter-spacing:0}
.portfolio-site-scene{height:300px;position:relative;isolation:isolate;overflow:hidden;border-radius:12px}
.portfolio-site-scene>img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;z-index:-2}
.portfolio-site-scene::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#000c,#0002);z-index:-1}
.portfolio-site-scene>div{padding:36px 25px;display:flex;flex-direction:column;align-items:start;height:100%;justify-content:center}
.portfolio-site-scene>div>span:first-child{font-size:9px;letter-spacing:.1em;color:#ccc;margin-bottom:17px}
.portfolio-site-scene strong{display:block;color:#fff;font-size:clamp(26px,2.7vw,36px);line-height:1.13;font-weight:500;letter-spacing:-.03em}
.portfolio-site-pill{margin-top:24px;border-radius:99px;padding:10px 15px;background:#fff;color:#000;font-size:10px}
.portfolio-site-caption,.portfolio-underlined{display:inline-block;font-size:12px;color:#eee;text-decoration:underline;text-underline-offset:5px;margin-top:20px;line-height:1.5}
.portfolio-imagery{border:0}
.portfolio-imagery summary{min-height:44px}
.portfolio-imagery>p{font-size:14px;line-height:1.65;max-width:44ch;margin-top:22px}
.portfolio-plan-preview{display:block;max-width:440px;margin-inline:auto;border:0;padding:12px 0}
.portfolio-plan-preview>strong{display:block;font-size:clamp(26px,2.7vw,36px);font-weight:500;line-height:1.2;letter-spacing:-.03em;margin-bottom:25px}
.portfolio-plan-line{display:grid;grid-template-columns:40px minmax(0,1fr);gap:20px;align-items:baseline;padding-block:21px;border-bottom:1px solid #303030}
.portfolio-plan-line>span:first-child{font-size:12px;color:#999}
.portfolio-plan-line>span:last-child{font-size:18px}
@media(hover:hover) and (pointer:fine){.portfolio-plan-preview:hover .portfolio-underlined,.portfolio-site-preview:hover .portfolio-site-caption{color:#fff;text-decoration-thickness:2px}}
.portfolio-briefing{width:100%;max-width:440px;margin-inline:auto}
.portfolio-briefing dl{margin:0}
.portfolio-briefing dl>div{padding-block:23px;border-bottom:1px solid #303030}
.portfolio-briefing dt{font-size:12px;color:#999;margin-bottom:10px}
.portfolio-briefing dd{margin:0;font-size:22px;line-height:1.3;letter-spacing:-.02em}
.portfolio-workflow{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:35px 70px;padding-block:45px 90px;background:#000}
.portfolio-workflow>h2{max-width:15ch}
.portfolio-workflow>ol{list-style:none;margin:0;padding:0}
.portfolio-workflow li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:20px;padding-block:0 32px}
.portfolio-step-number{font-size:11px;color:#999;padding-top:6px}
.portfolio-workflow h3{font-size:24px;line-height:1.2;overflow-wrap:anywhere}
.portfolio-workflow li p{font-size:14px;line-height:1.65;margin-top:11px;max-width:47ch}
.portfolio-workflow-note{grid-column:2;max-width:58ch;font-size:12px;line-height:1.65}
@media(max-width:700px){
 .portfolio-sections{padding-block:45px 45px}
 .portfolio-section{padding-block:42px}
 .portfolio-row{grid-template-columns:1fr;gap:30px}
 .portfolio-section:nth-of-type(even) .portfolio-copy,.portfolio-section:nth-of-type(even) .portfolio-visual{grid-column:auto;grid-row:auto}
 .portfolio-copy{max-width:none}
 .portfolio-copy h3{font-size:30px}
 .portfolio-copy .portfolio-summary{font-size:16px;margin-top:17px}
 .portfolio-copy .portfolio-detail{font-size:14px;margin-top:13px}
 .portfolio-action{margin-top:22px}
 .portfolio-image>img{height:270px}
 .portfolio-identity,.portfolio-plan-preview,.portfolio-briefing{max-width:none}
 .portfolio-type-sample{font-size:130px}
 .portfolio-site-scene{height:280px}
 .portfolio-site-scene>div{padding:28px 22px}
 .portfolio-site-scene strong{font-size:30px}
 .portfolio-workflow{grid-template-columns:1fr;gap:30px;padding-block:35px 55px}
 .portfolio-workflow>h2{max-width:none}
 .portfolio-workflow-note{grid-column:1}
}
@media(prefers-reduced-motion:reduce){.portfolio-action,.portfolio-image-link img{transition:none}}