/* Fonts: Ubuntu (open licence), self-hosted. */
@font-face{font-family:Ubuntu;font-style:normal;font-weight:300;font-display:swap;src:url(/assets/fonts/ubuntu-300-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Ubuntu;font-style:normal;font-weight:300;font-display:swap;src:url(/assets/fonts/ubuntu-300-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Ubuntu;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ubuntu-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Ubuntu;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ubuntu-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Ubuntu;font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/ubuntu-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Ubuntu;font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/ubuntu-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:Jost;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/jost-400-latin.woff2) format('woff2')}
@font-face{font-family:Jost;font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/jost-700-latin.woff2) format('woff2')}

:root{--ink:#282828;--logo:#333;--grey:#a9a9a9;--header-h:70px;--mast-h:49vh}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:Ubuntu,'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:16px;color:#000;background:#fff}
img,video,iframe{max-width:100%}
video.m-img{object-fit:contain}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}

/* ---- header ---- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:30;height:var(--header-h);padding:0 3%;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;transition:background-color .3s ease,box-shadow .3s ease}
.site-header.on-scroll{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.1)}
.nav{display:flex;align-items:center}
.nav-item{padding-right:25px}
.nav-item:last-child{padding-right:0}
.nav a,.responsive-nav a{font-size:20px;line-height:24px;font-weight:400;color:var(--ink);text-decoration:none}
.nav a.active,.responsive-nav a.active{font-weight:700}
.logo{text-align:center;font-size:18px;line-height:30px;font-weight:700;white-space:nowrap}
.logo a{color:var(--logo);text-decoration:none}
.hamburger{display:none;position:relative;justify-self:end;width:24px;height:16px;margin-right:0}
.hamburger i{position:absolute;left:0;right:0;height:2px;background:#ccc}
.hamburger i:nth-child(1){top:0}.hamburger i:nth-child(2){top:7px}.hamburger i:nth-child(3){top:14px}
.on-scroll .hamburger i{background:var(--ink)}
.header-placeholder{height:var(--header-h)}

.responsive-nav{position:fixed;inset:0;z-index:40;background:#fff;display:flex;align-items:center;justify-content:center}
.responsive-nav[hidden]{display:none}
.responsive-nav nav{text-align:center}
.responsive-nav .nav-item{padding:0;margin:14px 0}
.close-nav{position:absolute;top:40px;right:5%;width:20px;height:20px}
.close-nav::before,.close-nav::after{content:"";position:absolute;left:50%;top:0;width:2px;height:20px;background:#ccc}
.close-nav::before{transform:rotate(45deg)}.close-nav::after{transform:rotate(-45deg)}

/* ---- masthead (fixed behind the page; the white page scrolls over it) ---- */
.masthead{position:fixed;top:0;left:0;width:100%;height:var(--mast-h);display:flex;align-items:center;justify-content:center;background:#fff;overflow:hidden}
.masthead-contents{width:100%;max-width:800px;text-align:center}
.masthead h1{margin:36px 0 25px;color:var(--ink);font-size:60px;line-height:70px;font-weight:300;text-align:center}
.masthead-arrow{position:absolute;bottom:45px;left:calc(50% - 30px);width:60px;height:40px;display:block}
.masthead-arrow::after{content:"";position:absolute;left:15px;top:0;width:30px;height:30px;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);transform:rotate(45deg) translate(-4px,-4px)}
.masthead-placeholder{height:var(--mast-h)}
.site-wrap{position:relative;z-index:1;background:#fff}

/* ---- layout ---- */
.site-container{max-width:1200px;margin:0 auto;width:100%}
.site-content{margin:0 2%;width:96%}
.page-content::after{content:"";display:table;clear:both}
.module{clear:both;margin-left:auto;margin-right:auto;word-break:break-word}
.module.tree,.module.grid,.module.embed,.module.media,.module.audio,.module.image,.module.text{width:100%}
/* default spacing (a module's own inline padding wins) */
.module.image{padding-bottom:20px}
.module.text{max-width:800px;padding:20px 0 40px}
.module.grid{overflow:hidden;padding-bottom:40px}
.module.embed,.module.media,.module.audio{padding-bottom:40px}
.module.button{padding:20px 0}

/* ---- project covers (Work / Other) ---- */
.project-covers{display:flex;flex-wrap:wrap;padding-top:100px}
body:not(.has-masthead) .project-covers{padding-top:0}
.project-cover{position:relative;display:block;width:25%;text-decoration:none;color:#fff}
.cols-6 .project-cover{width:calc(100% / 6)}
.cover-image{position:relative;aspect-ratio:202/158;overflow:hidden}
.cover{position:absolute;inset:0}
.cover img,.cover video{width:100%;height:100%;object-fit:cover;display:block}
.cover-rollover{opacity:0;transition:opacity .15s}
.has-roll:hover .cover-rollover,.has-roll:focus-visible .cover-rollover{opacity:1}
.details{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:10px;opacity:0;transition:opacity .15s;text-align:center;pointer-events:none}
.project-cover:hover .details,.project-cover:focus-visible .details{opacity:1}
.has-roll:hover .details,.has-roll:focus-visible .details{background:rgba(0,0,0,.6)}
.details .title{font-size:20px;line-height:24px;font-weight:700;color:#fff}

/* ---- text ---- */
.rich-text{font-size:16px;line-height:21px;color:var(--grey)}
.rich-text div{padding-bottom:10px;text-align:center}
.rich-text a{color:var(--grey);text-decoration:underline}
.rich-text div.title{font-size:36px;line-height:50px;font-weight:700;color:#333;padding:20px 0 30px;text-align:center}
.rich-text div.sub-title{font-size:25px;line-height:30px;font-weight:700;color:#333;padding:20px 0;text-align:center}
.rich-text div.caption{font-size:13px;line-height:16px;padding:10px 0 20px;text-align:center}

/* ---- tree (columns) ---- */
.tree{display:flex}
.tree.valign-center{align-items:center}
.tree.valign-bottom{align-items:flex-end}
.tree>.col{min-width:1px;border-left:4px solid transparent;border-right:4px solid transparent}
.tree>.col:first-child{border-left:0}
.tree>.col:last-child{border-right:0}

/* ---- images ---- */
.img-wrap{width:100%}
.module.image .img-wrap{margin:0 auto}
.m-img{display:block;width:100%;height:auto;background:rgba(0,0,0,.03)}
.lb{cursor:zoom-in;display:block}
.lb:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
a>.m-img{display:block}

/* ---- justified image grid ---- */
.grid-main{display:flex;flex-wrap:wrap;overflow:hidden;margin:0 calc(var(--gut) / -2);visibility:hidden}
.grid-main.ready{visibility:visible}
.g-item{position:relative;box-sizing:content-box;display:inline-block;
  border-bottom:var(--gut) solid transparent;border-left:calc(var(--gut) / 2) solid transparent;border-right:calc(var(--gut) / 2) solid transparent}
.g-item .fill{display:block;background:rgba(0,0,0,.03)}
.g-item img,.g-item video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.g-spacer{flex-grow:0}
.grid-main.spacer .g-spacer{flex-grow:90000000000}

/* ---- embeds / media ---- */
.embed-dim{margin:0 auto}
.ratio{position:relative;height:0}
.ratio iframe,.ratio video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.module.audio{max-width:800px}
.module.audio audio{display:block;width:100%;height:75px}

/* ---- contact form (Jost stands in for the old Typekit face) + social + buttons ---- */
.module.contact{max-width:500px;padding:70px 0 20px;margin-bottom:40px;font-family:Jost,'Helvetica Neue',Arial,sans-serif}
.contact label{display:block;font-size:15px;line-height:15px;font-weight:700;color:#333;margin-bottom:10px}
.contact .field{margin-bottom:30px}
.contact input,.contact textarea{width:100%;border:1px solid #ddd;border-radius:3px;padding:0 10px;font:inherit;font-size:18px;color:#333;background:#fff;outline:none;-webkit-appearance:none}
.contact input::placeholder,.contact textarea::placeholder{color:rgba(51,51,51,.4)}
.contact input{height:42px}
.contact textarea{height:132px;padding:13px 10px;display:block;resize:vertical}
.contact input:focus,.contact textarea:focus{border-color:#bbb}
.contact .submit{background:#333;color:#fff;border-radius:5px;font:700 15px/40px Jost,'Helvetica Neue',Arial,sans-serif;height:40px;padding:0 25px}
.contact .submit:hover{background:#ea3d3d}
.contact .hp{position:absolute;left:-9999px}
.form-sent{font:18px/1.4 Arial,Helvetica,sans-serif;color:#333;text-align:center;padding:20px 0}
.form-sent[hidden]{display:none}
.module.social ul{list-style:none;margin:0;padding:0;display:flex;justify-content:center}
.module.social li{padding:20px 15px 20px 0}
.module.social li:last-child{padding-right:0}
.module.social a{display:flex;width:35px;height:35px;align-items:center;justify-content:center;border-radius:18px;background:#e8e8e8}
.module.social a:hover{background:#ddd}
.module.social svg{width:25px;height:25px;fill:#022a55}
.module.button{text-align:center}
.btn{display:inline-flex;align-items:center;max-width:100%;height:40px;padding:0 30px;border-radius:100px;background:#022a55;color:#fff;font:700 14px/40px Arial,Helvetica,sans-serif;text-decoration:none;white-space:nowrap}
a.btn:hover{background:rgba(2,42,85,.75)}

/* ---- back to top ---- */
.to-top{position:fixed;right:40px;bottom:40px;width:60px;height:60px;border-radius:60px;background:rgba(0,0,0,.1);color:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;z-index:20;transition:background .2s}
.to-top:hover{background:rgba(0,0,0,.2);color:rgba(0,0,0,.6)}

/* ---- lightbox ---- */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(255,255,255,.98);display:flex;align-items:center;justify-content:center}
.lightbox[hidden]{display:none}
.lightbox img{max-width:94vw;max-height:92vh;width:auto;height:auto;object-fit:contain}
.lightbox button{position:absolute;color:#555;font-size:34px;line-height:1;padding:16px;font-weight:300}
.lightbox .lb-close{top:10px;right:14px}
.lightbox .lb-prev{left:6px;top:50%;transform:translateY(-50%)}
.lightbox .lb-next{right:6px;top:50%;transform:translateY(-50%)}

/* ---- tablet ---- */
@media (max-width:768px){
  .site-header{padding:0 5%}
  .nav{display:none}
  .hamburger{display:block}
  .site-header{grid-template-columns:1fr auto 1fr}
  .hamburger{grid-column:3}
  .masthead{padding:0 5%}
  .masthead h1{font-size:28px;line-height:33px;margin:19px 0 15px}
  .site-content{margin:0;width:100%}
  .project-cover,.cols-6 .project-cover{width:50%}
  .rich-text div{font-size:14px;line-height:20px;padding:0 0 8px}
  .rich-text div.caption{font-size:13px;line-height:16px;padding:8px 0 14px}
  .rich-text div.title{font-size:24px;line-height:33px;padding:14px 0 18px}
  .rich-text div.sub-title{font-size:18px;line-height:22px;padding:14px 0}
  .module.image{padding-bottom:14px}
  .module.embed,.module.media,.module.audio{padding-bottom:20px}
  .module.text{padding:14px 5% 20px}
  .module.button{padding:14px 5%}
  .module.social{padding:0 5%}
  .to-top{display:none}
}
/* ---- phone ---- */
@media (max-width:540px){
  .masthead h1{font-size:25px;line-height:29px;margin:17px 0 14px}
  .project-cover,.cols-6 .project-cover{width:100%}
  .rich-text div{padding-bottom:7px}
  .rich-text div,.rich-text div span{font-size:14px!important;line-height:20px!important}
  .rich-text div.caption{padding:7px 0 13px}
  .rich-text div.caption,.rich-text div.caption span{font-size:13px!important;line-height:16px!important}
  .rich-text div.title{padding:13px 0 16px}
  .rich-text div.title,.rich-text div.title span{font-size:20px!important;line-height:28px!important}
  .rich-text div.sub-title{padding:13px 0}
  .rich-text div.sub-title,.rich-text div.sub-title span{font-size:16px!important;line-height:19px!important}
  .tree{display:block}
  .tree>.col{border:0;flex:none!important}
  .module.image{padding-bottom:13px}
  .module.embed,.module.media,.module.audio{padding-bottom:18px}
  .module.text{padding-top:13px;padding-bottom:18px}
  .module.contact{padding:30px 5% 20px}
  .close-nav{top:30px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}