@font-face{font-family:'DM Mono';font-style:italic;font-weight:400;font-display:swap;
  src:url(assets/fonts/dm-mono-400i-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:'DM Mono';font-style:italic;font-weight:400;font-display:swap;
  src:url(assets/fonts/dm-mono-400i-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:'DM Mono';font-style:normal;font-weight:300;font-display:swap;
  src:url(assets/fonts/dm-mono-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:'DM Mono';font-style:normal;font-weight:300;font-display:swap;
  src:url(assets/fonts/dm-mono-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:'DM Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(assets/fonts/dm-mono-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:'DM Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(assets/fonts/dm-mono-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:'DM Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url(assets/fonts/dm-mono-500-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:'DM Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url(assets/fonts/dm-mono-500-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:'Young Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url(assets/fonts/young-serif-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:'Young Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url(assets/fonts/young-serif-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;}

:root{
  --cream:#f2f0ea;
  --ink:#141816;
  --taupe:#9aa39b;
  --taupe-ink:#2c3a33;
  --blue:#dde3dc;
  --blue-ink:#8c9a90;
  --scrim:#8e978f;
  --scrim-ink:#17211c;
  --pad:64px;
  --ease:cubic-bezier(.22,.7,.2,1);
  
  --spine:clamp(20px,7.2vw,152px);   
  --shot:clamp(260px,34vw,500px);    
  --band:clamp(96px,14vh,180px);     
  --breath:clamp(128px,25svh,320px); 
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:'DM Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,p,figure{margin:0}

.mono{font-family:'DM Mono',ui-monospace,monospace;font-weight:400;font-size:12px;line-height:1.72;letter-spacing:.04em}
.display{font-family:'Young Serif',Georgia,serif;font-weight:400;letter-spacing:0;line-height:1.05}

.mark{
  display:block;width:145px;height:62px;background-color:currentColor;
}

.loader{
  position:fixed;inset:0;z-index:120;background:var(--cream);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .55s ease;
}
.loader-mark{position:relative;color:var(--ink)}
.loader-mark-wipe{
  display:block;width:240px;height:104px;background-color:currentColor;
  clip-path:inset(0 100% 0 0);
}
.is-drawing .loader-mark-wipe{
  clip-path:inset(0 0 0 0);
  transition:clip-path .75s cubic-bezier(.5,.05,.35,1);
}
.is-loaded .loader{opacity:0;pointer-events:none}

.hdr{
  position:fixed;top:0;left:0;right:0;z-index:90;
  display:flex;align-items:center;justify-content:space-between;
  padding:51px 48px 0;color:#fff;
  transition:color .45s ease;
}
.hdr.on-light{color:var(--ink)}
.hdr-logo{position:absolute;left:50%;top:36px;transform:translateX(-50%);transition:opacity .35s ease}
.hdr.on-light .hdr-logo{opacity:0;pointer-events:none}
.hdr-logo .mark{width:145px;height:62px}
.hdr-cta{position:relative;padding-bottom:9px;letter-spacing:.015em}
.hdr-cta::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;opacity:.75}
.hdr-menu{letter-spacing:.04em;font-size:13px}
body.menu-open .hdr{opacity:0;pointer-events:none}

.link-roll .roll{display:inline-block;overflow:hidden;position:relative;vertical-align:top}
.link-roll .roll-b{position:absolute;left:0;top:0;white-space:pre}
.link-roll .roll i{display:inline-block;font-style:inherit;will-change:transform;
  transition:transform .4s var(--ease);transition-delay:calc(var(--i) * 18ms)}
.link-roll .roll-b i{transform:translateY(105%)}
.link-roll:hover .roll-a i{transform:translateY(-105%)}
.link-roll:hover .roll-b i{transform:translateY(0)}

.words w{display:inline-block;opacity:0;transform:translateY(.5em);
  transition:opacity .7s ease,transform .7s var(--ease);transition-delay:calc(var(--i) * 26ms)}
.words.in w{opacity:1;transform:none}
.reveal-img{overflow:hidden}
.reveal-img img{transform:scale(1.08);opacity:0;transition:transform 1.2s var(--ease),opacity .9s ease}
.reveal-img.in img{transform:none;opacity:1}

.hero{position:relative;height:100vh;min-height:620px;overflow:hidden;background:#141816}
.hero-photo{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hero-photo{clip-path:inset(50% 23.2% 50% 23.2%);}
.is-loaded .hero-photo{clip-path:inset(0 0 0 0);transition:clip-path .55s cubic-bezier(.4,.05,.2,1)}
.hero-inner{
  position:relative;z-index:2;height:100%;color:#fff;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;
  
  padding:clamp(140px,17vh,190px) var(--spine) clamp(40px,6vh,90px) var(--spine);
}
.hero-note{max-width:360px;text-transform:uppercase;font-size:13.5px;margin-bottom:clamp(26px,5vh,54px)}
.hero-center{text-align:left}
.hero h1{font-size:clamp(42px,5.6vw,96px);line-height:1.04;text-transform:uppercase}
.ul-link{position:relative;display:inline-block;padding-bottom:9px;margin-top:32px;text-transform:uppercase}
.hero .ul-link{opacity:0;transition:opacity .7s ease}
body.hero-in .hero .ul-link{opacity:1}
.ul-link::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;opacity:.8}

.breath{padding:var(--breath) var(--spine)}
.breath-mono{max-width:22em;text-transform:uppercase;font-size:clamp(17px,2.1vw,32px);line-height:1.46;letter-spacing:.02em}
.breath-display{font-size:clamp(34px,6.2vw,116px);line-height:1.05;text-transform:uppercase}
.breath-call{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(28px,5vh,64px)}
.breath-contact{position:relative;font-size:clamp(22px,3.4vw,56px);line-height:1.1;text-transform:uppercase;letter-spacing:.01em;padding-bottom:12px}
.breath-contact::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;opacity:.7}
.breath-coord{text-transform:uppercase;font-size:13px;line-height:1.9}
.breath-coord a{position:relative}
.breath-coord a::after{content:'';position:absolute;left:0;right:0;bottom:1px;height:1px;background:currentColor;opacity:.5}

.shot{overflow:hidden}
.shot img{width:100%;height:100%;object-fit:cover}
.shot-a{aspect-ratio:472/635}
.shot-b{aspect-ratio:520/729;margin-top:clamp(26px,4.5vh,72px)}
.shot-stage{aspect-ratio:500/687}

.proc{padding:var(--band) 0 var(--band) var(--spine)}
.proc-head{display:flex;gap:clamp(24px,3vw,44px);align-items:flex-start;padding-right:var(--spine)}
.proc-name{font-style:italic;font-size:clamp(26px,2.6vw,44px);text-transform:uppercase;white-space:nowrap;padding-top:6px}
.proc-title{font-size:clamp(26px,2.9vw,48px);line-height:1.19;text-transform:uppercase;max-width:19em}
.proc-grid{display:grid;grid-template-columns:minmax(0,1fr) var(--shot);gap:clamp(28px,4.6vw,88px);margin-top:clamp(56px,9vh,132px)}
.proc-left{grid-column:1;display:flex;flex-direction:column;justify-content:space-between;padding-bottom:clamp(8px,2vh,28px)}
.proc-right{grid-column:2}
.proc-list{text-transform:uppercase;font-size:12px;line-height:1.62;max-width:390px}
.proc-list li{padding:10px 0;border-bottom:1px solid rgba(21,18,15,.16)}
.proc-list li:first-child{border-top:1px solid rgba(21,18,15,.16)}
.proc-copy{margin-top:clamp(40px,7vh,96px);text-transform:uppercase;font-size:13.5px}
.proc-left .ul-link{margin-top:26px;align-self:flex-start}

.stage{
  display:grid;grid-template-columns:minmax(0,1fr) var(--shot);
  gap:clamp(28px,4.6vw,88px);align-items:center;
  padding:var(--band) 0 var(--band) var(--spine);
}
.stage-taupe{background:var(--taupe);color:var(--taupe-ink)}
.stage-blue{background:var(--blue);color:var(--blue-ink)}
.stage-text{grid-column:1;max-width:640px}
.stage .shot-stage{grid-column:2}
.stage-title{font-size:clamp(30px,3.7vw,62px);line-height:1.09;text-transform:uppercase}
.stage-copy{margin-top:clamp(28px,4vh,56px);text-transform:uppercase;line-height:1.65;font-size:13.5px}
.stage-copy p + p{margin-top:1.72em}
.stage-line{font-size:clamp(16px,1.6vw,25px);line-height:1.4;letter-spacing:.02em}

.blog{padding:var(--band) 0 var(--band) var(--spine);overflow:hidden}
.blog-head{display:flex;gap:clamp(28px,5vw,74px);align-items:flex-start;padding-right:var(--spine)}
.blog-eyebrow{text-transform:uppercase;padding-top:16px;width:180px;flex:none}
.blog-title{font-size:clamp(28px,3.4vw,56px);line-height:1.3;text-transform:uppercase}
.rail{margin-top:clamp(36px,6vh,72px);overflow:hidden}
.rail-track{display:flex;gap:16px;width:max-content;will-change:transform}
.card{position:relative;width:400px;flex:none;overflow:hidden;display:block;background:#ded9d3}
.card > img{width:100%;height:518px;object-fit:cover}
.card-scrim{
  position:absolute;inset:0;background:var(--scrim);color:var(--scrim-ink);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:56px 34px 34px;text-align:center;opacity:.52;transition:opacity .45s ease;
}
.rail:hover .card-scrim{opacity:0}
.rail:hover .card:hover .card-scrim{opacity:1}
.card-title{font-family:'Young Serif',Georgia,serif;font-style:italic;font-size:26px;line-height:1.22;text-transform:uppercase}
.card-foot .mono{font-size:13px;line-height:1.68}
.card-more{display:inline-block;margin-top:26px;padding-bottom:6px;position:relative;text-transform:uppercase;font-size:12px;letter-spacing:.06em}
.card-more::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor}
.rail-arrows{display:flex;gap:16px;margin-top:30px}
.rail-arrows button{padding:8px 0;transition:opacity .3s ease}
.rail-arrows button:hover{opacity:.45}

.ftr{padding:clamp(64px,9vh,110px) var(--spine) 17px;border-top:1px solid rgba(21,18,15,.16)}
.ftr-top{display:grid;grid-template-columns:minmax(0,1fr) 18% 18% auto;gap:24px}
.ftr-lede{text-transform:uppercase;max-width:400px;font-size:13px}
.ftr-nav li,.ftr-social li{margin-bottom:3px}
.ftr-book{position:relative;align-self:start;padding-bottom:9px;height:max-content}
.ftr-book::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;opacity:.75}
.ftr-sign{margin-top:clamp(40px,7vh,86px)}
.ftr-sign .mark{width:318px;height:137px}
.ftr-legal{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(40px,6vh,78px)}
.ftr-legal span{border:1px solid rgba(21,18,15,.35);padding:5px 8px;text-align:center;font-size:10.5px;letter-spacing:0;margin-left:-1px}
.ftr-legal span:first-child{margin-left:0}

.overlay{
  position:fixed;inset:0;z-index:100;background:var(--blue);color:var(--ink);
  padding:44px var(--pad) 60px;opacity:0;pointer-events:none;
  transition:opacity .5s ease,background-color .6s ease;
}
body.menu-open .overlay{opacity:1;pointer-events:auto}
.overlay-head{display:flex;align-items:center;justify-content:space-between}
.overlay-head .hdr-logo .mark{margin-top:-14px}
.overlay-nav{margin-top:86px;display:flex;flex-direction:column;gap:13px;align-items:flex-start}
.overlay-nav a{
  font-family:'Young Serif',Georgia,serif;font-size:88px;line-height:1.16;
  transition:color .4s ease;
}
.overlay-nav a:hover{color:rgba(21,18,15,.34)}
.overlay-side{position:absolute;right:85px;top:410px;width:250px}
.overlay-side .mono{font-size:14.5px}
.overlay-side a{position:relative}
.overlay-side a::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor}
.overlay-side li{margin-bottom:8px}
.overlay-shot{margin-top:46px;width:230px;height:300px;overflow:hidden}
.overlay-shot img{width:100%;height:100%;object-fit:cover;transition:opacity .35s ease}

.totop{
  position:fixed;right:26px;bottom:26px;z-index:95;width:50px;height:50px;border-radius:50%;
  border:1px solid rgba(21,18,15,.45);display:flex;align-items:center;justify-content:center;
  color:rgba(21,18,15,.75);background:transparent;transition:background-color .3s ease,color .3s ease;
  mix-blend-mode:difference;opacity:.8;
}
.totop:hover{background:rgba(255,255,255,.14)}

@media (max-width:1100px){
  :root{--pad:32px}
  .hdr{padding:44px 36px 0}
  .hdr-logo .mark{width:120px;height:51px}
  .hero-inner{padding:clamp(126px,16vh,220px) var(--spine) clamp(48px,9vh,90px)}
  .hero-note{max-width:60%}
  .proc-head{flex-direction:column;gap:20px}
  .proc-title{max-width:none}
  
  .proc-grid{grid-template-columns:minmax(0,1fr) clamp(280px,44vw,420px);gap:clamp(24px,3.4vw,48px)}
  .proc-list{max-width:none}
  .stage{grid-template-columns:minmax(0,1fr) clamp(280px,44vw,420px);gap:clamp(24px,3.4vw,48px)}
  .stage-text{max-width:none}
  .blog-head{gap:clamp(24px,6vw,60px)}
  .blog-eyebrow{width:150px}
  .card{width:300px}
  .card > img{height:246px}
  .card-scrim{position:static;opacity:1;padding:34px 24px 38px;min-height:150px;justify-content:center}
  .rail:hover .card-scrim{opacity:1}
  .card-title{font-size:21px}
  .card-foot{display:none}
  .ftr-top{grid-template-columns:1fr 1fr;gap:28px 24px}
  .ftr-lede{grid-column:1 / -1}
  .ftr-sign .mark{width:230px;height:99px}
  .ftr-legal{grid-template-columns:1fr 1fr;gap:12px 13px}
  .ftr-legal span{margin-left:0;padding:4px 8px}
  .overlay-nav a{font-size:54px}
  .overlay-side{top:340px;width:200px}
}

@media (max-width:760px){
  :root{--pad:20px}
  .hdr{padding:34px 20px 0;align-items:flex-start}
  .hdr-cta{display:none}
  .hdr-logo{position:static;transform:none;order:-1}
  .hdr.on-light .hdr-logo{opacity:1;pointer-events:auto}
  .hdr-logo .mark{width:110px;height:47px;margin-top:-8px}
  .hdr-menu{margin-top:8px}
  .hero{height:94vh;min-height:560px}
  .hero-note{display:none}
  .hero-inner{padding:clamp(112px,15vh,200px) var(--spine) clamp(40px,8vh,72px)}
  .ul-link{margin-top:18px;font-size:12px}
  .breath-mono{max-width:none}
  .proc-name{font-size:28px}
  .proc-copy{margin-top:34px}
  
  .proc-grid{grid-template-columns:minmax(0,1fr);gap:0}
  .proc-left,.proc-right{grid-column:1}
  .proc-right{margin-top:clamp(40px,6vh,72px)}
  .stage{grid-template-columns:minmax(0,1fr);gap:0}
  .stage-text{grid-column:1}
  .stage .shot-stage{grid-column:1;margin-top:clamp(40px,6vh,72px)}
  .shot-a,.shot-b,.shot-stage{aspect-ratio:auto;height:clamp(280px,46vh,400px)}
  .blog-head{display:block;padding-right:var(--spine)}
  .blog-eyebrow{width:auto;font-size:12px}
  .blog-title{margin-top:14px}
  .card{width:228px}
  .card > img{height:244px}
  .card-scrim{position:static;opacity:1;background:var(--scrim);padding:26px 18px 30px;min-height:124px;justify-content:center}
  .card-title{font-size:17px}
  .ftr{padding:clamp(48px,7vh,72px) var(--spine) 26px}
  .ftr-top{grid-template-columns:1fr;gap:24px}
  .ftr-sign .mark{width:180px;height:78px}
  .ftr-legal{grid-template-columns:1fr;margin-top:30px;gap:11px}
  .ftr-legal span{margin-left:0;font-size:9px;padding:7px 6px}
  .overlay{padding:34px 20px}
  .overlay-nav{margin-top:56px}
  .overlay-nav a{font-size:38px}
  .overlay-side{position:static;width:auto;margin-top:54px}
  .overlay-shot{height:210px;max-width:230px}
  .totop{right:16px;bottom:16px;width:42px;height:42px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .words w{opacity:1;transform:none}
  .reveal-img img{opacity:1;transform:none}
}
