/* A studio profile and a still, client-led portfolio. */
.about-page{--gutter:3.1vw}
.about-page [hidden]{display:none!important}
.about-page .desktop-nav a[aria-current="page"]:after{width:100%}
.about-page h1,.about-page h2{font-family:var(--serif);font-weight:400}
.about-page h1 em,.about-page h2 em{font-weight:400}
.about-hero{padding:0 var(--gutter) 40px}
.about-eyebrow{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:17px;font-size:9px;letter-spacing:1.2px}
.about-hero-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:8%;align-items:center;padding:54px 0 60px}
.about-hero h1{font-size:clamp(70px,8.2vw,136px);line-height:.96;letter-spacing:-.065em}
.about-hero-lead{font-size:15px;line-height:1.65;margin-top:32px}
.about-actions{display:flex;flex-wrap:wrap;gap:28px;margin-top:30px}
.about-link{display:inline-block;padding:10px 0 8px;border-bottom:1px solid currentColor;font-size:12px;line-height:1.5;transition:opacity .2s}
.about-link:hover{opacity:.6}
.about-link.secondary{color:var(--muted)}
.about-hero-aside{justify-self:center;text-align:center;max-width:350px;width:100%}
.about-orbit{aspect-ratio:1;border:1px solid #bfbeb7;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}
.about-orbit:after{content:"";position:absolute;inset:18px;border:1px solid var(--line);border-radius:50%}
.about-orbit span{font:clamp(78px,8.5vw,136px)/1 var(--serif);letter-spacing:-.07em;margin-left:-.04em}
.about-orbit small{font-size:8px;letter-spacing:1.5px;margin-top:19px}
.about-hero-aside>p{font-size:11px;line-height:1.65;color:var(--muted);margin-top:25px}
.about-image-strip{display:grid;grid-template-columns:1.15fr 1fr .85fr 1fr;gap:15px}
.about-image-strip figure{margin:0;min-width:0}
.about-image-strip figure>div{height:clamp(180px,25vw,400px);background:#ebe9e3;overflow:hidden}
.about-image-strip img{width:100%;height:100%;object-fit:cover}
.about-image-strip figure:nth-child(2) img,.about-image-strip figure:nth-child(3) img{object-fit:contain;background:#fff}
.about-image-strip figcaption{display:flex;justify-content:space-between;gap:10px;font-size:10px;padding-top:13px}
.about-image-strip figcaption span{font-size:8px;letter-spacing:.6px;color:var(--muted)}
.about-index{position:sticky;top:0;z-index:4;margin:0 var(--gutter);padding:20px 0;background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:36px;font-size:11px}
.about-index>span{margin-right:auto;font-size:9px;letter-spacing:1px;color:var(--muted)}
.about-index a:hover{text-decoration:underline;text-underline-offset:5px}
.about-section{padding:88px var(--gutter) 96px;scroll-margin-top:40px}
.about-section-label{font-size:9px;letter-spacing:1.3px;line-height:1.5;margin-bottom:45px}
.about-story-grid{display:grid;grid-template-columns:1fr 1fr;gap:12%}
.about-story h2,.about-service-intro h2,.about-process h2{font-size:clamp(52px,5.8vw,88px);line-height:1.02;letter-spacing:-.055em}
.about-story-copy{padding-top:7px;max-width:560px}
.about-story-copy p{font-size:14px;line-height:1.8;color:var(--muted);margin-bottom:20px}
.about-story-copy .about-large-copy{font-size:clamp(22px,2.2vw,32px);line-height:1.3;letter-spacing:-.7px;color:var(--ink);margin-bottom:27px}
.about-services{background:#eeede8}
.about-services-grid{display:grid;grid-template-columns:1fr 1.65fr;gap:9%}
.about-service-intro>p{font-size:13px;line-height:1.75;color:var(--muted);max-width:265px;margin-top:25px}
.service-item{border-top:1px solid #cecdc6}
.service-item:last-child{border-bottom:1px solid #cecdc6}
.service-item summary{display:grid;grid-template-columns:25px 1fr 24px;gap:15px;padding:25px 0;align-items:center}
.service-index{font-size:9px;color:var(--muted)}
.service-item h3{font-size:clamp(21px,2.1vw,31px);font-weight:400;letter-spacing:-.7px;line-height:1.2}
.service-sign{font-size:25px;font-weight:300;line-height:1;text-align:right;transition:transform .2s}
.service-item[open] .service-sign{transform:rotate(45deg)}
.service-content{padding:0 25px 30px 40px}
.service-content>p{font-size:13px;line-height:1.75;color:#64635d;max-width:580px}
.service-content ul{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;row-gap:10px;padding:0;margin:22px 0 0;list-style:none}
.service-content li{font-size:11px;line-height:1.55;padding-left:13px;position:relative}
.service-content li:before{content:"—";position:absolute;left:0;color:#8e8d86}
.about-works-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:50px;margin-bottom:52px}
.about-works-heading h2{font-size:clamp(60px,7.5vw,110px);line-height:1;letter-spacing:-.06em;flex-shrink:0}
.about-works-heading>p{font-size:13px;line-height:1.75;max-width:360px;color:var(--muted)}
.about-work-toolbar{border-top:1px solid var(--line);padding:20px 0 24px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.about-work-toolbar>span{font-size:9px;letter-spacing:.8px;color:var(--muted)}
.about-work-filters{display:flex;gap:26px}
.about-work-filters button{padding:5px 0;font-size:11px;color:var(--muted);border-bottom:1px solid transparent}
.about-work-filters button[aria-pressed="true"]{color:var(--ink);border-bottom-color:currentColor}
.studio-projects{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px 16px;align-items:start}
.work-card{min-width:0}
.work-open{padding:0;display:block;width:100%;text-align:left}
.work-visual{display:block;position:relative;overflow:hidden;aspect-ratio:4/5;background:#eceae4}
.work-visual img{width:100%;height:100%;object-fit:contain}
.work-open-label{position:absolute;bottom:12px;left:12px;right:12px;padding:12px 10px;background:var(--paper);font-size:10px;text-align:center;opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s}
.work-open:hover .work-open-label,.work-open:focus-visible .work-open-label{opacity:1;transform:translateY(0)}
.work-caption{display:grid;grid-template-columns:1fr auto;gap:6px 10px;padding-top:14px;align-items:baseline}
.work-discipline{grid-column:1/-1;font-size:9px;line-height:1.6;color:var(--muted)}
.work-caption strong{font-size:16px;line-height:1.35;font-weight:400;letter-spacing:-.3px}
.work-count{font-size:9px;white-space:nowrap;color:var(--muted)}
.work-count>span{padding-left:7px;color:var(--ink);font-size:14px}
.about-portfolio-foot{margin-top:38px;padding-top:17px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:24px}
.about-portfolio-foot>span{font:italic 20px/1.4 var(--serif)}
.about-process{border-top:1px solid var(--line);padding-top:60px}
.about-steps{list-style:none;margin:52px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px}
.about-steps li{border-top:1px solid #aeadA6;padding-top:18px}
.about-steps li>span{font-size:10px;color:var(--muted)}
.about-steps h3{font:30px/1.15 var(--serif);letter-spacing:-.6px;margin:28px 0 18px}
.about-steps p{font-size:12px;line-height:1.8;color:var(--muted);max-width:300px}
.about-invitation{background:var(--ink);color:var(--paper);padding:50px var(--gutter) 55px}
.about-invitation .about-section-label{color:#aaa9a3}
.about-invitation h2{font-size:clamp(75px,10.5vw,160px);line-height:.97;letter-spacing:-.055em}
.about-invitation-bottom{display:flex;justify-content:space-between;gap:35px;align-items:flex-end;border-top:1px solid #494944;margin-top:45px;padding-top:28px}
.about-invitation-bottom p{font-size:12px;line-height:1.8;color:#c6c5bd}
.about-invitation-bottom>div{display:flex;flex-wrap:wrap;gap:28px}
.about-page .compact-footer{margin-top:0}
.case-dialog{width:calc(100vw - 52px);max-width:1450px;max-height:calc(100dvh - 40px);padding:0 28px;overflow:auto}
.case-dialog-top{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:20px;background:var(--paper);padding:8px 0;font-size:9px;letter-spacing:.7px}
.case-layout{display:grid;grid-template-columns:1.45fr 1fr;gap:6%;align-items:center;padding:16px 0 35px}
.case-media{background:#ebe9e3;min-width:0;position:relative;min-height:150px}
.case-media img{width:100%;height:70dvh;object-fit:contain}
#case-image-status{padding:20px;font-size:12px;line-height:1.6}
.case-copy{min-width:0}
.case-kicker{font-size:10px;color:var(--muted)}
.case-copy h2{font-size:clamp(34px,4vw,58px);line-height:1.05;letter-spacing:-2px;margin:21px 0}
#case-description{font-size:13px;line-height:1.75;color:var(--muted);max-width:410px}
.case-navigation{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding-top:14px;margin-top:28px}
.case-navigation button{padding:8px 0;font-size:11px}
.case-navigation button:disabled{cursor:default}
#case-counter{font-size:10px;color:var(--muted)}
.case-thumbnails{display:flex;flex-wrap:wrap;gap:9px;margin:14px 0 23px}
.case-thumbnail{width:58px;height:72px;padding:3px;border:1px solid transparent;background:#eeede7}
.case-thumbnail img{width:100%;height:100%;object-fit:contain}
.case-thumbnail[aria-current="true"],.case-thumbnail.active{border-color:var(--ink)}
.about-page .menu-dialog nav a[aria-current="page"]{font-style:italic}
@media(min-width:1800px){.about-page{--gutter:max(3.1vw,calc((100vw - 1750px)/2))}}
@media(max-width:1040px){
 .about-hero-grid{gap:7%;grid-template-columns:1.8fr 1fr}
 .about-hero h1{font-size:9vw}
 .about-orbit span{font-size:10vw}
 .about-orbit small{font-size:6px;letter-spacing:.7px}
 .about-orbit:after{inset:12px}
 .about-story-grid{gap:7%}
 .about-services-grid{grid-template-columns:.85fr 1.4fr;gap:6%}
 .studio-projects{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 16px}
 .about-works-heading{gap:30px}
 .about-works-heading>p{max-width:310px}
 .about-steps{gap:22px;grid-template-columns:repeat(2,minmax(0,1fr));row-gap:35px}
 .about-steps p{max-width:100%}
 .about-invitation-bottom{align-items:flex-start}
 .about-invitation-bottom>div{display:grid;gap:12px}
}
@media(max-width:700px){
 .about-page{--gutter:20px}
 .about-eyebrow{font-size:7px;letter-spacing:.8px;padding-top:13px}
 .about-hero{padding-bottom:28px}
 .about-hero-grid{display:block;padding:38px 0 32px}
 .about-hero h1{font-size:clamp(36px,9vw,48px);line-height:1.05;letter-spacing:-.05em}
 .about-hero-lead{font-size:12px;line-height:1.7;margin-top:25px}
 .about-actions{gap:22px;margin-top:21px}
 .about-link{font-size:11px}
 .about-hero-aside{display:flex;align-items:center;gap:24px;text-align:left;max-width:none;margin-top:32px}
 .about-orbit{width:122px;flex-shrink:0}
 .about-orbit:after{inset:8px}
 .about-orbit span{font-size:53px}
 .about-orbit small{font-size:4px;letter-spacing:.4px;margin-top:7px}
 .about-hero-aside>p{font-size:10px;margin:0}
 .about-image-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 10px}
 .about-image-strip figure>div{height:auto;aspect-ratio:4/5}
 .about-image-strip figcaption{font-size:9px;padding-top:9px}
 .about-image-strip figcaption span{font-size:6px;letter-spacing:0}
 .about-index{gap:0;justify-content:space-between;font-size:9px;padding:19px 0}
 .about-index>span{display:none}
 .about-section{padding-top:55px;padding-bottom:60px;scroll-margin-top:44px}
 .about-section-label{font-size:8px;letter-spacing:.8px;margin-bottom:30px}
 .about-story-grid{grid-template-columns:1fr;gap:28px}
 .about-story h2,.about-service-intro h2,.about-process h2{font-size:clamp(34px,8.7vw,44px);line-height:1.08}
 .about-story-copy{max-width:100%}
 .about-story-copy .about-large-copy{font-size:20px;line-height:1.4;margin-bottom:20px}
 .about-story-copy p{font-size:12px;margin-bottom:15px}
 .about-services-grid{grid-template-columns:1fr;gap:30px}
 .about-service-intro h2 br{display:none}
 .about-service-intro h2{max-width:350px}
 .about-service-intro>p{max-width:340px;font-size:12px;margin-top:22px}
 .service-item summary{grid-template-columns:18px 1fr 20px;gap:12px;padding:22px 0}
 .service-item h3{font-size:20px;letter-spacing:-.4px}
 .service-content{padding:0 0 25px 30px}
 .service-content>p{font-size:12px}
 .service-content ul{gap:10px 15px;margin-top:18px}
 .service-content li{font-size:10px}
 .about-works-heading{display:block;margin-bottom:28px}
 .about-works-heading h2{font-size:clamp(36px,9.2vw,46px);line-height:1.08}
 .about-works-heading>p{font-size:12px;margin-top:22px;max-width:100%}
 .about-work-toolbar{align-items:flex-start;flex-direction:column;gap:18px;padding:17px 0 22px}
 .about-work-toolbar>span{font-size:8px}
 .about-work-filters{gap:27px}
 .studio-projects{gap:26px 10px}
 .work-caption{display:flex;flex-direction:column;gap:4px;padding-top:10px}
 .work-caption strong{font-size:14px;letter-spacing:-.2px}
 .work-discipline{font-size:8px}
 .work-count{font-size:8px}
 .work-open-label{display:none}
 .about-portfolio-foot{margin-top:28px;align-items:flex-start;gap:20px}
 .about-portfolio-foot>span{font-size:16px;max-width:180px}
 .about-portfolio-foot .about-link{white-space:nowrap;font-size:10px;padding-top:3px}
 .about-steps{margin-top:32px;gap:28px 20px}
 .about-steps h3{font-size:21px;line-height:1.2;margin:18px 0 10px}
 .about-steps p{font-size:11px;line-height:1.7}
 .about-invitation{padding-top:35px;padding-bottom:38px}
 .about-invitation h2{font-size:clamp(36px,9.4vw,46px);line-height:1.08}
 .about-invitation-bottom{display:block;margin-top:30px;padding-top:23px}
 .about-invitation-bottom p{font-size:11px}
 .about-invitation-bottom>div{display:flex;gap:24px;margin-top:22px}
 .case-dialog{width:100vw;max-width:none;height:100dvh;max-height:100dvh;margin:0;padding:0 18px}
 .case-layout{grid-template-columns:1fr;gap:25px;padding:5px 0 28px}
 .case-media img{height:48dvh}
 .case-copy h2{font-size:32px;line-height:1.1;margin:14px 0}
 #case-description{font-size:12px}
 .case-navigation{margin-top:22px}
 .case-thumbnail{width:52px;height:64px}
}
@media(max-width:360px){
 .about-page{--gutter:16px}
 .about-hero h1{font-size:34px}
 .about-hero-aside{gap:15px}
 .about-orbit{width:105px}
 .about-orbit span{font-size:46px}
 .about-story h2,.about-service-intro h2,.about-process h2{font-size:32px}
 .about-works-heading h2{font-size:34px}
 .service-item h3{font-size:19px}
 .about-portfolio-foot>span{font-size:14px}
 .about-steps{gap:25px 16px}
 .about-steps h3{font-size:20px}
}

.about-invitation a:focus-visible{outline-color:var(--paper)}

/* A portrait film leads the studio story, preserving its full original frame. */
.about-hero-film{padding-bottom:46px}
.about-film-intro{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.1fr);gap:10%;align-items:center;padding:42px 3% 0}
.studio-film{margin:0;min-width:0;width:min(100%,370px);justify-self:center}
.studio-film-stage{aspect-ratio:9/16;background:#e7e5df;overflow:hidden}
.studio-film-stage video{display:block;width:100%;height:100%;object-fit:contain}
.studio-film-caption{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:14px}
.studio-film-caption>span{display:flex;flex-direction:column;gap:6px}
.studio-film-caption strong{font-size:12px;font-weight:400;line-height:1.3}
.studio-film-caption small{font-size:7px;color:var(--muted);letter-spacing:.8px}
.film-controls{display:flex;gap:17px;flex-shrink:0}
.film-controls button{padding:10px 0;font-size:10px;border-bottom:1px solid var(--line);line-height:1.4}
.film-controls button:hover{border-bottom-color:var(--ink)}
#film-status{font-size:11px;line-height:1.7;color:var(--muted);padding-top:12px}
.about-film-copy{min-width:0;max-width:570px}
.about-film-kicker{font-size:9px;letter-spacing:1.2px;margin-bottom:27px}
.about-film-copy h1{font-size:clamp(58px,6vw,92px);line-height:.99;letter-spacing:-.06em}
.about-film-copy .about-hero-lead{font-size:16px;line-height:1.65;margin-top:30px}
.about-film-description{max-width:430px;font-size:13px;line-height:1.8;color:var(--muted);margin-top:21px}
.about-film-copy .about-actions{margin-top:28px;gap:26px}
@media(min-width:1600px){.studio-film{width:min(100%,440px)}.about-film-intro{gap:8%;padding-left:5%;padding-right:5%}}
@media(max-width:1040px){.about-film-intro{gap:7%;padding-left:0;padding-right:0}.studio-film{width:min(100%,340px)}.about-film-copy h1{font-size:6.7vw}.about-film-copy .about-hero-lead{font-size:13px}.about-film-description{font-size:12px}.about-film-copy .about-actions{gap:20px}}
@media(max-width:700px){
 .about-hero-film{padding-bottom:35px}
 .about-film-intro{display:flex;flex-direction:column;gap:34px;padding-top:26px}
 .studio-film{width:min(100%,340px)}
 .about-film-copy{width:100%;max-width:none}
 .about-film-kicker{font-size:8px;margin-bottom:19px}
 .about-film-copy h1{font-size:clamp(36px,9.2vw,48px);line-height:1.05}
 .about-film-copy .about-hero-lead{font-size:13px;margin-top:23px}
 .about-film-description{font-size:12px;margin-top:17px;max-width:100%}
 .about-film-copy .about-actions{margin-top:21px;gap:25px}
 .studio-film-caption{padding-top:10px}
}