.first-viewport{--gutter:clamp(20px,4vw,64px);position:relative;isolation:isolate;width:100%;aspect-ratio:1505/1045;container-type:inline-size}
.work-preview-ground{position:absolute;left:0;top:69.85646%;width:100%;bottom:0;background:var(--surface);z-index:-1}
.hero-portrait{position:absolute;left:34.95017%;top:17.51196%;width:34.81728%;height:49.95215%;overflow:hidden;z-index:1}
.hero-portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 28%}
.hero-portrait picture,.preview-art picture{display:block;width:100%;height:100%}
.preview-art{position:absolute;overflow:hidden}
.preview-art img{width:100%;height:100%;object-fit:cover}
.preview-art--pontemesto{left:2.7907%;top:75.78947%;width:14.75083%;height:20.57416%}
.preview-art--keywa{left:49.63455%;top:75.21531%;width:16.21262%;height:22.39234%}
.preview-art--keywa img{object-position:52% 50%}
.site-header{position:absolute;z-index:5;left:2.7907%;right:2.65781%;top:1.62679%;height:4.21053%;display:flex;align-items:center;justify-content:space-between}
.identity{font-family:var(--display);font-size:2.36cqw;line-height:1;letter-spacing:.006em;text-decoration:none;transform:scaleY(.81);transform-origin:center}
.site-navigation{display:contents;font-size:.96346cqw;line-height:1.3;font-weight:400}
.site-navigation a{position:absolute;top:-.19934cqw;text-decoration:none;white-space:nowrap}
.site-navigation a:not(.contact-link){display:flex;align-items:center;justify-content:space-between;min-height:44px}
.site-navigation [data-region="nav-work"]{left:61.12957cqw;width:4.18605cqw}
.site-navigation [data-region="nav-approach"]{left:67.04319cqw;width:5.58140cqw}
.site-navigation [data-region="nav-experience"]{left:74.35216cqw;width:6.71096cqw}
.site-navigation a:hover{text-decoration:underline}
.site-navigation .contact-link{display:grid;place-items:center;right:0;top:0;width:11.09635cqw;height:2.92359cqw;background:var(--ink);color:var(--paper);font-size:1.06312cqw;font-weight:500;letter-spacing:-.01em}
.menu-toggle{display:none;background:none;border:0;padding:0;min-height:44px}
.hero-title{position:absolute;inset:0;z-index:2;font-family:var(--display);font-size:18.63cqw;font-weight:400;line-height:.86;letter-spacing:-.005em;pointer-events:none}
.hero-title span{position:absolute;top:8.17%;white-space:nowrap;transform:scaleX(.815);transform-origin:left top}
.hero-title__product{left:2.525%}
.hero-title__leader{left:57.235%}
.portrait-headline-overlap{display:none;position:absolute;z-index:3;left:41.3289%;top:17.51196%;width:22.25914%;height:13.49282%;overflow:hidden;pointer-events:none}
.portrait-headline-overlap img{position:absolute;left:-6.37874cqw;top:0;width:34.81728cqw;height:34.68439cqw;max-width:none;object-fit:cover;object-position:50% 28%}
.hero-introduction{display:contents}
.hero-intro{position:absolute;left:3.0%;top:34.73%;width:30.23256%;font-size:2.95681cqw;line-height:1.005;font-weight:600;letter-spacing:-.035em}
.hero-summary{position:absolute;left:3.18937%;top:54.16268%;width:29%;font-size:1.3289cqw;line-height:1.28;font-weight:400;letter-spacing:-.014em;color:var(--muted)}
.hero-work-link{position:absolute;left:3.18937%;top:63.25359%;font-size:1.19601cqw;line-height:1.5;white-space:nowrap}
.hero-location{position:absolute;left:74.02%;top:34.95%;display:flex;align-items:center;gap:1cqw;font-size:1.03cqw;line-height:1.3;color:var(--muted)}
.location-rule{display:block;width:3.45515cqw;height:2px;border-top:1px solid #7f7e7b;border-bottom:1px solid #7d7c7a;transform:translateY(1px)}
.hero-philosophy{position:absolute;left:74.15282%;top:40.2%;width:20.19934%;font-size:1.12957cqw;line-height:1.36;letter-spacing:-.015em;color:var(--muted)}
.hero-philosophy p+p{margin-top:1.62cqw}
.work-preview{display:contents}
.selected-work-label{position:absolute;left:2.7907%;top:72.536%;display:flex;align-items:center;gap:1.36cqw}
.selected-work-label h2{font-size:18px;line-height:1.3;font-weight:650;letter-spacing:0;text-transform:none}
.selected-work-label>span{width:17.48cqw;height:2px;border-top:1px solid #b7b7b5;border-bottom:1px solid #bebdbb}
.preview-copy{position:absolute}
.preview-copy h3{font-size:2.65781cqw;line-height:1.08;letter-spacing:-.04em;font-weight:650}
.preview-category{margin-top:.13cqw;font-size:.79734cqw;line-height:1.4;font-weight:500;letter-spacing:.17em;text-transform:uppercase;white-space:nowrap}
.preview-summary{margin-top:.79734cqw;font-size:1.06312cqw;line-height:1.27;letter-spacing:-.025em;color:var(--muted)}
.preview-rule{position:absolute;left:0;height:2px;border-top:1px solid #afaead;border-bottom:1px solid #b8b8b5}
.preview-copy--pontemesto{left:19.8%;top:75.72%;width:22.0%}
.preview-copy--pontemesto .preview-rule{top:8.28738cqw;width:100%}
.preview-outcome{position:absolute;top:8.81728cqw;width:100%;font-size:.955cqw;line-height:1.25;letter-spacing:.015em;color:var(--muted)}
.preview-link{position:absolute;left:0;display:inline-block;font-size:1.09635cqw;line-height:1.35;font-weight:500;white-space:nowrap;padding-bottom:1px}
.preview-copy--pontemesto .preview-link{top:13.22259cqw}
.preview-copy--keywa{left:67.708%;top:75.72%;width:19.4%}
.preview-copy--keywa .preview-rule{top:9.94884cqw;width:92%;border-top-color:#c5c5c3;border-bottom-color:#cbcac7}
.preview-copy--keywa .preview-link{top:11.42857cqw;left:.35cqw}
.work-preview-aside{position:absolute;left:89.3%;top:73.4928%;width:8.0%}
.work-preview-aside>span{display:block;height:1px;width:96%;background:var(--line)}
.work-preview-aside p{margin-top:1.06cqw;font-size:.79734cqw;line-height:1.4;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* Preserve the measured composition while keeping supporting type readable. */
.site-navigation{font-size:max(14px,.96346cqw)}
.site-navigation .contact-link{font-size:max(16px,1.06312cqw);min-height:44px}
.hero-summary{font-size:max(16px,1.3289cqw)}
.hero-work-link{display:inline-flex;align-items:center;min-height:44px;font-size:max(16px,1.19601cqw)}
.hero-location{font-size:max(14px,1.03cqw)}
.hero-philosophy{font-size:max(16px,1.12957cqw)}
.preview-category,.work-preview-aside p{font-size:max(12px,.79734cqw)}
.preview-summary{font-size:max(16px,1.06312cqw)}
.preview-outcome{font-size:max(14px,.955cqw)}
.preview-link{display:inline-flex;align-items:center;min-height:44px;font-size:max(16px,1.09635cqw)}
@media(min-width:1101px){
  .site-header{left:var(--gutter);right:var(--gutter)}
  .site-navigation [data-region="nav-work"]{left:auto;right:29.23587cqw}
  .site-navigation [data-region="nav-approach"]{left:auto;right:21.92690cqw}
  .site-navigation [data-region="nav-experience"]{left:auto;right:13.48837cqw}
  /* Keep the foreground portrait inside the gap between complete words. */
  .hero-title span{transform:scaleX(.64)}
  .hero-title__product{left:var(--gutter)}
  .hero-title .hero-title__leader{left:auto;right:var(--gutter);transform-origin:right top}
  .portrait-headline-overlap{display:block;left:43.5%;width:20%}
  .portrait-headline-overlap img{left:-8.54983cqw}
  .hero-intro,.hero-summary,.hero-work-link,.selected-work-label,.preview-art--pontemesto{left:var(--gutter)}
  .preview-copy--pontemesto{left:calc(17.0093cqw + var(--gutter))}
  .work-preview-aside{left:auto;right:var(--gutter)}
  .preview-link{align-items:flex-start;padding-bottom:0;border-bottom:0}
  .preview-link::after{content:"";position:absolute;left:0;right:0;top:calc(1.35em + 1px);border-bottom:1px solid currentColor}
}
@media(max-width:1400px) and (min-width:1101px){
  .hero-philosophy br,.preview-summary br,.preview-outcome br{display:none}
  .hero-philosophy p+p{margin-top:18px}
  .work-preview-aside{width:8.5%}
}

/* At tablet widths the editorial layout becomes a flowing two-column grid. */
@media(max-width:1100px){
  .first-viewport{display:grid;grid-template-columns:1.1fr 1fr;grid-template-areas:"header header" "title title" "intro portrait" "location portrait" "philosophy portrait" "preview preview";gap:32px 28px;aspect-ratio:auto;padding:20px var(--gutter) 0}
  .site-header{grid-area:header;position:relative;inset:auto;height:auto;min-height:44px}
  .identity{display:inline-flex;align-items:center;min-height:44px;font-size:30px;transform:none;line-height:1.15}
  .menu-toggle{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:72px;font-size:16px}
  .site-navigation{display:none;position:absolute;top:calc(100% + 12px);left:0;right:0;padding:14px;background:var(--paper);border:1px solid var(--line);font-size:16px}
  .site-navigation.is-open{display:grid;gap:4px}
  .site-navigation a,.site-navigation [data-region]{position:static;width:100%;min-height:48px;padding:10px 14px;text-align:left}
  .site-navigation a:not(.contact-link){justify-content:flex-start;gap:8px}
  .site-navigation .contact-link{height:auto;min-height:48px;margin-top:8px;font-size:16px}
  .hero-title{grid-area:title;position:static;display:flex;justify-content:space-between;gap:12px;inset:auto;font-size:14.2vw;line-height:1.05;letter-spacing:-.015em}
  .hero-title span{position:static;transform:none;white-space:nowrap}
  .hero-introduction{grid-area:intro;display:flex;flex-direction:column;align-items:flex-start;gap:22px}
  .hero-intro,.hero-summary,.hero-work-link,.hero-location,.hero-philosophy{position:static;inset:auto;width:auto}
  .hero-intro{font-size:clamp(30px,4.25vw,46px);line-height:1.08;letter-spacing:-.035em}
  .hero-introduction br,.hero-philosophy br,.preview-copy br,.work-preview-aside br{display:none}
  .hero-summary{font-size:18px;line-height:1.5;max-width:38ch}
  .hero-work-link{font-size:16px;line-height:1.5}
  .hero-location{grid-area:location;gap:14px;align-self:end;font-size:14px}
  .location-rule{width:42px}
  .hero-philosophy{grid-area:philosophy;font-size:16px;line-height:1.6;letter-spacing:0}
  .hero-philosophy p+p{margin-top:20px}
  .hero-portrait{grid-area:portrait;position:static;inset:auto;width:100%;height:100%;min-height:470px}
  .hero-portrait img{object-position:50% 28%}
  .portrait-headline-overlap,.work-preview-ground{display:none}
  .work-preview{grid-area:preview;display:grid;grid-template-columns:.7fr 1fr;gap:32px 28px;margin:24px calc(-1 * var(--gutter)) 0;padding:32px var(--gutter) 40px;background:var(--surface)}
  .selected-work-label{position:static;grid-column:1/-1;gap:22px}
  .selected-work-label h2{font-size:18px;line-height:1.3}
  .selected-work-label>span{width:clamp(80px,20vw,260px)}
  .preview-art{position:static;inset:auto;width:100%;height:auto;min-height:240px;aspect-ratio:1}
  .preview-art img{height:100%}
  .preview-copy{position:static;inset:auto;width:auto;align-self:center}
  .preview-copy h3{font-size:clamp(30px,4.5vw,42px);line-height:1.1}
  .preview-category{margin-top:7px;font-size:12px;line-height:1.5;white-space:normal;letter-spacing:.13em}
  .preview-summary{margin-top:18px;font-size:16px;line-height:1.5;letter-spacing:0}
  .preview-copy .preview-rule{position:static;inset:auto;width:100%;margin-top:20px}
  .preview-outcome{position:static;inset:auto;margin-top:12px;font-size:14px;line-height:1.5;letter-spacing:0}
  .preview-copy .preview-link{position:static;inset:auto;margin-top:16px;min-height:44px;font-size:16px;line-height:1.5}
  .work-preview-aside{position:static;inset:auto;grid-column:1/-1;width:auto;padding-top:6px}
  .work-preview-aside>span{width:100%;max-width:100px}
  .work-preview-aside p{margin-top:12px;font-size:12px;line-height:1.5;letter-spacing:.1em}
}
@media(max-width:720px){
  .first-viewport{grid-template-columns:minmax(0,1fr);grid-template-areas:"header" "title" "intro" "portrait" "location" "philosophy" "preview";gap:28px;padding-inline:20px}
  .identity{font-size:25px}
  .hero-title{display:block;font-size:clamp(80px,28.3vw,192px);line-height:1.04;letter-spacing:-.035em;margin-top:5px}
  .hero-title span{display:block}
  .hero-title__leader{margin-top:4px}
  .hero-introduction{gap:20px}
  .hero-intro{font-size:clamp(31px,7.8vw,46px);line-height:1.1;max-width:20ch}
  .hero-summary{font-size:16px;line-height:1.6}
  .hero-portrait{height:auto;min-height:0;aspect-ratio:4/5;margin-top:4px}
  .hero-location{margin-top:6px}
  .hero-philosophy{font-size:16px;line-height:1.65;max-width:46ch}
  .work-preview{grid-template-columns:minmax(0,1fr);gap:24px;margin-top:16px;margin-inline:-20px;padding:28px 20px 36px}
  .selected-work-label{gap:18px;margin-bottom:2px}
  .selected-work-label>span{flex:1;max-width:220px}
  .preview-art{min-height:0;aspect-ratio:4/3}
  .preview-art--keywa{margin-top:26px}
  .preview-art--keywa img{object-position:50% 50%}
  .preview-copy h3{font-size:34px}
  .preview-summary{margin-top:16px;max-width:44ch}
  .preview-copy .preview-rule{margin-top:18px}
  .preview-copy .preview-link{margin-top:12px}
  .work-preview-aside{padding-top:12px}
}