@media(min-width:1200px) and (max-width:1399px){
  .hero-collage{
    width:40.6%
  }
  .hero-copy{
    max-width:49.1%
  }
  .hero .button{
    min-width:248px
  }
  .desktop-nav{
    gap:48px
  }
  .fact .value{
    font-size:40px
  }
  .portrait-frame{
    width:32.1%
  }
  .about-intro h1{
    max-width:66%
  }
  .about-intro .intro-copy{
    max-width:58%
  }
  .focus-item h3{
    font-size:24px
  }
  .project-card.featured .card-info{
    grid-template-columns:72px 1fr 260px
  }
  .project-card.featured .button{
    min-width:260px
  }
}
@media(max-width:1199px){
  :root{
    --margin:40px;
    --h1:48px;
    --h1-line:58px
  }
  .grid{
    grid-template-columns:repeat(8,minmax(0,1fr))
  }
  .desktop-nav{
    display:none
  }
  .menu-toggle{
    display:inline-flex
  }
  h2{
    font-size:36px;
    line-height:44px
  }
  h3{
    font-size:24px;
    line-height:32px
  }
  .hero{
    padding-top:40px;
    min-height:1080px;
    padding-bottom:112px
  }
  .hero h1{
    max-width:636px;
    font-size:40px;
    line-height:50px
  }
  .hero h1 span{
    display:inline
  }
  .hero-copy{
    max-width:636px
  }
  .hero-collage{
    position:relative;
    top:auto;
    right:auto;
    width:100%;
    margin-top:56px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px
  }
  .hero-collage .eyebrow{
    grid-column:1/-1;
    margin:0
  }
  .hero-collage .main-visual{
    height:272px
  }
  .hero-subslots{
    display:grid;
    gap:24px;
    margin:0
  }
  .hero-subslots a{
    width:100%;
    height:124px
  }
  .hero-collage .pattern{
    display:none
  }
  .hero-footnote{
    bottom:48px
  }
  .split-head{
    grid-column:span 3
  }
  .split-body{
    grid-column:span 5
  }
  .profile,.projects,.focus,.approach,.experience{
    min-height:0;
    padding-block:64px 96px
  }
  .profile-copy{
    grid-column:1/7
  }
  .facts{
    grid-template-columns:1fr 1fr;
    gap:48px 24px;
    margin-top:64px
  }
  .facts .fact:last-child{
    grid-column:1/-1
  }
  .fact .value{
    font-size:40px;
    line-height:48px
  }
  .project-card.featured .card-info{
    grid-template-columns:72px 1fr
  }
  .project-card.featured .card-action{
    grid-column:2;
    grid-row:auto;
    justify-self:start
  }
  .project-card .card-info{
    grid-template-columns:1fr;
    gap:16px
  }
  .project-card .description,.project-card .card-action{
    grid-column:1
  }
  .project-card.featured .description{
    grid-column:2
  }
  .project-card .project-visual{
    height:320px
  }
  .project-card.featured .project-visual{
    height:440px
  }
  .project-card.posters .card-info{
    margin-left:0
  }
  .project-card.posters .order{
    position:static;
    margin-left:0
  }
  .project-card.posters .card-heading{
    display:block
  }
  .project-card.posters .card-action{
    min-width:0;
    width:100%;
    margin-top:32px
  }
  .focus-list{
    gap:32px
  }
  .focus-item{
    grid-template-columns:1fr;
    gap:16px
  }
  .approach .split-body{
    gap:48px
  }
  .experience-list{
    gap:48px
  }
  .experience-item{
    grid-template-columns:1fr
  }
  .experience-item>p{
    grid-column:1
  }
  .site-footer{
    margin-top:96px
  }
  .about-intro{
    min-height:860px;
    padding-bottom:80px
  }
  .about-intro h1{
    max-width:none;
    margin-bottom:64px
  }
  .about-intro .intro-copy{
    max-width:60%;
    margin-top:0
  }
  .portrait-frame{
    top:300px;
    width:34%;
    height:420px
  }
  .about-intro .availability{
    max-width:60%;
    margin-top:64px
  }
  .about-principles{
    min-height:0;
    padding-top:96px
  }
  .principle{
    grid-template-columns:repeat(8,minmax(0,1fr));
    min-height:0;
    padding-bottom:96px
  }
  .principle>.eyebrow{
    grid-column:span 1
  }
  .principle h2{
    grid-column:span 2
  }
  .principle>p:last-child{
    grid-column:span 5
  }
  .about-tools{
    min-height:320px;
    padding-top:80px
  }
  .about-tools h2{
    grid-column:span 3
  }
  .about-tools p{
    grid-column:span 5
  }
  .case-row h2{
    grid-column:span 4
  }
  .stage-button,.case-wide .detail-image{
    height:400px
  }
  .case-images .detail-image{
    height:280px
  }
  .case-scale h3{
    font-size:22px
  }
  .case-posters .case-images .detail-image{
    height:300px
  }
}
@media(max-width:767px){
  :root{
    --margin:24px;
    --gutter:16px;
    --frame-arm:16px;
    --frame-stroke:1.5px;
    --frame-gap:16px;
    --h1:36px;
    --h1-line:44px
  }
  body{
    font-size:16px;
    line-height:24px
  }
  h2{
    font-size:28px;
    line-height:36px
  }
  h3{
    font-size:22px;
    line-height:30px
  }
  .short{
    font-size:16px;
    line-height:24px
  }
  .grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px
  }
  .split-head,.split-body{
    grid-column:1/-1
  }
  .section{
    padding-top:48px;
    padding-bottom:64px
  }
  .section::after{
    bottom:0
  }
  .section-label{
    margin-bottom:32px
  }
  .site-header{
    height:77px
  }
  .brand{
    font-size:10px;
    line-height:16px
  }
  .button{
    min-width:0;
    width:100%;
    min-height:48px;
    padding:10px 22px;
    font-size:16px;
    line-height:24px
  }
  .actions{
    gap:16px;
    flex-direction:column
  }
  .hero{
    padding-top:39px;
    min-height:1141px;
    padding-bottom:88px
  }
  .hero>.technical{
    max-width:290px
  }
  .hero h1{
    margin-top:40px;
    max-width:342px
  }
  .hero h1 span{
    display:inline
  }
  .hero-copy{
    margin-top:32px
  }
  .hero .actions{
    margin-top:32px
  }
  .hero-collage{
    display:block;
    margin-top:40px
  }
  .hero-collage .eyebrow{
    margin-bottom:24px
  }
  .hero-collage .main-visual{
    height:230px
  }
  .hero-subslots{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    margin-top:16px
  }
  .hero-subslots a{
    height:112px
  }
  .hero-subslots .placeholder-copy{
    font-size:16px
  }
  .hero-footnote{
    bottom:32px
  }
  .hero::after{
    bottom:0;
    transform:none
  }
  .profile{
    min-height:946px
  }
  .profile h2 br{
    display:none
  }
  .profile-copy{
    grid-column:1/-1;
    margin-top:32px
  }
  .facts{
    grid-template-columns:1fr;
    gap:32px;
    margin-top:48px
  }
  .facts .fact:last-child{
    grid-column:1
  }
  .fact .eyebrow{
    margin-bottom:12px
  }
  .fact .value{
    font-size:32px;
    line-height:40px
  }
  .fact h3 br{
    display:none
  }
  .fact h3{
    max-width:none
  }
  .fact .short{
    margin-top:16px
  }
  .projects{
    min-height:2328px
  }
  .projects-title{
    margin-bottom:40px
  }
  .projects-title>.eyebrow{
    display:none
  }
  .project-grid{
    grid-template-columns:1fr;
    row-gap:64px
  }
  .project-card.featured,.project-card.posters{
    grid-column:1;
    display:block
  }
  .project-card .project-visual,.project-card.featured .project-visual,.project-card.posters .project-visual{
    height:230px
  }
  .project-card:hover .frame{
    padding:17.5px
  }
  .project-card .card-info,.project-card.featured .card-info{
    grid-template-columns:24px minmax(0,1fr);
    gap:16px;
    margin-top:24px
  }
  .project-card .order{
    padding-top:4px
  }
  .project-card .categories{
    font-size:12px;
    line-height:16px;
    margin-top:12px
  }
  .project-card .description,.project-card.featured .description,.project-card.posters .description{
    grid-column:1/-1;
    margin-top:8px;
    font-size:16px;
    line-height:24px
  }
  .project-card .card-action,.project-card.featured .card-action,.project-card.posters .card-action{
    grid-column:1/-1;
    grid-row:auto;
    margin-top:16px;
    width:100%;
    justify-self:stretch
  }
  .project-card.medium .card-action{
    border:1px solid var(--color-text);
    padding:10px 22px
  }
  .project-card.medium .card-action .action-label{
    display:block
  }
  .project-card.posters .card-heading{
    grid-column:2
  }
  .project-card.posters .order{
    position:static;
    margin:0
  }
  .project-card.posters .card-info{
    margin-left:0
  }
  .project-card.posters .asset.is-placeholder{
    max-width:140px
  }
  .focus{
    min-height:902px
  }
  .section-grid-body{
    padding-top:24px
  }
  .focus-list{
    gap:32px
  }
  .focus-item{
    gap:16px
  }
  .approach{
    min-height:784px
  }
  .approach .split-body{
    gap:32px;
    margin-top:16px
  }
  .experience{
    min-height:730px
  }
  .experience-list{
    margin-top:16px;
    gap:40px
  }
  .experience-item{
    gap:12px
  }
  .experience-item>p{
    font-size:16px;
    line-height:24px
  }
  .experience-meta{
    font-size:14px;
    line-height:20px
  }
  .availability{
    font-size:12px;
    line-height:20px;
    gap:12px
  }
  .site-footer{
    margin-top:48px;
    padding-block:24px;
    display:grid;
    gap:12px;
    font-size:12px;
    line-height:16px
  }
  .about-intro{
    padding-top:39px;
    min-height:0;
    padding-bottom:64px
  }
  .about-intro h1{
    margin-top:40px;
    margin-bottom:0
  }
  .about-intro h1 span{
    display:inline
  }
  .about-intro .intro-copy{
    max-width:none;
    margin-top:40px
  }
  .portrait-frame{
    position:relative;
    top:auto;
    right:auto;
    width:100%;
    height:430px;
    margin-top:40px
  }
  .about-intro .availability{
    max-width:none;
    margin-top:32px
  }
  .about-principles{
    padding-top:64px
  }
  .principle{
    grid-template-columns:24px minmax(0,1fr);
    gap:16px;
    padding-bottom:48px
  }
  .principle>.eyebrow{
    grid-column:1;
    padding-top:8px
  }
  .principle h2{
    grid-column:2
  }
  .principle>p:last-child{
    grid-column:1/-1
  }
  .about-tools{
    min-height:0;
    padding-top:48px;
    padding-bottom:80px;
    gap:24px
  }
  .about-tools h2,.about-tools p{
    grid-column:1/-1;
    padding:0
  }
  .case-bar{
    height:77px;
    gap:8px
  }
  .back-button{
    font-size:12px;
    gap:8px
  }
  .case-bar>.eyebrow{
    font-size:12px
  }
  .case-content{
    padding-top:39px
  }
  .case-heading h1{
    font-size:28px;
    line-height:36px;
    margin-bottom:16px
  }
  .case-heading .case-description{
    margin-top:24px
  }
  .case-heading .categories{
    font-size:12px;
    line-height:16px
  }
  .case-meta{
    grid-template-columns:1fr;
    gap:24px;
    margin-block:32px;
    font-size:16px;
    line-height:24px
  }
  .case-meta dt{
    font-size:12px;
    line-height:16px;
    margin-bottom:8px
  }
  .case-gallery{
    margin-top:32px
  }
  .stage-button{
    height:230px
  }
  .gallery-controls{
    gap:8px;
    flex-wrap:wrap;
    margin-top:24px
  }
  .gallery-caption{
    font-size:12px;
    line-height:16px
  }
  .gallery-controls .button{
    order:4;
    width:100%;
    margin-top:16px
  }
  .gallery-arrows{
    gap:0
  }
  .thumbnails{
    gap:16px;
    margin-top:24px
  }
  .thumbnail{
    width:calc((100% - 48px)/4);
    height:54px
  }
  .case-details{
    margin-top:48px
  }
  .case-row{
    display:block;
    margin-bottom:40px
  }
  .case-row .row-content{
    margin-top:24px
  }
  .case-row h2{
    font-size:28px
  }
  .case-row ul{
    font-size:16px;
    line-height:24px;
    gap:16px
  }
  .case-images{
    grid-template-columns:1fr;
    margin-block:40px;
    gap:32px
  }
  .case-images .detail-image,.case-wide .detail-image{
    height:230px
  }
  .case-images figcaption{
    font-size:12px;
    line-height:16px
  }
  .case-scale{
    padding-block:24px;
    gap:24px
  }
  .case-scale .big-number,.case-scale h3,.case-scale>p{
    grid-column:1/-1
  }
  .case-scale .big-number{
    font-size:32px;
    line-height:40px
  }
  .case-story{
    margin-top:40px
  }
  .case-story .eyebrow{
    margin-bottom:24px
  }
  .case-bottom{
    margin-top:48px;
    padding-block:32px;
    flex-wrap:wrap
  }
  .next-project{
    width:100%;
    margin-top:16px
  }
  .next-project span{
    font-size:22px;
    justify-content:space-between
  }
  .case-posters .stage-button .asset.is-placeholder{
    max-width:140px
  }
  .case-posters .case-images{
    grid-template-columns:1fr
  }
  .case-posters .case-images .detail-image{
    height:260px
  }
  .case-posters .case-images .asset.is-placeholder{
    max-width:180px
  }
  .viewer{
    padding:16px 24px
  }
  .viewer[open]{
    gap:16px;
    grid-template-rows:48px minmax(0,1fr) 104px
  }
  .viewer-bottom{
    flex-wrap:wrap;
    gap:8px
  }
  .viewer-hint{
    display:none
  }
  .viewer-bottom>.gallery-arrows{
    margin-left:auto
  }
  .viewer-tools{
    order:3;
    width:100%;
    justify-content:center
  }
  .placeholder-copy{
    font-size:20px;
    gap:8px
  }
  .placeholder-copy small{
    font-size:10px;
    line-height:14px
  }
  .placeholder-copy .placeholder-meta{
    font-size:9px;
    line-height:12px;
    margin-top:0
  }
}
@media(min-width:768px) and (max-width:1199px){
  .principle{
    position:relative
  }
  .principle>.eyebrow{
    position:absolute;
    top:-28px;
    left:0
  }
  .principle h2{
    grid-column:1/4
  }
  .principle>p:last-child{
    grid-column:4/-1
  }
}
@media(max-width:1199px){
  .desktop-break{
    display:none
  }
}
@media(max-width:767px){
  .mobile-break{
    display:block
  }
  .hero h1{
    margin-top:32px
  }
  .hero-copy{
    margin-top:24px
  }
  .hero .actions{
    margin-top:24px
  }
  .hero-collage{
    margin-top:32px
  }
  .hero{
    padding-bottom:60px
  }
  .about-intro h1 .about-desktop-title{
    display:none
  }
  .about-intro h1 .about-mobile-title{
    display:block
  }
  .profile .facts{
    margin-top:32px;
    gap:24px
  }
  .profile{
    padding-bottom:48px
  }
  .project-grid{
    row-gap:48px
  }
  .project-card .card-info,.project-card.featured .card-info{
    gap:12px
  }
  .project-card .description,.project-card.featured .description,.project-card.posters .description{
    margin-top:4px
  }
  .project-card .card-action,.project-card.featured .card-action,.project-card.posters .card-action{
    margin-top:12px
  }
}

@media(max-width:767px){
  .back-to-top{
    width:44px;
    height:44px;
    right:max(20px,env(safe-area-inset-right));
    bottom:max(20px,env(safe-area-inset-bottom));
  }
}

@media(max-width:767px){
  .hero h1{font-size:32px;line-height:40px}
  .site-header .brand,.menu-top .brand{font-size:14px;gap:8px}
  .brand img{width:24px;height:24px}
}

@media(min-width:768px) and (max-width:1199px){
  .profile .facts .fact:last-child{grid-column:auto}
  .profile .fact .value{
    font-size:24px;
    line-height:32px;
    min-height:64px;
    white-space:normal
  }
}
@media(max-width:767px){
  .profile .facts{grid-template-columns:1fr}
  .profile .fact .value{font-size:28px;line-height:40px}
}

/* The compact layout has no free column for decorative artwork. */
@media(max-width:1199px){
  .profile-art{display:none}
}