html.work-document{scroll-behavior:smooth;scroll-padding-top:112px}
.work-page{--work-ease:cubic-bezier(.2,.65,.3,1);background:var(--navy);color:var(--white)}
.work-page .site-header{background:var(--navy)}
.work-page .reading-progress{height:1px}
.work-page main{overflow:hidden}
.work-hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center;gap:90px;padding-top:182px;padding-bottom:102px}
.work-breadcrumb{display:flex;align-items:center;gap:14px;color:var(--light);font-size:10px;letter-spacing:1.2px;margin-bottom:25px}
.work-breadcrumb a{transition:color .22s}.work-breadcrumb a:hover{color:var(--gold)}
.work-breadcrumb>span{color:var(--gold)}
.work-hero h1{font-size:112px;line-height:1;letter-spacing:.5px;margin-bottom:30px}
.work-hero h1,.work-hero-lead{overflow:hidden}
.work-hero h1>span,.work-hero-lead>span{display:block}
.work-hero-lead{font-size:34px;font-weight:620;line-height:1.5;letter-spacing:-1px}
.work-hero-description{margin-top:22px;font-size:18px;line-height:1.9;color:var(--light);letter-spacing:-.3px;text-wrap:pretty}
.work-hero-description p+p{margin-top:10px}
.work-scroll{display:inline-flex;align-items:center;gap:28px;font-size:13px;line-height:24px;color:var(--light);min-height:44px;margin-top:32px;transition:color .22s}
.work-scroll svg{width:18px;height:18px;flex:none;color:var(--gold);transition:transform .25s var(--ease-out)}
.work-scroll:is(:hover,:focus-visible){color:var(--gold)}
.work-scroll:is(:hover,:focus-visible) svg{transform:translateY(3px)}
.work-hero-image{width:100%;max-width:420px;justify-self:end;aspect-ratio:4/5;overflow:hidden;background:var(--deep)}
.work-hero-image img{height:100%;object-fit:cover}
.work-services{padding-bottom:96px}
.work-heading{margin-bottom:43px}
.work-heading .display{font-size:74px;line-height:1.1;letter-spacing:.3px}
.work-heading h2{font-size:29px;font-weight:600;line-height:1.5;letter-spacing:-.7px;margin-top:16px}
.work-services-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px}
.work-tile{grid-column:span 2;min-width:0;height:460px}
.work-tile:nth-child(-n+2){grid-column:span 3;height:510px}
.work-tile-inner{position:relative;isolation:isolate;overflow:hidden;background:var(--deep);height:100%}
.work-tile-inner>img{position:absolute;inset:0;height:100%;object-fit:cover;transition:scale .7s var(--ease-out)}
.work-tile-inner:after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 36%,rgb(16 26 46 / .1) 47%,rgb(16 26 46 / .84) 100%);pointer-events:none}
.work-tile-copy{position:absolute;z-index:2;left:30px;right:30px;bottom:31px}
.work-tile h3{font-size:25px;font-weight:650;line-height:1.45;letter-spacing:-.75px}
.work-tile:nth-child(-n+2) h3{font-size:33px;letter-spacing:-.9px}
.work-tile-copy p{font-size:15px;line-height:1.8;font-weight:450;color:var(--white);letter-spacing:-.25px;margin-top:13px;text-wrap:pretty}
.work-tile:nth-child(-n+2) .work-tile-copy{left:36px;right:36px;bottom:35px}
.work-tile:nth-child(-n+2) .work-tile-copy p{font-size:17px}
.work-sourcing img{object-position:52% center}
.work-branding img{object-position:62% center}
.work-inspection img{object-position:43% center}
.work-freight img{object-position:52% center}
.work-delivery img{object-position:48% center}
.work-process-link{text-align:center;margin-top:36px}
.work-page .work-action{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:32px;min-width:200px;min-height:56px;padding:0 24px;border:1px solid transparent;font:550 16px/24px Pretendard,sans-serif;letter-spacing:-.2px;white-space:nowrap;vertical-align:middle;transition:background-color .22s,color .22s,border-color .22s,scale .16s}
.work-page .work-action>.button-label{display:block;font:inherit;color:inherit;line-height:24px;transform:none;transition:none}
.work-action-icon{display:block;flex:0 0 20px;width:20px;height:20px;transition:transform .25s var(--ease-out),color .22s}
.work-page .work-secondary-action{border-radius:999px;border-color:rgb(203 210 222 / .5);background:transparent;color:var(--white)}
.work-secondary-action .work-action-icon{color:var(--gold)}
.work-page .work-secondary-action:is(:hover,:focus-visible){background:var(--gold);border-color:var(--gold);color:var(--deep)}
.work-secondary-action:is(:hover,:focus-visible) .work-action-icon{color:currentColor}
.work-action:is(:hover,:focus-visible) .work-action-icon{transform:translate(2px,-2px)}
.work-action:active{scale:.99}
.work-examples{padding-top:86px;padding-bottom:108px;border-top:1px solid rgb(203 210 222 / .25)}
.work-section-description{font-size:18px;line-height:1.85;color:var(--light);letter-spacing:-.3px;margin-top:20px}
.work-example-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.work-example{min-width:0}
.work-example-image{aspect-ratio:3/4;overflow:hidden;background:var(--warm)}
.work-example-image img{height:100%;object-fit:cover;transition:scale .7s var(--ease-out)}
.work-example figcaption{padding-top:23px;display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.work-example h3{font-size:23px;line-height:1.5;font-weight:600;letter-spacing:-.6px}
.work-example figcaption p{font-size:13px;line-height:1.7;color:var(--light);text-align:right}
.work-inquiry{padding:96px 0 92px}
.work-inquiry h2{font-size:76px}
.work-inquiry .inquiry-lead{margin-top:24px}
.work-inquiry .inquiry-lead+p{margin-top:16px}
.work-page .inquiry-link{margin-top:30px;border-radius:3px;color:var(--deep);background:var(--gold)}
.work-page .inquiry-link:before{content:none}
.work-page .inquiry-link:is(:hover,:focus-visible){background:var(--gold-hover)}
.work-page footer{background:var(--deep)}

/* Stable wrappers prevent an animated photo from changing its own reset boundary. */
.work-motion [data-reveal]{opacity:0;transition:opacity .8s var(--work-ease) var(--reveal-delay,0ms)}
.work-motion [data-reveal]>.reveal-inner{translate:0 34px;transition:translate 1s var(--work-ease) var(--reveal-delay,0ms)}
.work-motion .work-tile-inner{translate:0 64px;clip-path:inset(12% 0 0);transition:translate 1.1s var(--work-ease) var(--reveal-delay,0ms),clip-path 1.1s var(--work-ease) var(--reveal-delay,0ms)}
.work-motion [data-reveal].is-revealed{opacity:1}
.work-motion [data-reveal].is-revealed>.reveal-inner,.work-motion .is-revealed>.work-tile-inner{translate:0 0}
.work-motion .is-revealed>.work-tile-inner{clip-path:inset(0)}
.work-motion .work-tile-copy,.work-motion .work-example figcaption{opacity:0;transform:translateY(18px);transition:opacity .7s var(--work-ease) calc(var(--reveal-delay,0ms) + 180ms),transform .85s var(--work-ease) calc(var(--reveal-delay,0ms) + 180ms)}
.work-motion .is-revealed .work-tile-copy,.work-motion .is-revealed figcaption{opacity:1;transform:translateY(0)}
.work-tile:nth-child(2),.work-example:nth-child(2){--reveal-delay:140ms}
.work-tile:nth-child(4){--reveal-delay:140ms}
.work-tile:nth-child(5),.work-example:nth-child(3){--reveal-delay:280ms}
.work-motion [data-reveal]:not(.is-revealed),.work-motion [data-reveal]:not(.is-revealed)>.reveal-inner,.work-motion [data-reveal]:not(.is-revealed)>.work-tile-inner,.work-motion [data-reveal]:not(.is-revealed) .work-tile-copy,.work-motion [data-reveal]:not(.is-revealed) figcaption{transition-duration:0s;transition-delay:0s}

/* Start the opening only after the hero asset and fonts are ready and the tab is visible. */
.work-page[data-work-intro="waiting"] .work-hero h1>span,.work-page[data-work-intro="waiting"] .work-hero-lead>span{transform:translateY(110%)}
.work-page[data-work-intro="waiting"] .work-hero-description p,.work-page[data-work-intro="waiting"] .work-scroll{opacity:0;transform:translateY(24px)}
.work-page[data-work-intro="waiting"] .work-hero-image{clip-path:inset(0 0 100% 0)}
.work-page[data-work-intro="playing"] .work-hero h1>span{animation:work-title-unveil .82s var(--work-ease) .07s both}
.work-page[data-work-intro="playing"] .work-hero-lead>span{animation:work-title-unveil .71s var(--work-ease) .21s both}
.work-page[data-work-intro="playing"] .work-hero-description p{animation:work-copy-unveil .67s var(--work-ease) .34s both}
.work-page[data-work-intro="playing"] .work-hero-description p+p{animation-delay:.45s}
.work-page[data-work-intro="playing"] .work-scroll{animation:work-copy-unveil .57s var(--work-ease) .61s both}
.work-page[data-work-intro="playing"] .work-hero-image{animation:work-photo-unveil 1.06s var(--work-ease) .16s both}
.work-page[data-work-intro="playing"] .work-hero-image img{animation:work-photo-settle 1.34s var(--work-ease) .16s both}
.work-page.work-page-hidden[data-work-intro="playing"] .work-hero *{animation-play-state:paused}
@keyframes work-title-unveil{from{transform:translateY(110%)}to{transform:translateY(0)}}
@keyframes work-copy-unveil{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes work-photo-unveil{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
@keyframes work-photo-settle{from{transform:scale(1.1)}to{transform:scale(1)}}
@media(hover:hover) and (pointer:fine){.work-tile.is-revealed:hover img,.work-example.is-revealed:hover img{scale:1.02}}
@media(max-width:1100px){
  .work-hero{gap:55px}.work-hero h1{font-size:100px}.work-hero-lead{font-size:29px}.work-hero-description{font-size:16px}
  .work-services-grid,.work-example-grid{gap:20px}.work-tile-copy{left:24px;right:24px;bottom:26px}.work-tile h3{font-size:23px}.work-tile-copy p{font-size:14px}.work-desktop-break{display:none}
  .work-example figcaption{display:block}.work-example figcaption p{text-align:left;margin-top:6px}
}
@media(min-width:761px) and (max-width:1000px){
  .work-hero{gap:36px;grid-template-columns:1.15fr 1fr;padding-top:170px;padding-bottom:82px}.work-hero h1{font-size:88px}.work-hero-lead{font-size:26px}.work-hero-description{font-size:15px}.work-breadcrumb{margin-bottom:20px}.work-hero h1{margin-bottom:24px}.work-scroll{margin-top:20px}
  .work-heading .display{font-size:62px}.work-heading h2{font-size:26px}
  .work-services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.work-tile,.work-tile:nth-child(-n+2){grid-column:auto;height:420px}.work-tile:last-child{grid-column:1/-1;height:350px}
  .work-tile:nth-child(-n+2) h3{font-size:26px}.work-tile:nth-child(-n+2) .work-tile-copy{left:26px;right:26px;bottom:28px}.work-tile:nth-child(-n+2) .work-tile-copy p{font-size:15px}
  .work-delivery img{object-position:center 53%}.work-example h3{font-size:21px}.work-example-grid{gap:18px}
}
@media(max-width:760px){
  html.work-document{scroll-padding-top:124px}
  .work-hero{display:flex;flex-direction:column;align-items:stretch;gap:34px;padding-top:152px;padding-bottom:68px}
  .work-breadcrumb{font-size:9px;margin-bottom:22px}
  .work-hero h1{font-size:84px;margin-bottom:21px}
  .work-hero-lead{font-size:27px;letter-spacing:-.8px}
  .work-hero-description{font-size:16px;line-height:1.85;margin-top:18px;max-width:530px}.work-hero-description p+p{margin-top:9px}
  .work-scroll{margin-top:20px;font-size:13px}
  .work-hero-image{max-width:none;aspect-ratio:6/5}.work-hero-image img{object-position:center 53%}
  .work-services{padding-bottom:64px}.work-heading{margin-bottom:29px}.work-heading .display{font-size:55px}.work-heading h2{font-size:24px;line-height:1.5;letter-spacing:-.6px;margin-top:12px}
  .work-services-grid{grid-template-columns:minmax(0,1fr);gap:20px}
  .work-tile,.work-tile:nth-child(-n+2){grid-column:auto;width:100%;height:clamp(380px,calc((100vw - 55px) * 1.2),560px);aspect-ratio:auto;min-height:0}
  .work-tile-copy,.work-tile:nth-child(-n+2) .work-tile-copy{left:25px;right:25px;bottom:29px}
  .work-tile h3,.work-tile:nth-child(-n+2) h3{font-size:26px;letter-spacing:-.8px}
  .work-tile-copy p,.work-tile:nth-child(-n+2) .work-tile-copy p{font-size:16px;line-height:1.8;margin-top:12px}
  .work-process-link{margin-top:28px}
  .work-examples{padding-top:59px;padding-bottom:70px}
  .work-examples-heading .display{font-size:clamp(41px,10vw,64px);white-space:nowrap}
  .work-section-description{font-size:16px;line-height:1.85;margin-top:17px}
  .work-example-grid{grid-template-columns:minmax(0,1fr);gap:36px}
  .work-example-image{aspect-ratio:4/5}.work-example figcaption{display:flex;padding-top:18px;gap:15px}.work-example h3{font-size:22px}.work-example figcaption p{margin-top:0;font-size:13px;text-align:right}
  .work-inquiry{padding:66px 0 68px}.work-inquiry h2{font-size:52px}.work-page .inquiry-link{margin-top:26px}
  .work-motion [data-reveal]{--reveal-delay:0ms;transition-duration:.65s}
  .work-motion [data-reveal]>.reveal-inner{translate:0 20px;transition-duration:.8s}
  .work-motion .work-tile-inner{translate:0 32px;clip-path:inset(6% 0 0);transition-duration:.9s}
  .work-motion .work-tile-copy,.work-motion .work-example figcaption{transition-delay:100ms;transition-duration:.65s,.75s}
  .work-motion [data-reveal].is-revealed>.reveal-inner,.work-motion .is-revealed>.work-tile-inner{translate:0 0}
  .work-motion .is-revealed>.work-tile-inner{clip-path:inset(0)}
  .work-page[data-work-intro="playing"] .work-hero h1>span{animation-duration:.83s}
  .work-page[data-work-intro="playing"] .work-hero-lead>span{animation-duration:.71s;animation-delay:.2s}
  .work-page[data-work-intro="playing"] .work-hero-description p{animation-duration:.67s;animation-delay:.32s}
  .work-page[data-work-intro="playing"] .work-hero-description p+p{animation-delay:.42s}
  .work-page[data-work-intro="playing"] .work-scroll{animation-duration:.58s;animation-delay:.55s}
  .work-page[data-work-intro="playing"] .work-hero-image{animation-duration:1s;animation-delay:.25s}
  .work-page[data-work-intro="playing"] .work-hero-image img{animation-duration:1.25s;animation-delay:.25s}
}
@media(max-width:359px){
  .work-hero-lead{font-size:24px}.work-hero-description{font-size:15px}.work-heading .display{font-size:48px}.work-heading h2{font-size:22px}.work-examples-heading .display{font-size:39px}.work-tile-copy,.work-tile:nth-child(-n+2) .work-tile-copy{left:22px;right:22px}.work-tile h3,.work-tile:nth-child(-n+2) h3{font-size:24px}.work-tile-copy p,.work-tile:nth-child(-n+2) .work-tile-copy p{font-size:15px}.work-inquiry h2{font-size:46px}
}
@media(prefers-reduced-motion:reduce){
  html.work-document{scroll-behavior:auto}
  .work-motion [data-reveal]{opacity:1}
  .work-motion [data-reveal]>.reveal-inner,.work-motion .work-tile-inner{translate:none!important}
  .work-page[data-work-intro] .work-hero *{animation:none!important;clip-path:none!important;transform:none!important;opacity:1!important}
  .work-motion .work-tile-inner{clip-path:none!important}
  .work-motion .work-tile-copy,.work-motion .work-example figcaption{opacity:1;transform:none}
  .work-tile img,.work-example img,.work-action{scale:1!important}
}
